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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
javascript时间差插件分享
Jul 18 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
JS实现动态无缝轮播
Jan 11 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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
python针对excel的操作技巧
2018/03/13 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python json转字典字符方法实例解析
2020/04/13 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
计算机专业毕业生的自我评价
2013/11/18 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
市场营销方案范文
2014/03/11 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
大国崛起观后感
2015/06/02 职场文书
在校证明模板
2015/06/17 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS