1、基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集)

案例代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>基本选择器</title>
  6.          <link rel="stylesheet" href="../../css/style.css" />
  7.          <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  8.          <script>
  9.              $(function(){
  10.                  $("#btn1").click(function(){
  11.                      $("#one").css("background-color","pink");
  12.                  });
  13.  
  14.                  $("#btn2").click(function(){
  15.                      $(".mini").css("background-color","pink");
  16.                  });
  17.  
  18.                  $("#btn3").click(function(){
  19.                      $("div").css("background-color","pink");
  20.                  });
  21.  
  22.                  $("#btn4").click(function(){
  23.                      $("*").css("background-color","pink");
  24.                  });
  25.  
  26.                  $("#btn5").click(function(){
  27.                      $("#two,.mini").css("background-color","pink");
  28.                  });
  29.              });
  30.          </script>
  31.      </head>
  32.      <body>
  33.          <input type="button" id="btn1" value="选择为one的元素"/>
  34.          <input type="button" id="btn2" value="选择样式为mini的元素"/>
  35.          <input type="button" id="btn3" value="选择所有的div元素"/>
  36.          <input type="button" id="btn4" value="选择所有元素"/>
  37.          <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
  38.          <hr/>
  39.          <div id="one">
  40.              <div class="mini">
  41.                  111
  42.              </div>
  43.          </div>
  44.  
  45.          <div id="two">
  46.              <div class="mini">
  47.                  222
  48.              </div>
  49.              <div class="mini">
  50.                  333
  51.              </div>
  52.          </div>
  53.  
  54.          <div id="three">
  55.              <div class="mini">
  56.                  444
  57.              </div>
  58.              <div class="mini">
  59.                  555
  60.              </div>
  61.              <div class="mini">
  62.                  666
  63.              </div>
  64.          </div>
  65.  
  66.          <span id="four">
  67.  
  68.          </span>
  69.      </body>
  70.  </html>

2、层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

案例代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>层级选择器</title>
  6.          <link rel="stylesheet" href="../../css/style.css" />
  7.          <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  8.          <script>
  9.              $(function(){
  10.                  $("#btn1").click(function(){
  11.                      $("body div").css("background-color","gold");
  12.                  });
  13.  
  14.                  $("#btn2").click(function(){
  15.                      $("body>div").css("background-color","gold");
  16.                  });
  17.  
  18.                  $("#btn3").click(function(){
  19.                      $("#two+div").css("background-color","gold");
  20.                  });
  21.  
  22.                  $("#btn4").click(function(){
  23.                      $("#one~div").css("background-color","gold");
  24.                  });
  25.              });
  26.          </script>
  27.      </head>
  28.      <body>
  29.          <input type="button" id="btn1" value="选择body中的所有的div元素"/>
  30.          <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
  31.          <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
  32.          <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
  33.  
  34.          <hr/>
  35.          <div id="one">
  36.              <div class="mini">
  37.                  111
  38.              </div>
  39.          </div>
  40.  
  41.          <div id="two">
  42.              <div class="mini">
  43.                  222
  44.              </div>
  45.              <div class="mini">
  46.                  333
  47.              </div>
  48.          </div>
  49.  
  50.          <div id="three">
  51.              <div class="mini">
  52.                  444
  53.              </div>
  54.              <div class="mini">
  55.                  555
  56.              </div>
  57.              <div class="mini">
  58.                  666
  59.              </div>
  60.          </div>
  61.  
  62.          <span id="four">
  63.  
  64.          </span>
  65.      </body>
  66.  </html>

3、基本过滤选择器

案例代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>基本过滤选择器</title>
  6.          <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
  7.          <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  8.          <script>
  9.              $(function(){
  10.                  $("#btn1").click(function(){
  11.                      $("body div:first").css("background-color","pink");
  12.                  });
  13.  
  14.                  $("#btn2").click(function(){
  15.                      $("body div:last").css("background-color","pink");
  16.                  });
  17.  
  18.                  $("#btn3").click(function(){
  19.                      $("body div:odd").css("background-color","pink");
  20.                  });
  21.  
  22.                  $("#btn4").click(function(){
  23.                      $("body div:even").css("background-color","pink");
  24.                  });
  25.              });
  26.          </script>
  27.      </head>
  28.      <body>
  29.          <input type="button" id="btn1" value="body中的第一个div元素"/>
  30.          <input type="button" id="btn2" value="body中的最后一个div元素"/>
  31.          <input type="button" id="btn3" value="选择body中的奇数的div"/>
  32.          <input type="button" id="btn4" value="选择body中的偶数的div"/>
  33.  
  34.          <hr/>
  35.          <div id="one">
  36.              <div class="mini">
  37.                  111
  38.              </div>
  39.          </div>
  40.  
  41.          <div id="two">
  42.              <div class="mini">
  43.                  222
  44.              </div>
  45.              <div class="mini">
  46.                  333
  47.              </div>
  48.          </div>
  49.  
  50.          <div id="three">
  51.              <div class="mini">
  52.                  444
  53.              </div>
  54.              <div class="mini">
  55.                  555
  56.              </div>
  57.              <div class="mini">
  58.                  666
  59.              </div>
  60.          </div>
  61.  
  62.          <span id="four">
  63.  
  64.          </span>
  65.      </body>
  66.  </html>

4、属性选择器

案例代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>属性选择器</title>
  6.          <link rel="stylesheet" href="../../css/style.css" />
  7.          <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  8.          <script>
  9.              $(function(){
  10.                  $("#btn1").click(function(){
  11.                      $("div[id]").css("background-color","palegreen");
  12.                  });
  13.  
  14.                  $("#btn2").click(function(){
  15.                      $("div[id='two']").css("background-color","palegreen");
  16.                  });
  17.              });
  18.          </script>
  19.      </head>
  20.      <body>
  21.          <input type="button" id="btn1" value="选择有id属性的div"/>
  22.          <input type="button" id="btn2" value="选择有id属性的值为two的div"/>
  23.  
  24.          <hr/>
  25.          <div id="one">
  26.              <div class="mini">
  27.                  111
  28.              </div>
  29.          </div>
  30.  
  31.          <div id="two">
  32.              <div class="mini">
  33.                  222
  34.              </div>
  35.              <div class="mini">
  36.                  333
  37.              </div>
  38.          </div>
  39.  
  40.          <div id="three">
  41.              <div class="mini">
  42.                  444
  43.              </div>
  44.              <div class="mini">
  45.                  555
  46.              </div>
  47.              <div class="mini">
  48.                  666
  49.              </div>
  50.          </div>
  51.  
  52.          <span id="four">
  53.  
  54.          </span>
  55.      </body>
  56.  </html>

5、表单选择器

案例代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>表单选择器</title>
  6.          <link rel="stylesheet" href="../../css/style.css" />
  7.          <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  8.          <script>
  9.              $(function(){
  10.                  $("#btn1").click(function(){
  11.                      $(":input").css("background-color","paleturquoise");
  12.                  });
  13.  
  14.                  $("#btn2").click(function(){
  15.                      $(":text").css("background-color","paleturquoise");
  16.                  });
  17.              });
  18.          </script>
  19.      </head>
  20.      <body>
  21.          <input type="button" id="btn1" value="选择所有input元素" />
  22.          <input type="button" id="btn2" value="选择文本框" />
  23.          <br/>
  24.          <form>
  25.              <input type="text" /><br />
  26.              <input type="checkbox" /><br />
  27.              <input type="radio" /><br />
  28.              <input type="image" /><br />
  29.              <input type="file" /><br />
  30.              <input type="submit" />
  31.              <input type="reset" /><br />
  32.              <input type="password" /><br />
  33.              <input type="button" /><br />
  34.              <select><option/></select><br />
  35.              <textarea></textarea><br />
  36.              <button></button>
  37.          </form>
  38.      </body>
  39.  </html>

jQuery学习(三)——选择器总结的更多相关文章

  1. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Jquery 学习三

    一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...

  4. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  5. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery学习- 层叠选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery学习-属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery学习-基本选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

随机推荐

  1. php开启CURL支持

    window下安装php_curl支持 1. 找到php.ini 修改extension=php_curl.dll 把前面的分号去掉2. 把 php_curl.dll libeay32.dll ssl ...

  2. 别让好想法埋没：如何进行APP开发？

    经常和许多创业者讨论,发现很多人想法都不错,但是都不知道该如何实现,今天就如何引导大家走出第一步写一篇文章,很多人通常误会一件事情,认为程序员开发可以一步步把自己的想法拼接出来,我有一个功能点,就让程 ...

  3. X位的有/无符号整数

    目录 X位的有符号整数 X位的无符号整数 知识点来自leetcode整数翻转 X位的有符号整数 以4位为例,不管多少位都是相同的概念 在有符号整数中,第一位二进制位用来表示符号,0为正,1为负 最大值 ...

  4. Model、ModelMap和ModelAndView的使用详解

    https://blog.csdn.net/itbiggod/article/details/79685610

  5. JQuery封装ajax的方法

    1.$.post方法 $.post(url[,data][,callback][,type]) url:请求的后台程序地址 data:发送到后台的数据 callback:载入成功时回调函数,该函数参数 ...

  6. 【hihocoder 1519】 逃离迷宫II

    [题目链接]:http://hihocoder.com/problemset/problem/1519?sid=1098756 [题意] Chinese [题解] bfs题; 根据bfs的性质; 第一 ...

  7. Java String.replaceAll()方法

    声明  以下是java.lang.String.replaceAll()方法的声明 public String replaceAll(String regex, String replacement) ...

  8. Ubuntu安装keepalived

    Ubuntu安装keepalived 一.Keepalived是什么鬼东西: keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防止单点故障. 二.Ke ...

  9. nodejs是一个平台，是平台

    node.js是用javascript来写服务器代码的平台

  10. Linux以下的两种文件锁

    文件锁是一种文件读写机制.在不论什么特定的时间仅仅同意一个进程訪问一个文件. 利用这样的机制可以使读写单个文件的过程变得更安全. 在这篇文章中.我们将探讨Linux中不同类型的文件锁,并通过演示样例程 ...