<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3 id="hh">id择器的</h3>
<h3 class="cls">类选择器的</h3>
<span>标签选择器的</span>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script>
//1:通过jquery的id选择器
//$("#hh").css("background-color","red");
$("#hh").css({ color: "black", background: "red" }); //多个属性进行操作
//2:通过类选择器改变背景
$(".cls").css("background-color","blue")
//3:通过标签选择器
$("span").css("background-color","bisque")
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script>
/*基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <*/
//第一个
//$("li:first").css("color","red");
//最后一个
//$("li:last").css("color","red");
//even 索引偶数
//$("li:even").css("color","red");
//odd 索引奇数
//$("li:odd").css("color","red");
//eq(index) 指定索引
//$("li:eq(3)").css("color","red");
//$("li:gt(2)").css("color","red"); //大于2的索引变色
$("li:lt(2)").css("color","red")
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script>
//页面加载完成
$(function(){
//document.getElementById("btn1").onclick(){}
//jquery的点击事件
$("#btn1").click(function(){
//
$("body div").css("background-color","red");
})
$("#btn2").click(function(){
//
$("body>div").css("background-color","red");
})
$("#btn3").click(function(){
//
$("#one+div").css("background-color","red");
})
$("#btn4").click(function(){
$("#one~span").css("background-color","red");
});
});
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择 body内的所有div元素." id="btn1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
