基本选择器

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. YOLO object detection with OpenCV

    Click here to download the source code to this post. In this tutorial, you’ll learn how to use the Y ...

  2. PDW V2培训简记

    最近有幸参加了微软专家进行的为期一周PDW培训,将一些知识点记录如下: 不知道PDW是什么东西的,简单介绍一下:这是微软与HP/Dell合作推出的SQL Server数据仓库一体机,由HP或DELL提 ...

  3. window 命令行

    清屏 cls 启动服务 net start 服务名(nexus.mysql) 关闭服务 net stop 服务名(nexus.mysql) 删除服务 sc delete 服务名 如果服务名有空格,加引 ...

  4. mac下连接阿里云总是提示密码是吧，permission denied

    早上使用mac连接阿里云服务器 ,总是提示 连接拒绝 之前还是好好的,密码自己有没有改过...     搞了半天,是 没输入用户名.... 上图中 输入 用户 然后输入密码就行了.

  5. 深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

    本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个 ...

  6. SQL Server ->> 调用系统内建扩展存储过程"master.dbo.xp_delete_file"删除过期备份文件

    DECLARE @oldDate DATETIME SET @oldDate = GETDATE()-30 EXECUTE MASTER.dbo.xp_delete_file 0, N'D:\back ...

  7. 使用eclipse遇到的unable to install breakpoint的问题

    调试一个tomcat工程,设置好断点,启动工程,结果出现了下面的错误: 继续运行,再进入断点之前,还会再度提示,但是最终会命中断点. 使用CGLIB查找关键字,了解到CGLIB是一个AOP的拦截库,想 ...

  8. [SQL Server]数据库的恢复

    数据库恢复是和数据库备份相对应的操作,它是将数据库备份重新加载到系统中的过程.数据库恢复可以创建备份完成时数据库中存在的相关文件,但是备份以后的所有数据库修改都将丢失. SQL Server进行数据库 ...

  9. asp.net 對象圖解

  10. Azure Document DB Repository 的实现

    阅读 需要大约  5 分钟. 前景: Azure Cosmos DB 由 Microsoft 提供,是全球分布式多模型数据库. 通过 Azure Cosmos DB 跨任意数量的 Azure 地理区域 ...