DOM 与 JQuery 与 HTML5
事件
DOM：
document.getElementById(‘btn ‘).onclick = function(){ };
jQuery：
$(‘#btn‘).click(function(){ }); ---> 添加事件没有on
对象.事件名(匿名函数);
jQuery对象转DOM对象
jQuery对象[0].value();
jQuery对象.get(0).value();
this
this $(this)
获取值
DOM：
.value=""
jQuery：
.val() ---> 写内容是设置，没写是获取
---> 设置value方法中的值，进行下拉框元素选中
---> 改变文本域内容，页面改了，控制台没改
动态添加属性
DOM：（自定义属性是广义上的）
setAtrribute("属性名","属性值") ---> 为元素动态添加属性
getAtrribute("属性名") ---> 获取属性值
removeAtrribute("属性名") ---> 移除元素的属性和值
jQuery：
.attr("属性名","属性值" ) --->设置，获取只有一个参数（"属性名"）
HTMl5：（自定义属性是狭义上的）
标签中设置 data-前缀 格式：data-info="属性名"
setAtrribute(‘data-abc‘) --->设置自定义属性
通过dataset 获取以data-开头的属性（获取的时候转成驼峰方式 dataset.myName）
设置类样式
DOM：
对象 .style.属性名 = ‘属性值‘;
对象 .className = "类样式名字" --->样式多时使用
jQuery：
.css(‘属性名‘,‘属性值‘);
.addClass("cls1 cls2") ---> 添加类样式 ---> 样式多时使用
.removeClass("cls1 cls2") ---> 移除元素类样式
.hasClass() ---判断元素是否应用了某个类样式
.toggleClass() ------切换类样式(有则去掉，无则添加)
HTML5:
classList.add() --->添加一个类名，类似于jQuery中 addClass()
classList.remove() -->移除一个类，类似于 removeClass()
classList.contains() --->表示是否包含某个类名，类似于hasClass();
classList.toggle() --->表示切换某个类名，类似于toggleClass()
设置文字内容
DOM：
.innerText --->获取元素中的单纯文字内容
.innerHTMl ---> 获取元素中的标签 + 文字内容（进行拼接创建元素）
.setInnerText ("属性名","属性值") ---> 设置文字内容
.getInnerText ("属性名") ---> 获取文字内容
jQuery：
.text() --->写内容是设置，没写是获取
.html() ---> 写内容是设置，没写是获取
元素显示/隐藏
DOM：
.style.display = "none"; //不占位 block
.style.opacity = 0; //占位 opacity = 1
.style.visibility = "hidden"; //占位
jQuery：
show() ---> 显示
hide() ---> 隐藏
slideUp() ---> 滑出
slideDown() ---> 滑入
slideToggle() ---> 切换滑入和滑出
fadeIn() ---> 淡入
fadeOut() ---> 淡出
fadeToggle() ---> 淡入淡出
fadeTo() ---> 设置在多长时间把透明度降低或设置为多少
添加子元素
DOM：
父级元素.appendChild(子级元素) ---> 追加子元素
对象.insetBefore(新元素，参照元素) ---> 插入元素之前
replaceChild() ---> 替换
jQuery：
子元素.appendTo(父级元素)
父级元素.append(子级元素)
prepend() ---> 追加到子元素的做前面
before() ---> 添加到当前元素的前面，作为兄弟元素
after() ---> 添加到当前元素后面
移除元素
DOM：
父级元素.removeChild(子级元素) ---> 移除子元素
jQuery：
.html("") ---> 占空间（清空当前元素中的内容）
.empty() ---> 清空的更干净 （常用）
.remove() ---> 清空自己
查找元素
DOM：
.children 父级元素中所有的子元素
.firstChild----->获取某个元素的第一个子节点
.firstElementChild----->获取某个元素中的第一个子元素
.LastChild ----->获取某个元素的最后一个子节点
.LastElementChild ----->获取某个元素的最后一个子元素
.previousSibling-----> 获取元素前一个兄弟节点
.previousElementSibling-----> 获取元素前一个兄弟元素 .nextSibling---->获取元素下一个兄弟节点
.nextElementSibing----->获取元素下一个兄弟元素
jQuery：
find() ---> 查找某个元素
siblings ---> 获取兄弟元素
next() ---> 获取当前元素的下一个兄弟元素
nextAll() ---> 获取当前元素后面所有的兄弟元素
prev() ---> 获取当前元素的上一个兄弟元素
prevAll() ---> 获取当前元素前面所有的兄弟元素
绑定事件
DOM：
(1) 对象.addEventListener("事件类型(没有on)","函数","事件捕获(false)") ---> 谷歌和火狐支持，IE8不支持，IE11支持
例：my$（"btn"）.addEventListener("click",function(){ },false);
(2) 对象.attachevent("on+事件类型","函数") ---> 谷歌和火狐不支持，IE8支持，IE11不支持
例：my$（"btn"）.attachEvent("on"+"click",function() { });
jQuery：
.bind() 绑定事件---第一个参数是事件，第二个参数是回调函数
.delegate() --- 找到父级元素为子元素绑定事件（通过代理的方式绑定事件）----第一个参数是子元素，第二个参数是事件，第三个参数是回调函数
.on() -- 第一个参数是事件，第二个参数是子元素 ，第三个参数是回调函数 --->事件冒泡
解绑事件
DOM：
对象 .removeEventListener()
对象.detachEvent()
jQuery：
.unbind()
.undelegate() --- 第一个参数是子元素，第二个参数是事件
.off() --- 第一个参数是事件，第二个参数是子元素 -->事件冒泡，子元素解绑，父元素不解绑
页面加载事件
DOM：
window.onload = function( ){ }; -->会覆盖，页面中所有的内容全部加载完后才触发
jQuery： 不会覆盖
$(window).load(function( ){ }); ---> 页面中所有的内容全部加载完后才触发
$(function( ){ }); ---> 页面基本的DOM元素加载完后就可以触发
判断是奇数和偶数
DOM：
if--else语句判断
jQuery：
$("标签名:odd") --->奇数（索引从0开始）
$("标签名:even") ---> 偶数
获取索引
DOM：
.index()
jQuery：
$("标签名:eq("+this.index()+")")
.eq($(this).index())
$(this).index() --->获取当前元素的索引
克隆
.clone(true/false) --> true(可以克隆样式) false(样式克隆不过来)
动态创建元素
DOM：
1.document.write("标签代码-->html代码");
2.对象.innerHtml="";
3.document.createElement("标签名"); 创建元素，返回对象
jQuery：
1.$("html标签") ---返回的是对象
2.对象.html("html标签")
获取元素
DOM：
document.getElementById()
document.getElementsByTagName()
HTML5：
document.querySelector(); --->获取选择器中的第一个
document.querySelectorAll(); --->伪数组（需要循环遍历）
循环遍历
$.each(info,function(index,element){})--->循环（隐式迭代）
对象.forEach(function(element,index)) -->forEach（循环）是ES5的新特性
DOM与JQuery 常用属性
原文：http://www.cnblogs.com/dxt510/p/7137894.html
