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 ...

随机推荐

Spring事务嵌套引发的问题--Transaction rolled back because it has been marked as rollback-only
转载https://blog.csdn.net/f641385712/article/details/80445912 读了两边才找到问题
JVM内存模型及参数调优
堆.栈.方法区概念区别 1.堆堆内存用于存放由new创建的对象和数组.在堆中分配的内存,由java虚拟机自动垃圾回收器来管理.根据垃圾回收机制的不同, Java堆有可能拥有不同的结构,最为常见的就是 ...
ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&q ...
TensorFlow学习笔记1：graph、session和op
graph即tf.Graph(),session即tf.Session(),很多人经常将两者混淆,其实二者完全不是同一个东西. graph定义了计算方式,是一些加减乘除等运算的组合,类似于一个函数.它 ...
Linux性能优化从入门到实战：16 文件系统篇：总结磁盘I/O指标/工具、问题定位和调优
(1)磁盘 I/O 性能指标文件系统和磁盘 I/O 指标对应的工具文件系统和磁盘 I/O 工具对应的指标 (2)磁盘 I/O 问题定位分析思路 (3)I/O 性能优化思路 Step 1:首先采用 ...
POJ-1390-Blocks （复杂区间DP）
$ POJ~1390~~Blocks: $ (很难想的区间DP) $ solution: $ 很好的一道题目.看起来似乎很简单,当时一直认为可以用二维区间DP来完成,转移 $ n^3 $ . 后来发现 ...
namedtuple的简单使用
""" factory function for creating tuple subclasses with named fields namedtuple 是tupl ...
MaxCompute按量计费计算任务消费监控告警
MaxCompute 按量计费资源为弹性伸缩资源,对于计算任务,按任务需求提供所需资源,对资源使用无限制,同时MaxCompute按量计费的账单为天账单,即当天消费需要第二天才出账,因此,有必要对计算 ...
WinForm、WPF、ASP.NET窗口生命周期
https://blog.csdn.net/s_521_h/article/details/73826928
新手立体四子棋AI教程(4)——启发式搜索与主程序
通过前面几篇文章的学习,我们的四子棋程序已经有了框架.搜索几大部分,但是还有着不少问题,我们的程序只能迭代很有限的步骤,导致棋力低下,在这一篇我们将通过启发式搜索极大的优化搜索效率. 一.原因我们之 ...

jQuery基础--选择器