本帖最后由 PDH 于 2017-5-19 15:27 编辑
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>jQuery</title>
<script type="text/javascript" src="JS/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("*").css("font-size","20px");
$("div").addClass("one");
$("#div1").addClass("two");
$("#div2,#div3").addClass("three");
$("h3,p").css("color","red").attr("align","center");
$("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个，同时应用one和three类的元素共有"+$(".one[class=three]").length+"个。");
//$("#span1").html("div元素一共有"+$("body>div#div3").length+"个")
$("#span1").html("div元素一共有"+$("body span").length+"个")
//$("#div2+#div3").html("相邻元素选择器")
//$("#div2~#div3").html("相邻同辈所有元素选择器")
$("div>span").html("test"); //前面两句放开任意一句，下面的语句就不好使了
$("#span3").html("span3");
$("#span3").html("span3_test");
});
</script>
<style type="text/css">
.one{
border:1px solid #03F;
float:left;
margin:1em;
padding:1.5em;
width:106px;
}
.two{
background-color:#FC0;
}
.three{
background-color:#FCF;
}
</style>
</head>
<body>
<h3>这是标题中的文本</h3>
<p><span id="span1"></span></p>
<div id="div1">div元素：id属性为div1。<span></span></div>
<div id="div2">div元素：id属性为div2。<span></span></div>
<div id="div3">div元素：id属性为div3。<span id="span3"></span></div>
<div id="div3">div元素：id属性为div3。<span></span></div>
</body>
</html>
/*以上是测试代码,问题如下图
*/
|
|
收藏
淘帖
踩
