⑴ jquery的篩選有哪些
jQuery提供了強大的選擇器讓我們獲取對象。在這邊,我人為地將jQuery選擇器分為兩大部分:選擇對象和篩選條件。選擇對象表示要獲取什麼對象,篩選條件是對獲取的對象進行篩選,最終留下符合某些特徵的對象
1.選擇對象
1).基本
·#id 根據給定的ID匹配一個元素。例如:$("#id")
·element 根據給定的元素名匹配所有元素。例如:$("div")
·.class 根據給定的類匹配元素。例如:$(".style1");
·* 匹配所有元素。例如:$("*")
·selector1,selector2,selectorN 將每一個選擇器匹配到的元素合並後一起返回。例如:$("#id,div,.style1")
2).表單
·:button 匹配所有按鈕。例如:$(":button")
·:checkbox 匹配所有復選框。例如:$(":checkbox")
·:file 匹配所有文件域。例如:$(":File")
·:hidden 匹配所有不可見元素,或者type為hidden的元素。例如:$("input:hidden")
·:image 匹配所有圖像域。例如:$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")
·:password 匹配所有密碼框。例如:$(":password")
·:radio 匹配所有單選按鈕。例如:$(":radio")
·:reset 匹配所有重置按鈕。例如:$(":reset")
·:submit 匹配所有提交按鈕。例如:$(":submit")
·:text 匹配所有的單行文本框。例如:$(":text")
·:header 匹配如 h1, h2, h3之類的標題元素。例如:$(":header").css("background", "#EEE");
2.篩選條件
1).屬性篩選
·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如:$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性,但屬性不等於特定值的元素。例如:$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如:$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如:$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如:$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如:$("input[name^='man']")
·[selector1][selector2][selectorN] 同時滿足多個條件。例如:$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素。例如:$("tr:hidden")
·:visible 匹配所有的可見元素。例如:$("tr:visible")
·:checked 匹配所有選中的被選中元素(復選框、單選框等,不包括select中的option)。例如:$("input:checked")
·:disabled 匹配所有不可用元素。例如:$("input:disabled")
·:enabled 匹配所有可用元素。例如:$("input:enabled")
·:selected 匹配所有選中的option元素。例如:$("select option:selected")
2).內容篩選
·:contains(text) 匹配包含給定文本的元素。例如:$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如:$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如:$("td:parent")
3).層級篩選
·ancestor descendant 在給定的祖先元素下匹配所有的後代元素。例如:$("form input")
·parent > child 在給定的父元素下匹配所有的子元素。例如:$("form > input")
·prev + next 匹配所有緊接在 prev 元素後的 next 元素。例如:$("label + input")
·prev ~ siblings 匹配 prev 元素之後的所有 siblings 元素。例如:$("form ~ input")
·:first-child 匹配第一個子元素。例如:$("ul li:first-child")
·:last-child 匹配最後一個子元素。例如:$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如:$("ul li:nth-child(2)")
·:only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配。例如:$("ul li:only-child")
4).方法篩選
·:animated 匹配所有正在執行動畫效果的元素。例如:$("div:animated");
·:eq(index) 匹配一個給定索引值的元素。例如:$("tr:eq(1)")
·:even 匹配所有索引值為偶數的元素,從 0 開始計數。例如:$("tr:even")
·:first 匹配找到的第一個元素。例如:$("tr:first")
·:gt(index) 匹配所有大於給定索引值的元素,從 0 開始計數。例如:$("tr:gt(0)")
·:last 匹配找到的最後一個元素。例如:$("tr:last")
·:lt(index) 匹配所有小於給定索引值的元素。例如:$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如:$("input:not(:checked)")
·:odd 匹配所有索引值為奇數的元素,從 0 開始計數。例如:$("tr:odd")
⑵ jquery查詢篩選
$("#show").html("");
$("#log").find("li").each(function(i,e){
varurl=$(this).find("span").html();
//下邊寫篩選方法
//...
if(符合){
$("#show").append($(this));
}
});
⑶ jquery如何實現一個表格的篩選,也就是按條件查找篩選
1、首來先新建html文檔,向下自查找兄弟標簽:.next()。
⑷ jquery中的選擇器和過濾器的區別
最簡單的方法。用RadioButton控制項就行了。何苦搞得這么累呢。如果真要這樣做也可以就是五個專控制項共用一個事件屬同時訂閱相同事件然後再判斷你選中的Checkbox其他的為假代碼如下:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
⑸ 如今我篩選的方法是:JQuery里的一個filter 篩選器,這樣可以實現只要包含這條信息的都可以篩選出來
沒太看懂你想要干什麼,猜測一下你想用filter功能篩選某個元素裡面的文字,且篩選的文字不區分大小寫
做法是在取出文字之後調用.toLowerCase()將文字全部轉化為小寫,然後再過濾就可以了。
如選擇所有的div,裡面的文字包含不區分大小寫「test」。
$("div").filter(function(){
return $(this).text().toLowerCase().indexOf("test")!=-1;
});
如有問題請追問,或者加我的hi詢問。
⑹ 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選擇器的篩選問題
$("img:not(img[src^='biaoqing'])")
⑻ JQuery 多條件過濾
.filter().filter()
篩選之後再篩選就好了
⑼ jquery中什麼是過濾選擇器
可以來參源考這個。。
http://www.cnblogs.com/yakun/p/3830677.html
⑽ 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獲取正在執行動畫效果的元素