javaScript与jQuery的比较（区别）

男娘i 2022-02-28 07:48 282阅读 0赞

### 一：本质区别 ###

javaScript是通过<script></script>标签插入到html页面中，支持当前所有主流浏览器的轻量级的编程语言。

jQuery是一个javaScript函数库（javaScript框架），使用jQuery，需要在html页面开始引入jQuery库。例：

### 二：语法上的差异 ###

### **1、操作元素节点** ###

**           JavaScript使用：（getElement系列和query系列）**

var first = document.getElementById('first');
       console.log('first', first);
       var cls = document.getElementsByClassName('cls');
       console.log('cls', cls);
       var li = document.getElementsByTagName('li');
       console.log('li', li);
       var naName = document.getElementsByName('na');
       console.log('naName', naName);
       var queryContent = document.querySelector('#a3');
       console.log('queryContent', queryContent);
       var queryContents = document.querySelectorAll('.cls');
       console.log('queryContents cls', queryContents);

###         jQuery的使用 ###

console.log('jQuery cls', $('.cls'));
    console.log('jQuery first', $('#first'));
    console.log('nameLi', $("li type[name='na']"));
    console.log('li', $('li'));

### **   ** 2.操作属性节点 ###

** JavaScript使用：    **

var firstProp = document.getElementById('first').getAttribute('id');
        console.log('firstProp', firstProp);
        document.getElementById('first').setAttribute('name', 'one');
        document.getElementById('first').removeAttribute('name');

**         jQuery的使用**

console.log('firstAttr', $('#first').attr('id'));
    $('#first').attr('name' ,'one');
    $('#first').removeAttr('name');
    // prop获取操作属性节点
    console.log('propGet', $('#first').prop('id'));
    $('#first').prop("id",'propSet');
    $('#propSet').prop("id",'first');
    console.log('propClass', $('.cls')[0]);
    // $('.cls')[0].removeProp('name');
    console.log('a3', $("#ab"));
    $("#ab").removeProp("name");
    $("#first").removeProp("name");
    // 注：在使用prop设置时，只能设置已经存在于属相的属性值；使用removeProp删除时，现在使用暂时无法实 现；

[jquery中attr和prop的区别][jquery_attr_prop]：

1、 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

2、对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

prop和attr的使用，传入一个参数获取，传入两个参数设置；两者的不同 在：读取checked，disabled等属性名=属性值的属    性时，attr 返回 属性值或者undefined，当读取checked属性时，不会根据是否选中而改变；prop返回true和false，当读取的       checked属性时，会根据是否选中而改变；

## 3.操作文本节点 ##

*** JavaScript的使用***

***   ***  innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回

innerText：取到或设置一个节点的HTML代码，不能取到css

value:取到input\[type='text'\]输入的文本

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
    姓名：<input type="text" id="input" value="222333">
    </body>
    // JavaScript 方法
    <script type="text/javascript">
        console.log('serven_times', document.getElementById('serven_times').innerHTML);
        document.getElementById('serven_times').innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
        console.log('serven_times text', document.getElementById('serven_times').innerText);
        document.getElementById('serven_times').innerText = '123';
        console.log('sdfads',document.getElementById("input").value);
    </script>

结果为：

![20190327154937611.png][]

*** JQuery使用***

.html()取到或设置节点中的html代码  
   .text()取到或设置节点中的文本  
   .val()取到或设置input的value属性值

console.log('serven',$('#serven_times'));
        console.log('servenHTML',$('#serven_times').html());
        console.log('servenText',$('#serven_times').text());
        $('#serven_times').html("<span style='color: #ff3a29'>呵呵</span>");
        $('#serven_times').text('123');
        $('input').val('3333')

结果为：

![20190327160105808.png][]

## 4.操作css样式 ##

***  JavaScript使用***

// childNodes获取当前节点的所有子节点
        console.log('firstChildNodes',document.getElementById('first').childNodes);
        // children 获取当前节点的所有元素子节点
        console.log('divChildren', document.getElementById('div').children);
        // parentNode:获取当前节点的父节点下的所有节点
        console.log('parentNode', document.getElementById('ab').parentNode);
        // #text (文本节点的 nodeName 永远是 #text) [获取第一个元素节点，包括回车等文本节点]
        console.log('firstChild', document.getElementById('div').firstChild);
        // 获取第一个元素节点，不包括回车节点
        console.log('firstElementChild', document.getElementById('div').firstElementChild);
        // lastChild、lastElementChild 同理
        console.log('previousSibling', document.getElementById('div').previousSibling);
        console.log('previousElementSibling', 
         document.getElementById('div').previousElementSibling);
        // nextSibling、nextElementSibling同理

答案是：

![20190327173206667.png][]

***jQuery的使用***

console.log('jQuery first-child',$('.cls:first-child'));

答案是：

![20190327173614606.png][]

1.提供了大量的选择器：

*   :first-child         :first-of-type1.9+         :last-child         :nth-child        :nth-last-child()1.9+          nth-last-of-type()1.9+

nth-of-type()1.9+           :only-child          :only-of-type1.9+

2. 除此之外也提供了对应的函数：

first()　　　　last()　　children()　　parents()　　parent()　　siblings()

## 6.给一个节点绑定事件 ##

***  javaScript的使用：***

document.getElementById('first').onclick = function (ev) {
       alert('123');
    }

jQuery的使用：

①.*事件绑定的快捷方式*

$('#first').click(function () {
        alert('456');
    })

②：使用*on进行事件绑定（可以使用on同时给同一对象绑定多个事件**）*

$('#ab').on('click', function () {
        alert('111');
    })

/③使用on，给一个对象绑定多个事件
        $("button:eq(0)").on({
            "click":function () {
                console.log("click");
            },
            "mouseover":function () {
                console.log("mouseover");
            },
            "mouseover":function () {
                console.log("mouseover2");
            }
        });
        //④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
        $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
            console.log(e);
            console.log(e.data);
            console.log(e.data.name);
            console.log(e.data.age);
            console.log(window.event);//js中的事件因子
    
        });

## 7.JQuery的文档就绪函数和window.onload的区别 ##

*①.window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
    *      而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
    *②.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖
    *      而文档就绪函数在一个页面中可以有N个

# 三、JavaScript对象和JQuery对象的方法不能混用。 #

## 1.JavaScript对象和JQuery对象 ##

① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
    *      $("#div").click(function(){})√
    *      $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法
    *
    *      同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

## 2.JavaScript对象和JQuery对象互转 ##

*① JQuery --->  JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
    *  $("div").get(0).onclick = function(){}
    *  $("div").[0].onclick = function(){}
    * ② JavaScript ---> JQuery :使用$()包裹JavaScript对象        (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
    *  var div = document.getElementById("div");
    *  $(div).click(function(){});

[jquery_attr_prop]: https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
[20190327154937611.png]: /images/20220228/03c650e2be1f497da00fa93b4806562d.png
[20190327160105808.png]: /images/20220228/6f4ec99ab1404d1daa0850c7036e9dae.png
[20190327173206667.png]: /images/20220228/c9cfcdd7922b47379b3c836ffc41be19.png
[20190327173614606.png]: /images/20220228/fb51cb739e1e4a3c9f0ebe5dc9099144.png