jQuery contains过滤器实现精确匹配使用方法


Posted in Javascript onApril 12, 2013
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>--> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//根据select中的option的文本来执行选中 
//$("#selectbox option[text='第二项']"); 
//$("#selectbox option").filter("[text='第二项']"); 
//上面两种写法都是错误的 
//正确写法 
$("#btn4").click(function () { 
var $option =$("#selectbox option:contains('第二项')").map(function(){ 
if ($(this).text() == "第二项") { 
return this; 
} 
}); 
alert($option.length > 0 ? "有对象" : "无对象"); 
$option.attr("selected", true); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1"> 
<div> 
<select id="selectbox"> 
<option value="1">第一项</option> 
<option value="2">第二项</option> 
<option value="21">第二项1</option> 
</select> 
<input type="button" id="btn4" value="contains测试" /> 
</div> 
</form> 
</body> 
</html>

$(".selector:contains('xx')")

contains()只作匹配查找,不够精确,包含xx的selector和包含xxabc的selector都会查到。

解决办法:
?$(".selector:contains('xx')[innerHTML='xx']")

这样将查找内容只有xx的selector。

Javascript 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
js实现有趣的倒计时效果
Jan 19 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 #Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 #Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 #Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 #Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 #Javascript
关于JavaScript中string 的replace
Apr 12 #Javascript
关于JavaScript与HTML的交互事件
Apr 12 #Javascript
You might like
理解php原理的opcodes(操作码)
2010/10/26 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
react配置antd按需加载的使用
2019/02/11 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python 消费 kafka 数据教程
2019/12/21 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
2014年宣传工作总结
2014/11/18 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
结婚典礼致辞
2015/07/28 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Js类的构建与继承案例详解
2021/09/15 Javascript
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js