第八章

第八章

使用jQuery操作 DOM

1.jQuery中的DOM操作

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"});

2.追加和移除样式
追加样式
$(selector).addClass(class);
或
$(selector).addClass(class1 class2 … classN);

例：$("h2").mouseover(function() {
       $("p").addClass("content border");
    });

移除样式
$(selector).removeClass("class") ;
或
$(selector).removeClass("class1 class2 … classN ") ;

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

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

$(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 ");
	   }
   });

2.内容操作

1.HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
$("div.left").html();
或
$("div.left").html("<div class='content'>…</div>");

2.标签内容操作
text()可以获取或设置元素的文本内容
$("div.left").text();
或
$("div.left").text("<div class='content'>…</div>");

区别：
html( )	            无参数	                         用于获取第一个匹配元素的HTML内容或文本内容
html(content)	    content为元素的HTML内容         用于设置所有匹配元素的HTML内容或文本内容
text( )	            无参数	                         用于获取所有匹配元素的文本内容
text(content)	    content为元素的文本内容	         用于设置所有匹配元素的文本内容

3.属性值操作
val()可以获取或设置元素的value属性值
$(this).val();
或
$(this).val(value);

3.属性值操作

1.创建节点元素
工厂函数$()用于获取或创建节点
$(selector)                      通过选择器获取节点
$(element)                       把DOM节点转化成jQuery节点
$(html)                          使用HTML字符串创建jQuery节点

例：var $newNode=$("<li></li>");
    var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
    var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</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");

元素外部插入同辈节点
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");

3.删除节点
remove()                          删除整个节点
例：$(selector).remove([expr]);
empty()                           清空节点内容
例：$(selector).empty();
detach()                          删除整个节点，保留元素的绑定事件、附加的数据

4.替换节点
replaceWith()和replaceAll()用于替换某个节点
例：var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
    $(".gameList li:eq(2)").replaceWith($newNode1);

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

5.复制节点
clone()用于复制某个节点
$(selector).clone([includeEvents]) ;

例：$(".gameList li:eq(1)").click(function(){
       $(this).clone(true).appendTo(".gameList");
    })

6.获取与设置元素属性
attr()用来获取与设置元素属性
$(selector).attr([name]) ;
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

例：$(".contain img").attr({width:"200",height:"80"});

7.删除元素属性
removeAttr()用来删除元素的属性
$(selector).removeAttr(name) ;

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

4.节点遍历

1.遍历子元素
children()方法可以用来获取元素的所有子元素
$(selector).children([expr]);

例：var $section =$("section").children();
    alert($section.length);                    //获取<section>的子元素，但不包含子元素的子元素

2.遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
next([expr])                     用于获取紧邻匹配元素之后的元素
例：$("li:eq(1)").next().addClass("orange");
prev([expr])                     用于获取紧邻匹配元素之前的元素
例：$("li:eq(1)").prev().addClass("orange");
slibings([expr])                 用于获取位于匹配元素前面和后面的所有同辈元素
例：$("li:eq(1)").siblings().addClass("orange");

3.遍历前辈元素
parent()                         获取元素的父级元素
例：$("li:eq(1)").parent().addClass("orange");
parents()                        元素元素的祖先元素
例：$("li:eq(1)").parents().addClass("orange");

4.其他遍历方法
each( )                          规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element)) ;

例：$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

end( )                           结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

例：$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
    $(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
    $(".gameList li:last").css("border","none");

5.CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度等的样式操作方法

css()                        设置或返回匹配元素的样式属性
height([value])              设置或返回匹配元素的高度
width([value])               设置或返回匹配元素的宽度 
offset([value])              返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )              返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为                                  relative、absolute或fixed的元素
position( )                  返回第一个匹配元素相对于父元素的位置
scrollLeft([position])       参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])        参数可选。设置或返回匹配元素相对滚动条顶