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 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
JS中判断null的方法分析
Nov 21 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
python从入门到精通(DAY 3)
2015/12/20 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
快速了解Python相对导入
2018/01/12 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python单元和文档测试实例详解
2019/04/11 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
Android面试题附答案
2014/12/08 面试题
写自荐信的七个技巧
2013/10/15 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
秋冬农业生产标语
2014/10/09 职场文书
授权收款委托书范本
2014/10/10 职场文书
撤诉状格式范本
2015/05/19 职场文书
党支部综合考察意见
2015/06/01 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript