[ancestor descendant]

在给定元素下匹配所有后代元素。这个选择器的使用概率相当之高,使用示例如下:

 //HTML代码:
<div id='div01'>
  <input type="text" class='inp01' value=""/>
  <span><input type="text" class='inp02' value=""/></span>
</div>
//JQuery代码:
$("#div01 input");

结果:

 <input type="text" class='inp01' value=""/>

 <input type="text" class='inp02' value=""/>

[parent > child]

此选择器用于在给定的父元素下匹配所有的子元素,使用如下:

HTML代码同上,jquery代码如下:

$("#div01 > input");

结果:

<input type="text" class="inp01" value=""/>

[prev + next]

此选择器匹配所有紧接在 prev 元素后的 next 元素,使用示例如下:

HTML代码同上,JQuery代码如下:

$(".inp01 span");

结果:

 <span><input type="text" class='inp02' value=""/></span>

[prev ~ siblings]

匹配 prev 元素之后的所有 siblings (同辈)元素

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" />

千里之行始于足下,原本不打算写这个的,因为这个太过基础,后来想想基础才是一切的源头,大家还是不应忽略基础,还是写了。

繁星——JQuery选择器之层级的更多相关文章

  1. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. jquery选择器之层级过滤选择器

    $("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素 ...

  3. jQuery选择器之全面总结

    选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器.如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. jQuery中的选择器完全继承了 ...

  4. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. jQuery选择器之基本过滤选择器Demo

    测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  7. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. jQuery选择器之基本选择器Demo

    测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. jQuery选择器之id选择器

    页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...

随机推荐

  1. requirejs学习

  2. boost asio sync

    Service: #include<boost/asio.hpp> #include<boost/thread.hpp> #include<iostream> #i ...

  3. git学习——git理解和仓库的创建

    一.git用的3个工作的状态的理解. 1. 工作区 workspace(modified); 2. 暂存区 stage(staged) ; 3. git本地仓库 repository(commited ...

  4. python 初级1

    List:Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 构造list非常简单,按照上面的代码,直接用 [ ] 把list的所有元素都括起来, ...

  5. in_array,array_search的使用

    写一个数组里面有小写a-z 大写A-Z 以及数字,把相似的数字和字母都剔除     无论大小写:将括号内的数字剔除(0,o,2,Z,1,i) $arr1 = range("a", ...

  6. -/bin/sh: ./led: not found的解决办法

    环境介绍: 开发板:qq2440 交叉编译器:arm-linux-gcc 3.4.1 内核版本:2.6.13 一.针对该类问题从两个方面入手: 1.从权限出发,权限不够会出现此问题 2.从库文件出发, ...

  7. Openfire on Centos7

    学习一下linux,装备 1)centos 最小安装.(找抽的节奏) 2)必备 oepnssh yum install openssh-server.x86_64 3)配置网络.打开 /etc/sys ...

  8. Java链接MySQL练习题:格式化日期、性别;避免代码注入

    一.查询人员名单,按序号 姓名 性格(男或女) 民族(某族) 生日(年月日)输出 import java.sql.*; import java.text.SimpleDateFormat; publi ...

  9. Sublime Text2 javascript格式化插件JsFormat

    一.安装方法: 按下快捷键 Ctrl+Alt+p 打开命令面板 输入install  这时下拉框第一项就会显示安装包控制器(这个需要初始化安装,不明白的搜索本站关于sublime Text2 的介绍) ...

  10. Linux下LVM

    http://www.cnblogs.com/xiaoluo501395377/archive/2013/05/22/3093405.html