jquery隱藏過濾選擇器_jquery中的選擇器和過濾器的區別

① 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>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
2.prev+next（下一個兄弟元素，等同於next()方法）
$(document).ready(function(){
//選取class為item的下一個div兄弟元素
$('.item+div').css('color','#FF0000');
//等價代碼
//$('.item').next('div').css('color','#FF0000');
});
下面的代碼，只有123和789會變色
<pclass="item"></p>
<div>123</div>
<div>456</div>
<spanclass="item"></span>
<div>789</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會變色
<divclass="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

三、過濾選擇器
1.基本過濾選擇器
——1.1:first和:last（取第一個元素或最後一個元素）
$(document).ready(function(){
$('span:first').css('color','#FF0000');
$('span:last').css('color','#FF0000');
});
下面的代碼，G1（first元素）和G3（last元素）會變色
<span>G1</span>
<span>G2</span>
<span>G3</span>

——1.2:not（取非元素）
$(document).ready(function(){
$('div:not(.wrap)').css('color','#FF0000');
});
下面的代碼，G1會變色
<div>G1</div>
<divclass="wrap">G2</div>

但是，請注意下面的代碼：
<div>
G1
<divclass="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
<tablewidth="200"cellpadding="0"cellspacing="0">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</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(){
$('ulli:gt(2)').css('color','#FF0000');
$('ulli:lt(2)').css('color','#0000FF');
});
L4和L5會是紅色，L1和L2會是藍色，L3是默認顏色
<ul>
<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>
</ul>

——1.6:header（取H1~H6標題元素）
$(document).ready(function(){
$(':header').css('background','#EFEFEF');
});
下面的代碼，H1~H6的背景色都會變
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

2.內容過濾選擇器
——2.1:contains(text)（取包含text文本的元素）
$(document).ready(function(){
//dd元素中包含"jQuery"文本的會變色
$('dd:contains("jQuery")').css('color','#FF0000');
});
下面的代碼，第一個dd會變色
<dl>
<dt>技術</dt>
<dd>jQuery,.NET,CLR</dd>
<dt>SEO</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','1pxsolid#000');
});
即使span不是div的直系子元素，也會生效
<div>
<h2>
A
<span>B</span>
</h2>
</div>
——2.4:parent（取包含子元素或文本的元素）
$(document).ready(function(){
$('olli:parent').css('border','1pxsolid#000');
});
下面的代碼，A和D所在的li會有邊框
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>

3.可見性過濾選擇器
——3.1:hidden（取不可見的元素）
jQuery至1.3.2之後的:hidden選擇器僅匹配display:none或<inputtype="hidden"/>的元素，而不匹配visibility:hidden或opacity:0的元素。這也意味著hidden只匹配那些「隱藏的」並且不佔空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。
參照：http://www.jquerysdk.com/api/hidden-selector
下面的代碼，先彈出"hello"對話框，然後hid-1會顯示，hid-2仍然是不可見的。
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
div
{
margin:10px;
width:200px;
height:40px;
border:1pxsolid#FF0000;
display:block;
}
.hid-1
{
display:none;
}
.hid-2
{
visibility:hidden;
}
</style>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('div:hidden').show(500);
alert($('input:hidden').val());
});
</script>
</head>
<body>
<divclass="hid-1">display:none</div>
<divclass="hid-2">visibility:hidden</div>
<inputtype="hidden"value="hello"/>
</body>
</html>
——3.2:visible（取可見的元素）
下面的代碼，最後一個div會有背景色
<scripttype="text/javascript">
$(document).ready(function(){
$('div:visible').css('background','#EEADBB');
});
</script>
<divclass="hid-1">display:none</div>
<divclass="hid-2">visibility:hidden</div>
<inputtype="hidden"value="hello"/>
<div>
jQuery選擇器大全
</div>
4.屬性過濾選擇器
——4.1[attribute]（取擁有attribute屬性的元素）
下面的代碼，最後一個a標簽沒有title屬性，所以它仍然會帶下劃線
<scripttype="text/javascript">
$(document).ready(function(){
$('a[title]').css('text-decoration','none');
});
</script>
<ul>
<li><ahref="#"title="DOM對象和jQuery對象"class="item">DOM對象和jQuery對象</a></li>
<li><ahref="#"title="jQuery選擇器大全"class="item-selected">jQuery選擇器大全</a></li>
<li><ahref="#"title="jQuery事件大全"class="item">jQuery事件大全</a></li>
<li><ahref="#"title="基於jQuery的插件開發"class="item">基於jQuery的插件開發</a></li>
<li><ahref="#"title="Wordpress&jQuery"class="item">Wordpress&jQuery</a></li>
<li><ahref="#"class="item">其他</a></li>
</ul>
——4.2[attribute=value]和[attribute!=value]（取attribute屬性值等於value或不等於value的元素）
分別為class="item"和class!=item的a標簽指定文字顏色

② jquery中有哪幾種類型的選擇器

$("#myELement") 選擇id值等於myElement的元素，id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素
$("div") 選擇所有的div標簽元素，返回div元素數組
$(".myClass") 選擇使用myClass類的css的所有元素
$("*") 選擇文檔中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass")

層疊選擇器：
$("form input") 選擇所有的form元素中的input元素
$("#main > *") 選擇id值為main的所有的子元素
$("label + input") 選擇所有的label元素的下一個input元素節點，經測試選擇器返回的是label標簽後面直接跟一個input標簽的所有input標簽元素
$("#prev ~ div") 同胞選擇器，該選擇器返回的為id為prev的標簽元素的所有的屬於同一個父元素的div標簽

基本過濾選擇器：
$("tr:first") 選擇所有tr元素的第一個
$("tr:last") 選擇所有tr元素的最後一個
$("input:not(:checked) + span")

過濾掉：checked的選擇器的所有的input元素

$("tr:even") 選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始）

$("tr:odd") 選擇所有的tr元素的第1，3，5... ...個元素
$("td:eq(2)") 選擇所有的td元素中序號為2的那個td元素
$("td:gt(4)") 選擇td元素中序號大於4的所有td元素
$("td:ll(4)") 選擇td元素中序號小於4的所有的td元素
$(":header")
$("div:animated")
內容過濾選擇器：

$("div:contains('John')") 選擇所有div中含有John文本的元素
$("td:empty") 選擇所有的為空（也不包括文本節點）的td元素的數組
$("div:has(p)") 選擇所有含有p標簽的div元素
$("td:parent") 選擇所有的以td為父節點的元素數組
可視化過濾選擇器：

$("div:hidden") 選擇所有的被hidden的div元素
$("div:visible") 選擇所有的可視化的div元素
屬性過濾選擇器：

$("div[id]") 選擇所有含有id屬性的div元素
$("input[name='newsletter']") 選擇所有的name屬性等於'newsletter'的input元素

$("input[name!='newsletter']") 選擇所有的name屬性不等於'newsletter'的input元素

$("input[name^='news']") 選擇所有的name屬性以'news'開頭的input元素
$("input[name$='news']") 選擇所有的name屬性以'news'結尾的input元素
$("input[name*='man']") 選擇所有的name屬性包含'news'的input元素

$("input[id][name$='man']") 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

子元素過濾選擇器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一個子節點的數組
$("div span:last-child") 返回所有的div元素的最後一個節點的數組
$("div button:only-child") 返回所有的div中只有唯一一個子節點的所有子節點的數組

表單元素選擇器：

$(":input") 選擇所有的表單輸入元素，包括input, textarea, select 和 button

$(":text") 選擇所有的text input元素
$(":password") 選擇所有的password input元素
$(":radio") 選擇所有的radio input元素
$(":checkbox") 選擇所有的checkbox input元素
$(":submit") 選擇所有的submit input元素
$(":image") 選擇所有的image input元素
$(":reset") 選擇所有的reset input元素
$(":button") 選擇所有的button input元素
$(":file") 選擇所有的file input元素
$(":hidden") 選擇所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器：

$(":enabled") 選擇所有的可操作的表單元素
$(":disabled") 選擇所有的不可操作的表單元素
$(":checked") 選擇所有的被checked的表單元素
$("select option:selected") 選擇所有的select 的子元素中被selected的元素

選取一個 name 為」S_03_22″的input text框的上一個td的text值
$(」input[@ name =S_03_22]「).parent().prev().text()

名字以」S_」開始，並且不是以」_R」結尾的
$(」input[@ name ^='S_']「).not(」[@ name $='_R']「)

一個名為 radio_01的radio所選的值
$(」input[@ name =radio_01][@checked]「).val();

$("A B") 查找A元素下面的所有子節點，包括非直接子節點
$("A>B") 查找A元素下面的直接子節點
$("A+B") 查找A元素後面的兄弟節點，包括非直接子節點
$("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點

③ jquery子元素過濾選擇器使用示例

復制代碼
代碼如下:
:nth-child('索引值')//獲取指定元素下的某個子元素的位置，索引從1開始；
//偶數行
//$('li:nth-child(even)').addClass('class1');
//奇數行
//$('li:nth-child(odd)').addClass('class1');
//第一行
//$('li:nth-child(1)').addClass('class1');
//$('li:first-child').addClass('class1');
//只有1個子元素
$('li:only-child').addClass('class1');

④ jquery 的過濾器函數怎麼寫

JS代碼

1.DOM對象與JQuery包裝集

1.通過document.getElementById()，document.getElementsByName()等取的就是DOM對象或DOM對象集，前者取的是對象，後者取得DOM對象集

vartext11_dom=document.getElementById("text11");
vartext11_dom=document.getElementsByName("text11")[0];
vartext11_dom=document.all.text11;//此處text11即可以是name值也可以是id值
vartext11_dom=document.all[10];

2.如果要使用JQuery提供的函數首先要構造JQuery包裝集，通過$()返回的即是JQuery包裝集。

vartext11_jquery=$("#text11");

2.JQuery包裝集與DOM對象互相轉換
1.DOM對象不能使用JQuery屬性方法，但DOM對象可以通過$()轉換成JQuery包裝集

vartext11_dom=document.getElementById("text11");
vartext11_jquery=$(text11_dom);

2.JQuery包裝集可以使用部分DOM對象的屬性方法如.length，但也有個別屬性方法不能使用如.value，可以通過在JQuery包裝集後面加中括弧及索引值獲取對應DOM對象

vartext11_dom=$("#text11")[0];

3.在each循環時或觸發事件時的this也是DOM對象

$("#text11").click(function(){
vartext11_dom_value=this.value;
alert(text11_dom_value);
});

3.$符號在JQuery中代表對JQuery對象的引用，JQuery的核心方法有四個
1.jQuery(html[,ownerDocument]):根據HTML原始字元串動態創建Dom元素

$("<div><p>Hello!</p></div>").appendTo("body");

2.jQuery( elements ):將一個或多個Dom對象封裝為jQuery包裝集，就是上面的DOM對象與JQuery包裝集轉換
3.jQuery( callback ):$(document).ready()的簡寫方式

$(function(){
alert("Hello!");
});

4.JQuery(selector[,context]):在指定范圍內查找符合條件的JQuery包裝集，context為查找范圍，context可以是DOM對象集也可以是JQuery包裝集
在所有tr標簽中查找id為text11元素的JQuery包裝集

vartext11_query=$("#text11","tr");

===================jQuery選擇器===================

1. 基礎選擇器 Basics
1.根據標簽名進行選擇

varinput_query=$("input");

2.根據id值選取

vartext11_query=$("#text11");

3.根據class值進行選取

vartext11_query=$(".text11");

4.同時選擇多個符合條件的JQuery包裝集用,號分隔條件

vartext_query=$("#text11,.text12");

5.選擇所有DOM元素

varall_query=$("*");

2.層次選擇器 Hierarchy
1.從所有tr標簽中獲取其下面的所有id值為text11的元素

vartext11_query=$("tr #text11");

2.獲取所有td標簽下的所有直接input子元素

varinput_query=$("td>input");

3.獲取id為text11元素後面的class為button11元素，只獲取一個符合條件的元素。text11與button11在地位上屬於同級關系

varbutton11_query=$("#text11+.button11");

4.獲取id為text11元素後面的所有class為button11的元素

varbutton11_query=$("#text11~.button11");

3.基本過濾器 Basic Filters
1.獲取第一個input元素

varinput_query=$("input:first");

2.獲取最後一個input元素

varinput_query=$("input:last");

3.獲取所有未被選中的input元素

varinput_query=$("input:not(:checked)");

4.第一個input元素算一，查找所有第奇數個的input元素

varinput_query=$("input:even");

5.從第二個input算起，查找所有第偶數個的input元素

varinput_query=$("input:odd");

6.查找索引為1的input元素，索引值從0算起

varinput_query=$("input:eq(1)");

7.查找索引大於0的所有input元素

varinput_query=$("input:gt(0)");

8.查找索引小於2的所有input元素

varinput_query=$("input:lt(2)");

9.獲取頁面所有<h>標題元素

varh_query=$(":header");

10.獲取所有正在執行動畫效果的元素

varanimated_query=$(":animated");

4. 內容過濾器 Content Filters
1.查找所有html內容含有"你好世界！"的h1元素

varh1_query=$("h1:contains('你好世界！')");

2.獲取所有不含子標簽或html內容為空的td元素

vartd_query=$("td:empty");

3.查找所有含有input子元素的td元素

vartd_query=$("td:has(input)");

4.查找所有含有子標簽或有html內容的td元素

vartd_query=$("td:parent");

5.可見性過濾器 Visibility Filters
1.查找所有隱藏的input元素

varinput_query=$("input:hidden");

2.查找所有可見的input元素

varinput_query=$("input:visible");

6.屬性過濾器 Attribute Filters
以下id,name等屬性名，也可換成其他屬性名，或自定義的屬性名
1.查找所有含有id屬性的input元素

varinput_query=$("input[id]");

2.查找name值為text11的input元素

varinput_query=$("input[name='text11']");

3.查找name值不等於text11的所有input元素

varinput_query=$("input[name!='text11']");

4.查找name值以text開頭的input元素

varinput_query=$("input[name^='text']");

5.查找name值以11結尾的所有input元素

varinput_query=$("input[name$='11']");

6.查找name值中含有ext的所有input元素

varinput_query=$("input[name*='ext']");

7.查找所有含有id屬性並且name值中含有ext的input元素

varinput_query=$("input[id][name*='ext']");

7.子元素過濾器 Child Filters
1.查找所有在父元素中的所有子元素中排第2的input元素
nth-child()里參數可選even在這里算偶數，odd在這里算奇數，n任意數即選取所有有父元素的input元素，數字是直接選排在第幾個的input元素，第一個input元素算一

varinput_query=$("input:nth-child(2)");

2.查找所有在父元素中的所有子元素中排第一的input元素

varinput_query=$("input:first-child");

3.查找所有在父元素中所有子元素中排最後一個的input元素

varinput_query=$("input:last-child");

4.查找所有在父元素中是唯一子元素的input元素

varinput_query=$("input:only-child");

8.表單選擇器 Forms
1.查找所有input元素

varinput_query=$(":input");

2.查找所有文本框元素

vartext_query=$(":text");

3.查找所有密碼框元素

varpassword_query=$(":password");

4.查找所有復選框

varcheckbox_query=$(":checkbox");

5.查找所有提交按鈕元素

varsubmit_query=$(":submit");

6.查找所有圖像域元素

varimage_query=$(":image");

7.查找所有重置按鈕元素

varreset_query=$(":reset");

8.查找所有按鈕元素

varbutton_query=$(":button");

9.查找所有文件域元素

varfile_query=$(":file");

9.表單過濾器 Form Filters
1.查找所有可用的input元素

varinput_query=$("input:enabled");

2.查找所有不可用的input元素

varinput_query=$("input:disabled");

3.查找所有選中的單選復選框

varinput_query=$("input:checked");

4.查找所有選中的下拉框

varoption_query=$("option:selected");

⑤ JQuery中基礎過濾選擇器用法實例分析

本文實例講述了JQuery中基礎過濾選擇器用法。分享給大家供大家參考。具體如下：
<!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=utf-8"
/>
<title>基礎過濾選擇器</title>
<style
type="text/css">
#main{
width:600px;
border:1px
solid
green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px
solid
red;
border-left:1px
solid
red;
margin:auto;
}
#tbl
td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px
solid
red;
border-right:1px
solid
red;
}
</style>
<script
src="jquery-1.6.2.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(function
()
{
//=============舉例1========================
//:first
說明:
匹配找到的第一個元素
//....<1>修改第一個單元格的背景色
//var
$tds
=
$("#tbl
td:first");
//$tds.css("backgroundColor",
"blue");
//....<2>修改第一行的背景色
//var
$trs
=
$("#tbl
tr:first");
//$trs.css("backgroundColor",
"blue");
//=============舉例2========================
//:last
說明:
匹配找到的最後一個元素.與
:first
相對應.
//...<1>修改隨後一個單元格的背景色
//var
$tds
=
$("#tbl
td:last");
//$tds.css("backgroundColor",
"blue");
//=============舉例3========================
//:not(selector)
去除所有與給定選擇器匹配的元素.有點類似於」非」
//...<1>把所有class不為tdClass的列的文本進行修改
//var
$tds
=
$("#tbl
td:not(.tdClass)");
//$tds.text("Not
tdClass");
//=============舉例4========================
//:even
說明:
匹配所有索引值為偶數的元素，從
0
開始計數.js的數組都是從0開始計數的.
//例如要選擇table中的行,因為是從0開始計數,所以table中的第一個tr就為偶數0.
//...<1>把索引值為偶數的行變成黃色
//var
$trs
=
$("#tbl
tr:even");
//$trs.css("backgroundColor",
"yellow");
//=============舉例5========================
//:
odd
說明:
匹配所有索引值為奇數的元素,和:even對應,從
0
開始計數.
//var
$trs
=
$("#tbl
tr:odd");
//$trs.css("backgroundColor",
"yellow");
//=============舉例6========================
//:eq(index)
說明:
匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括弧裡面的是索引值,不是元素排列數.
//...<1>設置第二個單元格的背景色
//var
$tds
=
$("#tbl
td:eq(1)");
//$tds.css("backgroundColor",
"gray");
//=============舉例6========================
//:gt(index)
說明:
匹配所有大於給定索引值的元素.
//...<1>把下標索引大於1的所有單元格背景色設置為灰色
//var
$tds
=
$("#tbl
td:gt(1)");
//$tds.css("backgroundColor",
"gray");
//=============舉例7========================
//:lt(index)
說明:
匹配所有小於給定索引值的元素.
//...<1>把下標索引小於3的所有單元格背景色設置為灰色
var
$tds
=
$("#tbl
td:lt(3)");
$tds.css("backgroundColor",
"gray");
//=============舉例8========================
//:header(固定寫法)
說明:
匹配如
h1,
h2,
h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.
//...<1>把所有的h標簽背景色進行修改
var
$hs
=
$(":header");
$hs.css("backgroundColor",
"gold");
//=============舉例8========================
//slice
獲取下標范圍內元素
var
$trs
=
$("#tbl
tr").slice(1,
3);
$trs.css("backgroundColor",
"gold");
});
</script>
</head>
<body>
<div
id="main">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<table
id="tbl">
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td
class="tdClass">2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td
class="tdClass">4</td>
</tr>
<tr>
<td>5</td><td>5</td><td>5</td>
</tr>
<tr>
<td>6</td><td>6</td><td
class="tdClass">6</td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。

⑥ jquery中簡單過濾選擇器有哪些

1. 基本過濾選擇器
a) ":first"，選取第一個元素，別忘記它也是被放在一個集合里哦！因為JQuery它是DOM對象的一個集合。如，「$("tr:first")」返回所有tr元素的第一個tr元素，它仍然被保存在集合中。
b)「:last」，選取最後一個元素。如，「$("tr:last")」返回所有tr元素的最後一個tr元素，它仍然被保存在集合中。
c)「:not(selector)」，去除所有與給定選擇器匹配的元素。如，「$("input:not(:checked)")」返回所有input元素，但去除被選中的元素（單選框、多選框）。
d)「:even」，選取所有元素中偶數的元素。因為JQuery對象是一個集合，這里的偶數指的就是集合的索引，索引從0開始。
e) 「:odd」，選取所有元素中奇數的元素，索引從0開始。
f) 「:eq(index)」，選取指定索引的元素，索引從0開始。
g) 「:gt(index)」，選取索引大於指定index的元素，索引從0開始。
h) 「:lt(index)」，選取索引小於指定index的元素，索引從0開始。
i) 「:header」，選取所有的標題元素，如hq、h2等。
j) 「:animated」，選取當前正在執行的所有動畫元素。

2). 內容過濾選擇器
它是對元素和文本內容的操作。
a) 「:contains(text)」，選取包含text文本內容的元素。
b) 「:empty」，選取不包含子元素或者文本節點的空元素。
c) 「:has(selector)」，選取含有選擇器所匹配的元素的元素。
d) 「:parent」，選取含有子元素或文本節點的元素。（它是一個父節點）

3). 可見性過濾選擇器
根據元素的可見與不可見狀態來選取元素。
「:hidden」，選取所有不可見元素。
「:visible」，選擇所有可見元素。
可見選擇器：hidden 不僅包含樣式屬性 display 為 none 的元素，也包含文本隱藏域 (<input type=「hidden」>)和 visible:hidden 之類的元素。

4).屬性過濾選擇器
通過元素的屬性來選取相應的元素。
a) 「[attribute]」，選取擁有此屬性的元素。
b) 「[attribute=value]」，選取指定屬性值為value的所有元素。
c) 「[attribute !=value]」，選取屬性值不為value的所有元素。
d) 「[attribute ^= value]」，選取屬性值以value開始的所有元素。
e) 「[attribute $= value]」，選取屬性值以value結束的所有元素。
f) 「[attribute *= value]」，選取屬性值包含value的所有元素。
g) 「[selector1] [selector2]…[selectorN]」，復合性選擇器，首先經[selector1]選擇返回集合A，集合A再經過[selector2]選擇返回集合B，集合B再經過[selectorN]選擇返回結果集合。

5). 子元素過濾選擇器
一看名字便是，它是對某一元素的子元素進行選取的。
a) 「:nth-child(index/even/odd)」，選取索引為index的元素、索引為偶數的元素、索引為奇數的元素。
l nth-child(even/odd)：能選取每個父元素下的索引值為偶(奇)數的元素。
l nth-child(2)：能選取每個父元素下的索引值為 2 的元素。
l nth-child(3n)：能選取每個父元素下的索引值是 3 的倍數的元素。
l nth-child(3n + 1)：能選取每個父元素下的索引值是 3n + 1的元素。
b) 「:first-child」，選取第一個子元素。
c) 「:last-child」，選取最後一個子元素。
d) 「:only-child」，選取唯一子元素，它的父元素只有它這一個子元素。

6). 表單過濾選擇器
選取表單元素的過濾選擇器。
a) 「:input」，選取所有<input>、<textarea>、<select >和<button>元素。
b) 「:text」，選取所有的文本框元素。
c) 「:password」，選取所有的密碼框元素。
d) 「:radio」，選取所有的單選框元素。
e) 「:checkbox」，選取所有的多選框元素。
f) 「:submit」，選取所有的提交按鈕元素。
g) 「:image」，選取所有的圖像按鈕元素。
h) 「:reset」，選取所有重置按鈕元素。
i) 「:button」，選取所有按鈕元素。
j) 「:file」，選取所有文件上傳域元素。
k) 「:hidden」，選取所有不可見元素。

7).表單對象屬性過濾選擇器
選取表單元素屬性的過濾選擇器。
「:enabled」，選取所有可用元素。
「:disabled」，選取所有不可用元素。
「:checked」，選取所有被選中的元素，如單選框、復選框。
「:selected」，選取所有被選中項元素，如下拉列表框、列表框。

⑦ jquery過濾選擇器有哪些

（抄1）Jquery中簡單過濾選擇器襲
jquery根據某一類過濾規則進行元素匹配，書寫時以：開頭，是Jquery中應用最為廣泛的選擇器
（2）簡單過濾選擇器的基本語法
①first()或者：first 獲取第一個元素
②last()或者：last 獲取最後一個元素
③：not(selector)獲取除開給定選擇器的其他元素
④：even獲取索引為偶數的元素，索引從0開始
⑤：odd獲取索引為奇數的元素，索引從0開始
⑥：eq(index)獲取制定索引元素，從0開始
⑦：gt(index)獲取大於給定索引的元素，從0開始
⑧：lt(index)獲取小於給定索引的元素，從0開始
⑨：header獲取標題類型元素
⑩:animated獲取正在執行動畫效果的元素

⑧ jquery有幾種選擇器

jQuery選擇器一般分為四種

一、基本選擇器

基本選擇器是jQuery中最常用也是最簡單的選擇器，它通過元素的id、class和標簽名等來查找DOM元素。

1、ID選擇器 #id

描述：根據給定的id匹配一個元素，返回單個元素（註：在網頁中，id名稱不能重復）

示例：$("#test") 選取 id 為 test 的元素

2、類選擇器 .class

描述：根據給定的類名匹配元素，返回元素集合

示例：$(".test") 選取所有class為test的元素

3、元素(標簽)選擇器 element

描述：根據給定的元素名匹配元素，返回元素集合

示例：$("p") 選取所有的<p>元素 $("div") :選取所有的div標簽

4、*

描述：匹配所有元素，返回元素集合

示例：$("*") 選取所有的元素

5、selector1，selector2,...,selectorN（並集選擇器）

描述：將每個選擇器匹配到的元素合並後一起返回，返回合並後的元素集合

示例：$("p,span,p.myClass") 選取所有<p>,<span>和class為myClass的<p>標簽的元素集合

二、層次選擇器

層次選擇器根據層次關系獲取特定元素。

1、後代選擇器

示例：$("p span") 選取<p>元素里的所有的<span>元素（註：後代選擇器選擇父元素所有指定選擇的元素，不管是兒子級，還是孫子級）

2、子選擇器 $("parent>child")

示例：$("p>span") 選擇<p>元素下的所有<span>元素（註：子選擇器只選擇直屬於父元素的子元素）

3、同輩選擇器 $("prev+next")

描述：選取緊接在prev元素後的next元素，返回元素集合

示例：$(".one+p") 選取class為one的下一個<p>同輩元素集合

4、同輩選擇器 $("prev~siblings")

描述：選取prev元素後的所有siblings元素，返回元素集合

示例：$("#two~p")選取id為two的元素後所有<p>同輩元素集合

三、過濾選擇器

1>基本過濾選擇器

1、 :first

描述：選取第一個元素，返回單個元素

示例：$("p:first") 選取所有<p>元素中第一個<p>元素

2、 :last

描述：選取最後一個元素，返回單個元素

示例：$("p:last") 選取所有<p>元素中最後一個<p>元素

3、 :not(selector)

描述：去除所有與給定選擇器匹配的元素，返回元素集合

示例：$("input:not(.myClass)") 選取class不是myClass的<input>元素

4、 :even

描述：選取索引是偶數的所有元素，索引從0開始，返回元素集合

5、 :odd

描述：選取索引是奇數的所有元素，索引從0開始，返回元素集合

6、 :eq(index)

描述：選取索引等於index的元素，索引從0開始，返回單個元素

7、 :gt(index)

描述：選取索引大於index的元素，索引從0開始，返回元素集合

8、 :lt(index)

描述：選取索引小於於index的元素，索引從0開始，返回元素集合

9、 :focus

描述：選取當前獲取焦點的元素

2>內容過濾選擇器

1、:contains(text)

描述：選取含有文本內容為text的元素，返回元素集合

示例：$("p:contains('我')") 選取含有文本「我」的元素

2、:empty

描述：選取不包含子元素或者文本元素的空元素，返回元素集合

示例：$("p:empty") 選取不包含子元素或者文本元素的空<p>元素（<p></p>）

3、:has(selector)

描述：選取含有選擇器所匹配的元素的元素，返回元素集合

示例：$("p:has(p)") 選取含有<p>元素的<p>元素（<p><p/></p>）

4、:parent

描述：選取含有子元素或者文本的元素，返回元素集合

示例：$("p:parent") 選取含有子元素或者文本元素的<p>元素（<p><p/></p>或者<p>文本</p>）

3>可見性過濾選擇器

1、:hidden

描述：選取所有不可見的元素，返回元素集合

2、:visible

描述：選取所有可見的元素，返回元素集合

4>屬性過濾選擇器（返回元素集合）

1、[attribute]

示例：$("p[id]") 選取擁有id屬性的p元素

2、[attribute=value]

示例：$("input[name=text]") 選取擁有name屬性等於text的input元素

3、[attribute!=value]

示例：$("input[name!=text]") 選取擁有name屬性不等於text的input元素

4、[attribute^=value]

示例：$("input[name^=text]") 選取擁有name屬性以text開始的input元素

5、[attribute$=value]

示例：$("input[name$=text]") 選取擁有name屬性以text結束的input元素

6、[attribute*=value]

示例：$("input[name*=text]") 選取擁有name屬性含有text的input元素

7、[attribute~=value]

示例：$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述：合並多個屬性過濾選擇器

5>表單對象屬性過濾選擇器（返回元素集合）

1、:enabled

描述：選取所有可用元素

2、:disabled

描述：選取所有不可用元素

3、:checked

描述：選取所有被選中的元素（單選框，復選框）

示例：$("input:checked") 選取所有被選中的<input>元素

4、:selected

描述：選取所有被選中的選項元素（下拉列表）

示例：$("select option:selected") 選取所有被選中的選項元素

四、表單選擇器（返回元素集合，使用相似）

1、:text

描述：選擇所有的單行文本框

示例：$(":text")選取所有的單行文本框

2、:password

描述：選擇所有的密碼框

3、:button

描述：選擇所有的按鈕

4、:checkbox

描述：選擇所有的多選框

⑨ jquery中的選擇器和過濾器的區別

基本過濾選擇器
a) 「:first」，選取第一個元素，別忘記它也是被放在一個集合里哦！因為JQuery它是DOM對象的一個集合。如，「$("tr:first")」返回所有tr元素的第一個tr元素，它仍然被保存在集合中。
b) 「:last」，選取最後一個元素。如，「$("tr:last")」返回所有tr元素的最後一個tr元素，它仍然被保存在集合中。
c) 「:not(selector)」，去除所有與給定選擇器匹配的元素。如，「$("input:not(:checked)")」返回所有input元素，但去除被選中的元素（單選框、多選框）。
d) 「:even」，選取所有元素中偶數的元素。因為JQuery對象是一個集合，這里的偶數指的就是集合的索引，索引從0開始。
e) 「:odd」，選取所有元素中奇數的元素，索引從0開始。
f) 「:eq(index)」，選取指定索引的元素，索引從0開始。
g) 「:gt(index)」，選取索引大於指定index的元素，索引從0開始。
h) 「:lt(index)」，選取索引小於指定index的元素，索引從0開始。
i) 「:header」，選取所有的標題元素，如hq、h2等。
j) 「:animated」，選取當前正在執行的所有動畫元素。

⑩ jQuery基本選擇器選擇元素使用介紹

復制代碼
代碼如下:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<script
src="jquery-1.9.1.js"
type="text/javascript"></script>
<style
type="text/css">
body{font-size:12px;text-align:center;}
.clsFrame{width:300px;height:100px}
.clsFrame
div,span{display:none;float:left;width:65px;height:65px;border:solid
1px
#ccc;margin:8px}
.clsOne{background-color:#eee}
</style>
<script
type="text/javascript">
$(function
()
{
//ID匹配元素
$('#divOne').css('display',
'block');
})
$(function
()
{
//元素名匹配元素
$('div
span').css('display',
'block');
})
$(function
()
{
//類匹配元素
$('.clsFrame
.clsOne').css('display',
'block');
})
$(function
()
{
//匹配所有元素
$('*').css('display',
'block');
})
$(function
()
{
//合並匹配元素
$('#divOne,span').css('display',
'block');
})
</script>
</head>
<body>
<div
class="clsFrame">
<div
id="divOne">
ID</div>
<div
class="clsOne">
CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>

導航:首頁 > 凈水問答 > jquery隱藏過濾選擇器

jquery隱藏過濾選擇器

與jquery隱藏過濾選擇器相關的資料