一、DOM操作分类
1.DOM Core getElement(s)获得元素
2.HTML-DOM document.对象/操作标签的属性
3.CSS-DOM 获取和数组style对象的各种属性 eg:element.style.color = "red"
二、Jquery基础DOM操作
1.获取和设置元素的内容
text() //获取得到标签内的文本，不包括内部标签。空格会获取到
//$(".box").text() == ele.innerText
html() //获取到标签内的所有内容，包括子标签本身。
//$(".box").html() == ele.innerHtml
注意：如果不传入参数，表示只是获取;如果传入字符串，表示设置！
设置html,如果有标签，则会解析出来！
val() //获取一个标签的value值。有,则返回。
2.获取和修改元素的属性
attr(属性名)
$("div a").attr("href") //获取属性href值
$("div a").attr("href","http://www.baidu.com").attr("title","百度").text("百度");
3.元素的样式操作
js 操作(id) ; css 操作(class)
1.获取和设置样式 (参照上)
2.追加样式 $("#box").addClass("big")
3.移除样式 $("#box").removeClass("样式名")
4.切换样式 $("#box").toggleClass("样式名") //注意：如果样式名存在，则删除;不存在，则添加！
5.判断是否有指定的class hasClass("样式名")
6.each()方法 //变量选择到的所有元素。 参数1：遍历的元素的下标 参数2：遍历的那个元素(dom对象，不是jq对象)
$("div").each(function (index, ele) {
$(ele).html("呵呵呵")
})
三、CSS-DOM操作
1.CSS()方法 获取和设置css属性
eg:$("#box").css("backgroundColor").css("width","800px")...
注意：1.如果只传一个参数，表示获取这个属性值; 2.如果两个参数，表示设置;
2.offset()方法 //获取这个元素在当前文档的相对偏移。返回的对象的两个属性 left top
eg:console.log($(".box").offset.left + " " + $(".box").offset.top); //获取两个值
$(".box").offset({top:100,left:100}); //设置相对文档偏移量
3.position()方法 //获取标签相对于参照定位标签的偏移量。 注意：一般只获取，不设置！
eg:var $position = $(".box div").position;
console.log($position.left + " " +$position.top);
4.scrollTop() 和 scrollLeft()方法 //获取某个元素的滚动条距离上端和左端的滚动的距离
//可以添加定时器，设置让滚动条自动去滚动
eg：var per = 1;
var $p = $("p:first");
var timerId;
//自动滚屏
$("button:eq(1)").click(function() {
timerId = setInterval(function() {
var top = $p.scrollTop();
$p.scrollTop(top + per);//更改垂直滚动条距离顶端的距离，则滚动条滚起来
}, 50);
})
/*取消自动滚屏 clearInterval(timerId);*/
四、DOM节点操作
1.创建节点
a.创建元素节点 var $li = $("<li>") //双标签可以写成单标签
b.创建文本节点 var $li = $("<li>item</li>")
c.创建属性节点 var $li = $("<li id='js'>item</li>")
2.插入节点
$("<ul>").append($("<li>")) //向ul中追加一个li标签。插入后，li是ul的子标签
$("<li>").appendTo($("<ul>"))
$("<ul>").prepend($("<li>")) //向ul的最前面追加一个li标签
$("<ul>").after($("<li>")) //在ul后面插入一个li标签。此时，li是ul的兄弟标签
$("<ul>").before($("<li>")) //在ul前面插入一个li标签。此时，li是ul的兄弟标签
3.删除节点
方法1：remove() //删除找到的标签。删除的标签会返回; 绑定的事件会丢失
eg：
方法2：detach() //与remove()区别：绑定的事件、附加的数据还在
eg:
方法3：empty() //清空找到的节点的所有内容，包括所有后代节点。节点还在。？？
eg:
4.复制节点
方法：clone()
eg:$(".languages li:first").clone().appendTo($(".languages"));//复制节点，并添加到某个元素后面
5.替换节点
方法1：replaceWith()
eg：$(".languages li").replaceWith("<li>我要全部干掉你们</li>");//找到的所有的li用参数中的节点替换
方法2：replaceAll()
eg：$("<li>我要全部干掉你们</li>").replaceAll($(".languages li"));
6.包裹节点
方法1：li.wrap(p) //每一个li分别用p包裹。 假如，有3个li,此时每个li外面都有1个p包裹住。此时，有3个p;
方法2：li.wrapAll(p) //所有的li用p包裹。此时，有1个p;
方法3：li.wrapInner(p) //用p去包裹li的内容，不包裹li这个标签本身。
eg:$(".languages li").wrapInner("<span>") //.languages li 标签中的内容用span包括。 注意：不包裹标签字节，只包括标签的内容！
五、JQuery中的事件
基础事件
1.事件绑定
元素对象.bind("参数1","参数2",参数3)
参数1：事件类型; 比如：blur、load、focus、scroll、click、dblclick、mouseon...
参数2：一般省略
参数3：事件处理函数(一般匿名函数)
eg:$("button:first").bind("click",function(){
alert("...")
})
注意：这里绑定的事件类型是没有on的。
2.解除绑定
元素对象.unbind("事件类型") //解除与1绑定的事件
注意：如果不传参数表示解除所有的事件绑定(一个按钮会同时存在多种事件)
eg：$("button:eq(0)").unbind("click");
3.简写事件
eg：$("button:eq(1)").click(function () {
alert("解除")
firstBtn.unbind("click"); //解除click事件的绑定
})
4.复合事件
1.hover(f1,f2) //当光标移动到元素上的时候，会触发第一个函数f1;当移除时，会触发第二个函数f2。
模拟光标悬停事件
2.toggle(f1,f2..fn)
模拟鼠标连续单击事件
功能1：当第一次单击时，执行第一个函数。当第二次单击时，执行第二个函数。。。完毕后，再循环。
功能2：不传任何参数，可以让元素隐藏或显示。
注意：从1.9版本后，只保留功能2！！
事件对象
1.获取事件对象
eg:ele.click(function(event){}) //event只能在函数内部使用
2.事件对象的常用属性
1.type属性 //获取事件类型
2.preventDefault()方法 //阻止事件的默认行为。兼容各种浏览器
3.stopPropation()方法 //阻止事件的冒泡
4.target属性 //获取到触发事件的元素
5.pageX、pageY属性 //光标相对与页面的距离。如果有滚动条，还要加上滚动条的距离
6.which属性 //鼠标：左(1)中(2)右(3) 键盘：键盘的按键
7.metaKey属性 //获取ctrl按键
3.事件的冒泡、沉默处理
事件函数中返回false，可以同时停止默认行为和冒泡。所以，可以直接返回false，而不要调用上述两个方法。
高级事件
1.事件模拟操作
1.ele.trigger(事件类型)
eg:$("button").click(function() {
alert("我被点击了");
})
$("button").trigger("click") == $("button").click();
2.trigger自定义事件
eg:$("button").bind("myClick", function () {
alert("这个是我自定义的事件");
})
$("button").trigger("myClick");
3.执行默认操作：trigger触发的事件，不仅仅触发了事件函数，也会触发浏览器的默认操作。
比如，给input注册一个focus事件，则不但触发focus事件，还会触发浏览器的默认事件，使input获得焦点。
使用trigerHanddler可以避免浏览器的默认操作。
2.事件命名空间
$btn.bind("click.my", function () {
console.log("点击事件");
})
$btn.unbind(".my"); //通过命名空间统一管理命名空间下的事件
3.事件委托
/*//只处理选择器选中这些元素的委托
$("div:first").delegate("button:nth-child(2n+1)", "click", function(){
console.log("abc");
});
//解除委托
$("div:first").undelegate("button:nth-child(2n+1)", "click");*/
4.on()、off()
$("button:first").on("click", {name:"lisi"}, function (event) {
console.log(event.data); //在参数中传递的数据，通过event.data获取 // console.log("abcc");
})
$("button:first").off("click");