本文通过HTML和JavaScript的实例操作，展示了如何获取和修改页面元素的内容及样式，并使用jQuery简化了DOM操作。同时，介绍了HTML中div和ul的嵌套使用，以及如何遍历和操作这些元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert($("p").eq(0).html());//获取第一个P中的内容,
//alert($("p").get(0).innerHTML);//获取第一个P中的内容,This is just test
//alert($("p").eq(0).css("color"));//取得第一个p的CSS color属性值 red
//alert($("p").get(0).css("color"));//这样是取不到的，因为get(num)返回的是个html对象
//alert($("p").get(0).style.color);//这样可以取得html对象的color
//alert($($("p").get(0)).css("color"));//用$()将$("p").get(0)出来的html对象转化成jquery对象，再用jquery的CSS方法
//alert($("p").length);//取得所有p的个数
//alert($("#ul_1 ul").length);//取得ul的个数，返回3
alert($("#ul_1 ul li").length);//取得ul内li的个数 返回12
})
</script>
</head>
<body>
<p style="color:red"> This is just a test.</p> <p> So is this</p><p> This is just a test 3.</p>
<div id="ul_1">
<ul>
<li>这里是li1</li>
<li>这里是li2</li>
<li>这里是li3</li>
<li>这里是li4</li>
</ul>
<ul>
<li>这里是li1</li>
<li>这里是li2</li>
<li>这里是li3</li>
<li>这里是li4</li>
</ul>
<ul>
<li>这里是li1</li>
<li>这里是li2</li>
<li>这里是li3</li>
<li>这里是li4</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert($("p").eq(0).html());//获取第一个P中的内容,
//alert($("p").get(0).innerHTML);//获取第一个P中的内容,This is just test
//alert($("p").eq(0).css("color"));//取得第一个p的CSS color属性值 red
//alert($("p").get(0).css("color"));//这样是取不到的，因为get(num)返回的是个html对象
//alert($("p").get(0).style.color);//这样可以取得html对象的color
//alert($($("p").get(0)).css("color"));//用$()将$("p").get(0)出来的html对象转化成jquery对象，再用jquery的CSS方法
//alert($("p").length);//取得所有p的个数
//alert($("#ul_1 ul").length);//取得ul的个数，返回3
alert($("#ul_1 ul li").length);//取得ul内li的个数 返回12
})
</script>
</head>
<body>
<p style="color:red"> This is just a test.</p> <p> So is this</p><p> This is just a test 3.</p>
<div id="ul_1">
<ul>
<li>这里是li1</li>
<li>这里是li2</li>
<li>这里是li3</li>
<li>这里是li4</li>
</ul>
<ul>
<li>这里是li1</li>
<li>这里是li2</li>
<li>这里是li3</li>
<li>这里是li4</li>
</ul>
<ul>
<li>这里是li1</li>
<li>这里是li2</li>
<li>这里是li3</li>
<li>这里是li4</li>
</ul>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
