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模拟多线程
Feb 07 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue axios 表单提交上传图片的实例
Mar 16 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防盗链代码实例
2014/08/27 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
js中的布尔运算符使用介绍
2013/11/20 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python操作xml文件详细介绍
2014/06/09 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
C#面试题问题集
2016/04/02 面试题
Shell编程面试题
2012/05/30 面试题
简历里的自我评价
2014/01/31 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
市场总经理岗位职责
2014/04/11 职场文书
答谢会策划方案
2014/05/12 职场文书
授权委托书
2015/01/28 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android