jquery 操作DOM

DOM操作分为三类：

(1) DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

(2)  HTML-DOM：用于处理HTML文档，如document.forms

(3) CSS-DOM：用于操作CSS，如element.style.color="green"

1.1    jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

n  样式操作

n  内容及Value值操作

n  节点操作

n  节点属性操作

n  节点遍历

Ø  设置单个属性

css(name,value) ;

或  Ø  同时设置多个属性

css({name:value, name:value,name:value…}) ;

示例；$(this).css("border","5pxsolid #f5f5f5");

或   $(this).css({"border":"5px solid#f5f5f5","opacity":"0.5"});

Ø  获取属性值     css(name)

Ø  追加样式

$(selector).addClass(class);

或   $(selector).addClass(class1 class2 … classN);//多个样式之间是空格

示例:

$("h2").mouseover(function() {

    $("p").addClass("content border");

});

Ø  移除样式

$(selector).removeClass("class") ;

或   $(selector).removeClass("class1class2 … classN ") ;

示例:

$("h2").mouseout(function() {

       $("p").removeClass("text content");

});

Ø  切换样式

toggleClass()

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

语法:

$(selector).toggleClass(class) ;

示例:

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

    $("p").toggleClass("content  border");

});

 

Ø  判断是否含指定的样式

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

语法:

$(selector). hasClass(class);

示例:

$("h2").mouseover(function() {

   if(!$("p").hasClass("content ")){

         $("p").addClass("content");

         }

});

$("h2").mouseout(function() {

      if($("p").hasClass("content")) {

         $("p").removeClass("content");

    }

});

u  内容操作

HTML代码操作

标签内容操作

属性值操作

Ø  获取元素中的html代码

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

Ø  设置元素中的html代码

$("div.left").html("<divclass='content'>…</div>");

u  标签内容操作

Ø  获取元素中的文本内容

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

Ø  设置元素中的文本内容

$("div.left").text("<divclass='content'>…</div>");

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

html()设置可以包含文本和标签

text() 设置只能是文本

u  属性值操作

Ø  获取元素的value属性值

$(this).val();

Ø  设置元素的value属性值

$(this).val(value);

u  节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

Ø  创建节点

var uu="<ul><li>美女</li></ul>"; $("#love").html(uu);

Ø  元素内部插入子节点

   i.   append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

   ii.    prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

Ø  元素外部插入同辈节点

after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

Ø  删除节点

remove()：删除整个节点  $(selector).remove([expr]);

empty()：清空节点内容  $(selector).empty();

Ø  替换节点

replaceWith()

示例:

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

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

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

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

参数ture或flase, true复制事件处理，flase时反之

Ø  属性操作

获取与设置元素属性

删除元素属性

attr()用来获取与设置元素属性

获取属性值

$(selector).attr([name]) ;

设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例:

$(".containimg").attr({width:"200",height:"80"});

删除元素属性

removeAttr()用来删除元素的属性

语法:$(selector).removeAttr(name) ;

示例  删除元素的alt属性

$(".contain img").removeAttr("alt");

节点遍历

children([expr])只考虑子元素而不考虑所有后代元素

each

示例

查找DIV中的每个子元素。

HTML 代码:

<p>Hello</p><div><span>HelloAgain</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

描述:

在每个div中查找 .selected 的类。

HTML 代码:

<div><span>Hello</span><pclass="selected">Hello Again</p><p>AndAgain</p></div>

jQuery 代码:

$("div").children(".selected")

结果:

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

next([expr])返回后面那个紧邻的同辈元素

示例

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<p>Hello</p><p>HelloAgain</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, ]