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程序设计有所帮助。