jQuery基础03-文档操作

1.通用 属性操作

1.对HTML代码的操作

jQuery 对象.html([content]);

如果存在参数content，表示给选中的元素赋上新的内容content；如果不存在参数content，表示获取被选中的元素内容。

2.对文本内容的操作

jQuery 对象.text([content]);

如果存在参数content，表示给选中元素赋上新的文本内容content；如果不存在参数content，表示获取被选中元素的文本内容。

可以发现htnl(content)会将内容渲染成html/css样式，然后再赋值给元素；而text(content)只是简单的将内容以文本形式赋值给元素。html()会将渲染的样式和文本内容一起返回；而text()只返回文本内容。

3.对value值的操作

jQuery 对象.val([v])

如果存在参数v，表示将选中元素的value值设置为v；如果不存在参数v；表示获取被选中元素的value值。

4.对属性的操作

1.获取或设置属性值

jQuery主要通过attr()和removeAttr()方法来对节点的属性进行操作。

$(A).attr("name"),表示获取A节点的name属性值

$(A)attr("name","张三"),表示将A节点的name属性值设置为value，即张三

$(A).attr({width:"50",height:"100"}),表示将A节点的width属性值设置为50，将height属性值设置为100。

2.删除属性值

$(A).removeAttr("alt"),表示删除A节点的alt属性。

2.元素节点操作

1.查找节点

2.创建节点

$() 称为工厂函数，可以用于获取节点、转化节点或创建节点；

$(选择器) 通过选择器获取节点；

$(DOM 节点) 把DOM节点转化成jQuery节点；

$(HTML 字符串) 使用HTML字符串创建jQuery节点。因此，创建jQuery节点主要是通过$(HTML 字符串)实现。

3.插入节点

$node 节点创建完毕后，就可以插入DOM文档中。

       1.内部插入

$(A).append(B) 将B追加到A中；

$(A).appendTo(B) 将A追加到B中；

$(A).prepend(B) 将B前置插入A中；

$(A).prependTo(B) 将A前置插入到B中

       2.外部插入

$(A).after(B) 将B插入A之后；

$(A).insertAfter(B) 将A插入B之后；

$(A).before(B) 将B插入A之前；

$(A).insertBefore(B) 将A插入B之前。

4.替换节点

$(B).replaceAll(A) 用B节点替换A节点。

5.删除节点

$(A)remove() 彻底删除A节点，包括所有子节点及文本内容；

$(A)detach() 将A节点从页面中删除，但仍然保留着A节点附加的数据、绑定事件；

$(A)empty() 清空A节点，包括所有子节点。只清除节点内容，并不是真正地删除节点。

6.复制节点

$(A).clone([flag])

可选参数flag为布尔值为true或false，为true时表示会复制节点的所有事件处理方法；为false时反之。默认为false。

3.常见CSS操作

CSS-DOM 操作方法

方法	描述
css()	获取和设置style对象的各种属性。$("p").css("color","red");$("p").css({"color":"red","font-size":"30px"});
height()	获取和设置元素高度。
width()	获取和设置元素宽度。
offset()	获取元素在当前视窗的相对偏移，返回的对象包括两个属性，即top和left。
position()	获取元素相对于最近的一个(position样式属性设置为relative或者absolute的)祖父节点的相对偏移，返回的对象包括两个属性，即top和left。
scrollTop()	获取元素的滚动条距顶端的距离。
scrollLef()	获取元素的滚动条距左侧的距离。