<!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. duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

    duxui是duxapp官方开发的一款兼容多端的UI组件库,兼容小程序.H5.React Native,库中提供了60+的组件,覆盖大部分使用场景 它能帮助你通过统一的组件样式,快速完成多端应用的开发 ...

  2. Nuxt.js 应用中的 page：transition：finish 钩子详解

    title: Nuxt.js 应用中的 page:transition:finish 钩子详解 date: 2024/10/10 updated: 2024/10/10 author: cmdrago ...

  3. iOS使用SourceTree回滚回滚小结

    代码回滚,适用于的场景: 1.提交错代码,想放弃刚刚提交的部分:2.代码发生冲突,处理比较麻烦,为了代码安全,直接回滚到之前干净的代码.我个人理解,可以分为本地回滚和远程回滚: 一.本地回滚,回滚自己 ...

  4. Android复习(三)清单文件中的元素——>action、activity-alias、category、compatible-screens、data

    <action> 语法: <action android:name="string" />   包含于: <intent-filter> 说明: ...

  5. 2024Ciscn总决赛Web Writeup

    前言 鸽了三个月的复现计划:) ezjs 考点是express引擎解析的一个trick,在高版本的express已经修复,先贴源码 const express = require('express') ...

  6. Edge缓存清理操作说明

    1. 打开Edge浏览器 2. 点击屏幕右上角三个点的按钮 3. 在出现的菜单里面选择"设置" 4. 在出现页面里面左侧选择"隐私.搜索和服务",然后右侧点击& ...

  7. winform 音乐播放器

    引言 本次项目目的主要为了熟悉axWindowsMediaPlayer,treeview等控件使用,以及学习I/O操作. 技术栈 C# winform 实现效果 设计与实现 使用TreeView实现音 ...

  8. (待续) 强化学习——如何提升样本效率 （ DeepMind 综述深度强化学习：智能体和人类相似度竟然如此高！）

    强化学习     如何提升样本效率 参考文章: https://news.html5.qq.com/article?ch=901201&tabId=0&tagId=0&docI ...

  9. ARC127D Sum of Min of Xor

    ARC127D Sum of Min of Xor 性质分析加通用套路. 思路 首先我们把这题的 \(\min\) 给去掉,那么我们按位算贡献,可以求出和.这是这种式子的通用套路. 考虑加上 \(\m ...

  10. NZOJ 模拟赛7

    T1 字符串 小X十分热爱学习.有一天,他刚学完"漂亮的k字符串"的概念:给定长度为n的字符串和整数k,k能整除n,如果该字符串满足以下两个条件: s是一个回文串,即对于任意1≤i ...