jQuery選擇器與一些常用的方法
1、jQuery是JavaScript裏面一些函數的庫，下載的地址爲jquery.com
2、jQuery中的常規選擇器
1) jQuery中有的選擇器 class類 元素類 id類 羣組選擇器 後代選擇器 通配
選擇器（*）
2) jQuery中的選擇器與CSS中的選擇器非常相似 只是有些許的不同
3) class類與元素類都可以選擇多個進行設置
4) id類只能選擇一個 若一個頁面中出現多個id值時 只會選擇第一個 不會
選擇多個（一個頁面中的標準格式是一個id值只可以出現一次）
5) length屬性可以返回獲得的元素的長度 在獲得id的長度時 無論頁面中
有多少個id值 都只會獲得一個
6) eq()方法與get()方法的區別
eq()返回的是一個jQuery對象 通過()中的數字決定獲得的是第幾個元素
get()返回的是html對象 通過()中的數字決定獲得的是第幾個元素
7) 羣組選擇器 可以一起設置多個元素的相同的屬性 可以用過元素名
class值 id值今次那個設置 多個名稱之間用","隔開
8) 後代選擇器 可以通過元素之間的父級子級關係對元素進行進行設置
9) 通配選擇器（*）可以選擇頁面中的所有的代碼從html開始選擇
10) 可以給class id值前面加上元素的前綴 也可以實現多個class進行設置
3、JQuery中的屬性選擇器
1) 元素[元素含有的屬性]
$('a[title]').css('color','red');
此代碼表示a標籤含有title屬性 改變它的字體顏色
2) 元素[元素含有的屬性=屬性的值]
$('a[title=num1]').css('color','red');
此代碼表示a標籤含有title屬性 而且title的值與裏面的值相等 改變
它的字體顏色
3) 元素[元素屬性!=屬性的值]
$('a[title!=num1]').css('color','red');
此代碼表示a標籤裏不含有title屬性 或者title屬性的值不是num1
改變它的字體的顏色
4、jQuery中的一些常用的方法
1) next()、prev()方法可以找到指定元素下面、上面的同級的第一個元素
()內部是要找的元素名
2) nextAll()、prevAll()方法可以找到指定元素下面、上面的同級的所有
元素()內部是要找的元素名
3) siblings()方法可以獲得上面的所有元素 也可以獲得下面的所有元素
相當於nextAll()、prevAll()方法一起使用
4) first()方法 可以獲得第一個元素
5) last()方法 可以獲得最後一個元素
6) not()方法 可以獲得不是裏面的屬性的其它的元素
()內部可以填一些id值 class值
7) parent()方法 獲得元素的父級的元素
8) 元素:hidden;
此屬性可以設置隱藏的元素 display:none;
9) 元素:visible;
此屬性可以設置顯示的元素 display:block;
10) first-child屬性 獲得每一個元素的第一個元素對象
11) last-child屬性 獲得每一個元素的最後一個元素對象
12) only-child屬性 獲得只有一個子元素的對象
13) nth-child()方法 可以獲得()內指定的條件的元素
索引值從1開始
even 獲得是偶數位的元素
odd 獲得是奇數位的元素
()內部可以直接寫數字 表示要找到的對象的位置
可以填入"數字n" 如"2n"表示找到是2的倍數的元素
()內部可以寫"2n+1"表示的含義是獲得2的倍數的
後一個元素
14) is()方法 用來進行判斷 內部可以傳入選擇器 DOM對象 jQuery對
象 function()函數
15) hasClass()方法 用來進行判斷 內部傳入class的名字 不能加"."
判斷是否有元素有這個class值
16) slice()方法 獲取整個代碼中的元素值
從第一參數~第二個參數之間的元素
參數可以是負值 負值表示從後面開始
17) end()方法 獲取上一個元素 與parent()方法不同
它可以是同級的元素
18) contents()方法 可以獲得元素中的文本
children()方法 只能獲得元素中的標籤
不能獲得元素中的文本
19) filter()方法 靈活性特別高 可以在裏面傳入各種選擇器
的值 之間用","隔開 也可以在裏面傳入函數
對條件進行限制 使其更爲準確
代碼如下：
HTML代碼：
<title>常規選擇器</title>
<link rel="stylesheet" href="jQ.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQ.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li class="red">2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
jQuery代碼：
$(function(){
$('li').filter(function(){
return $(this).attr('class') == 'red';
}).css('background','pink');
$('li').filter('li:last,li:first').css('background','yellow');
});
運行結果：
