首页 > 代码库 > JQuery 操作DOM元素
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本身
JQuery 操作DOM元素