jQuery函數的第二個參數獲取指定上下文中的DOM元素
更新時間：2014年05月19日 14:28:39 作者：
這篇文章主要介紹了jQuery函數的第二個參數獲取指定上下文中的DOM元素,需要的朋友可以參考下
jQuery函數的第二個參數可以指定DOM元素的搜索范圍。
第二個參數可分為以下類型
DOM reference
jQuery wrapper
document
代碼示例
<!DOCTYPE html>
<html>
<body>
<form>
<input name="" type="checkbox"/>
<input name="" type="radio"/>
<input name="" type="text"/>
<input name="" type="button"/>
</form>
<form>
<input name="" type="checkbox"/>
<input name="" type="radio"/>
<input name="" type="text"/>
<input name="" type="button"/>
</form>
<input name="" type="checkbox"/>
<input name="" type="radio"/>
<input name="" type="text"/>
<input name="" type="button"/>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// search within all form elements, using a wrapper for context,
// alerts "8 inputs"
alert("selected" + $('input', $('form')).length + ' inputs');
// search with the first form element, using DOM reference as the context,
// alerts "4 inputs"
alert("selected" + $('input', document.forms[0]).length + ' inputs');
// search within the body element for all input elements using an expression,
// alerts "12 inputs"
alert("selected" + $('input', 'body').length + ' inputs');
</script>
</body>
</html>
總結
第二個參數的不同的類型，對應的用法如下表所示。
第二個參數可分為以下類型
DOM reference
jQuery wrapper
document
代碼示例
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<body>
<form>
<input name="" type="checkbox"/>
<input name="" type="radio"/>
<input name="" type="text"/>
<input name="" type="button"/>
</form>
<form>
<input name="" type="checkbox"/>
<input name="" type="radio"/>
<input name="" type="text"/>
<input name="" type="button"/>
</form>
<input name="" type="checkbox"/>
<input name="" type="radio"/>
<input name="" type="text"/>
<input name="" type="button"/>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// search within all form elements, using a wrapper for context,
// alerts "8 inputs"
alert("selected" + $('input', $('form')).length + ' inputs');
// search with the first form element, using DOM reference as the context,
// alerts "4 inputs"
alert("selected" + $('input', document.forms[0]).length + ' inputs');
// search within the body element for all input elements using an expression,
// alerts "12 inputs"
alert("selected" + $('input', 'body').length + ' inputs');
</script>
</body>
</html>
總結
第二個參數的不同的類型，對應的用法如下表所示。
| 類型 | 用法 |
|---|---|
| jQuery wrapper | $('input', $('form')).length |
| DOM reference | $('input', document.forms[0]).length |
| document | $('input', 'body').length |
您可能感興趣的文章:
- jQuery學習筆記之jQuery的DOM操作
- 基于jquery的關于動態(tài)創(chuàng)建DOM元素的問題
- 讀jQuery之五（取DOM元素）
- JQuery動態(tài)創(chuàng)建DOM、表單元素的實現代碼
- JQuery each()函數如何優(yōu)化循環(huán)DOM結構的性能
- jQuery移動和復制dom節(jié)點實用DOM操作案例
- 同域jQuery(跨)iframe操作DOM(實例講解)
- jQuery的DOM操作之刪除節(jié)點示例
- jquery選擇器排除某個DOM元素的方法（實例演示）
- jQuery1.9.1針對checkbox的調整方法(prop)
- Jquery方式獲取iframe頁面中的 Dom元素
- jQuery 刪除/替換DOM元素的幾種方式
- jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
- jQuery如何將選中的對象轉化為原始的DOM對象
- jQuery 1.9.1源碼分析系列（十）事件系統之綁定事件
- jQuery-1.9.1源碼分析系列（十）事件系統之事件體系結構
- jQuery-1.9.1源碼分析系列（十）事件系統之事件包裝
- Jquery1.9.1源碼分析系列（六）延時對象應用之jQuery.ready
- jQuery 1.9.1源碼分析系列（十）事件系統之主動觸發(fā)事件和模擬冒泡處理
- Jquery-1.9.1源碼分析系列（十一）之DOM操作
相關文章
jQuery Easyui DataGrid點擊某個單元格即進入編輯狀態(tài)焦點移開后保存數據
這篇文章主要介紹了jQuery Easyui DataGrid點擊某個單元格即進入編輯狀態(tài)焦點移開后保存數據的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core（一）整體架構,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery使用cookie與json簡單實現購物車功能的方法,介紹了jQuery實現購物車的步驟與關鍵代碼,需要的朋友可以參考下2016-04-04
jquery自動完成插件(autocomplete)應用之PHP版
一般網上這個用于搜索功能增強，增加用戶體驗，還是不錯的。2009-12-12
雖然圓角頁面很好看，但一直以來都不太好實現，一方面是沒有CSS3，二是都得通過美工切圖切出來角。但這些麻煩事即將過去，就是因為它：jQuery Corner的出現！2014-08-08
這篇文章主要介紹了jQuery實現右下角可縮放大小的層,以完整實例形式分析了jQuery頁面元素及相關樣式屬性操作技巧,需要的朋友可以參考下2016-06-06
基于Jquery的仿照flash放大圖片效果代碼，需要的朋友可以參考下。2011-03-03
本文主要是介紹了jQuery中on方法及trigger方法，以及圍繞這個方法來體驗的觀察者模式，是篇非常不錯的文章，對我們理解觀察者模式很有幫助。2014-12-12
下面小編就為大家?guī)硪黄猨Query效果函數。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09
這篇文章主要介紹了jQuery實現氣球彈出框式的側邊導航菜單效果,通過css樣式控制結合jQuery響應鼠標事件動態(tài)切換元素樣式實現提示框效果,非常美觀實用,需要的朋友可以參考下2015-09-09