一.获取及设置元素内容
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'); //同上
节点被替换后,所包含的事件行为就全部消失了。