<!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. 形参和实参的区别 and 联系

    联系:形参和实参是赋值关系,是按照值传递的,简单数据直接传递值,形参和实参的改变互不影响,因为形参和实参是两个变量,是两个数据(栈内存): 引用数据传递的是地址,结果就是一个数据,两个地址同时指向一个 ...

  2. 06 - react的类组件中的状态state render函数 this指向问题 事件绑定

    // 注册事件 import ReactDom from "react-dom" import { Component } from "react" // 类组 ...

  3. Docker升阶

    一.Docker镜像 镜像的定义:镜像是一种轻量级.可执行的独立软件包,它包含运行某个软件所需的所有内容,我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码.运行时需要的库以及环境变量和 ...

  4. 重构案例：将纯HTML/JS项目迁移到Webpack

    我们已经了解了许多关于 Webpack 的知识,但要完全熟练掌握它并非易事.一个很好的学习方法是通过实际项目练习.当我们对 Webpack 的配置有了足够的理解后,就可以尝试重构一些项目.本次我选择了 ...

  5. git安装使用及连接gitlab集成idea

    一.简介 Git是一个开源的分布式版本控制系统,通过git可以对项目进行代码托管,通常配合GitLub.Github使用: 想了解更多请进官网(官网下载较慢):https://www.git-scm. ...

  6. Effective C++：以const、enum和inline来替换define

    替换define,也就是"以编译器替换预处理器".#define是C语言里的利器,但在C++里有很多取代它的理由. define是预处理的一部分,而不是编译器的一部分,它在编译前就 ...

  7. 基于QToolButton封装，解决Icon不能设置hover和press态的问题

    1 #pragma once 2 #include <QToolButton> 3 #include <QBoxLayout> 4 #include <QLabel> ...

  8. WebStorm 和 Rider 现在对非商业用途免费

    JetBrains 在程序员节这一天在官方博客上发布了一篇文章:<WebStorm 和 Rider 现在对非商业用途免费>宣布了JetBrains将WebStorm和Rider IDE对非 ...

  9. 用文字“画出”时序图：用 AI+Mermaid.js 解决交互过程中的问题

    什么是时序图 序列图是一种用于描述对象之间在时间上的交互顺序的图表. 它可以展示对象之间是如何相互作用的,以及这些交互的顺序. 什么是Mermaid Mermaid.js是一个开源项目,它允许你通过简 ...

  10. 万星开源项目：System Design Primer - 学习系统设计的必备指南

    GitHub 链接:https://github.com/donnemartin/system-design-primer 什么是 System Design Primer? System Desig ...