jquery选择器，选择接着学：

前面学习了基本选择器中的CSS选择器，现在学层级选择器：

1.子元素选择器

子元素选择器，用于在给定的父元素下，查找这个父元素下面的所有的子元素，语法格式，如下：

$("parent>child")

其中，参数parent是任意有效的选择器；child也是一个选择器，并且它是第一个选择器的子元素，用于筛选子元素。两个参数之间，用“>”分隔：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>jquery子元素选择器</title>

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <script type="text/javascript">

        $(function () {

            $("form>input");

        });

    </script>

</head>

<body>

    <form>

         <label>标题</label>

        <input name="title" type="text"/>

        <div>

            <input name="content" type="text"/>

        </div>

    </form>

</body>

</html>

结果是;<input name="title" type="text"/>

2,后代元素选择器

后代元素选择器，用于在给定祖先元素下匹配所有的后代元素，语法格式：

$("ancestor descendant")

其中，参数ancestor是任意有效的选择器，descendant也是一个选择器，用于筛选后代元素，后代元素可能是ancestor元素的子元素，孙元素，重孙元素等，两个参数之间用空格分隔。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>后代元素选择器</title>

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("form input");

        });

    </script>

</head>

<body>

    <form>

         <label>label</label>

        <input name="news" type="text" value="text1"/>

        <label>label3</label>

        <div>

            <label>label2</label>

            <input type="text" name="news2" value="text1"/>

        </div>

    </form>

</body>

</html>

结果是：

3，紧邻同辈元素选择器

紧邻同辈元素选择器，用于匹配所有紧接在Prev元素后的next元素，语法格式：

$("prev+next")

其中，prev（selector）表示任意有效的选器器；next(selector)表示一个有效选择器并且紧接着第一个选择器，两者用“+”分隔.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>紧邻同辈元素选择器</title>

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <script type="text/javascript">

        $(function () {

            $("div+span")

        });

    </script>

</head>

<body>

    <form>

        <div>div1</div>

        <span>span1</span>

        <div>

            <span>span2</span>

        </div>

        <span>span3</span>

    </form>

</body>

</html>

结果是：

4.相邻同辈元素选择器

相邻同辈元素选择器，用于选择某元素后面的所有的同辈元素，语法格式：

$("prev~siblings")

其中，参数prev表示任意有效的选择器，siblings也是一个选择器，用于筛选prev后面的所有同辈元素，两者之间用破浪线（~）分隔，

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>相邻同辈元素选择器</title>

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("div~input").css("border", "2px solid blue");

            $("input~p").css("color", "red");

        });

    </script>

    <style type="text/css">

        p

        {

            color:blue;

            font-size:14px;

        }

        div, input

        {

            border:1px solid red; width:200px;height:100px;

        }

    </style>

</head>

<body>

    <div></div>

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

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

    <p>段落标记</p>

</body>

</html>

变化前：

变化后：

好了，时间不早了，今天就学到这～～～。

jquery选择器（原创）<二>的更多相关文章

  1. jquery选择器（原创）

    jquery选择器大方向可以分为这样: 下面我们先来看看基本选择器总的CSS选择器: 1.标签选择器: $("element") 其中,参数element,表示待查找的HTML标记 ...

  2. *jQuery选择器总结(原创：最全、最系统、实例展示)

    jquery选择器包括四部分:一.基本选择器二.层次选择器三.过滤选择器四.表单元素选择器 一.基本选择器1.ID选择器:$('#myDiv');2.类选择器:$('.className');3.元素 ...

  3. jQuery选择器我犯的错误（原创）

    jQuery的选择器十分强大,但是在使用jQuery选择器的时候一定要十分小心,空格.冒号.引号到处都是坑,老手也不能避免,只能勤加练习,熟能生巧,掌握规律,为了练习,凡是到选择器的地方我都自己先敲, ...

  4. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  5. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  6. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  7. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  8. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

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

  9. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

随机推荐

  1. Pomelo：网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  2. 内部通信服务Factory（WCF）

    WCF,很好,却又麻烦,很多时候不想用WCF的原因就是:用这个真麻烦... 麻烦的地方,比如: 一堆一堆的服务配置,散落在一个一个的folder下,更新系统时容易出错 客户端除了要知道WCF Cont ...

  3. Windows 2008 利用Filezilla server搭建FTP

    Windows 2008 利用Filezilla server搭建FTP, 安装后总是提示Error Connection To Server Lost , 后来,无意中先安装了IIS,再安装file ...

  4. 正则指引-字符组demo

    class Program { static void Main(string[] args) { string str = "b"; var result1 = Regex.Is ...

  5. 【News】SpagoBI中国官方微信对外发布

    爱数据,爱分析,爱达比 致力于国际优秀开源BI应用在中国的普及推广,用数据开启中小企业智慧之门: 扫描上图二维码,关注SpagoBI中国官方微信,2015年8月18日将在腾讯课堂.百度传课.网易云课堂 ...

  6. [原创]Java中的字符串比较，按照使用习惯进行比较

    java中的字符串比较一般可以采用compareTo函数,如果a.compareTo(b)返回的是小于0的数,那么说明a的unicode编码值小于b的unicode编码值. 但是很多情况下,我们开发一 ...

  7. 关于mvc、webapi中get、post、put、delete的参数

    webapi中post提交的数据必须是一个类,get提交的数量无所谓 多种参数get时,参数名不能相同: 在能通过c#的校验的前提下,参数名.参数数量不能全完相同 public string Get( ...

  8. CENTOS 下 编译安装 tesseract-ocr 3.0.4 识别文字

    网上搜集了不少资料,发现目前Tesseract转移到了Github上,因此下载方式和以前略有差别,下文是参考了诸位达人(再此表示感谢)和自己的实际操作过程形成的.(1)首先安装依赖的leptonica ...

  9. C2C,B2C,F2C三种电商运营模式的比较

      第三方模式(C2C) 销售商模式(B2C) 生产商模式(F2C) 概念及简介 第三方平台提供商模式是电子商务的最原始也是最自然的形式.这种模式一般都是由信息技术开发商负责建立平台,利用平台扩展电子 ...

  10. GDC2014免费slide整理下载

    GDC2014图形和程序相关的部分免费slide整理下载:)http://pan.baidu.com/s/1eQzMrxo gdc14_An Indie Approach to procedural ...