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 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>

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="/jquery-1."></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/"></script>
<script>
$("#first").attr("id");
$("#first").attr("name","nafirst");
$("#first").removeAttr("name");
$("#first").prop("id"); 
$("#first").prop("name","nafirst"); 
$("#first").removeProp("name");
</script>

秒客网

JavaScript和Jquery的区别

相关文章