您的位置:首页 > Web前端 > JQuery

jquery学习(三)DOM

2017-01-25 20:09 141 查看

1.获取设置内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值


不加参数就返回相应的内容,也可以加入相应参数,设置内容。

我们还可以设置回调函数,回调函数由两个参数:被选元素列表中当前元素的下标,以及原始值。

$('div').html(function (i, old) {
alert(i + old);
});


因为$(‘div’)可能选择多个,下标就是指这个数组的下标。

2.获取设置属性

(1)获取属性值

$(selector).attr(attribute)


(2)设置属性值

$(selector).attr(attribute,value)


(3)设置多个属性值

$(selector).attr({attribute:value, attribute:value ...})


(4)使用函数来设置属性值

$(selector).attr(attribute,function(index,oldvalue))


3.获取设置 CSS 类

(1)addClass()

向被选元素添加一个或多个类


$("button").click(function(){
$("#div1").addClass("important blue");
});


(2)removeClass()

从被选元素删除一个或多个类


(3)toggleClass()

对被选元素进行添加/删除类的切换操作


4.获取设置css样式

(1)获取css属性

$(selector).css(name)
如:$("p").css("color");


如果想获得多个属性值,可以传入数组:

$("div").css(["background-color", "color"]);


(2)设置css属性

$(selector).css(name,value)


(3)使用函数来设置 CSS 属性

$(selector).css(name,function(index,value))


(4)设置多个css属性

$(selector).css({property:value, property:value, ...})


5.dom元素操作

(1)append

$(selector).append(content)
在被选元素的结尾(仍然在内部)插入指定内容。
content:要插入的内容(可包含 HTML 标签)。

$(selector).append(function(index,html))
使用函数在指定元素的结尾插入内容
index - 可选。接收选择器的 index 位置。
html - 可选。接收选择器的当前 HTML。


(2)prepend

在被选元素的开头(仍位于内部)插入指定内容,和append刚好相反。


(3)appendTo

$(content).appendTo(selector)
在被选元素尾部(仍位于内部)追加指定内容,注意前面是内容,后面是被选元素。


(4)prependTo

$(content).prependTo(selector)
在被选元素头部(仍位于内部)追加指定内容。


(5)after

$(selector).after(content)
在被选元素后插入指定的内容。

使用函数来插入内容
$(selector).after(function(index))


(6)before

在被选元素前插入指定的内容,用法和after一样。


(7)insertAfter

$(content).insertAfter(selector)
在被选元素之后插入 HTML 标记或已有的元素。


(8)insertBefore

$(content).insertBefore(selector)
在被选元素之前插入 HTML 标记或已有的元素。


(9)remove

$(selector).remove()
移除被选元素,包括所有文本和子节点。会返回remove的元素。


(10)empty

$(selector).empty()
从被选元素移除所有内容,包括所有文本和子节点。和remove的区别:empty只是清空内容。


(11)detach

$(selector).detach()
移除被选元素,包括所有文本和子节点。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。


(12)wrapInner

$(selector).wrapInner(wrapper)
使用指定的 HTML 内容或元素
4000
,来包裹每个被选元素中的所有内容 (inner HTML)。


(13)wrap

$(selector).wrap(wrapper)
把每个被选元素放置在指定的 HTML 内容或元素中。


(14)wrapAll

$(selector).wrapAll(wrapper)
在指定的 HTML 内容或元素中放置所有被选的元素。


(15)unwrap

$(selector).unwrap()
删除被选元素的父元素。


(16)replaceWith

$(selector).replaceWith(content)
用指定的 HTML 内容或元素替换被选元素。
$(selector).replaceWith(function())


(17)replaceAll

$(content).replaceAll(selector)
replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。


(18)clone

$(selector).clone(includeEvents)
生成被选元素的副本,包含子节点、文本和属性。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: