【锋利的jQuery阅读笔记】jQuery中的DOM事件

1、DOM操作的分类

     （1） DOM Core 

              JavaScript中的getElementById( )、getElementsByTagName( )、getAttribute（）和setAttribute（）都是DOM Core的组成部分

     （2）HTML-DOM

              document.forms//获取表单对象

     （3）CSS-DOM

               CSS-DOM技术的主要作用是获取和设置style对象的各种属性

               element.style.color="red";

2、jQuery中的DOM操作

     （1）查找节点

          

类型	方法	示例
查找元素节点	直接查找	var $li= $("ul li:eq(1)");获取<ul> 里第2个<li>节点
查找属性节点	attri（）	var $para=$("p"); var p_text=$para.attr("title");

     （2） 创建节点

类型	方法	示例
创建元素节点	$(html)	var $li_1=$("<li></li>")//创建<li>元素 $("ul").append($li_1);
创建文本节点	在创建元素节点时直接把文本内容写出来	var $li_1=$("<li>橘子</li>")
创建属性节点	直接在创建元素节点时一起创建	var $li_1=$("<li title="橘子">橘子</li>");

（3）插入节点

     append（）；appendTo（）；prepend（）；prependTo（）；after（）；insertAfter（）；before（）；insertBefore（）

（4）删除节点

          remove（）：从DOM中删除所有匹配的元素，返回值是一个指向已被删除节点的引用，因此可以在以后再使用删除的节点

          detach（）：

          empty（）：清空节点

（5）复制节点

          clone（）：参数true，含义为复制元素的同时复制元素中所绑定的事件，这样该元素的副本也同样具有复制功能

（6）替换节点

          replaceWith（）：将所有匹配的元素都替换成指定的HTML或者DOM元素 

               $("p").replaceWith("<strong>你好</strong>");

          replaceAll（）

               $("<strong>你好</strong>".replaceAll("p"));

（7）包裹节点

          wrapAll( )：包裹元素 $("strong").wrapAll("<b></b>")

          wrapInner( ):包裹内容

（8）属性操作

         

	方法	示例
获取属性和设置属性	attr（“属性名”） attr（“属性名”，“属性值”）	$("p").attr("title","your title");
删除属性	removeAttr（“属性名”）	$("p").removeAttr("title");

（9）样式操作

	方法	示例
获取样式和设置样式	attr（）	$("p").attr("class","high")
追加样式	addClass( )	$("p").addClass("another");
移除样式	removeClass( )	$("p").removeClass("high")
切换样式	toggle(  1 , 2 )
判断是否含有某个样式	hasClass（）

（10）设置和获取HTML、文本和值

          html（）：类似于innerHTML属性，可以用来读取或者设置某个元素中的HTML内容

          text（）：读取或者设置某个元素中的文本内容

          val（）：设置或获取元素的值

（11）遍历节点

          children（）：只考虑子元素，不考虑其他后代元素

          next（）：取得匹配元素后面紧邻的同辈元素

          prev（）：取得匹配元素前面紧邻的同辈元素

          sibling（）：取得匹配元素前后所有的同辈元素

          closest（）：取得最近的匹配元素