原生js和jQuery主要异同点

1、入口函数的不同

　　js：window.onload = function(){内部放js}　　　

　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。

　　jQuery:$(function(){})　　或者　　$(document).ready(function(){})

　　是在 html所有标签都加载之后，就回去执行。可以写多个。

2、获取元素的方式不同

　　js：常用的以下几个，除了id，其他的结果都是伪数组

[HTML] 纯文本查看 复制代码

document.getElementsByTagName("a")
    document.getElementById("demo")
    document.getElementsByClassName("class")　　有兼容性问题
    document.getElementsByTagName("*")　　获得所有的标签，用来遍历
　　html5新增选择器
　　document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素，返回
　　　　第一个满足选择器条件的元素 一个dom对象
　　document.querySelectorAll('.item');返回所有满足该条件的元素 一个元素类型是dom类
　　　　型的数组

jQuery：

　　　$(" ")　　通过和css雷同的选择器方式来获取元素。得到的是jquery对象（dom元素的数组，外加其他一些成员）

。即使写的是id，唯一的，得到的对象都不是单一的。

本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员，

DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册

3、DOM对象和jquery对象的相互转换　

　　jQuery对象转换成DOM对象:

　　　　方式一：$(“#btn”)[0]

　　　　方式二：$(“#btn”).get(0)得到dom对象。   

　　　　eq（0）得到jquery对象

　　DOM对象转换成jQuery对象：

　　$(document) -> 把DOM对象转成了jQuery对象

　　var btn = document.getElementById(“btn”);

　　btn -> $(btn);　　　　$(this)

　　Jquery得到的元素类型都是对象，内容是伪数组，无论是不是唯一的元素。

4、事件处理程序不同

[HTML] 纯文本查看 复制代码

js：
　　document.getElementById(“id”).onclick = function(){　// 语句　}

　　document.getElementById(“id”).addEventListener("click",function(){})
　　onclick，onfoucs，onblur，fouce（自动获得），select（自动选择文本域内容），onmouseover，onmouseout，
　　oninput/onpropertychange用户输入事件，onchange(下拉菜单select内容发生改变时发生事件，如果内容为几，那么做出什么反应)
　　


　　jquery
　　$(“#id”).click(function(){ 　　　　// 语句 　　});

5、设置类

　　js：document.getElementById(“btn”).className = "wrong1 wrong2"

　　可以同时设置多个类名。

　　classList属性（是数组），方法add 　　remove　　contains　　toggle

　　jquery：

6、设置value

7、设置内容，html和text

　　js：document.getElementById(“btn”).innerHTML = "内容不能为空"

　　可以是文本，可以是<p>内容不能为空</p>。

　　jquery：

8、属性

　　js：object.getAttribute(attribute)　　获取元素属性

　　　　object.setAttrbute(attribute，value)　　设置元素属性

9、节点操作

　　js:　　childNodes属性　　　element.childNodes　　所有子元素，包括元素节点，文本节点，　属性节点，甚至包括空格等，所以这个不怎么用。

　　　　　　nodeType属性　　node.nodeType返回结果是数字。1代表元素节点，2属性节点，3文本节点，

　　　　以上这两个属性都不建议使用，建议直接使用children。

10、对数组的增删改查

　　js：

　　　　增：push()最后追加　　返回新的长度。

　　　　　　unshift ()　　开头添加，返回新的长度。即操作后如果输出，结果是长度，不是新数组。

　　　　删：pop()删除最后一个，并返回删掉的值，此方法无参数。

　　　　　　shift()删除第一个元素，并返回删掉的值，无参数。

　　　　连接数组：concat()　　连接两个或多个。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本

　　　　　　　　　aa.concat(bb);     结果：  [1,3,5,“a”,”b”,”c”];

　　　　转换：join() 数组转字符串　　arrayObject.join([separator])  ，返回新字符串，原数组不会有任何变化。

　　　　　　　split() 字符串转数组　　　返回新数组，原字符串没有变化

　　　　　　stringObject.split(separator,howmany)    两个参数均是可选的，默认是逗号分隔，第二个指定数组最大长度。

原生js和jQuery主要异同点

1、入口函数的不同

　　js：window.onload = function(){内部放js}　　　

　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。

　　jQuery:$(function(){})　　或者　　$(document).ready(function(){})

　　是在 html所有标签都加载之后，就回去执行。可以写多个。

2、获取元素的方式不同

　　js：常用的以下几个，除了id，其他的结果都是伪数组

[HTML] 纯文本查看 复制代码

document.getElementsByTagName("a")
    document.getElementById("demo")
    document.getElementsByClassName("class")　　有兼容性问题
    document.getElementsByTagName("*")　　获得所有的标签，用来遍历
　　html5新增选择器
　　document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素，返回
　　　　第一个满足选择器条件的元素 一个dom对象
　　document.querySelectorAll('.item');返回所有满足该条件的元素 一个元素类型是dom类
　　　　型的数组

jQuery：

　　　$(" ")　　通过和css雷同的选择器方式来获取元素。得到的是jquery对象（dom元素的数组，外加其他一些成员）

。即使写的是id，唯一的，得到的对象都不是单一的。

本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员，

DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册

3、DOM对象和jquery对象的相互转换　

　　jQuery对象转换成DOM对象:

　　　　方式一：$(“#btn”)[0]

　　　　方式二：$(“#btn”).get(0)得到dom对象。   

　　　　eq（0）得到jquery对象

　　DOM对象转换成jQuery对象：

　　$(document) -> 把DOM对象转成了jQuery对象

　　var btn = document.getElementById(“btn”);

　　btn -> $(btn);　　　　$(this)

　　Jquery得到的元素类型都是对象，内容是伪数组，无论是不是唯一的元素。

4、事件处理程序不同

[HTML] 纯文本查看 复制代码

js：
　　document.getElementById(“id”).onclick = function(){　// 语句　}

　　document.getElementById(“id”).addEventListener("click",function(){})
　　onclick，onfoucs，onblur，fouce（自动获得），select（自动选择文本域内容），onmouseover，onmouseout，
　　oninput/onpropertychange用户输入事件，onchange(下拉菜单select内容发生改变时发生事件，如果内容为几，那么做出什么反应)
　　


　　jquery
　　$(“#id”).click(function(){ 　　　　// 语句 　　});

5、设置类

　　js：document.getElementById(“btn”).className = "wrong1 wrong2"

　　可以同时设置多个类名。

　　classList属性（是数组），方法add 　　remove　　contains　　toggle

　　jquery：

6、设置value

7、设置内容，html和text

　　js：document.getElementById(“btn”).innerHTML = "内容不能为空"

　　可以是文本，可以是<p>内容不能为空</p>。

　　jquery：

8、属性

　　js：object.getAttribute(attribute)　　获取元素属性

　　　　object.setAttrbute(attribute，value)　　设置元素属性

9、节点操作

　　js:　　childNodes属性　　　element.childNodes　　所有子元素，包括元素节点，文本节点，　属性节点，甚至包括空格等，所以这个不怎么用。

　　　　　　nodeType属性　　node.nodeType返回结果是数字。1代表元素节点，2属性节点，3文本节点，

　　　　以上这两个属性都不建议使用，建议直接使用children。

10、对数组的增删改查

　　js：

　　　　增：push()最后追加　　返回新的长度。

　　　　　　unshift ()　　开头添加，返回新的长度。即操作后如果输出，结果是长度，不是新数组。

　　　　删：pop()删除最后一个，并返回删掉的值，此方法无参数。

　　　　　　shift()删除第一个元素，并返回删掉的值，无参数。

　　　　连接数组：concat()　　连接两个或多个。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本

　　　　　　　　　aa.concat(bb);     结果：  [1,3,5,“a”,”b”,”c”];

　　　　转换：join() 数组转字符串　　arrayObject.join([separator])  ，返回新字符串，原数组不会有任何变化。

　　　　　　　split() 字符串转数组　　　返回新数组，原字符串没有变化

　　　　　　stringObject.split(separator,howmany)    两个参数均是可选的，默认是逗号分隔，第二个指定数组最大长度。