第3章 jQuery中的DOM操作
DOM操作分为3个:DOM care(核心)、HTM_DOM和CSS_DOM,着重讲了jQuery中的DOM操作.
jQuey中的DOM操作:
1.查找节点:一般通过jQuery选择器来查找。例:
var $li=$("ul li:eq(1)"); //获取<ul>中的第2个<li>节点
查找节点属性:attr(),其方法的参数可以是一个或两个
var txt=$("p").attr("title"); //获取<p>元素的节点属性title
2.创建节点 例:创建一个<li>元素并添加到<ul>元素中
$("ul").append($("<li>xxxx</li>")); //append()把元素添加到内部
3.插入节点的方法
append(): 把一个元素添加到本元素的内部.(把a添加到A中),属于元素内部添加
appendTo(): 把A元素追加到B元素的集合中,属于外部添加,并且A元素里的所有内容会自动删除
prepend(): 把一个元素添加到本元素的前面.
prependTo(): 把A元素前置到B元素的集合中.
after(): 插入元素外部的后面
insertAfter(): 将元素插入到指定元素的后面.
before(): 插入元素外部之前
insertBefore(): 将元素插入到指定元素的前面.
//例: var $li1=$("<li title='乒乓球'>乒乓球</li>"); var $li2=$("<li title='羽毛球'>羽毛球</li>"); var $li3=$("<li title='其它'>其它</li>"); var $parent=$("ul"); var $twoli=$("ul li:eq(1)"); //获取<ul>中的第二个<li>节点 $parent.append($li1); //append()方法将创建的第一个<li>元素添加到父元素的最后面 $parent.prepend($li2); //prepend()方法将创建的第二个<li>元素添加到父元素的最前面 $li3.insertAfter($twoli);//insertAfter将创建的第三个<li>元素插入到获取<li>之后
4.删除节点:remove()和empty()
remove():用remove删除后,该节点所包含的所有后代节点将同时被删除
例: var $li=$("ul li:eq(1)").remove(); //获取第二个<li>元素节点之后,将它从网页中删除
注:删除只是从网页中删除,在jQuery对象中还存在.
empty():用于清空节点.
5.复制接点:clone().
$(function(){ $("ul li").click(function(){ //复制当前点击的节点,并追加到<ul>元素 $(this).clone().appendTo("ul"); //clone()里面传入true,表示复制元素的同时也复制所绑定的事件 }); });
6.替换节点:replaceWith()和replaceAll()
//例: 将网页中"<p>sssss</p>"替换成 $("p").replaceWith("<strong>xxxxx</strong>"); //replaceAll()的操作则和replaceWith()的相反
7.包裹节点: wrap(),wrapAll()和wrapInner()三个方法
wrap()和wrapAll()都属于元素外部包裹
8.设置和获取MTML,文本和值
html():获取或设置元素中的html内容
text():获取元素中的文本内容
var():获取元素的值
9.遍历节点的常用方法
children()方法: 获取子元素的集合
next(): 获取元素的下一个同辈元素
prev(): 获取前一个同辈元素
siblings(): 取得元素后面所有的同辈元素
closest(): 取得相邻的一个元素
10. CSS DOM操作
css(): 设置元素的属性样式
opacity(): 对透明度的设置
height(): 获取元素的高度
width(): 取得元素的高度值
offset(): 获取元素在浏览器边框的相对距离
position(): 获取相对旁边元素的距离
scrollTop()和scrollLeft(): 获取元素的滚动条距顶端和左侧的距离