jquery的DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布

guwen1991

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量498

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/oGuWen1/article/details/12650105

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="../../dreamweaver/jquery.min.js">  //引入jquery
</script>
<script>
$(document).ready(function(){

/**************内部后面添加*************/
$("ul").append("<li  value='chinese'>我是中国人</li>").append("<li>我是祖国是中国</li>");
$("<li>我深爱着我的祖国</li>").appendTo("ul");

/**************内部前面添加*************/
$("ul").prepend("<li>我是中国人2</li>").prepend("<li>我是祖国是中国2</li>");
$("<li>我深爱着我的祖国2</li>").prependTo("ul");
  
/**************外部之后添加*************/  
$("ul").after("<h1>在外部之后插入</h1>");
$("<h1>在外部之后插入2</h1>").insertAfter("ul");

/**************外部之后添加*************/  
$("ul").before("<h1>在外部之前插入3</h1>");
$("<h1>在外部之前插入4</h1>").insertBefore("ul");

/**************删除节点*************/  
//alert($("ul").html());
//$("ul").remove();
//$("body h1").remove("h1");//从集合中删除元素

/**************清空元素中子元素*************/ 
//$("ul").empty();

$("ul li:last").click(function(){
alert("我被点击了！");
});

/**************克隆元素*************/ 
//$("ul li:last").clone().appendTo("ul");
$("ul li:last").clone(true).appendTo("ul");


/**************替换元素*************/ 
//$("ul li:last").replaceWith("这是被替换之后的文字！");

/**************包裹元素*************/ 
//$("h1").wrap("<div style='background-color:red;'></div>")
//$("h1:lt(2)").wrapAll("<div style='background-color:red;'></div>")
//$("ul").wrapInner("<li style='background-color:red;'><li>");

/**************属性*************/ 
//$("h1").attr("style","background-color:red;");
//$("h1").attr({"style":"background-color:red;","class":"myclass"});
//$("h1").removeAttr("class");

/**************样式*************/ 
$("h1").addClass("a");
//$("h1").removeClass("a");
//$("h1").click(function(){
//   $("h1").toggleClass("b");
//});
//alert($("h1").hasClass("a"));


/**************设置和获取html、文本和值*************/ 
//alert($("ul").html());
//alert($("ul").text());
//alert($("ul li[value=chinese]").attr("value"));
//alert($("ul li[value]").val());

/**************设置css*************/ 
//alert($("#ss").css("background-color"));

/**************获取和设置高度、宽度*************/ 
//alert($("#ss").height());
//alert($("#ss").width());
//alert($("#ss").css("height"));
});

</script>
<style>
.a{ border:10px solid black;}
.b{ background-color:gray;}
</style>
</head>

<body>
<ul >
<li  id="ss" value="chinese2" style="background-color:#FF0000"></li>
</ul>
</body>
</html>