$("p:contains('三')").css("background-color","red"); <div> <p>我是第一个P</p> ***不会被选中 <p>我是第二个P</p> ***不会被选中 <p>我是第三个P</p> ***会被选中,文本里包含了"三" </div>
(2)、:empty 获取不包含子元素或文本的空元素
$(:empty).text("我是空元素"); <div> <div><span></span></div> ***div不会被选中,因为有<span></span>子元素。<span></span>会被选中,因为没有子元素也没有文本元素 <p></p> ***会被选中,没有子元素,也没有文本元素 <span>我是一个span</span> ***不会被选中,有文本元素 </div>
(3)、:has(selector) 选中含有selector所匹配元素的元素,(注意不限于直接子元素,只要是后代含有都算)
$("div:has('span')").css("background-color","red"); <div> ***此div会被选中,因为他的有孙子span 我是最外层div <div><p>我是一个P</p></div> ***此div不会被选中,因为不含有后代span <div><span>我是一个span</span></div> ***此div会被选中,含有后代span </div>
(4)、:parent 含有子元素或者文本元素的元素
$(":parent").text("不含子元素或文本元素"); <div>我是一个div</div> ***不会被选中,因为含有文本元素 <div><span>我是一个span</span></div> ***不会被选中,含有子元素。 <div></div> ***会被选中,不含子元素也不含有文本元素
5、可见性过滤选择器
(1)、:hidden 选中所有不可见元素
$("span:hidden").css("display","block"); $("input:hidden").val("我是jQuery"); <span>我是一个span</span> ***会被第一条规则选中 <input type="hidden" value="我是一个隐藏的input" /> ***会被第二条jQuery选中 <span>我是span1</span> ***会被第一条jQuery选中
(2)、:visible 选中所有可见元素
6、属性过滤选择器
(1)、[attribute] 获取包含给定属性的元素
$("div[class]").css("font-size","30px"); <div> <div>我是第一个div</div> ***会被选中,含有class属性 <div>我是第二个div</div> ***不会被选中,没含有class属性。 </div>
(2)、[attribute=value] 获取属性值等于value的元素
$("div[class=div1]").css("font-size","30px"); <div> <div>我是div1</div> ***会被选中,class属性等于div1。 <div>我是div2</div> ***不会被选中,class属性不等于div1。 </div>
(3)、[attribute!=value] 获取属性值不等于value的元素
$("div[class!=div1]").css("color","red"); <div>我是一个没有class属性的div</div> ***会被选中,没有class属性自然class属性不等于div1 <div>我是一个class属性等于div2的div</div> ***会被选中,class属性不等于div1 <div>我是一个class属性等于div1的元素</div> ***不会被选中,class属性等于div1
(4)、[attribute^=value] 获取属性值以value开始的元素
$("div[class^=div]").css("color","red'); <div>我是div1</div> ***会被选中,class属性以div开始 <div>我是div2</div> ***会被选中,class属性以div开始 <div>我是div3</div> ***不会被选中,class属性不以div开始
(5)、[attribute$=value] 获取属性值以value结束的元素