JS中对ID和CLASS属性进行模糊查询

最新推荐文章于 2023-04-21 14:22:29 发布
最新推荐文章于 2023-04-21 14:22:29 发布
阅读量2.2k 收藏
点赞数
分类专栏： js 文章标签： js

document.querySelector(‘a[class$="-close"]’);
选择所有 class 以 -close 结尾的元素

document.querySelector(‘a[class^=“r4”]’);
$(‘input[id^=_gdfile]’).attr(“disabled”, true);

https://segmentfault.com/q/1010000004267050```
筱筱鹿丸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
id模糊选择器 js_常见的原始JS选择器使用方法总结
weixin_39631350的博客
12-31 1002
常见的getElementById，getElementsByName，getElementsByTagName。但外国人不满意这些API，于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器，这里只说原始js选择。1.getElementById这是最常用的选择器，通过id来定位：例：var test=document.getElementById("te...
JS实现模糊查询带下拉匹配效果
12-29
“搜索”可以使我们更快的找到某一个关键词或者某一个商品，所以“模糊查询”和“下拉匹配”也成了前端必备的一个小技能，开门见山，希望对朋友们有帮助。 —搜索框模糊查询带下拉匹配效果html— <!------------...
jQuery实现id模糊查询的小例子
10-27
在js中常常会用到某类似id的模糊查询，可以使用jquery工具和模糊查询"^",来实现。下面用另个例子说明
Js中对id和class属性进行模糊查询
weixin_33881753的博客
07-29 1307
如题，从例子说明： <div id="divid" class="divclass" > <a id="divid-a" class="divclass-close"></a> </div> 选择所有a标签中id以divid开头的id属性： $('a[id^="divid"]'); 选择所有a标签中id以-a结尾的...
jQuery实现id模糊查询
ajfpck0369的博客
03-19 272
　　在js中常常会用到某类似id的模糊查询，可以使用jquery工具和模糊查询"^",来实现。下面用另个例子说明 eg_1. 在页面中查找某id图片集合，先放到代码： <div id="cacheLayerContainer-CBS-882" > <img src="" id="CBS_1_0" style="width: 256px; height:...
Js jq 对html id class名模糊查询获取
༺墨༒眉༻
08-22 1399
规则： $('div[id^="abc-"]') $('标签名[id匹配类型="关键字"]') 查询类型：^ 从头部匹配，$ 从尾部匹配，* 匹配名称中包含此关键字的 html js部分 <body> <!--<input type="file" name="file" />--> <!--<input type="s...
mongo中模糊查询使用和QueryOperators[整理].pdf
10-19
在MongoDB中，模糊查询和QueryOperators是进行复杂数据检索的关键工具。MongoDB是一种NoSQL数据库，它支持丰富的查询语法，允许开发者对数据进行高效、灵活的搜索。本文将详细讲解MongoDB中如何进行模糊查询以及使用...
Easyui Datagrid 实现行过滤[模糊查询]
05-25
在实际项目中，我们经常需要根据用户输入的关键字对数据进行实时过滤，这就是所谓的“行过滤”。而“行模糊查询”则是在过滤的基础上，允许用户输入部分关键字，系统自动匹配并显示包含这些关键字的数据行，增强了...
使用select2实现下拉列表动态模糊查询
最新发布
09-28
在这个压缩包中，我们有`select2.min.css`（样式文件）和`select2.min.js`（JavaScript 文件）。将这两个文件放入你的项目目录，并在HTML文件中引用它们。例如，在`<head>` 标签内添加： ```html ...
Ext_comBox模糊查询
07-05
在EXT JS中，Combox（下拉框组件）是一种常用的输入控件，它结合了文本输入框和下拉列表的功能，常用于数据选择和输入。本文将深入探讨如何在EXT中实现Combox的模糊查询功能，以及后台处理自动检索的方法。 模糊...
js模糊查询简单实现
YMconnect的博客
03-16 450
button>查询</button> <input type="text" >/*利用正则进行模糊查询*/
js模糊查找对象引用
胡泽宽-廊坊师范学院信息技术提高班-十三期
11-05 1158
在使用前段的各种框架的时候，拿table标签来说，封装好的方法会给这个table生成很多其他的id，class。并且这个class类名我们还给改不了，框架自己封装的方法，那该怎么办？          直接在浏览器中查看html源码，找到class类名对应的对象。对各个空格（text）进行赋值或者取值。但是有的时候这个class类名会随着页面的刷新自己变化。多数来讲这个class类名中的数字会有
php js 搜索模糊匹配,使用JS实现实时模糊匹配搜索
weixin_33117401的博客
03-21 243
JavaScript语言：JaveScriptBabelCoffeeScript确定"use strict";//////////////// usage//////////////var finder = document.querySelector("#finder"),list = document.querySelector("#list"),lib = library();finder....
js 模糊定位标签元素
lwdfzr的博客
09-15 623
js 模糊定位标签元素
介绍函数用法：document.querySelector
m0_57236802的博客
04-21 1万+
是一个 JavaScript 函数，它允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回。是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。只返回第一个匹配的元素。如果你想选择文档中的所有匹配的元素，可以使用。这个函数返回一个包含所有匹配元素的 NodeList。是一个包含 CSS 选择器的字符串，用于查找和选择元素。这将选择文档中第一个类型为。这将选择文档中的第一个。
JS DOM
Maoxim的博客
01-31 379
DOM 文档对象模型(Document Object Model，简称 DOM)，是 W3C 组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM 树 文档:一个页面就是一个文档，DOM 中使用 document 表示 元素:页面中的所有标签都是元素，DOM 中使用 element 表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM 中使用 node 表示 获取元
获取Class对象的三种方式
KATANA_的博客
07-09 2986
获取Class对象的三种方式
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 6万+
javascript dom 查找匹配
document.querySelector()选取指定元素的用法
quietbxj的博客
06-13 8793
document.querySelector()选取指定元素的用法，如下：
JS实现模糊查询带下拉匹配效果查询地址
06-07
要实现带下拉匹配效果的模糊查询地址功能，可以使用 HTML、CSS 和 JavaScript 来实现。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模糊查询地址</title> <style> /* 下拉列表样式 */ .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /* 设置下拉列表宽度与输入框相同 */ top: 100%; left: 0; right: 0; } /* 下拉列表项样式 */ .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } /* 下拉列表项鼠标悬停样式 */ .autocomplete-items div:hover { background-color: #e9e9e9; } /* 输入框样式 */ input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } </style> </head> <body> <h2>模糊查询地址</h2> <!-- 输入框 --> <div class="autocomplete"> <input type="text" id="myInput" placeholder="请输入地址"> <!-- 下拉列表 --> <div id="myDropdown" class="autocomplete-items"></div> </div> <script> // 假设有一个地址列表 let addresses = [ '北京市海淀区中关村南大街5号', '上海市浦东新区世纪大道100号', '广州市天河区珠江新城华夏路1号' ]; // 获取输入框和下拉列表 let input = document.getElementById('myInput'); let dropdown = document.getElementById('myDropdown'); // 监听输入框输入事件 input.addEventListener('input', function () { let value = this.value; dropdown.innerHTML = ''; // 如果输入框有值 if (value) { // 使用正则表达式进行匹配 let pattern = new RegExp(value, 'i'); // i 表示忽略大小写 let filtered = addresses.filter(address => pattern.test(address)); // 如果有匹配结果 if (filtered.length > 0) { // 创建下拉列表项并添加到下拉列表中 filtered.forEach(address => { let option = document.createElement('div'); option.innerHTML = address; option.addEventListener('click', function () { // 点击下拉列表项后将选中的地址显示在输入框中 input.value = address; dropdown.innerHTML = ''; }); dropdown.appendChild(option); }); } } }); </script> </body> </html> ``` 这段代码中使用了 HTML、CSS 和 JavaScript 实现了一个带下拉匹配效果的模糊查询地址功能。用户在输入框中输入关键字后，程序会根据关键字在地址列表中进行匹配并显示匹配结果，用户可以点击下拉列表中的地址将其填入输入框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值