過濾不屬於jquery的篩選

㈠ 怎麼用js或者jQuery去除掉某個標簽但是不去除裡面的內容

1、可以使用正則直接取到img

//思路分兩步：
//1，匹配出圖片img標簽（即匹配出所有圖片），過濾其他不需要的字元
//2.從匹配出來的結果（img標簽中）循環匹配出圖片地址（即src屬性）
varstr="<td>thisisteststring<imgsrc="http:yourweb.com/test.jpg"width='50'>123andtheend<imgsrc="所有地址也能匹配.jpg"/>33!<imgsrc="/uploads/attached/image/20120426/20120426225658_92565.png"alt=""/></td>"
//匹配圖片（g表示匹配所有結果i表示區分大小寫）
varimgReg=/<img.*?(?:>|/>)/gi;
//匹配src屬性
varsrcReg=/src=['"]?([^'"]*)['"]?/i;
vararr=str.match(imgReg);
alert('所有已成功匹配圖片的數組：'+arr);
for(vari=0;i<arr.length;i++){
varsrc=arr[i].match(srcReg);
//獲取圖片地址
if(src[1]){
alert('已匹配的圖片地址'+(i+1)+'：'+src[1]);
}
//當然你也可以替換src屬性
if(src[0]){
vart=src[0].replace(/src/i,"href");
//alert(t);
}
}

㈡ 閫氳繃jquery鎬庝箞閫夊彇瀛愬厓緔犱笉瀛樺湪class灞炴х殑鍏冪礌

1銆佹柊寤轟竴涓猦tml鏂囦歡錛屽懡鍚嶄負test.html銆

㈢ jquery濡備綍瀹炵幇涓涓琛ㄦ牸鐨勭瓫閫,涔熷氨鏄鎸夋潯浠舵煡鎵劇瓫閫

1銆侀栧厛鏂板緩html鏂囨。錛屽悜涓嬫煡鎵懼厔寮熸爣絳撅細.next()銆

㈣ 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中簡單過濾選擇器有哪些

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選擇器有哪些

jQuery 選擇器簡介

jQuery 選擇器允許對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號開頭：$()。

1 .基本選擇器

$("#test") 選擇id值為test的元素，id值是唯一的所以返回單個元素。

$("div") 選擇所有的div標簽元素，返回div元素數組

$(".myclass") 選擇使用myclass類的css的所有元素

$("*") 選取所有元素。

$("#test,div,.myclass") 選取多個元素。

2.層次選擇器

$("div span") 選取<div>里的所有<span>元素

$("div >span") 選取<div>元素下元素名是<span>的子元素

$("#one +div") 選取id為one的元素的下一個<div>同輩元素 等同於$("#one").next("div")

$("#one~div") 選取id為one的元素的元素後面的所有<div>同輩元素 等同於$("#one").nextAll("div")

$("#one").siblings("div") 獲取id為one的元素的所有<div>同輩元素（不管前後）

$("#one").prev("div") 獲取id為one的元素的前面緊鄰的同輩<div>元素

所以 獲取元素范圍大小順序依次為：

$("#one").siblings("div")>$("#one~div")>$("#one +div")

或是

$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.基本過濾選擇器

$("div:first") 選取所有<div>元素中第1個<div>元素

$("div:last") 選取所有<div>元素中最後一個<div>元素

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

$("input:even") 選取索引是偶數的<input>元素(索引從0開始)

$("input:odd") 選取索引是基數的<input>元素(索引從0開始)

$("input:eq(2)") 選取索引等於2的<input>元素

$("input:gt(4)") 選取索引大於4的<input>元素

$("input:lt(4)") 選取索引小於4的<input>元素

$(":header") 過濾掉所有標題元素，例如：h1、h2、h3等

$("div:animated") 選取正在執行動畫的<div>元素

$(":focus") 選取當前獲取焦點的元素

4.內容過濾選擇器

$("div:contains('Name')") 選取所有<div>中含有'Name'文本的元素

$("div:empty") 選取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)") 選取所有含有<p>元素的<div>元素

$("div:parent") 選取擁有子元素的（包括文本元素）<div>元素

5.可見性過濾選擇器

$("div:hidden")橡磨 選取所有不可見的<div>橋冊元素

$("div:visible")梁消斗 選取所有可見的<div>元素

6.屬性過濾選擇器

$("div[id]") 選取所有擁有屬性id的元素

$("input[name='test']") 選取所有的name屬性等於'test'的<input>元素

$("input[name!='test']") 選取所有的name屬性不等於'test'的<input>元素

$("input[name^='news']") 選取所有的name屬性以'news'開頭的<input>元素

$("input[name$='news']") 選取所有的name屬性以'news'結尾的<input>元素

$("input[name*='news']") 選取所有的name屬性包含'news'的<input>元素

$("div[title|='en']") 選取屬性title等於'en'或以'en'為前綴(該字元串後跟一個連字元'-')的<div>元素

$("div[title~='en']") 選取屬性title用空格分隔的值中包含字元en的<div>元素

$("div[id][title$='test']") 選取擁有屬性id,並且屬性title以'test'結束的<div>元素

7.子元素過濾選擇器

$("div .one:nth-child(2)") 選取class為'one'的<div>父元素下的第2個子元素

$("div span:first-child") 選取每個<div>中的第1個<span>元素

$("div span:last-child") 選取每個<div>中的最後一個<span>元素

$("div button:only-child") 在<div>中選取是唯一子元素的<button>元素

8.表單對象屬性過濾選擇器

$("#form1 :enabled") 選取id為'form1'的表單內所有可用元素

$("#form2 :disabled") 選取id為'form2'的表單內所有不可用元素

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

$("select option:selected") 選取所有的select 的子元素中被選中的元素

9.表單選擇器

$(":input") 選取所有<input>,<textarea>,<select> 和 <button>元素

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

$(":password") 選取所有的密碼框

$(":radio") 選取所有單的選框

$(":checkbox") 選取所有的多選框

$(":submit") 選取所有的提交按鈕

$(":image") 選取所有的圖像按鈕

$(":reset") 選取所有的重置按鈕

$(":button") 選取所有的按鈕

$(":file") 選取所有的上傳域

$(":hidden") 選取所有不可見元素

㈦ 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標簽指定文字顏色