第三章.jquery的DOM操作

第三章.jquery的DOM操作

1.节点操作

1.1查找节点

查找节点元素 $("ul li:eq(1)")

查找节点属性 $p.attr("title")

1.2创建节点

创建元素节点 var $li_1=$("<li></li>") $("ul").append($li_1);

创建文本节点 var $li_1=$("<li>香蕉</li>") $("ul").append($li_1);

创建属性节点 var $li_1=$("<li title='香蕉'>香蕉</li>") $("ul").append($li_1);

1.3插入节点

append() 向元素 内部 后面 追加内容C

appendTo() 追加内容C到元素内部后面

prepend() 向元素 内部 前面 追加内容C

prependTo() 追加内容C到元素内部前面

after() 在元素之后插入内容

insertAfter()插入内容在元素之后

before() 在元素之前插入内容

insertBefore()插入内容在元素之前

1.4删除节点

remove() 删除节点元素，并可恢复

empty() 清空节点内容

1.5复制节点

clone() $(this).clone().appendTo("ul")

1.6替换节点

replaceWith() 匹配元素替换成指定的内容

replaceAll() 用指定的内容替换匹配元素

1.7包裹节点

wrap() 将所有匹配的元素用指定的标签元素来 单独的包括起来

wrapAll() 将匹配的元素用指定的一个标签元素来 整个的包括起来

wrapInner() 将匹配的元素 内容 用指定的标签元素来包括起来

1.8遍历节点

children()取得第一子集元素集合

next() 取得后面紧接着的同辈元素

prev() 取得前面紧接着的同辈元素

siblings() 取得前后所有的同辈元素

closest() 取得最近的匹配元素

其他find(); filter(); nextAll(); prevAll(); parent(); parents();

2.属性操作

2.1获取和设置属性

attr() 1个参数获取，2个参数为设置

2.2删除属性

removeAttr()

3.样式操作

3.1获取和设置class

attr("class") 1个参数获取，2个参数为设置

3.2追加class

addClass("another")

3.3移除class

removeClass("another") 不带参数为全部移除

3.4切换class

toggleClass("another") 不停地追加和移除样式

3.5判断是否含有某class

hasClass("another")或则is("another")

3.6具体css操作

css("color");获取颜色， css("color"，"red");设置颜色

height();获取高度

width(); 获取宽度

offset();获取在当前视窗的相对偏移

position();获取相对于最近一个的position的偏移

scrollTop()和scroll() 获取滚动条距离

4.内容操作(html,文本和值)

4.1获取和设置html

html();有参数为设置

4.2获取和设置文本

text();

4.3获取和设置值

val();