$("div[class$=div]").css("color","red"); <div>我是第一个div</div> ***会被选中,class属性以div结束 <div>我是第二个div</div> ***会被选中,class属性以div结束 <div>我是第三个div</div> ***不会被选中,class属性不以div结束
(6)、[attribute*=value] 获取属性值包含value值元素
$("div[class*=div]").css("font-size","30px"); <div>我是div1</div> ***会被选中,属性值包含div <div>我是1div</div> ***会被选中,属性值包含div <div>我是1div1</div> ***会被选中,属性值包含div <div>我是abc</div> ***会被选中,属性值包含div
(7)、[selector][selector][selector] 获取属性交集元素
$("div:[class][title=title1]").css("background-color","red"); <div title="title1">我是div1,title1</div> ***会被选中,有class属性且title属性等于title1 <div title=title2>我是div1,title2</div> ***不会被选中,虽然有class属性,但是title属性不等于title2 <div>我是div3</div> ***不会被选中,没有title属性
7、子元素过滤选择器
(1):nth-child(eq|even|odd|index) 获取每个父元素下的特定位置元素,索引号从1开始
$("div>p:nth-child(1)").css("background-color","red"); //选中每一个父元素下的div下的第一个直接P元素 <div> <p>我是第一个P</p> *** 会被选中,是div下的第一个子P元素 <p>我是第二个P</p> *** 不会被选中,是第二个了 </div> <div> <P>我是第三个P</P> *** 会被选中,是div下的第一个子P元素 <P>我是第四个P</P> *** 不会被选中,是第二个了 </div>
(2):first-child 选中每个父元素下的第一个
$("p:first-child").css("background-color","red"); //选中每一个父元素下的第一个P元素 <div> <p>我是第一个P</p> *** 会被选中,是div下的第一个子P元素 <p>我是第二个P</p> *** 不会被选中,是第二个了 </div> <ul> <li> <P>我是第三个P</P> *** 会被选中,是div下的第一个子P元素 <P>我是第四个P</P> *** 不会被选中,是第二个了 </li> </ul>
(3)、:last-child 选中每一个父元素下的最后一个元素
$("p:last-child").css("background-color","red"); //选中每一个父元素下的第一个P元素 <div> <p>我是第一个P</p> *** 不会被选中,不是某父元素的最后一个子P元素 <p>我是第二个P</p> *** 会被选中,是div元素下的最后一个子P元素 </div> <ul> <li> <P>我是第三个P</P> *** 不会被选中,不是某父元素下的最后一个子P元素 <P>我是第四个P</P> *** 会被选中,是div元素下的最后一个P元素 </li> </ul>
(4)、:only-child 获取每个父元素下唯一仅有的一个子元素
$("p:only-child").css("background-color","red"); <div> <p>我是第一个P</p> ***不会被选中,不是某父元素下的唯一一个P元素 <p>我是第二个P</p> ***不会被选中,不是某父元素下的唯一一个P元素 </div> <div> <span>我是一个span</span> ***不会被选中,不是某父元素下的唯一一个P元素 <p>我是第三个P</p> ***不会被选中,不是某父元素下的唯一一个span元素 </div> <div> <p>我是一个P</p> ***会被选中,是div下的唯一一个P元素 </div>
8、表单对象属性过滤选择器
(1)、:enabled 获取表单中所有属性为可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器"); <div> <input type="text" value="我是一个可用的input" /> ***会被选中,是一个可用的表单元素 <input type="text" value="我是一个不可用的input" disabled="disabled" /> ***不会被选中,是不可用的表单元素 </div>
(2)、:disabled 获取表单中属性不可用的元素