jquery篩選器,jquery 篩選

jQuery基本篩選選擇器實例代碼

本文實例為大家分享了jQuery基本篩選選擇器的具體代碼，供大家參考，具體內容如下

公司主營業務：成都網站設計、網站制作、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。創新互聯建站是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創新互聯建站推出紫云免費做網站回饋大家。

!DOCTYPE

html

head

Jquery有哪些選擇器？

其實jQuery選擇器就只有一種$()函數或jQuery()函數，$只是jQuery的縮寫。$("")的引號中，以點開頭，說明是選擇Class。以井號開始，說明是選擇ID，直接寫入標簽，則證明是選擇指定的元素。最主要就是篩選器。比如：我有個需求，在表格中每隔一行設置一個背景色。怎么辦？就可以這樣$("tr:odd").css("background-color","#f00"); 篩選器，就是在選擇器之后加冒號。odd是選擇選擇器中索引為奇數(也就是偶數行)。其實更多的篩選器我這也沒辦法說清楚，你可以下載jQuery的API幫助文檔，里面的目錄中有專門的篩選器介紹，所有的篩選器和選擇器在里面都有介紹

Jquery有哪些選擇器

選擇器是jQuery最基礎的東西，本文中列舉的選擇器基本上囊括了所有的jQuery選擇器，也許各位通過這篇文章能夠加深對jQuery選擇器的理解，它們本身用法就非常簡單，我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的概括對所有jQuery選擇器進行了介紹，也列舉出了一些需要注意和區分的地方。

一、基本選擇器

1.?id選擇器（指定id元素）

將id="one"的元素背景色設置為黑色。（id選擇器返單個元素）

$(document).ready(function?()?{

$('#one').css('background',?'#000');

});

2.?class選擇器（遍歷css類元素）

將class="cube"的元素背景色設為黑色

$(document).ready(function?()?{

$('.cube').css('background',?'#000');

});

3.?element選擇器（遍歷html元素）

將p元素的文字大小設置為12px

$(document).ready(function?()?{

$('p').css('font-size',?'12px');

});

4.?*?選擇器（遍歷所有元素）

$(document).ready(function?()?{

//?遍歷form下的所有元素，將字體顏色設置為紅色

$('form?*').css('color',?'#FF0000');

});

5.?并列選擇器

$(document).ready(function?()?{

//?將p元素和div元素的margin設為0

$('p,?div').css('margin',?'0');

});

二、?層次選擇器

1.?parent??child（直系子元素）

$(document).ready(function?()?{

//?選取div下的第一代span元素，將字體顏色設為紅色

$('div??span').css('color',?'#FF0000');

});

下面的代碼，只有第一個span會變色，第二個span不屬于div的一代子元素，顏色保持不變。

div

span123/span

span456/span

/div

2.?prev?+?next（下一個兄弟元素，等同于next()方法）

$(document).ready(function?()?{

//?選取class為item的下一個div兄弟元素

$('.item?+?div').css('color',?'#FF0000');

//?等價代碼

//$('.item').next('div').css('color',?'#FF0000');

});

下面的代碼，只有123和789會變色

p?class="item"/p

div123/div

div456/div

span?class="item"/span

div789/div

3.?prev?~?siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function?()?{

//?選取class為inside之后的所有div兄弟元素

$('.inside?~?div').css('color',?'#FF0000');

//?等價代碼

//$('.inside').nextAll('div').css('color',?'#FF0000');

});

下面的代碼，G2和G4會變色

div?class="inside"G1/div

divG2/div

spanG3/span

divG4/div

三、?過濾選擇器

1.?基本過濾選擇器

——1.1?:first和:last（取第一個元素或最后一個元素）

$(document).ready(function?()?{

$('span:first').css('color',?'#FF0000');

$('span:last').css('color',?'#FF0000');

});

下面的代碼，G1（first元素）和G3（last元素）會變色

spanG1/span

spanG2/span

spanG3/span

——1.2?:not（取非元素）

$(document).ready(function?()?{

$('div:not(.wrap)').css('color',?'#FF0000');

});

下面的代碼，G1會變色

divG1/div

div?class="wrap"G2/div

但是，請注意下面的代碼：

div

div?class="wrap"G2/div

/div

當G1所在div和G2所在div是父子關系時，G1和G2都會變色。

——1.3?:even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$(document).ready(function?()?{

$('tr:even').css('background',?'#EEE');?//?偶數行顏色

$('tr:odd').css('background',?'#DADADA');?//?奇數行顏色

});

A、C行顏色#EEE（第一行的索引為0），B、D行顏色#DADADA

table?width="200"?cellpadding="0"?cellspacing="0"

tbody

trtdA/td/tr

trtdB/td/tr

trtdC/td/tr

trtdD/td/tr

/tbody

/table

——1.4?:eq(x)?（取指定索引的元素）

$(document).ready(function?()?{

$('tr:eq(2)').css('background',?'#FF0000');

});

更改第三行的背景色，在上面的代碼中C的背景會變色。

——1.5?:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）

$(document).ready(function?()?{

$('ul?li:gt(2)').css('color',?'#FF0000');

$('ul?li:lt(2)').css('color',?'#0000FF');

});

L4和L5會是紅色，L1和L2會是藍色，L3是默認顏色

liL1/li

liL2/li

liL3/li

liL4/li

liL5/li

/ul

——1.6?:header（取H1~H6標題元素）

$(document).ready(function?()?{

$(':header').css('background',?'#EFEFEF');

});

下面的代碼，H1~H6的背景色都會變

h1H1/h1

h2H2/h2

h3H3/h3

h4H4/h4

h5H5/h5

h6H6/h6

2.?內容過濾選擇器

——2.1?:contains(text)（取包含text文本的元素）

$(document).ready(function?()?{

//?dd元素中包含"jQuery"文本的會變色

$('dd:contains("jQuery")').css('color',?'#FF0000');

});

下面的代碼，第一個dd會變色

dt技術/dt

ddjQuery,?.NET,?CLR/dd

dtSEO/dt

dd關鍵字排名/dd

dt其他/dt

dd/dd

/dl

——2.2?:empty（取不包含子元素或文本為空的元素）

$(document).ready(function?()?{

$('dd:empty').html('沒有內容');

});

上面第三個dd會顯示"沒有內容"文本

——2.3?:has(selector)（取選擇器匹配的元素）

$(document).ready(function?()?{

//?為包含span元素的div添加邊框

$('div:has(span)').css('border',?'1px?solid?#000');

});

即使span不是div的直系子元素，也會生效

div

spanB/span

/h2

/div

——2.4?:parent（取包含子元素或文本的元素）

$(document).ready(function?()?{

$('ol?li:parent').css('border',?'1px?solid?#000');

});

下面的代碼，A和D所在的li會有邊框

li/li

liA/li

li/li

liD/li

/ol

3.?可見性過濾選擇器

——3.1?:hidden（取不可見的元素）

jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或input?type="hidden"?/的元素，而不匹配visibility:?hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”并且不占空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。

參照：

下面的代碼，先彈出"hello"對話框，然后hid-1會顯示，hid-2仍然是不可見的。

html?xmlns=""?

head?runat="server"

title/title

style?type="text/css"

div

{

margin:?10px;

width:?200px;

height:?40px;

border:?1px?solid?#FF0000;

display:block;

}

.hid-1

{

display:?none;

}

.hid-2

{

visibility:?hidden;

}

/style

script?type="text/javascript"?src="js/jquery.min.js"/script

script?type="text/javascript"

$(document).ready(function()?{

$('div:hidden').show(500);

alert($('input:hidden').val());

});

/script

/head

body

div?class="hid-1"display:?none/div

div?class="hid-2"visibility:?hidden/div

input?type="hidden"?value="hello"/

/body

/html

——3.2?:visible（取可見的元素）

下面的代碼，最后一個div會有背景色

script?type="text/javascript"

$(document).ready(function()?{

$('div:visible').css('background',?'#EEADBB');

});

/script

div?class="hid-1"display:?none/div

div?class="hid-2"visibility:?hidden/div

input?type="hidden"?value="hello"/

div

jQuery選擇器大全

/div

4.?屬性過濾選擇器

——4.1?[attribute]（取擁有attribute屬性的元素）

下面的代碼，最后一個a標簽沒有title屬性，所以它仍然會帶下劃線

script?type="text/javascript"

$(document).ready(function()?{

$('a[title]').css('text-decoration',?'none');

});

/script???????

lia?href="#"?title="DOM對象和jQuery對象"?class="item"DOM對象和jQuery對象/a/li

lia?href="#"?title="jQuery選擇器大全"?class="item-selected"jQuery選擇器大全/a/li

lia?href="#"?title="jQuery事件大全"?class="item"jQuery事件大全/a/li

lia?href="#"?title="基于jQuery的插件開發"?class="item"基于jQuery的插件開發/a/li

lia?href="#"?title="Wordpress??jQuery"?class="item"Wordpress??jQuery/a/li

lia?href="#"?class="item"其他/a/li

/ul

——4.2?[attribute?=?value]和[attribute?!=?value]（取attribute屬性值等于value或不等于value的元素）

分別為class="item"和class!=item的a標簽指定文字顏色

文章題目：jquery篩選器,jquery 篩選
本文URL：http://m.kartarina.com/article14/dseecge.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、電子商務、做網站、、網站設計公司、網站收錄

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容