search

博客列表 >jquery选择器

jquery选择器

宿州市筋斗云信息科技-Vip
宿州市筋斗云信息科技-Vip原创
2019年12月21日 13:24:22986浏览

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>
上一条：第十期HTML前端知识总结（2019-12-19）下一条：1219作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多