                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎 (一)—樣式篇

使用:eq()選擇不同元素時排版混亂問題

第80行$(".aaron:eq(1)").css("border", "3px groove blue");?? 其中eq選擇1或者0會把下排有些元素擠下去。不知為啥？

<!DOCTYPE?html>
<html>

<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<link?rel="stylesheet"?href="imooc.css"?type="text/css">
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
????<h2>基本篩選器</h2>
????<h3>:first/:last/:even/:odd</h3>
????<div?class="left">
????????<div?class="div">
????????????<p>div:first</p>
????????????<p>:even</p>
????????</div>
????????<div?class="div">
????????????<p>:odd</p>
????????</div>
????????<div?class="div">
????????????<p>:even</p>
????????</div>
????????<div?class="div">
????????????<p>:odd</p>
????????</div>
????????<div?class="div">
????????????<p>:even</p>
????????</div>
????????<div?class="div">
????????????<p>div:last</p>
????????????<p>:odd</p>
????????</div>
????</div>
????<script?type="text/javascript">
????//找到第一個div
????$(".div:first").css("color",?"#CD00CD");
????</script>
????
????<script?type="text/javascript">
????//找到最后一個div
????$(".div:last").css("color",?"#CD00CD");
????</script>
????
????<script?type="text/javascript">
????//:even?選擇所引值為偶數的元素，從?0?開始計數
????$(".div:even").css("border",?"3px?groove?red");
????</script>
????
????<script?type="text/javascript">
????//:odd?選擇所引值為奇數的元素，從?0?開始計數
????$(".div:odd").css("border",?"3px?groove?blue");
????</script>
????
????
????<h3>:eq/:gt/:lt</h3>
????<div?class="left">
????????<div?class="aaron">
????????????<p>:lt(3)</p>
????????</div>
????????<div?class="aaron">
????????????<p>:lt(3)</p>
????????</div>
????????<div?class="aaron">
????????????<p>:eq(3)</p>
????????</div>
????????<div?class="aaron">
????????</div>
????????<div?class="aaron">
????????????<p>:gt(3)</p>
????????</div>
????????<div?class="aaron">
????????????<p>:gt(3)</p>
????????</div>
????</div>
????<script?type="text/javascript">
????//:eq
????//選著單個
????$(".aaron:eq(1)").css("border",?"3px?groove?blue");
????</script>
????
????<script?type="text/javascript">
????//:gt?選擇匹配集合中所有索引值大于給定index參數的元素
????$(".aaron:gt(3)").css("border",?"3px?groove?red");
????</script>
????
?????<script?type="text/javascript">
????//:lt?選擇匹配集合中所有索引值小于給定index參數的元素
????//與:gt相反
????$(".aaron:lt(3)").css("color",?"#CD00CD");
????</script>
????
????<h3>:not</h3>
????<div?class="left">
????????<div>
????????????<input?type="checkbox"?name="a"?/>
????????????<p>Aaron</p>
????????</div>
????????<div>
????????????<input?type="checkbox"?name="b"?/>
????????????<p>慕課</p>
????????</div>
????????<div>
????????????<input?type="checkbox"?name="c"?checked="checked"?/>
????????????<p>其他</p>
????????</div>
????</div>
????<script?type="text/javascript">
????????//:not?選擇所有元素去除不匹配給定的選擇器的元素
????????//選取所有input中,沒有checked屬性的p元素，賦予顏色
????????$("input:not(:checked)+p").css("background-color",?"#CD00CD");
????</script>
</body>

</html>