使用jQuery操作DOM

DOM操作分类
DOM操作分为三类：
DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

 

jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作
样式操作
内容及Value值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作

设置和获取样式值
css(name,value) ;
或
css({name:value, name:value,name:value…}) ；

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

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

 

切换样式
toggleClass()
模拟了addClass()与removeClass()实现样式切换的过程
$(selector).toggleClass(class) ;

 

 

判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
$(selector). hasClass(class);

 

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

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

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

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

 

节点操作
jQuery中节点操作
查找节点（前面章节已讲）
创建节点
插入节点
删除节点
替换节点
复制节点

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

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

 

插入节点2-1    元素内部插入子节点
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");

删除节点
jQuery提供了三种删除节点的方法
remove()：删除整个节点         $(selector).remove([expr]);
empty()：清空节点内容           $(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据

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

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

 

复制节点       clone()用于复制某个节点
   $(selector).clone([includeEvents]) ;
$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

属性操作
获取与设置元素属性
删除元素属性

获取与设置元素属性        attr()用来获取与设置元素属性
$(selector).attr([name]) ;
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
$(".contain img").attr({width:"200",height:"80"});

删除元素属性        removeAttr()用来删除元素的属性
$(selector).removeAttr(name) ;
$(".contain img").removeAttr("alt");

 

节点遍历
遍历子元素
遍历同辈元素
遍历前辈元素
其他遍历方法

遍历子元素              children()方法可以用来获取元素的所有子元素
$(selector).children([expr]); 
var $section =$("section").children();
alert($section.length);

遍历同辈元素             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");

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

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

其他遍历方法    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");

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