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. iphone/ipad/ipod设置VPN(pptp连接方式)

    一.点击桌面上的-设置-图标进入设置(如图) 二.点击-通用-进入通用设置 三.点击-VPN-进入VPN设置(如图) 四.点击添加VPN设置进行设置 五.选择并连接

  2. 参数传递的四种形式----- URL，超链接，js，form表单

    什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...

  3. 简明易懂的call apply

    在iteye看到一篇对call解释得相当简明易懂,觉得得宣传一下 : http://uule.iteye.com/blog/1158829 一.方法的定义 call方法: 语法:call([thisO ...

  4. Linux之重定向

    Linux重定向是指修改原来默认的一些东西,对原来系统命令的默认执行方式进行改变,比如说简单的我不想看到在显示器的输出而是希望输出到某一文件中就可以通过Linux重定向来进行这项工作. Linux默认 ...

  5. Android学习笔记----TimerTask中显示Toast的问题

    今天想在TimerTask的run函数中调用Toast显示一下提示信息,却总是导致程序崩溃.可是try语句块却又无法捕获到异常,代码如下: ...... Timer timer = new Timer ...

  6. Myeclipse 2015 stable 1.0 完美破解方法(转自 http://yangl.net/2015/07/14/myeclipse_2015stable_1/)

    Myeclipse 2015 stable 1.0 完美破解方法 http://yangl.net/2015/07/14/myeclipse_2015stable_1/ 破解包(注册机)下载地址:链接 ...

  7. [转]jQuery.Autocomplete实现自动完成功能（详解）

    本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题.     1.jquery.autocomplete参考地址 htt ...

  8. [AX2012]Report data provider调试

    运行使用RDP作为数据源的报表时,RDP类被编译成.NET的服务调用,RDP是X++的代码,它的调试是在MorphX调试器中完成.要在MorphX调试器中调试RDP的X++代码需要以下配置: 添加AO ...

  9. 在 sublime text 3 中添加 Emmet (ZenCoding)

    安装 Emmet 插件: 启动 Sublime Text 3,选择 Preferences>Package Control,点选 Package Control:Install Package: ...

  10. Python & Django 学习笔记

    最近在学校Python和Django.在学习中遇到了种种的问题,对于一个新手来说,下面的问题可能都会遇到.希望能帮助到那些和我一样的人!!0.python-dev安装(ubuntu)  apt-get ...