JavaScript与jQuery的区别

JavaScript与jQuery的区别：

JavaScript：

javaScript的简写形式就是JS，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。

• 组成部分：

核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）

jQuery：

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果。

• 特点：

jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。

一、本质区别：

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

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

例： <script src="js/jquery.min.js"></script>

简单总结：
1、javaScript(JS)是一门前端语言。
2、jQuery是一个框架，它对javaScript进行了封装，使其更方便使用。

二、语法上的差异：

1、操作元素节点：

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

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

jQuery的使用：

$('.cls')
$('#first')
$("li type[name='na']")
$('li')

2、操作属性节点：

JavaScript使用：

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

jQuery的使用：

var id=$('#first').attr('id')
$('#first').attr('name' ,'one');
$('#first').removeAttr('name');
​
// prop获取操作属性节点
$('#first').prop('id')
$('#first').prop("id",'propSet');
$('#propSet').prop("id",'first');

注：在使用prop设置时，只能设置已经存在于属相的属性值

ps：
jquery中attr和prop的区别：
   1、 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
   2、对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

3、操作文本节点：

JavaScript使用：

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

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

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

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

结果为：

i1 <span style="color: chartreuse">嘿嘿</span>
i1 text 呵呵
sdfads 222333

jQuery的使用：

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

$('#i1')
$('#i1').html()
$('#i1').text()
$('#i1').html("<span style='color: #ff3a29'>呵呵</span>")
$('#i1').text('123')
$('input').val('3333')

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

jQuery的使用：

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

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

ps:同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

2、JavaScript对象和JQuery对象互转：

①：JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象

$("div").get(0).onclick = function(){}
$("div").[0].onclick = function(){}

②：JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象(JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)：

var div = document.getElementById("div");
$(div).click(function(){});