選擇器$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")

時間 2019-11-12

標籤選擇器 parent child div#test div test 欄目 CSS 简体版

原文原文鏈接

$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")

目錄(?)[+]javascript

這個標題彷佛有些奇怪，但這些都是合法有效的jquery選擇器。在這裏將他們邏列一塊兒，是由於他們比較容易引發混淆。下面就經過例子來講明他們之間的不一樣之處。php

$("parent > child")

[html] view plain copy

<div>
<span>123</span>
<p>
<span>456</span>
</p>
<span>789</span>
</div>

[javascript] view plain copy

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

結果顯示以下：

123css

456html

789java

這樣理解：在parent的兒子輩中找child。這裏div有三個兒子：span p和span，> 表示僅在div的兒子輩中查找。這裏<span>456</span>不符合條件，由於他是div的孫子輩（二公子p的兒子）。jquery

它等同於$("parent").children("child");ajax

$("A B")

[html] view plain copy

<form>
<label>Name:</label>
<input name="name" value="a" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="b" />
</fieldset>
</form>
<input name="a1" value='c' />
<div>789</div>
<input name="a2" value='d' />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="e" />
</fieldset>

[javascript] view plain copy

$("form input").css('color', '#FF0000');
//它也等同於：$("input","form").css('color','#ff0000');這在下面會有講解
//也等同於：$("form").find("input").css('color', '#FF0000');

設置form中的全部input爲紅色。祖先爲form，子孫爲input。也能夠理解，只要在form的後代中有input，就符合條件。思考一下與：$("form > input").css('color','#ff0000')的區別。ide

它等同於：$("A").find("B")函數

$("div#test")

中間沒有空格，表示是「且」的關係。$("div#test")意思是全部的div且id=test的元素。在看個例子：$(".intro.demo") 全部 class="intro" 且 class="demo" 的元素。post

例1：

[html] view plain copy

<div>
<span class="test">123</span>
<p>
<span class="test">456</span>
</p>
<span>789</span>
<div class="test">abc</div>
</div>

[javascript] view plain copy

$("span.test").css('color', '#FF0000');

結果以下：

123

456

789
abc

例2：

[html] view plain copy

<div>
<span class="intro">123</span>
<p>
<span class="intro demo">456</span>
</p>
<span>789</span>
<div class="demo">abc</div>
</div>

[javascript] view plain copy

$(".intro.demo") .css('color', '#FF0000');

結果以下所示：

123

456

789
abc

例3：

$("div#intro .head") id="intro" 的 <div> 元素中的全部 class="head" 的元素

$("div,#test")

一個雙引號中用逗號分隔不一樣的選擇器，稱之爲並列選擇器。

[html] view plain copy

<div>123</span>
<div style="border:1px solid #ccc;">
<span id="test">456</span>
</div>

[javascript] view plain copy

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

結果以下圖所示：

將div、id="test"元素設爲紅色字體。

$(".test","div")

這個看似有些奇特，它與上面的並列選擇器雖然類似，但有本質的不一樣。其實這裏的第二個參數"div"是限定查找.test的範圍。

先看個簡單例子：

[html] view plain copy

<div>
<span class="test">123</span>
</div>
<span class="test">456</span>

[javascript] view plain copy

$(".test","div").css('color', '#FF0000');

結果爲：

123

456

在看個稍微複雜一點的例子：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<script>
$(document).ready(function(){
$(".del").click(function(){
id=$("input[name='id']",$(this).parents("form:first")).val();
alert(id);
});
});
</script>
</head>
<body>
<table width="100%">
<tr style="text-align:center;">
<td>1</td>
<td>218.11.56.*</td>
<td>16:51 2012-10-30</td>
<td><form><input type="hidden" name="id" value="1" /><span class="del">刪除</span></form></td>
</tr>
<tr style="text-align:center;">
<td>2</td>
<td>218.11.56.*</td>
<td>16:59 2012-10-30</td>
<td><form><input type="hidden" name="id" value="2" /><span class="del">刪除</span></form></td>
</tr>
</table>
</body>
</html>

你會發現，點擊不一樣數據的刪除，會彈出當前數據的ID值。

jQuery()函數有三種用法。利用選擇器進行的操做只是其中的一種用法。其語法爲：

jQuery(selector, [context])

這種用法還包含了四種用法。

設置選擇器環境

接受一個字符串，其中包含了用於匹配元素集合的 CSS 選擇器

通常狀況對jquery的選擇器的用法，都是作爲第一個參數的用法。其實jquery()函數的這種用法還能夠傳遞第二個參數。傳遞這個參數的目的是將前面選擇器限定在context這個環境中。在默認狀況下，即不傳第二個參數，選擇器從文檔根部對 DOM 進行搜索（$()將在當前的HTML document中查找DOM元素）；若是指定了第二個參數，如一個DOM元素集或jquery對象，那就會在這個context中查找。

下面看個例子

[javascript] view plain copy

$("div.foo").click(function() {
$("span", this).addClass("bar");
});

因爲咱們已經將 span 選擇器限定到 this 這個環境中，只有被點擊元素中的 span 會獲得附加的class。在內部，選擇器環境是經過 .find() 方法實現的，所以 $("span", this) 等價於 $(this).find("span")。

這裏結合一下去掉的一個項目作說明：

[html] view plain copy

下面這個tr有N個，這裏只列出一個作爲演示
<tr style="text-align:center;">
<td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
<td>$arr[id]</td>
<td>$arr[log]</td>
<td>$arr[ip]</td>
<td>$arr[time]</td>
<td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">刪除</span></form></td>
</tr>

[javascript] view plain copy

//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//爲何要加上這一句？
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");//要關注的就是這一句，獲取當前點擊「刪除」信息的ID
art.dialog.confirm('你確認刪除該日誌嗎？',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功刪除');
$(_tmpQuery.parents('tr:first')).hide();//若是不加第一句，這裏用$(_tmpQuery.parents('tr:first')).hide();則不會隱藏。由於這裏的this，並非當前的class="del"這個DOM對象了。而是jQuery的AJAX配置對象ajaxSettings。測試：alert(this.url); 大頭爸爸注：如今處理這個隱藏有更好的方案，詳細請訪問：
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});

如今，終於明白了var id=$("input[name='id']",$(this).parents("form:first")).attr("value");的前因後果。它的意思是在被點擊元素最近的父元素開始向外尋找第一個form元素，這個jquery對象就作爲前面input[name='id']的範圍。實際上在<form><input type="hidden" name="id" value="$arr[id]" /><span class="del">刪除</span><img src="images/del.gif" width="16" height="16" /></form>中，input[name='id']是惟一的，即只有一個name值等於id的input，只有一個。

更多瞭解請訪問：http://www.w3school.com.cn/jquery/core_jquery.asp

那麼，在看一下jQuery(selector, [context])，這種用法的第二個用法：克隆 jQuery 對象

在上面例子中有這樣一句：$(_tmpQuery.parents('tr:first')).hide();

在其它頁面中，有這樣的句子：$($(this).parents('form:first')).serialize()。完整代碼以下：

[javascript] view plain copy

//edit event
$(".edit").click(function(){
art.dialog.open('manager_edit_control.php?'+$($(this).parents('form:first')).serialize(),{id:'edit',title:'管理員修改',lock:true,resize:false},false);
});

用法 3 ：克隆 jQuery 對象
語法
jQuery(jQuery object)

當以參數的形式向 $() 函數傳遞 jQuery 對象後，會建立一個該對象的副本。與初始對象同樣，新的 jQuery 對象引用相同的 DOM 元素。

徹底能夠將上面代碼改成：

_tmpQuery.parents('tr:first').hide();

$(this).parents('form:first').serialize()