jquery与javascript的区别是什么?

2019-09-05 106 0 编辑:深正互联 来源:互联网

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


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢