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. 深入剖析 redis 主从复制

    主从概述 redis 支持 master-slave(主从)模式,redis server 可以设置为另一个 redis server 的主机(从机),从机定期从主机拿数据.特殊的,一个 从机同样可以 ...

  2. SQL Server 2012 各版本功能比较

    有关不同版本的 SQL Server 2012 所支持的功能的详细信息. 功能名称 Enterprise 商业智能 Standard Web Express with Advanced Service ...

  3. “You must not call setTag() on a view Glide is targeting” 解决

    报错原因大致是因为Glide加载的iamgeView调用了setTag()方法导致的错误, 因为Glide已经默认为ImageView设置的Tag. 解决办法:自定义一个Application,在里面 ...

  4. Android杂谈--HTC等手机接收不到UDP广播报文的解决方案

    最近遇到个问题,在android手机上发送UDP报文的时候,HTC等机型(测试用HTC new one)接收不到广播报文,而其他的samsung, huawei, xiaomi, nexus等等均没有 ...

  5. vs多项目模板及add-in开发

    本文分2部分 第一为自定义多项目模板 第二为vs add-in开发 效果图 1.自定义模板 2. 工具菜单 3.窗口 4.工程 5.文件 ... 一. 多项目模板 单项目模板做起来很简单 选中一个项目 ...

  6. VS替换空行

    visual studio2012 改变了正则表达式的写法 因此原来的不管用了 Old: ^:b*$\n New: ^(?([^\r\n])\s)*\r?$\r?\n Click Ctrl-H (qu ...

  7. iOS CoreData 增删改查详解

    最近在学习CoreData, 因为项目开发中需要,特意学习和整理了一下,整理出来方便以后使用和同行借鉴.目前开发使用的Swift语言开发的项目.所以整理出来的是Swift版本,OC我就放弃了. 虽然S ...

  8. [Z]CS权威会议

    CS Conference TOP 40 计算机会议TOP40 一.A 类 15 个 ASPLOS: Architecture Support for Programming Languages an ...

  9. Gradle 脚本剪片---copy

    Gradle是以Groovy语言为基础,基于DSL语法的自动化构建工具,一个构建脚本能够包含任何Groovy语言元素,每个脚本都是UTF-8编码的文件. 6-1 Project对象API 前面我们说过 ...

  10. Linux进程通信 之 信号灯(semphore)(System V && POSIX)

    一. 信号灯简介 信号灯与其他进程间通信方式不大相同,它主要提供对进程间共享资源访问控制机制. 相当于内存中的标志,进程可以根据它判定是否能够访问某些共享资源,同时,进程 也可以修改该标志.除了用于访 ...