Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jquery选择器
Blogger Information
Blog 25
fans 0
comment 0
visits 29644
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery选择器
宿州市筋斗云信息科技-Vip
Original
985 people have browsed it

jquery中的选择器！

：first选择器 (选择多个相同元素中的第一个元素！)

:first伪类选择器相当于:eq(0)。它也可以写为:lt(1)。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>学习笔记-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.             }
  27.             p {
  28.                 width: 500px;
  29.                 height: 50px;
  30.                 text-align: center;
  31.                 line-height: 50px;
  32.                 margin: 30px auto 0 auto;
  33.                 border: 1px solid #eee;
  34.                 background: #0356fa;
  35.                 cursor: pointer;
  36.                 color: #FFF;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <div>1</div>
  42.         <div>2</div>
  43.         <div>3</div>
  44.         <div>4</div>
  45.         <div>5</div>
  46.         <div>6</div>
  48.         <p type="button" onclick="clicks()">:first (点我选择第一个DIV)</p>
  49.     </body>
  51.     <script type="text/javascript">
  52.         function clicks(){
  54.             $('div:first').addClass('addCss');
  57.         }
  58.     </script>
  60. </html>
：last选择器 (选择多个相同元素中的最后一个元素！)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>学习笔记-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.         <div>4</div>
  46.         <div>5</div>
  47.         <div>6</div>
  49.         <p type="button" onclick="clicks()">$('div:last')(点我选择最后一个DIV)</p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:last').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：eq（）选择器 (选择多个相同元素中的指定的一个元素！从0开始)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>学习笔记-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.         <div>4</div>
  46.         <div>5</div>
  47.         <div>6</div>
  49.         <p type="button" onclick="clicks()"> $('div:eq(2)')(点我选择) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:eq(2)').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：lt（index）选择器 (选择匹配集合中所有索引值小于给定index参数的元素。)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>学习笔记-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>0</div>
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.         <div>4</div>
  47.         <div>5</div>
  49.         <p type="button" onclick="clicks()"> $('div:lt(2)')(点我选择) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:lt(2)').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：gt（index）选择器 (选择匹配集合中所有索引值大于给定index参数的元素。)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>学习笔记-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div>0</div>
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.         <div>4</div>
  47.         <div>5</div>
  49.         <p type="button" onclick="clicks()"> $('div:gt(0)')(点我选择) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div:gt(0)').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
：DIV[ID]选择所有具有指定属性的元素，该属性可以是任何值。
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>学习笔记-Jquery</title>
  6.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             *{
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.             div {
  13.                 width: 500px;
  14.                 height: 60px;
  15.                 border: 1px solid;
  16.                 border-color: #000000;
  17.                 margin: 15px auto 0 auto;
  18.                 text-align: center;
  19.             }
  20.             .addCss {
  21.                 border-color: orangered;
  22.                 background: red;
  23.                 color: #FFF;
  24.                 font-size: 30px;
  25.                 line-height: 60px;
  26.             }
  28.             p {
  29.                 width: 500px;
  30.                 height: 50px;
  31.                 text-align: center;
  32.                 line-height: 50px;
  33.                 margin: 30px auto 0 auto;
  34.                 border: 1px solid #eee;
  35.                 background: #0356fa;
  36.                 cursor: pointer;
  37.                 color: #FFF;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div id="a">0</div>
  43.         <div id="b">1</div>
  44.         <div id="c">2</div>
  45.         <div class="d">3</div>
  46.         <div id="e">4</div>
  47.         <div class="f">5</div>
  49.         <p type="button" onclick="clicks()"> $('div[id]')(点我选择有ID属性的DIV) </p>
  50.     </body>
  52.     <script type="text/javascript">
  53.         function clicks(){
  55.             $('div[id]').addClass('addCss');
  58.         }
  59.     </script>
  61. </html>
Correcting teacher：西门大官人西门大官人

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post