浅谈jQuery的选择器
jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点
例子:找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
转载于:https://www.cnblogs.com/jackhuclan/archive/2008/11/20/1337741.html
浅谈jQuery的选择器相关推荐
- 浅谈jQuery Mobile设计思想
来自51CTO技术社区:http://mobile.51cto.com/others-288591.htm jQuery Mobile设计思想是本文要介绍的内容,主要是来了解jQuery Mobile ...
- php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
- 浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别
举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别 demo Dom结构: <di ...
- js首次修改html无效,浅谈jQuery添加的HTML,JS失效的问题
浅谈jQuery添加的HTML,JS失效的问题 如下图所示, 点击添加后,会新添加一行,但是二级联动就失效了, $('.provinceList').live('change', function() ...
- 浅谈jQuery属性获取
浅谈jQuery的属性获取 基本标签设置与基本css,附图下所示 上述代码如下图: 一.js的一些属性获取 1.var div = document.getElementById("firs ...
- java easing_浅谈jQuery animate easing的具体使用方法(推荐)
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- 浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
- 浅谈jquery之on()绑定事件和off()解除绑定事件
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...
最新文章
- C语言 读取txt文档按行读取到新的txt文档
- python打印楼梯和笑脸_Python实现打印楼梯形状图形
- Asp SqlDataSource将数据库数据绑定在 GridView
- html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音
- 剑指offer--打印1到最大的n位数
- java组件自适应窗口大小_java swing 窗口和控件自适应大小
- 开源joda-time使用demo
- WPF读写config配置文件
- 运营破局,四步完成从0到1
- xp计算机如何查看内存大小,xp如何查看内存大小
- STM32通过BC28用mqtt协议连接onenet及simulate-device的使用
- comsol光学仿真02
- 【加拿大签证】加拿大工签/工作许可work permit 办理流程【官方详细完整,加拿大访问学者必看】
- 如何动态创建水晶报表
- php操作pdf文档输出,PHP生成PDF文档实用技巧
- 半路接手项目有多难?教你做个接盘侠高手!
- 使用第三方GitLab进行登录认证
- 基于C++实现的股票大数据的统计分析与可视化
- 将自己的图片插入QRcode中
- OpenKruise 成为 CNCF 孵化项目:为大规模采用 Kubernetes 打开大门