jQuery函数的第二个参数获取指定上下文中的DOM元素


Posted in Javascript onMay 19, 2014

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>

总结

第二个参数的不同的类型,对应的用法如下表所示。

类型 用法
jQuery wrapper $('input', $('form')).length
DOM reference $('input', document.forms[0]).length
document $('input', 'body').length
Javascript 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery filter函数使用方法
May 19 #Javascript
用js模拟struts2的多action调用示例
May 19 #Javascript
从零学JS之你需要了解的几本书
May 19 #Javascript
JavaScript在IE和FF下的兼容性问题
May 19 #Javascript
从零学JSON之JSON数据结构
May 19 #Javascript
jquery 选取方法都有哪些
May 18 #Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 #Javascript
You might like
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
完美的php分页类
2017/10/24 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
php获取微信openid方法总结
2019/10/10 PHP
json原理分析及实例介绍
2012/11/29 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python画图学习入门教程
2016/07/01 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
家长给孩子的评语
2014/01/30 职场文书
房地产营销策划方案
2014/02/08 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
微笑服务演讲稿
2014/05/13 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
留学推荐信中文范文
2015/03/26 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Redis实现分布式锁的五种方法详解
2022/06/14 Redis