• 技术文章 >web前端 >前端问答

    jquery中的gt跟lt选择器怎么用

    长期闲置长期闲置2022-06-01 18:36:10原创270

    jquery中的gt跟lt选择器:1、“:gt”选择器用于选取index值高于指定数值的元素,语法为“$(":gt(index值)")”;2、“:lt”选择器用于选取index值小于指定数值的元素,语法为“$(":lt(index)")”。

    本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

    jquery中的gt跟lt选择器

    :gt 选择器

    :gt 选择器选取 index 值高于指定数的元素。

    index 值从 0 开始。

    经常与其他元素/选择器一起使用,来选择指定的组中特定序号之后的元素(如上面的例子)。

    语法

    $(":gt(index)")

    index必需。规定要选择的元素。

    会选取 index 值大于指定数的元素。

    :lt() 选择器

    :lt() 选择器选取 index 值小于指定数字的元素。

    index 值从 0 开始。

    最常见的用法:与其他选择器一起使用,选取指定组合中特定序号之前的元素(如上面的实例)。

    语法为:

    $(":lt(index)")

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title> 
    <script src="js/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("tr:lt(4)").css("background-color", "yellow");
    });
    </script>
    </head>
    <body>
    <h1>欢迎来到我的主页</h1>
    <table border="1">
      <tr>
        <th>序号</th>
        <th>站点名</th>
        <th>网址</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Google</td>
        <td>google.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Runoob</td>
        <td>runoob.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Taobao</td>
        <td>taobao.com</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Baidu</td>
        <td>baidu.com</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sina</td>
        <td>sina.com.cn</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Facebook</td>
        <td>facebook.com</td>
      </tr>
      <tr>
        <td>7</td>
        <td>twitter</td>
        <td>twitter.com</td>
      </tr>
      <tr>
        <td>8</td>
        <td>youtube</td>
        <td>youtube.com</td>
      </tr>
      
    </table>
    </body>
    </html>

    输出结果:

    15.png

    相关视频教程推荐:jQuery视频教程

    以上就是jquery中的gt跟lt选择器怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:html5废弃了哪个列表标签 下一篇:jquery怎么删除兄弟级元素的属性
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery和swiper有什么区别• jquery怎么让a元素的href失效• jquery怎么将数组反转• jquery使用的是什么协议• jquery怎么给select增加选项
    1/1

    PHP中文网