jquery与javascript的区别是什么？

摘要：jquery和javascript之间有什么区别？下面本篇文章就来给大家介绍一下jquery和javascript的区别，希望对大家有所帮助。

jquery和javascript之间有什么区别？下面本篇文章就来给大家介绍一下jquery和javascript的区别，希望对大家有所帮助。

JavaScript和Jquery的区别

1、本质上的区别

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。jQuery是基于javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发。

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

2、兼容性的区别

JavaScript有各种浏览器兼容问题，代码复杂冗余，而jQuery中完全没有兼容性问题。

3、语法上的差异

1）、操作元素节点

JavaScript使用：getElement系列、query系列

<body>
    <ul>
        <li id="first">哈哈</li>
        <li name ="na">啦啦</li>
        <li>呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li>呵呵</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>

JQuery使用：大量的选择器同时使用$()包裹选择器

<body>
    <ul>
        <li id="first">哈哈</li>
        <li name ="na">啦啦</li>
        <li>呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li>呵呵</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='na']");
    $("li");
    $("#div");
    $("#div li");
</script>

2）、操作属性节点

JavaScript使用：getAttribute("属性名") 、 setAttribute("属性名","属性值")

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body>
<script>
　　document.getElementById("first").getAttribute("id");
　　document.getElementById("first").setAttribute("name","nafirst");　　
    document.getElementById("first").removeAttribute("name");
</script>

JQuery使用

.attr()传入一个参数获取，传入两个参数设置；.prop()

prop和attr一样都可以对文本的属性进行读取和设置；

<body>
   <ul>
       <li id="first">哈哈</li>
   </ul>
</body>
<script src="js/jquery.js"></script>
<script>
　　$("#first").attr("id");
　　$("#first").attr("name","nafirst");
　　$("#first").removeAttr("name");
　　$("#first").prop("id"); 
　　$("#first").prop("name","nafirst"); 
　　$("#first").removeProp("name");
</script>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8054