jquery中DOM操作

empty()并不是删除节点，而是清空节点，能清空元素中的所有后代节点

例：$(“ul li:eq(1)”).empty();//获取第2个

5、复制节点clone()方法，应用例如鼠标拖动商品并将其放入购物车

例：$(“ul li”).click(function(){

$(this).clone().appendTo(“ul”);//复制当前单击的节点，并将它追加到

元素中

})

在clone()方法中传递一个参数true，表示复制元素同时复制元素中所绑定的事件6、替换节点——replaceWith()和replaceAll()。作用相同，只是replaceAll()颠倒了replaceWith()

操作。

例：$(“p”).replaceWith(“你最不喜欢的水果是？”)

$(“你最不喜欢的水果是？”).replaceAll(“p”)

Ps:如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会被替换的元素一起消失，需要在新元素上重新绑定事件。

7、包裹节点该方法对于需要在文档中插入额外的结构化标记非常有用，而且它也不会破

坏原始文档的语义。

例：$(“strong”).wrap(“”);//用标签吧元素包裹起来

结果:你最喜欢的水果是？

wrap()和wrapAll()区别：

你最喜欢的水果是？

你最喜欢的水果是？

如果使用wrap()方法，结果是：你最喜欢的水果是？

你最喜欢的水果是？

如果使用wrapAll()方法，结果是

你最喜欢的水果是？

你最喜欢的水果是？

wrapInner()方法将每一个匹配元素的子内容用其他结构化的标记包裹起来

例：$(“strong”).wrapInner(“”);

结果：你最喜欢的水果是？

8、属性操作

获取属性：

attr(name)——取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性值。如果没有相应属性，则返回undefined

参数：name (string):属性名称



代码：$(“img”).attr(“src”)

结果：test.jpg

添加属性：

attr(key,fn)——提供一个函数，由函数计算的值作为属性的值

参数：key(string):属性名称

Fn(Function):返回的函数范围：当前元素。参数：当前元素的索引值

代码：$(“img”).attr(“title”,function(){return this.src})

结果：

attr(key,value)——为所有匹配的元素设置一个属性值

参数：key(string):属性名称

value(Object):属性值

代码：$(“img”).attr(“src”,”test.jpg”)

结果：

attr(properties)——将一个“名/值”形式的对象设置为所有匹配元素的属性。这是

一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的

class属性，必须使用”className”作为属性名，或者可以直接使用.addClass(class)

和.removeClass(class).

代码：$("img").attr({ src: "test.jpg", alt: "Test Image" });

结果：

删除属性：

removeAttr(name)——删除属性

9、样式操作

获取和设置样式：var p_class=$(“p”).attr(“class”);//获取

元素的class

$(“p”).attr(“class”,”high”);//设置

元素的class为”high”

追加样式：$(“p”).addClass(“another”)

移除样式：$(“p”).removeClass(“high”);//移除样式

$(“p”).removeClass(“high another”);//以空格方式删除多个class名

$(“p”).removeClass();//不带参数时，将class的值全部删掉。

切换样式：$(“toggleBtn”).toggle(function(){ //toggle()：交替一组动作

//显示元素代码3

},function(){

//隐藏元素代码4

})

toggle()方法此处的作用是交替执行代码3和代码4。如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。

toggleClass()方法控制样式的重复切换。如果类名存在则删除它，如果类名不存在则添加它。

判断是否含有某个样式：hasClass()判断元素中是否含有某个class，如果有，则返回true，否则返回false

10.设置和获取html、文本和值

1.html()方法用来读取或设置某个元素中的html内容。

例：var p_html=$(“p”).html();//获取

元素的html代码

$(“p”).html(“你最喜欢的水果是？”);//设置

元素的html代码

2.text()方法用来读取或者设置某个元素中的文本内容

例：var p_text=$(“p”).text();//获取

元素的文本内容

$(“p”).text(“你最喜欢的水果是？”);//设置

元素的文本内容

3.val()方法用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它

都可以返回元素的值。如果值为多选，则返回一个包含所有选择的值得数组。类似js中的value属性

11.遍历节点

1.children()方法该方法用于匹配元素的子元素集合

2.next()方法该方法用于取得匹配元素后面紧邻的同辈元素

3.prev()方法该方法用于取得匹配元素前面紧邻的同辈元素

4.siblings()方法用于匹配元素前后所有的同辈元素

5.closest()方法用来取得最近的匹配元素

6.还有find()、filter()、nextAll()、prevAll()、parent()和parents()等遍历方法

12 CSS-DOM操作

1.css()方法：获取元素的样式属性；也可以设置某个元素的单个样式或同时设置多个样

式。

例：$(“p”).css(“fontSize”:”30px”,”backgroundColor”:”#888888”)

$(“p”).css({fontsize:”30px”, backgroundColor:”#888888”})

Ps：不带引号时，则用驼峰式写法。带引号时，既可以写fontSize，又可以写font-size

$(“p”).css(“fontsize”,”30px”)

2.对透明度的设置：直接使用opacity属性，jquery已经处理好兼容性问题

例：$(“p”).css(“opcatity”,”0.5”)//将

元素的透明度设置为半透明

3.获取某个元素的height属性

$(“#div1”).css(“height”);

$(“p”).height()//获取

元素的高度值

$(“p”).height(100)//设置

元素的高度值为100px

$(“p”).height(“10em”)//设置

元素的高度值为10em

注意：height()方法设置元素的高度时，传递的值是一个数字，则默认单位为px，如果用其他单位，则必须传递一个字符串。

Css()方法获取的高度值与央视的设置有关，可能会得到”auto”,也可能得到”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式设置无关，且不带单位

4.width()及width属性同上

5.offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含两个属性，即top

和left，只对可见元素有效

var offset=$(“p”).offset() ; //获取

元素的offset()

var left=offset.left; //获取左偏移

var top=offset.top; //获取右偏移

6.position()方法：获取元素相对于最近的一个position样式属性设置为relative或者

absolute的祖父节点的相对偏移，返回的对象也包括两个属性，即top和left

7.scrollTop()方法和scrollLeft()方法：分别获取元素的滚动条距顶端的距离和距左侧的距

离，这两个方法也可以指定一个参数，控制元素的滚动条滚动到指定位置