<!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. Whizard：跨越 Thanos 从开源项目到生产就绪的鸿沟

    此文是根据 KubeSphere 在 KubeCon China 2024 上的演讲分享整理而成. 议题简介 作为最受欢迎和强大的 Prometheus 长期存储项目之一,Thanos 被社区广泛采用 ...

  2. 云原生周刊：Kubernetes v1.30 发布 ｜ 2024.4.22

    开源项目推荐 pv-migrate pv-migrate 是一个 CLI 工具/kubectl 插件,可轻松将一个 Kubernetes 的内容迁移 PersistentVolumeClaim 到另一 ...

  3. 微宏科技基于 KubeSphere 的微服务架构实践

    作者:尹珉,KubeSphere Ambassador.contributor,KubeSphere 社区用户委员会杭州站站长. 公司简介 杭州微宏科技有限公司于 2012 年成立,专注于业务流程管理 ...

  4. 在 K8s 中快速部署使用 GitLab 并构建 DevOps 项目

    作者:张海立,KubeSphere 社区 Ambassador.Talented Speaker,社区用户委员会上海站副站长 原文链接:https://kubesphere.com.cn/blogs/ ...

  5. 12C RAC 故障分析 - ORA-17503: ksfdopn:2 Failed to open file +DATA/EIC1/PASSWORD/pwdeic1.256.957086685

    一.故障描述 Oracle 12C PDBS(PDB NAME = WRYPC) 在note1节点上是MOUNTED状态,在note2节点上是READ WRITE状态.note1节点上启动该PDB长时 ...

  6. vue 父子组件之间传值

    在vue中父子组件传值是必不可少的,大家必须要学会! 首先父组件向子组件传值: 父组件:比如我们传teacher为index,如果我们传值变量可以使用 : 绑定我们在data中定义的变量. 子组件:为 ...

  7. es安全认证search-guard配置

    大数据安全系列的其它文章 https://www.cnblogs.com/bainianminguo/p/12548076.html-----------安装kerberos https://www. ...

  8. ArgoWorkflow教程(八)---基于 LifecycleHook 实现流水线通知提醒

    本篇介绍一下 ArgoWorkflow 中的 ExitHandler 和 LifecycleHook 功能,可以根据流水线每一步的不同状态,执行不同操作,一般用于发送通知. 1. 概述 本篇介绍一下 ...

  9. 一些很好用的SVN功能

    1.checkout 1.1 只checkout部分目录和文件 目的:有时候项目的文件很多,但是只会关心其中的某几个文件,就可以只checkout这几个文件,可以缩短checkout时间且减少其他文件 ...

  10. Clickhouse SQL语法

    Insert 基本与标准 SQL(MySQL)基本一致 (1)标准 insert into [table_name] values(-),(-.) (2)从表到表的插入 insert into [ta ...