Search

与我们合作

我们专注:网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务:网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案

有一个品牌项目想和我们谈谈吗?

您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话,让我们听到您的声音

您也可通过下列途径与我们取得联系:

地 址: 深圳.龙岗区大运软件小镇11栋3楼

电 话: 138 2888 4598 / 138 0880 9053

网 址: http://www.appvx.cn

快速提交您的需求 ↓

jquery与javascript的区别是什么?

时间:2019-09-05 浏览:3142 编辑:深正互联 来源:互联网

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>


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
GO 欣赏案例
查看经典案例
在线咨询
电话咨询
0755-36630177
返回顶部
在线咨询 获取报价 电话咨询
获取报价
您的称呼:

*

您的电话:

*

您的邮箱:

*

提交 重置
重要的事情,电话里聊

接通客服

不方便的时候线上咨询,在线等哦