jquery 學習1
阿新 • • 發佈：2018-12-11
<!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>
<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>