基本选择器

1.id选择器  ---------------------------->根据id来获取，只有一个。--------------------------------------------$( " #id的值 " )

2.标签选择器-------------------------->根据标签的名字获取，可以有多个。-------------------------------------------$( " 标签的名字 " )

3.类选择器----------------------------->根据类样式的名字来获取，可以有多个。-------------------------------------------------------$( " . 类样式的名字" )

复杂选择器

4.标签+类样式选择器-------------------------------------------------------------->$( "标签名.类样式的名字" )

5.多条件选择器---------------------------------------------------------------------->$( "标签1名，标签2名，标签3名，......" )

层次选择器

6.后代选择器------------------------------------------------------------------------->$( " 单一选择器1   单一选择器2" )------------------------------------------------->获取单一选择器1中所有的单一选择器2，儿子、孙子。。。都要

7.子代选择器------------------------------------------------------------------------->$( " 单一选择器1>单一选择器2" )------------------------------------------------->获取单一选择器1中所有的子代单一选择器2，儿子

8.获取当前元素的相邻元素------------------------------------------------------->$( " 单一选择器1+单一选择器2" )------------------------------------------------->获取和单一选择器1相邻的单一选择器2

9.获取当前元素后面所有元素---------------------------------------------------->$( " 单一选择器1~单一选择器2" )------------------------------------------------->获取单一选择器1后面的所有的单一选择器2

示例代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

                 $("#btn").click(function(){

                     //获取div中所有的p标签(凡是div的后代都能获得)

                     //$("#dv p").css("backgroundColor","red");

                     //获取div中的所有的子元素(只是取div的所有子代)

                     //$("#dv>p").css("backgroundColor","red");

                     //获取div后面的第一个p元素

                     //$("#dv+p").css("backgroundColor","red");

                     //获取div后面所有的兄弟元素p元素

                     $("#dv~p").css("backgroundColor","red");

                 });

             });

         </script>

     </head>

     <body>

         <input type="button" id="btn" value="显示效果" />

         <div id="dv">

             <p>这是div中的第一个p标签</p>

             <ul>

                 <li>这是第一个li标签</li>

                 <li><p>这是第二个li中的一个p标签</p></li>

                 <li>这是第三个li标签</li>

             </ul>

             <p>这是div中的第二个p标签</p>

         </div>

         <p>这是div后面的第一个p标签</p>

         <p>这是div后面的第二个p标签</p>

         <p>这是div后面的第三个p标签</p>

     </body>

 </html>

效果图：

后代选择器　　　　　　　　　　　　　　　　　　　　　　子选择器　　　　　　　　　　　　　　　　　　　　　　　　相邻第一个元素选择器　　　　　　　　　　　　相邻后面所有元素选择器

            

jQuery----选择器（重点是层次选择器）的更多相关文章

  1. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery基础学习8——层次选择器next()和prev()方法

    $('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...

  3. jQuery基础学习8——层次选择器children()方法

    $('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...

  4. 初探jquery之强大丰富的选择器

    ---恢复内容开始--- 1.基本选择器 常用的有id选择器:#id,   类选择器:.class , 元素选择器. 2.层次选择器 $(ancestor descendant):选取ancestor ...

  5. jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...

  6. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  7. jQuery层次选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. Jquery基本、层次选择器

    基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...

  9. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

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

随机推荐

  1. C#Owin auth20开发 OwinStartup 不会触发的解决办法

    在使用owin auth20设置token时候遇到一个问题.项目中已经存在如下初始化配置类 using Microsoft.Owin; using Owin; [assembly: OwinStart ...

  2. java基础(七) java四种访问权限

    引言   Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4种访问权限并不是任何时候都可以使用.下面整理一下,在什么情况下,有哪些访问权限可以允许选择. 一.访问权限简介 访问权限控制: ...

  3. windows 2008 r2 安装 owas 2013

    windows 2008 r2  安装 owas 2013 1.NDP452-KB2901907-x86-x64-AllOS-ENU 2.Add-WindowsFeature Web-Server,W ...

  4. Sun Solairs系统添加裸设备

    Sun Solaris系统添加裸设备对表空间进行扩容的大体操作步骤. 1.查看当前卷组信息 --查看当前卷组信息#vxdg list --查看当前卷组中物理磁盘的使用情况#vxdg free |gre ...

  5. HBase 负载均衡

    HBase 可以根据当前集群的负载以region为单位进行rebalance.在HMaster中,后台会起一个线程定期检查是否需要进行rebalance,线程叫做BalancerChore.线程每隔  ...

  6. Coroutine及其实现

    线程是内核对外提供的服务,应用程序可以通过系统调用让内核启动线程,由内核来负责线程调度和切换.线程在等待IO操作时线程变为unrunnable状态会触发上下文切换.现代操作系统一般都采用抢占式调度,上 ...

  7. Vue2学习笔记:class和style

    1.用法 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  8. RabbitMQ学习---RabbitMQ的学习

    [更多参考]http://www.cnblogs.com/alex3714/articles/5248247.html

  9. 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  10. 树&二叉树&&满二叉树&&完全二叉树&&完满二叉树

    目录 树 二叉树 完美二叉树(又名满二叉树)(Perfect Binary Tree) 完全二叉树(Complete Binary Tree) 完满二叉树(Full Binary Tree) 树 名称 ...