jQuery中操作详解与实践.pdfVIP

第三章Jquery中的dom操作

课程目标

1.掌握JQuery中dom模型的基本操作？

2.Dom模型中的常用方法？

本章知识点

一．掌握JQuery中dom模型的基本操作

添加：

append(jquery的对象);

描述：在元素后面追加。

prepend（jquery的对象）;

描述：用来将数据到内容的最前面。

after(jquery的对象)

描述：在元素的后面添加（添加一个兄弟节点）

before(jquery的对象)

描述：在元素的前面添加（添加一个兄弟节点）

wrap(对象)（每一个元素都添加——人人有份）

描述：给当前元素添加父节点（包裹节点）

wrapAll(对象)（所有元素共个）

描述：给所有匹配的元素添加一个父节点（包裹节点）

友情提示：数字转字符：String.fromCharCode(65)

删除：

remove()——删除当前元素

empty()——清空指定的内容

替换：

receWith(指定的新对象)——用来替换指定的对象。

：

clone（）——当前对象（克隆）

属性的操作

attr(“属性名”)——获取属性的值

attr(“属性名”,”属性值”)——设置或修改属性的值。

removeAttr(“属性名”)——用于删除属性。

特殊属性class的操作方式：

addClass(“class样式名”);——在当前元素追加新的样式

removeClass(“class样式名”)——移除指定的class样式

toggleClass(“class样式名”)——切换指定的样式

hasClass(“class样式名”)——判断是否存在指定的样式

二．DOM模型中的常用方法

设置和获取HTML,文本和值

Html()方法

$(“p”).html()//获取p元素中的html内容

$(“p”).html(“strong我是人/strong”)//设置p元素的html内容

Text()方法

$(“p”).text()//获取p元素的文本内容

$(“p”).text(“我是人”)//设置p元素的文本内容

Val()方法

$(“#txt”).val()//获取id为txt的元素的值

$(“#txt”).val(“username”)//设置id为txt的元素的值

遍历节点

Children()方法

用于获取匹配元素的所有子元素的个数

Next()方法

用于取得匹配元素后面紧邻的同辈元素

Prev()方法

用于取得匹配元素前面紧邻的同辈元素

Siblings()方法

用于取得匹配元素前后所有的同辈元素

Closet()方法

用来取得的匹配元素

CSSDOM操作方法

Css()方法获取元素的样式属性

Opacity属性设置元素的样式的

Height()方法获取元素的高度

Width()方法获取元素的宽度

Offset()方法获取元素在当前视窗的相对偏移

Position()获取元素相对于的一个position样式属性设置为relative或者absolute

的祖父节点的相对偏移

scrollTop()方法和scrollLeft()方法获取元素的滚动条距顶端的距离和距左端的距离