jQuery使用contains过滤器实现精确匹配方法详解
本文实例讲述了jQuery使用contains过滤器实现精确匹配的方法。分享给大家供大家参考,具体如下:
:contains选择器选取包含指定字符串的元素。
该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。
经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素,如:
$("p:contains(is)")表示选择所有包含"is"的<p>元素。
再如:
$("p:contains(张三)")或$("p:contains("张三")") 表示选择所有包含"张三"的<p>元素。
在该选择器里也可以使用变量来达到选取的目的,如:
$(document).ready(function(){
varddd="John";
$("div:contains(‘"+ddd+"‘)").css("color","#f00");
});
我们也可以将jquery的filter方法和contains方法一起使用来达到更加模糊匹配的目的,如:
$(document).ready(function(){
$(".box").filter(":contains(李)").css("color","#f00");
});
表示将包含”李“的box的文字颜色设置为红色。
jQuery使用contains过滤器实现精确匹配:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<!--<scriptsrc="jquery.min.js"type="text/javascript"></script>-->
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
//根据select中的option的文本来执行选中
//$("#selectboxoption[text='第二项']");
//$("#selectboxoption").filter("[text='第二项']");
//上面两种写法都是错误的
//正确写法
$("#btn4").click(function(){
var$option=$("#selectboxoption:contains('第二项')").map(function(){
if($(this).text()=="第二项"){
returnthis;
}
});
alert($option.length>0?"有对象":"无对象");
$option.attr("selected",true);
});
});
</script>
</head>
<body>
<formid="form1">
<div>
<selectid="selectbox">
<optionvalue="1">第一项</option>
<optionvalue="2">第二项</option>
<optionvalue="21">第二项1</option>
</select>
<inputtype="button"id="btn4"value="contains测试"/>
</div>
</form>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。