2. 选择器

2.1. 什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

2.2. 基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li id="four">4</li>

  <li>5</li>

  <li class="green yellow">6</li>

  <li class="green">7</li>

  <li>8</li>

  <li>9</li>

  <li>10</li>

</ul>

<div class="green">111</div>

<div class="green">111</div>

<div class="green">111</div>

<div class="green">111</div>

<script src="jquery-1.12.4.js"></script>

<script>

  //入口函数

  $(function () {

    //jquery如何设置样式

    //css(name, value)

    //name:样式名  value：样式值

    //id选择器  $("#id")

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

    //$(".green").css("backgroundColor", "green");

    //$("li").css("color", "red");

    //交集 并集

    //$("#four,.green").css("backgroundColor", "pink");

    //$("li.green").css("backgroundColor", "red");

    $(".green.yellow").css("backgroundColor", "pink");

  });

</script>

</body>

</html>

2.3. 层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="father">

  <div>11</div>

  <div>22

    <p>111</p>

    <p>222</p>

    <p>333</p>

  </div>

  <div>33</div>

  <div>44</div>

  <div>55</div>

  <p>66</p>

  <p>77</p>

  <p>88</p>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //$("s1,s2")// 并集选择器

    //$("s1 s2")// 后代选择器

    //$("s1>s2")// 子代选择器

    //$("li.green")

    //$("s1s2") //交集选择器

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

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

  });

</script>

</body>

</html>

2.4. 过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

【案例：隔行变色】

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<ul>

  <li>我是第1个li</li>

  <li>我是第2个li</li>

  <li>我是第3个li</li>

  <li>我是第4个li</li>

  <li>我是第5个li</li>

  <li>我是第6个li</li>

  <li>我是第7个li</li>

  <li>我是第8个li</li>

  <li>我是第9个li</li>

  <li>我是第10个li</li>

</ul>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //下标为偶数，过滤

    $("li:even").css("backgroundColor", "red");

    $("li:odd").css("backgroundColor", "cyan");

    $("li:lt(1)").css("fontSize", "32px");

  });

</script>

</body>

</html>

2.5. 筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

【案例：下拉菜单】this+children+mouseenter+mouseleave

【案例：突出展示】siblings+find

【案例：手风琴】next+parent

【案例：淘宝精品】index+eq

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    .wrap {

      width: 330px;

      height: 30px;

      margin: 100px auto 0;

      padding-left: 10px;

      background-image: url(imgs/bg.jpg);

    }

    .wrap li {

      background-image: url(imgs/libg.jpg);

    }

    .wrap > ul > li {

      float: left;

      margin-right: 10px;

      position: relative;

    }

    .wrap a {

      display: block;

      height: 30px;

      width: 100px;

      text-decoration: none;

      color: #000;

      line-height: 30px;

      text-align: center;

    }

    .wrap li ul {

      position: absolute;

      top: 30px;

      display: none;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //mouseover：鼠标经过事件

      //mouseout:鼠标离开事件

      //mouseenter:鼠标进入事件

      //mouseleave：鼠标离开事件

      var $li = $(".wrap>ul>li");

      //给li注册鼠标经过事件，让自己的ul显示出来

      $li.mouseenter(function () {

        //找到所有的儿子，并且还得是ul

        $(this).children("ul").show();

      });

      $li.mouseleave(function () {

        $(this).children("ul").hide();

      });

    });

  </script>

</head>

<body>

<div class="wrap">

  <ul>

    <li>

      <a href="javascript:void(0);">一级菜单1</a>

      <ul class="ul">

        <li><a href="javascript:void(0);">二级菜单11</a></li>

        <li><a href="javascript:void(0);">二级菜单12</a></li>

        <li><a href="javascript:void(0);">二级菜单13</a></li>

      </ul>

    </li>

    <li>

      <a href="javascript:void(0);">一级菜单2</a>

      <ul>

        <li><a href="javascript:void(0);">二级菜单21</a></li>

        <li><a href="javascript:void(0);">二级菜单22</a></li>

        <li><a href="javascript:void(0);">二级菜单23</a></li>

      </ul>

    </li>

    <li>

      <a href="javascript:void(0);">一级菜单3</a>

      <ul>

        <li><a href="javascript:void(0);">二级菜单31</a></li>

        <li><a href="javascript:void(0);">二级菜单32</a></li>

        <li><a href="javascript:void(0);">二级菜单33</a></li>

      </ul>

    </li>

  </ul>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    body {

      background: #000;

    }

    .wrap {

      margin: 100px auto 0;

      width: 630px;

      height: 394px;

      padding: 10px 0 0 10px;

      background: #000;

      overflow: hidden;

      border: 1px solid #fff;

    }

    .wrap li {

      float: left;

      margin: 0 10px 10px 0;

    }

    .wrap img {

      display: block;

      border: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $(".wrap>ul>li").mouseenter(function () {

        $(this).css("opacity", "1").siblings().css("opacity", "0.4");

      });

      $(".wrap").mouseleave(function () {

        //让所有的li都变亮

        //$("li");

        //$(".wrap li");

        //$(".wrap>ul>li")

        //$(this).children().children("li");

        $(this).find('li').css("opacity", 1);

      });

    });

  </script>

</head>

<body>

<div class="wrap">

  <ul>

    <li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li>

  </ul>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {padding: 0;margin: 0;}

    ul { list-style-type: none;}

    .parentWrap {

      width: 200px;

      text-align:center;

    }

    .menuGroup {

      border:1px solid #999;

      background-color:#e0ecff;

    }

    .groupTitle {

      display:block;

      height:20px;

      line-height:20px;

      font-size: 16px;

      border-bottom:1px solid #ccc;

      cursor:pointer;

    }

    .menuGroup > div {

      height: 200px;

      background-color:#fff;

      display:none;

    }

  </style>

  <script src="jquery-1.12.4.js"></script>

  <script>

      $(function () {

          //思路分析：

          //1. 给所有的span注册点击事件，让当前span的兄弟div显示出来

          $(".groupTitle").click(function () {

            //下一个兄弟：nextElementSibling

            //链式编程：在jQuery里面，方法可以一直调用下去。

            $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);

          });

      });

  </script>

</head>

<body>

<ul class="parentWrap">

  <li class="menuGroup">

    <span class="groupTitle">标题1</span>

    <div>我是弹出来的div1</div>

  </li>

  <li class="menuGroup">

    <span class="groupTitle">标题2</span>

    <div>我是弹出来的div2</div>

  </li>

  <li class="menuGroup">

    <span class="groupTitle">标题3</span>

    <div>我是弹出来的div3</div>

  </li>

  <li class="menuGroup">

    <span class="groupTitle">标题4</span>

    <div>我是弹出来的div4</div>

  </li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

      font-size: 12px;

    }

    ul {

      list-style: none;

    }

    a {

      text-decoration: none;

    }

    .wrapper {

      width: 298px;

      height: 248px;

      margin: 100px auto 0;

      border: 1px solid pink;

      overflow: hidden;

    }

    #left, #center, #right {

      float: left;

    }

    #left li, #right li {

      background: url(images/lili.jpg) repeat-x;

    }

    #left li a, #right li a {

      display: block;

      width: 48px;

      height: 27px;

      border-bottom: 1px solid pink;

      line-height: 27px;

      text-align: center;

      color: black;

    }

    #left li a:hover, #right li a:hover {

      background-image: url(images/abg.gif);

    }

    #center {

      border-left: 1px solid pink;

      border-right: 1px solid pink;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //找不到对象

      $(function () {

        $("#left>li").mouseenter(function () {

          $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();

        });

        $("#right>li").mouseenter(function () {

          $("#center>li").eq($(this).index() + 9).show().siblings().hide();

        });

      })

    });

    //      $("#left>li").mouseenter(function () {

    //        //让center中对应下标的li显示，其他li隐藏

    //        var idx = $(this).index();

    //        $("#center>li:eq(" + idx + ")").show().siblings().hide();

    //      });

    //

    //      $("#right>li").mouseenter(function () {

    //        var idx = $(this).index() + 9;

    //        $("#center>li").eq(idx).show().siblings().hide();

    //

    //        //$("#center>li").eq(idx)  :jq对象

    //        //$("#center>li").get(idx);：js对象

    //      });

    //    });

  </script>

</head>

<body>

<div class="wrapper">

  <ul id="left">

    <li><a href="#">女靴</a></li>

    <li><a href="#">雪地靴</a></li>

    <li><a href="#">冬裙</a></li>

    <li><a href="#">呢大衣</a></li>

    <li><a href="#">毛衣</a></li>

    <li><a href="#">棉服</a></li>

    <li><a href="#">女裤</a></li>

    <li><a href="#">羽绒服</a></li>

    <li><a href="#">牛仔裤</a></li>

  </ul>

  <ul id="center">

    <li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男包.jpg" width="200" height="250"/></a></li>

  </ul>

  <ul id="right">

    <li><a href="#">女包</a></li>

    <li><a href="#">男靴</a></li>

    <li><a href="#">登山鞋</a></li>

    <li><a href="#">皮带</a></li>

    <li><a href="#">围巾</a></li>

    <li><a href="#">皮衣</a></li>

    <li><a href="#">男毛衣</a></li>

    <li><a href="#">男棉服</a></li>

    <li><a href="#">男包</a></li>

  </ul>

</div>

</body>

</html>

　　虹吸灯

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>京东商城</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .slider {

      height: 340px;

      width: 790px;

      margin: 100px auto;

      position: relative;

    }

    .slider li {

      position: absolute;

      display: none;

    }

    .slider li:first-child {

      display: block;

    }

    .arrow {

      display: none;

    }

    .slider:hover .arrow {

      display: block;

    }

    .arrow-left,

    .arrow-right {

      font-family: "SimSun", "宋体";

      width: 30px;

      height: 60px;

      background-color: rgba(0, 0, 0, 0.1);

      position: absolute;

      top: 50%;

      margin-top: -30px;

      cursor: pointer;

      text-align: center;

      line-height: 60px;

      color: #fff;

      font-weight: 700;

      font-size: 30px;

    }

    .arrow-left:hover,

    .arrow-right:hover {

      background-color: rgba(0, 0, 0, .5);

    }

    .arrow-left {

      left: 0;

    }

    .arrow-right {

      right: 0;

    }

  </style>

</head>

<body>

<div class="slider">

  <ul>

    <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/8.jpg" alt=""></a></li>

  </ul>

  <!--箭头-->

  <div class="arrow">

    <span class="arrow-left"><</span>

    <span class="arrow-right">></span>

  </div>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    var $li = $(".slider>ul>li");

    var count = 0;

    $(".arrow-right").click(function () {

      count++;

      if(count == $li.length){

        count = 0;

      }

      $li.eq(count).fadeIn(1000).siblings().fadeOut(1000);

    });

    $(".arrow-left").click(function () {

      count--;

      if(count == -1){

        count = $li.length - 1;

      }

      $li.eq(count).fadeIn(1000).siblings().fadeOut(1000);

    });

  });

</script>

</body>

</html>

jQuery基础--选择器的更多相关文章

jQuery基础——选择器、效果
一.使用JS的痛处在学习和使用js的过程中发现了js的一些痛处: 1.书写繁琐,代码量大. 2.代码复杂. 3.动画效果很难实现.使用定时器,要小心各种定时器的清除.各种操作和处理事件不好实现. 4 ...
jQuery基础-选择器，样式操作
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...
三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器
1.#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id") 其中#my_id ...
jQuery基础选择器
attr()方法的功能是设置或获取元素的某项属性值. attr("disabled", "true”)表示使该功能不可用. #id 选择器 $("#my_id& ...
jQuery基础课程
环境搭建搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
jQuery基础之一
jQuery基础之一初识jQuery jQuery封装JavaScript中多个好用的函数成为并形成代码库,操作时也更符合我们的习惯,并且减少了浏览器之间的兼容性. jQuery官网引入本地 ...
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器前面的话选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

随机推荐

1897. tank 坦克游戏
传送门显然考虑 $dp$,发现时间只和当前位置和攻击次数有关,设 $F[i][j][k]$ 表示当前位置为 $i,j$ ,攻击了 $k$ 次得到的最大分数初始 $f[1][1][k]$ 为位置 $ ...
CentOS7 安装Postgresql 11+ 源码编译安装Postgis-2.5.2
####安装Postgresql-11yum install zlib-devel gcc makegroupadd postgresuseradd -g postgres postgrespassw ...
VISTA Enhancer Browser
微信公众号:生物信息学起步如果觉得对你有帮助,欢迎关注/转发/分享[1] 内容目录 1.目的2.实验数据2.1 候选增强子识别2.2 转基因小鼠分析2.3 注释3.搜索数据库3.1 概括3.2 高级搜 ...
ES6——Promise
异步和同步异步,操作之间没有关系,同时执行多个操作, 代码复杂同步,同时只能做一件事,代码简单 Promise 对象用同步的方式来书写异步代码 Promise 让异步操作写起来,像在写同步操作的 ...
linux tcp/ip 调优
sysctl 变量修改方法:sysctl –a 使用 sysctl 命令修改系统变量,和通过编辑 sysctl.conf 文件来修改系统变量两种.但并不是所有的变量都可以在这个模式下设定. 注:sy ...
pgtclsh -- PostgreSQL TCLshell 客户端
SYNOPSIS pgtclsh [filename [argument...]] DESCRIPTION 描述 pgtclsh 是一个 Tcl shell 接口,用 PostgreSQL 数据库访问 ...
powerdesigner数据库设计
(1)创建物理数据模型打开PowerDesigner,然后点击File-->New Model然后选择如下图所示的物理数据模型(物理数据模型的名字自己起,然后选择自己所使用的数据库即可) ( ...
idea import class的快捷键
有自动import class的快捷键设置如下: 1.alt+enter 2.写好代码之后ctrl+alt+l格式化代码,优化导入包 1.alt+enter 2.写好代码之后ctrl+alt+l ...
debian系列systemd 配置nodejs服务
1 新建service配置文件 vi /etc/systemd/system/node.service [Unit] Description=My super nodejs app [Service ...
maven 提取jar包依赖及打包排除
<properties> <project.targetDir>D:\jar</project.targetDir> <project.targetServe ...

jQuery基础--选择器