JS与JQuery

原生 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) 两个参数均是可选的，默认是逗号分隔，第二个指定数组最大长度。

  更多技术资讯可关注：gzitcast