第4章 jQuery之dom操作

我们把页面上的元素分为3种节点：

1、元素节点     用过选择器获取

2、属性节点

3、文本节点

 

 

 

4.1 属性节点

4.1.1 一般

获取： attr(name)方法

如：<div id="zhangsan"></div>,获取id的值

则：$("div").attr("id");

结果：zhangsan

 

设置：

1、attr(key,value)方法  --- 设置单个属性值

如：<img/>，为图像设置src属性

则：$("img").attr("src","test.jpg");

结果: <img src= "test.jpg" />

 

2、attr(properties) 方法 -- 设置多个属性值

如：<img/>，为图像设置src和alt属性

则：$("img").attr({ src: "test.jpg", alt: "Test Image" });

结果：<img src= "test.jpg"  alt:="Test Image" />

 

3、attr(key,fn)方法 -- 函数的返回值作为属性值

如：<img src="test.jpg"/>，把src属性的值设置为title属性的值

则：$("img").attr("title", function() { return this.src });

结果：<img src="test.jpg" title="test.jpg" />

 

注意：这里的函数可以有两个参数：

index：当前元素的索引值

attr：原先的属性值

 

移除：removeAttr(name)

如：<img src="test.jpg"/>，图像的src属性删除

则：$("img").removeAttr("src");

结果：<img />

4.1.2 样式

添加

1、css() ---- 添加一个

如：$("#mover").css("font-size","30px");

2、addClass(class|fn) ---- 添加多个

如：$("#itcastit").addClass("spanone1")

注意：

1、多个用“逗号“隔开

2、fn：此函数必须返回一个或多个空格分隔的class名

   有两个参数

index:索引值，

class:原先的class属性值

移除

removeClass([class|fn])

如：$("#itcastit").removeClass();

注意：

1、class 可以指定需移除的样式名，如果没有指定表示移除所有

2、fn：此函数必须返回一个或多个空格分隔的class名

   有两个参数

index:索引值，

class:原先的class属性值

 

toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类。

class：类名

class,sw:

1:要切换的CSS类名. 

2:用于决定元素是否包含class的布尔值。

如：

var count = 0;

$("p").click(function(){

     $(this).toggleClass("highlight", count++ % 3 == 0);

});

表示每点击三下加上一次 'highlight' 类

 

function(index, class,switch)[, switch] ：

1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

2: 一个用来判断样式类添加还是移除的 boolean 值。 

如：

$('div.foo').toggleClass(function() {

  if ($(this).parent().is('.bar') {

     return 'happy';

    } else {

     return 'sad';

   }

});

表示：根据父元素来设置class属性

 

包含

hasClass() 是否有某样式

如：$("#itcastit").hasClass("spanone1")

4.2 元素节点

4.2.1 获取

使用选择器获取，前面已经讲过，不清楚的朋友请看前面章节，

4.2.2 创建

元素内部

1、append(content)  ---- 追加到后面

如：<p>I would like to say: </p>，向其内部后面加入<b>Hello</b>

则：$("p").append("<b>Hello</b>");

结果：<p>I would like to say: <b>Hello</b></p>

 

2、prepend(content)  ---- 追加到前面

如：<p>I would like to say: </p>，向其内部前面加入<b>Hello</b>

则：$("p"). prepend ("<b>Hello</b>");

结果：<p><b>Hello</b>I would like to say: </p>

 

3、appendTo(content)  ---- 反追加到后面

如：把所有段落追加到ID值为foo的元素中

则：$("p").appendTo("div");

结果：

 

4、prependTo(content)  ----  反追加到前面

则：$("p").prependTo("#foo");

结果：<div id="foo"><p>I would like to say: </p></div>

元素外部

1、after(content|fn) --- 追加到后面

如：<p>I would like to say: </p>，向其后面加入<b>Hello</b>

则：$("p").after("<b>Hello</b>");

结果：<p>I would like to say: </p><b>Hello</b>

注意：

这里还可以是函数，但是函数必须返回一个html字符串。

 

2、before(content|fn) --- 追加到前面

如：<p>I would like to say: </p>，向其前面加入<b>Hello</b>

则：$("p").before("<b>Hello</b>");

结果：<b>Hello</b><p>I would like to say: </p>

注意：

这里还可以是函数，但是函数必须返回一个html字符串。

 

3、insertAfter(content) --反追加到后面

如：<p>I would like to say: </p><div id="foo">Hello</div>

则：$("p").insertAfter("#foo");

结果：<div id="foo">Hello</div><p>I would like to say: </p>

 

4、insertBefore(content) --反追加到前面

如：<div id="foo">Hello</div><p>I would like to say: </p>

则：$("p").insertBefore("#foo");

结果：<p>I would like to say: </p><div id="foo">Hello</div>

4.2.3 移除

1、remove([expr]) --- 删除

如：<p>Hello</p> how are <p>you?</p>，删除p元素

则：$("p").remove();

结果：how are

注意：expr：用于筛选元素的jQuery表达式

如：<p class="hello">Hello</p> how are <p>you?</p>，带有hello类的段落删除

则：$("p").remove(".hello");

结果：how are <p>you?</p>

 

2、empty() -- 删除内容

如：<p>Hello, <span>Person</span> <a href="#">and person</a></p>，删除p元素的内容

则：$("p").empty();

结果：<p></p> 

4.2.4 复制

clone([Even[,deepEven]])

参数：

第1个：事件是否复制

第2个：子元素是否复制

如：<b>Hello</b><p>, how are you?</p>

则：$("b").clone().prependTo("p");

结果：<b>Hello</b><p><b>Hello</b>, how are you?</p>

4.2.5 替换

replaceAll(selector) 

如：<p>Hello</p><p>cruel</p><p>World</p>

则：$("<b>Paragraph. </b>").replaceAll("p");

结果：<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

4.2.6 遍历

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

 

如：<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

则：$("div").siblings()

结果：<p>Hello</p>, <p>And Again</p>

 

如：

<div><span>Hello</span></div>

<p class="selected">Hello Again</p>

<p>And Again</p>

则：$("div").siblings(".selected")

结果：<p class="selected">Hello Again</p>