<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<body>
<p>========================css 选择器=================================</p>
<div>this is div1</div>
<div id="d2">this is div2</div>
<div class="d3">this is div3</div>
<div>this is div4</div>
<div>
<p>this is p1<span>===sp1==</span></p>
<p>this is p2<span>===sp2==</span></p>
<p>this is p3<span>===sp3==</span></p>
<p>this is p4<span>===sp4==</span></p>
</div>
<h1>h1 h1</h1>
<h2>h2 h2</h2>
<h3>h3 h3</h3>
<script>
$(document).ready(function () {
// alert(1111)
// $("#d2").css("color","red");
// $(".d3").css("color", "red");
// $("p>span").css("color", "red");
$("div p").css("color", "red");
$("p,h1,h2").css("color", "red");
});
</script>
<p>======================层级选择器测试=======================</p>
<!--<div id="d1">hello div</div>
<div>
<div id="d1">
<span id="sp1">div1-sp1</span>
<span>div1-sp2</span>
</div>
<p>hello p </p>
<div id="d2">
<span>div2-sp1</span>
<span>div2-sp2</span>
</div>
</div>-->
<script>
$(function () {
// alert($);
//alert(1111);
//var text = $("#d1").html();
//alert(text);
//var text2 = $("#d1").text();
//alert(text2);
//$("div span").css("background","red");
// $("#d1>span").css("background", "red");
// $("#sp1~span").css("color","red");
//$("#d1+p").css("background","red")
});
// $(document).ready(function () {
// alert(222);
// });
</script>
<p>==================过滤选择器测试========================</p>
<!--<ul>-->
<!--<li>1111111111</li>-->
<!--<li>2222222222</li>-->
<!--<li>3333333333</li>-->
<!--<li>4444444444</li>-->
<!--<li>5555555555</li>-->
<!--<li>6666666666</li>-->
<!--<li>7777777777</li>-->
<!--<li>8888888888</li>-->
<!--</ul>-->
<script>
$(function () {
// $("li:eq(1)").css("color", "red");
// $("li:gt(1)").css("background", "red");
// $("li:lt(2)").css("color","red");
// $("li:odd").css("color", "red");
// $("li:even").css("color", "red");
// $("li:first").css("color", "red");
// $("li:last").css("color", "red");
});
</script>
<p>======================属性选择器过滤=======================</p>
<!--<a href="http://www.baidu.com" title="百度">http://www.baidu.com</a><br>-->
<!--<a href="http://www.caidu.com">http://www.caidu.com</a><br>-->
<!--<a href="http://www.itcast.com">http://www.itcast.com</a><br>-->
<!--<a href="http://www.web.com">http://www.web.com</a><br>-->
<!--<a href="http://www.web.com.cn">http://www.web.com.cn</a><br>-->
<!--<a href="http://www.baidu1.com" title="百度">http://www.baidu1.com</a><br>-->
<!--<a href="http://www.baidu2.com" title="百度2">http://www.baidu2.com</a><br>-->
<!--<a href="http://www.baidu3.com" title="百度3">http://www.baidu3.com</a><br>-->
<script>
$(function () {
//$("a[href]").css("color","red");
// $("a[href='http://www.itcast.com']").css("color", "red")
// $("a[href^='http://www.web']").css("color", "red");
// $("a[href$='cn']").css("color", "red");
//$("a[href*='baidu']").css("color", "red");
//$("a[href*='baidu'][title='百度']").css("color", "red");
});
</script>
</body>
</html>jquery 选择器学习
猜你喜欢
转载自blog.csdn.net/qq_15652607/article/details/82812023
今日推荐
周排行