jquery和javascript的区别有哪些-js教程-PHP中文网

jquery和javascript的区别有哪些

coldplay.xixi

发布： 2023-01-04 09:35:41

原创

6346 人浏览过

jquery和javascript的区别：1、js是通过【<script>】标签插入HTML页面，而JQuery是JavaScript函数库；2、js使用getElement系列，而JQuery使用【$()】包裹选择器。</p></blockquote> <p><img src="https://img.php.cn/upload/article/202104/09/2021040914272277637.jpg" alt="jquery和javascript的区别有哪些" ></p> <p>本教程操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。</p> <p><strong>jquery和javascript的区别：</strong></p> <p><strong>一、本质上的区别</strong></p> <p>1.JavaScript 是通过<script></script>标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。

2.JQuery是一个JavaScript函数库。或者说是JavaScript中最流行的一种框架。

使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用，比如：
<script src="js/jquery.min.js"></script>
登录后复制
库文件既可以放在本地，也可以直接使用知名公司的 CDN，好处是这些大公司的 CDN 比较流行，用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度。另外一个好处是显而易见的，节省了网站的流量带宽。例如：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google
登录后复制
或者：
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方　
登录后复制
二、语法上的差异
操作元素节点
a.JavaScript使用
getElement系列、query系列
<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script>
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script>
登录后复制
b.JQuery使用
大量的选择器同时使用$()包裹选择器
<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("li");
    $("#div");
    $("#div li");
</script>
登录后复制
相关免费学习推荐：javascript学习教程
以上是jquery和javascript的区别有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！