首页 > js学习 > js基础知识 > jQuery中DOM节点的内容属性和简单操作
2016
12-16

jQuery中DOM节点的内容属性和简单操作

一.获取及设置元素内容

html() 获取元素中HTML 内容

html(value) 设置元素中HTML 内容

text() 获取元素中文本内容,会自动清理 html标签

text(value) 设置原生中文本内容,会自动转义 html标签

val() 获取表单中的文本内容

val(value) 设置表单中的文本内容

当我们使用 html()或 text()设置元素里的内容时,会清空原来的数据。而我们期望能够追加数据的话,需要先获取原本的数据。

$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据

如果想设置多个选项的选定状态,比如下拉列表、单选复选框等等,可以通过数组传递操作。

$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定

二.获取及设置元素属性

attr(key) 获取某个元素 key属性的属性值

attr(key, value) 设置某个元素 key属性的属性值

attr({key1:value2, key2:value2...}) 设置某个元素多个 key属性的属性值

attr(key, function (index, value) {}) 设置某个元素 key通过 fn 来设置,可以不传参数。可以只传一个参数 index,表示当前元素的索引(从 0开始)。也可以传递两个参数index、value,第二个参数表示属性原本的值。

我们也可以使用attr()来创建 id 属性,但强烈不建议这么做。这样会导致整个页面结构的混乱。当然也可以创建class属性,但addClass(class)语义更好,所以也不建议使用。

删除指定的属性,这个方法就不可以使用匿名函数,传递index和 value均无效。

$('div').removeAttr('title'); //删除指定的属性

三.节点简单操作

复制节点:$('body').append($('div').clone(true)); //复制一个节点添加到 HTML中

clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true参数的话,这个元素附带的事件处理行为也复制出来。

删除节点:$('div').remove(); //直接删除 div 元素

remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本身也可以带选择符参数的,比如:$('div').remove('#box');只删除id=box 的div。

保留事件的删除节点:$('div').detach(); //保留事件行为的删除

.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。

清空节点:$('div').empty(); //删除掉节点里的内容

替换节点:$('div').replaceWith('<span>节点</span>'); //将 div 替换成span元素

$('<span>节点</span>').replaceAll('div'); //同上

节点被替换后,所包含的事件行为就全部消失了。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。