jquery DOM

   attr查找属性节点 参数可以是两个也可以是一个 当一个参数时则是要查询的属性名

两个参数是找到并改变属性

var $para =$("p")      //获取p节点
var p_txt = $para.attr("title") 获取p元素节点的属性
alert(p_xtx)      打印title

 

创建 添加元素节点append

$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

//一个button按钮每当点击这个button按钮时在元素P后加Hello world！

 prepend（）像每个匹配元素前加内容

after（）像每个匹配元素后加内容

$(".btn1").click(function(){
  $("p").prepend("<b>Hello world!</b>");
});
//前边加内容
$(".btn1").click(function(){
  $("p").after（"<b>Hello world!</b>");
});
//后边加内容

append和prepend是在匹配元素内插入内容也就是说他们在同一个div里

after和before是在元素的外面插入内容 成为兄弟节点也就是 没在一个div里但是是同一级的

 

css中也有一个在前边加内容 :before 选择器在被选元素的内容前面插入内容。

p:before
{
content:"高帆：";
}

删除节点

 remove() 方法移除被选元素，包括所有文本和子节点。

$("button").click(function(){
  $("p").remove();
});
移除所有 <p> 元素

 也就是使用这个方法它的所有后代节点都被删除

detach() 方法移除被选元素，所有文本和子节点 这个方法会保留 jQuery 对象中的匹配的元素

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同

$("button").click(function(){
  $("p").detach();
});
同样也是删除P

 empyt严格来说时清空所有节点包括元素后代节点

$(".btn1").click(function(){
  $("p").empty();
});