锋利的jQuery读书笔记-第3章 jQuery中的DOM操作

DOM是 Document Object Model的缩写，意思是问的那个对象模型。

一、DOM操作的分类

1、DOM Core：用于处理网页和标记性语言编写出来的文档。 JS中的getElementById()、getAttribute()等方法都属于DOM Core的组成部分。

2、HTML-DOM：提供记号来描述HTML元素，例如：document.forms     element.src 这种都属于HTML-DOM操作。

3、CSS-DOM：针对CSS的操作，设置页面元素样式，例如：element.style.color="red"; 

二、jQuery中的DOM操作

1、查找节点（实际上就是jQuery选择器的功能）

（1）查找元素节点：$("p").text(); //查找到p元素的内容。

（2）查找属性节点：$("p").attr("title");  //获取到p元素的titile属性值。

2、创建节点

（1）创建元素节点：$("<li></li>"); //这样就创建了一个空的元素节点，也可以写成 $("</li>")。

（2）创建文本节点：$("<li>kewen</li>"); //这样就创建了带文本内容的节点。

（3）创建属性节点：$("<li title='kewen'>kewen</li>");  //这就是带属性和文本内容的节点。

3、插入节点

（1）append()：向元素内部追加内容

$("p").append("<b>kewen</b>");  //结果为  <p><b>kewen</b></p>;

（2）appendTo()：将xxx内容追加到某个元素内，与append()的写法相反

$("<b>kewen</b>").appendTo("p");  //结果为  <p><b>kewen</b></p>;

（3）prepend()：向元素内前置内容

（4）prependTo()：将xxx内容前置于某个元素内，与prepend()写法相反

（5）after()：在元素之后添加xxx，注意位于元素后而不是元素内。

（6）insertAfter()：与上一条相反的写法，将xxx添加到某个元素后

（7）before()：在元素之前添加xxx

（8）insertBefore()：将xxx添加到某个元素之前

4、删除节点

（1）remove() ： 删除某元素并将删除的对象返回，可以定义一个变量保存用于恢复页面元素，但是绑定的事件和活动不能恢复。

（2）detach()：类似于去激活，只是页面不显示，实际内容都存在，可以用append()方法恢复回来，且事件和活动都还在。

（3）empty()：清空元素，啥都不剩。

5、复制节点

$("#kewen").clone().appendTo("ul");  //将id为kwen的这个元素复制一份，追加到ul元素中去。

$("#kewen").clone(true).appendTo("ul");  //将id为kwen的这个元素包括绑定的事件复制一份，追加到ul元素中去。

6、替换节点

（1）replaceWith()：  $("p").replaceWith("<Strong>kewen</Strong>"); // 将p元素的内容替换为粗体的“kewen”

（2）replaceAll()： $("<Strong>kewen</Strong>").replaceWith("p"); // 将p元素的内容替换为粗体的“kewen”

7、包裹节点：

（1）wrap() ：  $("strong").wrap("<b></b>"); // 用b标签将strong元素包括起来

（2）wrapAll() ：将所有的元素用一个元素包裹起来，wrap()则是每一个元素包裹一个标签。

（3）wrapInner ： 将元素内的内容用标签包裹。 $("strong").wrap("<b></b>");  //结果为 <Strong><b></b></Strong>

8、属性操作

（1）获取属性和设置属性： $("p").attr("title") // 获取到p元素的title属性。   ("p").attr("title","new title") //将p元素中的title属性设置为 "new title"。

（2）删除属性： $("p").removeAttr("title"); //删除p元素的title属性。

9、样式操作

（1）获取、设置样式：$("p").attr("class");// class为页面样式类型，可以获取也可以通过属性修改的方式进行修改

（2）追加样式： $("p").addClass("another class"); // 给元素p追加一个样式。  

这里注意如果追加的样式中与原来的样式无冲突则表现为合并样式，如果有冲突则表现为覆盖原有的样式。

（3）移除样式：  $("p").removeClass("xxx"); // 移除xxx样式。

$("p").removeClass("aaaa bbbb"); //同时删除aaa和bbb两个样式，中间用空格分开即可。

（4）切换样式：$("p").toggleClass("aaaa"); //假设原来p元素的样式为bbb 那么此函数就会将p元素由aaaa与bbb中来回切换。

（5）判断是否有某种样式：$("p").hasClass("xxxxx");

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

（1）html()方法：$("p").html(); //获取到p中html代码，取到的值中包含html元素标签值。  如果带参数那么就是修改p元素的html代码。

（2）text()方法：与前者类似，但是只获取到内容，不包含html页面元素值。

（3）val()方法：返回元素的值，可以是文本也可以是单选框多选框等等。

$("#single").val("二号"); //这里为将id是single的单选框中选中的值设为“二号”

11、遍历节点：

（1）children()： $("body").children();   //获取到body下所有的子元素

（2）next()：$("p").next(); // 获取到p元素后紧邻的同辈元素。

（3）prev() ：$("p").orev(); //获取到p元素前紧邻的同辈元素。

（4）siblings()： $("#li2").siblings(); //获取到id为li2的元素的同辈所有元素，常见于导航栏li样式变换操作。

除此之外还有很多遍历方法，此处不一一列举说明了。

12、CSS-DOM操作：

$("p").css("color"); //获取到p元素的color样式。

$("p").css({"fontSize":"30px","backgroundColor":"red"}); //可以设置多个css样式，以{}包裹，逗号分隔。

$("p").position().left(); // 获取到p元素向左便宜的像素，也可以设置偏移的值。

三、常用于样式操作的jQuery事件

1、鼠标的悬停事件

$("#kewen").mouseover(function()
	{
		//鼠标划过对应的事件
}).mouseout(function(){
		//鼠标移走对应的事件
	})

2、获取焦点/失去焦点事件

$("#kewen").focus(function()
	{
		//鼠标划过对应的事件
	});

$("#kewen").blur(function(){
		//鼠标移走对应的事件
	})