<!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标签的内容的更多相关文章

  1. Web前端JQuery面试题（一）

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  2. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  3. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  4. Web前端JQuery面试题（三）

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  5. 利用jQuery对li标签操作

    <ul class="con" id="products"> <li i=" class=""> < ...

  6. 前端学习笔记(zepto或jquery)——对li标签的相关操作（二）

    对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...

  7. 前端学习笔记(zepto或jquery)——对li标签的相关操作（五）

    对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...

  8. 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  9. 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）

    对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...

  10. 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）

    对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...

随机推荐

  1. 15. 序列化模块json和pickle、os模块

    1. 序列化模块 1.1 序列化与反序列化 (1)序列化 将原本的python数据类型字典.列表.元组 转换成json格式字符串的过程就叫序列化 (2)反序列化 将json格式字符串转换成python ...

  2. template<> 模板特化

    template<> 是用于 模板特化(Template Specialization) 的一种语法. 模板特化允许你为某些特定的模板参数提供不同的实现.例如,template<&g ...

  3. iOS字符串大小写转换使用小结

    iOS开发中字符串用的比较多,追加,拆分,截取,替换,比较,大小写转换使用的频率还挺高.今天看oc技术书的时候看到关于大小写转换的地方,有一个说的是所有字母首字母大写,还是第一次看到,记录一下,以备后 ...

  4. 使用rancher cli对接k8s

    一.获得rancher的token 1.进入rancher,点击右上角弹出框的ApI&Keys 2.进入页面后选择添加key 3.注意,这里的作用集群范围必须不能指定,否则在jenkins服务 ...

  5. flink同步MySQL数据的时候出现内存溢出

    flink同步MySQL数据的时候出现内存溢出 背景:需要将1000w的某类型数据同步到别的数据源里面,使用公司的大数据平台可以很快处理完毕,而且使用的内存只有很少很少量(公司的大数据平台的底层是fl ...

  6. 快速部署sqlserver AlwaysOn集群

    点击查看代码 丐版sqlserver集群 之前试过docker的,k8s的,然后发现,还是最朴素的是最简单的,希望有大佬能够汉化,他妈的,那些英文看得人要发癫啊. 前置准备,参照丐版pxc集群: ht ...

  7. 云游戏平台陷入苦战，继青椒云，云更新，顺网云后，ToDesk正在布局云电竞市场

    在日新月异的科技浪潮中,云游戏正在逐步成为游戏产业的重要分支.根据中国信通院<2023年全球云游戏产业深度观察及趋势研判研究报告>,2022年中国云游戏市场收入达到63.5亿元,同比增长5 ...

  8. chapter1 events and probability

    第一章  事件和概率 1.1 Appication: verifying polynomial identities 1.2 Axioms of probability 1.3 Application ...

  9. 好未来：多云环境下基于 JuiceFS 建设低运维模型仓库

    好未来,前身学而思,于 2010 年在美国纽约证券交易所上市.公司积极将大模型研究应用于教学产品中,近期推出了数学领域的千亿级大模型. 在大模型的背景下,存储系统需处理巨量数据和复杂文件操作,要求支持 ...

  10. Mac 中 NSTrackingArea 鼠标移动事件捕获

    在Mac系统中处理View的鼠标进入,退出以及移动事件时,需要把捕获的区域设置为view的bounds 不能设置为frame. 1 self.trackingArea = [[[NSTrackingA ...