JQuery 操作DOM元素

//使用attr()方法控制元素的属性

使用attr("属性名");是获取该属性的值。使用attr("属性名",属性值);是设置属性的值

 

//html(),text()方法控制元素的文本

/*包含样式*/使用html();时是获取元素的html文本(包括样式：如果文本是斜体的，获取到的也是斜体的),使用html("<b>哈哈哈</b>");时是将元素的html文本属性设置为粗体的哈哈哈

/*不包含样式*/使用text();时是获取元素的文本(不包括样式：如果文本是斜体的，获取到的则是正体的 没有任何样式的),使用text("<b>哈哈哈</b>");时是将元素的文本设置为<b>哈哈哈</b>

 

//css()控制样式

$("#divid").css({"background":"red","color":"green"});//把divid元素的背景色设置为red 前景色设置为green

 

//removeAttr(),removeClass()移除属性或样式

$("#divid").removeAttr("属性名"); //移除指定的属性名  $("#divid").removeClass("样式名");//移除指定的样式名

 

//append()方法向元素追加内容  ~~参数也可以是一个返回字符串的函数 例如$("body").append(myfunction());

var myhtml = " <div id = testdiv>哈哈哈 <div>";

$("body").append(myhtml);//向body中追加一个div 文本是哈哈哈

 

//appendTo()方法 将内容追加到指定的元素

$(".red").appendTo("div");//将class属性为red的元素追加到div中，默认追加在最后

 

//before(),after()在元素的前后插入内容

var myhtml = "<span> 哈哈哈</span>";

$("#myid").before(myhtml);//在id为myid的元素前面插入一个span标签

$("#myid").after(myhtml);//在id为myid的元素后面插入一个span标签

 

//clone()方法复制元素 ：包括 节点 文本 属性

$("body").append($("#myid").clone()); //把id为myid的元素复制一份加到body中

 

//replaceWith()  replaceAll() 方法替换

$("要替换的元素对象").replaceWith("替换的文本"); //var myhtml = "<span id = myid>哈哈哈</span>";  $(".green").replaceWith(myhtml); 把myhtml替换到class属性为green 的元素的地方

$("替换的文本").replaceAll("要替换的元素对象");//var myhtml="<span id = myid>哈哈哈</span>";  $(myhtml).replaceAll(".green"); 把myhtml替换到class属性为green的元素的地方

 

//wrap()  wrapInner()  包含

$("span").wrap("<div></div>"); //将span标签包含在div标签中

$("span").wrapInner("<b></b>");//将span的文本变成粗体

 

//each()方法遍历元素

$("span").each(function(index)

{

 if(index==1)

{

 $(this).attr("color","red");

}

}); //循环遍历span元素,遍历到第二个的时候把元素的前景色设为red

 

//remove() empty()删除元素

$("span").remove();//删除span元素的子元素和span本身

$("span").empty();//只删除span元素的子元素而不删除span本身