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. Spark使用总结与分享

    背景 使用spark开发已有几个月.相比于python/hive,scala/spark学习门槛较高.尤其记得刚开时,举步维艰,进展十分缓慢.不过谢天谢地,这段苦涩(bi)的日子过去了.忆苦思甜,为了 ...

  2. Windows 10开启默认网络驱动器访问

    在Windows 10的系统策略中,驱动器盘符的网络访问是默认关闭的,用管理员权限打开注册表,找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...

  3. AtomicInteger简介

    这个类真的非常实用,更重要的是 它确实非常简单: 附上自己的代码,可以自己试试: AtomicInteger,一个提供原子操作的Integer的类.在Java语言中,++i和i++操作并不是线程安全的 ...

  4. ubuntu16.04+opencv3.1配置

    #安装必要的依赖sudo apt-get install build-essential cmakesudo apt-get install cmake Git libgtk2.0-dev pkg-c ...

  5. ServiceManager 小结

    1 ServiceManger 根据name优先从Map中获取IBinder,例如AMS.WMS.PMS:如果Map中没有对应的IBinder,我们获取Serviceanager的代理ServiceM ...

  6. POJ1226:Substrings(后缀数组)

    Description You are given a number of case-sensitive strings of alphabetic characters, find the larg ...

  7. UE4在Android调用Project Tango

    Project Tango应该说是Google一试水AR的设备,其中Project Tango主要二个功能,一个是获取深度信息,如MS的Kinect,有相当多的设备都有这个功能,二是第一人称相对定位, ...

  8. [转]一个小试验验证对象的指针计数置为nil的情况

    本文转载于新风作浪的博客专栏,博客地址:http://blog.csdn.net/duxinfeng2010/article/details/8757211 以下博客原文: 最近遇到这样一个问题,以前 ...

  9. alt属性和title属性差异---终于分清楚了！

    凡是接触过前端的开发者,相信都会接触到<img>标签,自然alt title更是不会陌生,但对他们真正的含义和使用方法,你确定了解吗? 参考: http://www.junchenwu.c ...

  10. 【经验谈】XmlSerializer的坑

    XmlSerializer我想现在用的人可能不多了,大家都在用Json.我现在所在的公司依然在用,所以发现了这个坑.当然这个坑存在很久了只是没用过所以才发现. 事情是这样的,测试那边说系统偶尔会报找不 ...