jQuery学习: lt与gt

:lt (less than)选择器选取带有小于指定 index 值的元素。
:gt (greater than)选择器选取 index 值高于指定数的元素。
两者的index值都是从0开始,代码用法如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>lt与gt</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用jQuery同时给5个span绑定单击事件$("#star>span").on("click",function(event){// 获取当前点击的是第几个spanlet index = $(this).index();// 将选择的span和前面的span染成红色$(`#star > span:lt(${index + 1})`).css("color","red");// 将选择到的span后面的span染成黑色$(`#star > span:gt(${index})`).css("color","#000");})})</script></head><body><p class="t">1</p><p class="t s">2</p><p class="t">3</p><p class="t">4</p><p class="t">5</p><div id="star"><span>❤</span><span>❤</span><span>❤</span><span>❤</span><span>❤</span></div></body>
</html>

当我点击第四颗心时，效果如下

jQuery学习: lt与gt相关推荐

jQuery学习入门总结之css（）和addClass（）的不同
jQuery学习入门之css()和addClass()的不同这两天研究jQuery的,刚刚开始入门,从昨天开始呢,就发现一个方法addClass的,教程里有一个方法是这样写的 $(docum ...
如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧
好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【JQuery】JQuery学习笔记
(function(){}) 与 $(function(){})的区别 1.(function(){})函数 (function(){})表示一个匿名函数.function(arg){...}定义了一 ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
jQuery学习笔记系列（二）
day02 - jQuery 学习目标: 能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 jQuery 常用属 ...

jQuery学习: lt与gt

jQuery学习: lt与gt相关推荐

最新文章

热门文章