大話jQuery–選擇器(1)

技術小胖子發表於2017-11-08
jQuery
大破砂鍋問到底的學習方式其實未嘗不可！
這裡拿jquery來說，我們學習中，應該想jquery的作者給我們提供了什麼，已經為什麼提供它們，存在必定有其存在的原因。
今天的內容是jquery裡的”偽類”:
選擇器這部分的內容對於那些瞭解css選擇器的人員來說應該不陌生。

Selector我們把他翻譯成了選擇器，還有作選擇符。
無非做的工作就是查詢，篩選我們的操作物件，這點有點像SQL裡的那個select.

在眾多的資料記錄篩選出我們想要的記錄條目這就是資料庫的select;
xml裡還有個xQuery;
用在css裡面的篩選出我們想要施加樣式的元素裡就是css的選擇器;
而jquery裡面用來從眾多元素中篩選出我們需要的物件的這就是jquery裡的Seletor.

只有找到我們需要的元素，我們才能為他新增行為或效果。

好了，這裡我們和css的作比較來學習容易些。
1.*這個css裡的全域性匹配符，jquery裡也有，匹配所有。
css裡: *{我們的樣式}
jquery裡: $(“*”).方法之類的
2.標籤選擇器
li{….}

$(“li”)
3.id選擇器
#myDiv{…..}

$(“#myDiv”)

4.類選擇器
.myClass{….}
$(“.myClass”)
5.上下文選擇器(還有的叫情景選擇器,是包含後代的關係)
div p{….} div裡面的所有段落
$(“div p”)
6.逗號的
div,p,span,myClass{…}
$(“div,p,span,myClass”)

7.混合以上的用法

好了有了上面這些用法，我們就可以選擇出我們要操作的物件，他們就會返回一個集合。但是和普通的陣列不同，這個jquery物件允許我們呼叫一些jquery定義的方法。

但是隻有上面這些還是不夠的，我們可能不想要整個集合，只想要集合的一部分，這該這麼辦呢?

好在jquery給我們提供了一些偽類可以滿足我們 要求:
1.:first
只要集合中的第一個元素。
如:jquery(“ul li:first”).

例子:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gbk” />
<title>Selector</title>
<script type=”text/javascript” src=”../jquery.js”></script>
<style type=”text/css”>

  ul{margin:0;padding:0;list-style:none;}

  li{margin:5px 0;}
</style>
</head>

<body>
<ul>

  <li>選單1</li>

        <li>選單2</li>

        <li>選單3</li>
</ul>
<ul>

  <li>選單4</li>

        <li>選單5</li>

        <li>選單6</li>
</ul>
<script type=”text/javascript”>

$(“ul li:first”).css({border:”1px solid #F00″});
</script>
</body>
</html>


在這個例子中，如果我們只是:
$(“ul li”).css({border:”1px solid #f00″});
那麼得到的集合如下
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
<li>選單6</li>
這樣這6個li都會有紅色邊線。
但是如果只要第一個(索引為0)那麼用
$(“ul li:first”)
同樣也有最後一個元素
$(“ul li:last”)
注意偽類不要放錯了位置，$(“ul:first li”)和$(“ul li:first”)含義是不一樣的。
2.好了，拿要是我想要第1-n中的任意一個怎麼辦，好了如下:
$(“ul li:eq(0)”)這個和$(“ul li:first”)是等同的。
$(“ul li:eq(3)”)這是第4個元素，索引是3

3.那要是我想要索引是0,2,4,6,8…這樣的怎麼辦呢。
:even就是找出滿足偶數關係的
$(“ul li:even”),有了這個，做交替表格顏色應該不難了吧。
同樣奇數的是:odd

4.同樣照成滿足一個大於小於關係的也是可以的
:lt(2)就是索引<2,也就是0，1
:gt(3)就是>3,就是4,5,….
 本文轉自 xcf007 51CTO部落格，原文連結：http://blog.51cto.com/xcf007/127171，如需轉載請自行聯絡原作者


相關文章