一、属性操作
// JavaScript：
Dom.hasAttribute('attrName'); //是否有指定属性
Dom.hasAttributes(); //是否有属性
Dom.getAttribute('key') //获取属性
Dom.setAttribute('key','value') //设置属性
Dom.removeAttribute('attrName'); //移除属性
// jQuery：
//在设置disabled、selected、checked等这些Boolean类型自带属性时，我们需要用prop()方法；其他字符串类型自带属性时，我们使用attr()方法即可;DOM节点可见的自定义属性我们也使用attr()方法。
1.$("#box").attr( 'key' ) //取得第一个匹配的属性值，比如$("img").attr("src")
2.$("#box").attr( 'key', 'value' ) //某一个元素设置属性
3.$("#box").attr( {key1:'value1', key2:'value'} ) //为某个元素一次性设置多个属性
4.$("#box").attr( 'key', function ) //为所有匹配的元素设置一个计算的属性值。
5.$("#box").removeAttr( 'key' ) //移除某一个属性
6.$("#box").prop("key"); // 也可以使用prop()方法获取属性
二、元素节点操作
var boxDom = document.elementById('box');
var newNode = '<p>这是需要追加的元素<p>'；
var textNode = '这是需要添加的文本内容'；
1.创建新节点
// javaScript
var newNode =document.createElement('<div>创建</div>');
// jQuery
var newNode = $('<div>创建</div>');
2. 在所选元素内添加，如果元素内之前有别的内容会被覆盖掉；此方法可以添加元素也可以添加文本
//javaScript
boxDom.innerHTML(newNode)
//jQuery
$('#box').html(newNode)
3.在所选元素内的开头添加
// javaScript
boxDom.insertBefore(newNode,boxDom.childNodes[0])
// jQuery
$('#box').prepend(newNode)
4.在所选元素内的结尾添加
// javaScript
boxDom.appendChild(newNode)
// jQuery
$('#box').append(newNode)
5.在所选元素之前添加
// javaScript
boxDom.insertBefore(newNode)
// jQuery
$('#box').before(newNode)
6.在所选元素之后添加
// jQuery
$('#box').after(newNode)
7.删除节点
// javaScript
boxDom.removeChild(newDom.childNodes[i]) //删除box第i+1个子节点
// jQuery
$('#box').remove(); //移除box及其所有文本、子孙节点、数据和事件
$('#box').detach(); //移除box及其所有文本、子孙节点，但是保留数据和事件
$('#box').empty(); //清除box所有的内容和子孙元素，但是box节点本身和其属性事件等还在
8.替换节点
// javaScript
boxDom.replaceChild(newNode, oldNode); //替换box中的子节点
// jQuery
$('#box').replaceWith(newNode); //替换box为新的内容(可以是html元素，dom元素，jQuery元素)
newNode.replaceAll($('#box')); //替换box为新的html元素
9.克隆节点
// javaScript
var copyNode = boxDom.cloneNode(deep);//deep为true时，深拷贝（包括其子孙节点），为false时只复制本身节点
// jQuery
var copyNode = $('#box').clone(deep); //deep为true时，深拷贝（包括其事件处理函数），为false时只复制本身，默认false
10.创建新的文本节点
// javaScript
var newText = document.createTextNode('holl javascript')
11.在所选元素中添加文本内容
// javaScript
Dom.innerText(newNode)
Dom.textContent(newNode) //注意：textContent 谷歌,火狐支持,IE8不支持；兼容性考虑，不建议使用
// jQuery
$('#box').text(newNode)
三、元素节点遍历
四、事件
1、页面加载事件
一般一个页面响应加载的基本顺序是：域名解析 -> 加载html -> 加载js和css -> 加载图片等其他信息
JavaScript 页面加载事件 onload 与 load
属性：页面加载完成时执行（包括图片、css等资源）；一个页面只能有一个 onload 事件，重复使用后面的会覆盖之前的onload。
// JavaScript window.onload = function() {…)} // jQuery $(document).load(function() {…}); //该方法在jQuery1.8废弃了，不推荐使用！！！
jQuery 页面加载事件 ready()
属性：网页中的DOM结构加载完毕时执行；一个页面中可以有多个ready()，重复使用不会对其他的ready()有影响。
$(document).ready(function() {…}) == $(function() {…})
2、普通事件 绑定与解绑
//JavaScript //事件绑定及解绑 ele.addEventListener('click',function(){},false); ele.removeEventListener('click',function(){},false); ele.onclick = function(){}; ele.attachEvent('onclick',function(){}); //ie8以下 ele.detachEvent('onclick',function(){}); //ie8以下 //jQuery
持续更新…