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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
大家未必知道的Js技巧收藏
Apr 07 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
javascript的BOM汇总
Jul 16 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
Node.js 中使用 async 函数的方法
Nov 20 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php生成图片缩略图的方法
2015/04/07 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python如何重载模块实例解析
2018/01/25 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python实现机器人卡牌
2019/10/06 Python
Python进程池Pool应用实例分析
2019/11/27 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
大学生简历中个人的自我评价
2013/10/06 职场文书
高中地理教学反思
2014/01/29 职场文书
经典团队口号
2014/06/06 职场文书
英语导游词
2015/02/13 职场文书
涨价通知怎么写
2015/04/23 职场文书
红色经典观后感
2015/06/18 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers