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插件制作 手风琴Panel效果实现
Aug 17 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python的即时标记项目练习笔记
2014/09/18 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Django 反向生成url实例详解
2019/07/30 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
优秀会计求职信
2014/07/04 职场文书
财会专业大学生求职信
2014/09/26 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书