<!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. uprobe

    本章的我们来学习uprobe ,顾名思义,相对于内核函数/地址的监控,主要用于用户态函数/地址的监控.听起来是不是有点神奇,内核怎么监控用户态函数的调用呢?本章的内容包括: 如何使用uprobe 内核 ...

  2. axios有没有做过⼀些业务封装？

    啊,有的,在项⽬⾥⾯我主要是封装过axios的拦截器部分 我在请求拦截器⾥⾯做了注⼊全局token的事情,这个事⼉是因为有很多接⼝都需要这个token来做数据 鉴权,为了避免书写多次 统⼀配置了⼀下 ...

  3. 封神台 SQL注入 靶场 （猫舍）手动注入

    封神台 SQL注入 靶场 (猫舍)手动注入 靶场地址 http://pu2lh35s.ia.aqlab.cn/?id=1 使用脚本 可以直接使用sqlmap脚本 直接 对这个地址进行测试 不过这样实在 ...

  4. 基于云原生的私有化 PaaS 平台交付实践

    作者:牛玉富,某知名互联网公司专家工程师.喜欢开源 / 热衷分享,对 K8s 及 golang 网关有较深入研究. 本文将解读如何利用云原生解决私有化交付中的问题,进而打造一个 PaaS 平台,提升业 ...

  5. NIO和传统IO

    传统 IO 基于字节流或字符流(如 FileInputStream.BufferedReader 等)进行文件读写,以及使用 Socket 和 ServerSocket 进行网络传输. NIO 使用通 ...

  6. CSS动画（毛玻璃按钮）

    1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa4ofJ9W4ibgD5asQcBesp1f1CXVnrQmicnzqDPskBNEQC4ia0 ...

  7. Marklogic学习 系列专栏整理

    Marklogic学习 系列专栏整理 本人就是个松鼠怪,见到好东西都想收藏,在CSDN发现了这位博主写的一系列MarkLogic相关专栏觉得不错,今天已经看到第六个了,反正很好吃,趁着最近项目使用Ma ...

  8. Mysql(1)—简介及Windows环境下载安装

    Mysql(1)-简介及Windows环境下载安装 一.关于Mysql 1.1 简介 MySQL是一个流行的关系型数据库管理系统(RDBMS),它基于结构化查询语言(SQL)进行操作.MySQL由瑞典 ...

  9. SICTF 2024 Round4 Crypto

    SICTF-Round4--Crypto SignBase task: U0lDVEZ7ODI5MGYwZWYtNzAyYi00NTZmLTlmZjYtNGRhZjhhYTIzNWU1fQ== exp ...

  10. 经典强化学习算法：分层强化学习算法 —— options算法

    论文地址: https://people.cs.umass.edu/~barto/courses/cs687/Sutton-Precup-Singh-AIJ99.pdf 分层强化学习算法options ...