jQuery入门基础（二）：对元素的操作

最新推荐文章于 2024-05-06 00:06:17 发布

weixin_30265103

最新推荐文章于 2024-05-06 00:06:17 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/Thelma/p/5822883.html

版权

//属性操作

html() //获取和设置html内容

text() //获取和设置文本内容

$(function(){
   var $strHtml=$("#divA").html();//获取divA的html内容
   $("#strHtml").html($strHtml);//把获取到的html的内容赋值给“＃strHtml”

})

//操作样式

css()

addClass()

$(function(){
   $("#divA").css("background-color","blue");
   $("#divB").addClass("blue");  
})

//追加内容

$(html).append(content) //找到上级属性

$(html).appendTo(content) //追加到指定元素

$(html).appendBefore(content) //追加到指定元素前

$(html).appendAfter(content) //追加到指定元素后

e.g
$(function(){
   var $content="这是追加的内容";
   $("p").append($content);  
})

// 复制元素

clone()

$(function(){
   $("body").append($("div").clone()) 
})

//替换元素

$(selector).replaceWith()

$(function(){
   $("#divA").replaceWith("替换的内容") 
})

//包裹元素

wrap("")//用于包裹元素本身

wrapInner("")//用于包裹元素中的内容

$(function(){
   $("p").wrap("<div></div>") 
})

//遍历元素_对同一标记的元素实行统一操作

$(selector).each(callback/index) //index从0开始

$(function(){
   $("div").each(function(index){
       if(index==2) {
            $(this).addClass("red")
}
}) 
})

//删除元素

remove() //删除被选元素及其子元素

empty() //删除被选元素的子元素

$(function(){
   $("#rem").click(function(){
        $("#divA").remove();
}) 
})

转载于:https://www.cnblogs.com/Thelma/p/5822883.html