jQuery操作DOM对象

一、DOM的操作分类

DOM操作分为三类：

1. DOM Core：任何一种支持DOM的编程语言都可以使用它
2. HTML-DOM：用于处理HTML文档
3. CSS-DOM：用于操作CSS

二、jQuery中的DOM操作：

1、 样式操作

1. 使用css()为指定的元素设置样式值或获取样式值

语法：

css(name,value) ;    【设置单个属性】
css({name:value,name:value,name:value…}) ;    【同时设置多个属性】

示例：

$(this).css("border","5px solid #f5f5f5");
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});  【opacity：设置透明度】

2. 追加样式

语法：

$(selector).addClass(class);
$(selector).addClass(class1 class2 … classN);

示例：

.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
$("h2").mouseover(function() {   $("p").addClass("content border");    });

3.移除样式

语法：

$(selector).removeClass("class") ;
$(selector).removeClass("class1 class2 … classN ") ;

示例：

$("h2").mouseout(function() {$("p").removeClass("text content");});

4.切换样式

toggleClass()：模拟了addClass()与removeClass()实现样式切换的过程

语法：

`$(selector).toggleClass(class) ;`

示例：

$("h2").click(function() {   $("p").toggleClass("content  border");   });

4.判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法：

$(selector). hasClass(class);

示例：

$("h2").mouseover(function() {
      if(!$("p").hasClass("content ")){ $("p").addClass("content ");    }});

//【鼠标移入，判断p元素是否含有content，不含有就添加content】
$("h2").mouseout(function() {
      if($("p").hasClass("content ")) {$("p").removeClass("content ");}});
//【鼠标移出，判断p元素是否含有content，含有就移除content】

2、内容及Value值操作

1.HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

语法：

$("div.left").html();   //【获取元素中的html代码】

或

`$("div.left").html("<div class='content'>…</div>");`   //【设置元素中的html代码】

示例：

$("div.left").html("");

【清空需要添加引号，如果html方法括号中不添加任何内容，是获取html代码】

2.标签内容操作

text()可以获取或设置元素的文本内容

语法：

$("div.left").text();  //【获取元素中的文本内容】

或

 $("div.left").text("<div class='content'>…</div>");   //【设置元素中的文本内容】

示例：

$("div.left"). text ("");

【清空需要添加引号，如果text方法括号中不添加任何内容，是获取文本内容】

html( ) 和text( )方法的区别：

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

3.属性值操作

val()可以获取或设置元素的value属性值

语法：

$(this).val();   //【获取元素的value属性值】

或

$(this).val(value);  //【设置元素的value属性值】

示例：

$( this). val ("");

【清空需要添加引号，如果val方法括号中不添加任何内容，是获取val值】

3、节点操作

1.创建节点元素

工厂函数$()用于获取或创建节点：

$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
例如：

var $newNode=$("<li></li>");

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

//【创建含文本与属性<li>元素节点】

2.元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中如：$(“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中如$newNode1.appendTo(“ul”);
prepend(content)	$(A).prepend(B)表示将B前置插入到A中如：$(“ul”). prepend($newNode1);
prependTo(content)	$(A).prependTo(B)表示将A前置插入到B中如：$newNode1. prependTo (“ul”);

3.元素外部插入同辈节点

语法	功能
after(content)	$(A).after(B)表示将B插入到A之后如：$(“ul”).after($newNode1);
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后如$newNode1.insertAfter(“ul”);
before(content)	$(A).before(B)表示将B插入至A之前如：$(“ul”).before($newNode1);
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前如：$newNode1.insertBefore(“ul”);

4.删除节点

jQuery提供了三种删除节点的方法：

a. remove( )：删除整个节点：

`$(selector).remove([expr]);`

//【remove( )删除之后不保留原有位置】

b. empty( )：清空节点内容：

$(selector).empty( );

//【empty( )只删除内容，但是保留原有位置】

c. detach()：删除整个节点，保留元素的绑定事件、附加的数据节点属性操作

5.替换节点

replaceWith( )和replaceAll( )用于替换某个节点：

示例：

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");

//replaceWith( )和replaceAll( )两者的关系类似于append( )和appendTo( )

6.复制节点

clone()用于复制某个节点：

语法：

$(selector).clone([includeEvents]) ;

includeEvents：参数ture或flase, true复制事件处理，flase时只能复制节点不能复制事件处理

示例：

$(".gameList li:eq(1)").click(function(){   $(this).clone(true).appendTo(".gameList");   })
//【复制了第2个li并且复制了事件处理】

$(".gameList li:eq(2)").click(function(){   $(this).clone(false).appendTo(".gameList");   })
//【复制了第3个li但是没有复制事件处理】