一、学习目的
使用jQuery操作CSS样式
使用jQuery操作网页元素
使用jQuery操作文本与属性值内容
使用jQuery操作DOM节点
使用jQuery遍历DOM节点
使用jQuery操作CSS-DOM
二、jQuery中的DOM操作
DOM操作分类:
DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
HTML-DOM:用于处理HTML文档,如document.forms
CSS-DOM:用于操作CSS,如element.style.color="green"
jQuery中的DOM操作(元素和节点的含义大同小异,之后再做细分):
样式操作:
使用css()为指定的元素设置样式值或获取样式值。
示例 :$(this).css("border","5px solid #f5f5f5");
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); 红色部分是设置透明度,取值是0~1。
addclass()追加样式,removeclass()移除样式。两者的中间取值在“”中间加样式名字。
toggleclass()模拟了addclass()和removeclass()实现了样式切换的过程。
hasclass()方法用来判断是否包含指定的样式,中间的参数和addclass()一样的。
内容及Value值操作:
html代码操作:html()可以对HTML代码进行操作,类似于JS中的innerHTML,这是会自动解析html代码的。
标签内容操作:text()可以获取或者设置元素的文本内容,这是不会自动解析html代码的。
属性值操作:val()可以获取或者设置元素的value属性值。
节点操作(查找节点、创建节点、插入节点、删除节点、替换节点、复制节点):
工厂函数$()用于获取或创建节点。 var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
元素内部插入子节点:
append():$(A).append(B)表示将B追加到A中(B在A的后面)。
prepend():$(A). prepend (B)表示将B前置插入到A中(B在A的前面)。
元素外部插入同辈节点:
after():$(A).after (B)表示将B插入到A之后。
before():$(A). before (B)表示将B插入至A之前。
remove():删除整个节点。 $(selector).remove([expr]);
empty():删除节点里面的内容。 $(selector).empty();
detach():删除整个节点,但是保留元素的绑定事件、附加的事件。(这个一般用的比较少)
replacewith():用于替换某个节点 。 $(".gameList li:eq(2)").replaceWith($newNode1);
replaceall():用于替换某个节点。 $($newNode1).replaceAll(".gameList li:eq(2)");
clone():用于复制节点,参数true或false,true复制事件处理,false时反之即复制节点之前的事件是否在复制后的节点上生效。
节点属性操作:
attr():用来获取与设置节点属性。 $(".contain img").attr({width:"200",height:"80"});
removeattr():用来删除元素的属性。 $(".contain img").removeAttr("alt");
节点遍历:
children():方法可以用来获取元素的所有的子元素。
next():用于获取紧邻匹配元素之后的元素(同辈元素。
prev():用于获取紧邻匹配元素之前的元素(同辈元素)。
slibings():用于获取匹配元素前后的所有同辈元素。
parent():获取元素的父级元素。
parents():获取元素的祖先级元素。
each():规定为每个匹配元素规定运行的函数。
end():结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
$(".gameListli").first().css("background","#b8e7f9").end().last().css("background","#d3f4b5");
class值为gameListli节点的最后一个子节点变背景颜色。
CSS-DOM操作:
css():设置或返回匹配元素的样式属性。
height([value]):设置或返回匹配元素的高度。
width([value]):设置或返回匹配元素的宽度。
offset([value]):返回以像素为单位的top和left坐标。仅对可见元素有效。
offsetParent( ):返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为 relative、absolute或fixed的元素。
position( ):返回第一个匹配元素相对于父元素的位置。
scrollLeft([position]):参数可选。设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop([position]):参数可选。设置或返回匹配元素相对滚动条顶。
三、总结
这是对于jQuery操作DOM对象方法的一系列补充,使得对于节点的获取和设置更加的多样,这样就可以做一个好看、交互性强的页面。还是那句话,多练。