juqery 学习之三 选择器 层级 基本


Posted in Javascript onNovember 25, 2010

#id

根据给定的ID匹配一个元素。

Matches a single element with the given id attribute.

返回值

Element

参数

id (String) : 用于搜索的,通过元素的 id 属性中给定的值

示例

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]
---------------------------------------------------------------------------------------

element

根据给定的元素名匹配所有元素

Matches all elements with the given name.

返回值

Array<Element>

参数

element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。

示例

查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]
---------------------------------------------------------------------------------------

.class

根据给定的类匹配元素。

Matches all elements with the given class.

返回值

Array<Element>

参数

class (String) : 一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。

示例

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

---------------------------------------------------------------------------------------

*

匹配所有元素
多用于结合上下文来搜索。

Matches all elements.
Most useful when combined with a context to search in.

返回值

Array<Element>

示例

找到每一个元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

---------------------------------------------------------------------------------------

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。

Matches the combined results of all the specified selectors.
You can specify any number of selectors to combine into a single result.

返回值

Array<Element>

参数

selector1 (Selector) : 一个有效的选择器

selector2 (Selector) : 另一个有效的选择器

selectorN (Selector) : (可选) 任意多个有效选择器

示例

找到匹配任意一个类的元素。

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
---------------------------------------------------------------------------------------

ancestor descendant

在给定的祖先元素下匹配所有的后代元素

Matches all descendant elements specified by descendant of elements specified by ancestor.

返回值

Array<Element>

参数

ancestor (Selector) : 任何有效选择器

descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素

示例

找到表单中所有的 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" /> ]

---------------------------------------------------------------------------------------

parent > child

在给定的父元素下匹配所有的子元素

Matches all child elements specified by child of elements specified by parent.

返回值

Array<Element>

参数

parent (Selector) : 任何有效选择器

child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素

示例

匹配表单中所有的子级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" /> ]

---------------------------------------------------------------------------------------

prev + next

匹配所有紧接在 prev 元素后的 next 元素

Matches all next elements specified by next that are next to elements specified by prev.

返回值

Array<Element>

参数

prev (Selector) : 任何有效选择器

next (Selector) :一个有效选择器并且紧接着第一个选择器

示例

匹配所有跟在 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" /> ]

---------------------------------------------------------------------------------------

prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.

返回值

Array<Element>

参数

prev (Selector) : 任何有效选择器

siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈

示例

找到所有与表单同辈的 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" /> ]
Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 #Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 #Javascript
jquery 学习之二 属性(类)
Nov 25 #Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 #Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 #Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 #Javascript
学习并汇集javascript匿名函数
Nov 25 #Javascript
You might like
php 数组字符串搜索array_search技巧
2016/07/05 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
树结构之JavaScript
2017/01/24 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python redis 删除key脚本的实例
2019/02/19 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
母亲节感恩寄语
2014/02/21 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
大学生毕业求职信
2014/06/12 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript