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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
jquery uaMatch源代码
Feb 14 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
React Native项目框架搭建的一些心得体会
May 28 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php实现的SESSION类
2014/12/02 PHP
关于php开启错误提示的总结
2019/09/24 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
简单了解python中对象的取反运算符
2019/07/01 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python实现视频读取和转化图片
2019/12/10 Python
基于python实现地址和经纬度转换
2020/05/19 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
旧时光糖果:Old Time Candy
2018/02/05 全球购物
班组长工作职责
2013/12/25 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Python保存并浏览用户的历史记录
2022/04/29 Python