JQuery 操作DOM

属性操作

html()

它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML样。

$("div").html("<p>标题</p>");

text()

它可以设置和获取起始标签和结束标签中的文本。跟 dom 尾性 innerText一样。

$("div").text("123");

val()

它可以设置和获取表单项的 value 属性值。跟 dom 属性value一样。

批量设置复选按钮的选中状态

//选中checkbox1、checkbox3
$(":checkbox").val(["checkbox1", "checkbox3"]);

attr()

设置和获取属性的值

不推荐操作checked、readOnly、selected、disabled等

//访问
alert($(":checkbox:first").attr("name"));
//设置
$(":checkbox:first").attr("name", "c1");

未选中返回undifined

alert($(":checkbox:last").attr("checked")); //undefined

选中返回checked

还可以设置自定义的属性

$(":checkbox:first").attr("uid", "12345");

prop()

设置和获取属性的值

是为了解决 attr()返回undefined的情况

只推荐操作checked、readOnly、selected、disabled等

Dom 增删改

内部插入

• appendTo()

  a.appendTo(b);

  将a添加到b的最后一个子元素后面

• prependTo()

  a.prependTo(b);

  将a添加到b所有子元素前面

外部插入

• insertAfter()

  a.insertAfter(b)

  得到ba

• insertBefore()

  a.insertBefore(b)

  得到ab

替换

• replaceWith()

  a.replaceWith(b)

  将a替换为b

• replaceAll()

  a.replaceAll(b)

  用a替换所有b

删除

• remove()

  a.remove()

  删除a标签

• empty()

  a.empty()

  清空标签a中的内容