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 相关文章推荐
JS对文本框值的判断示例
Mar 10 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
微信小程序自定义胶囊样式
Dec 27 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
php include加载文件两种方式效率比较
2010/08/08 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP反向代理类代码
2014/08/15 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
django实现分页的方法
2015/05/26 Python
详解Python装饰器由浅入深
2016/12/09 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python groupby 函数 as_index详解
2019/12/16 Python
python实现TCP文件传输
2020/03/20 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
剪枝的学问教学反思
2014/02/07 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
党日活动总结
2014/05/07 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
庆祝国庆节标语
2014/10/09 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
债务追讨律师函
2015/06/24 职场文书