属性过滤选择器
$("#btn1").click(function(){
//包含属性title的div元素
$("div[title]").css("background","red"); });
$("#btn2").click(function(){
//包含属性title等于text1的div元素
$("div[title=text1]").css("background","red"); });
$("#btn2").click(function(){
//包含属性title不等于text1的div元素(包含没有该属性的div元素)
$("div[title!=text1]").css("background","red"); });
$("#btn2").click(function(){
//包含属性title值是以text开始的div元素
$("div[title^=text]").css("background","red"); });
$("#btn2").click(function(){
//包含属性title值是以t1结束的div元素 $("div[title$=text]").css("background","red"); });
$("#btn2").click(function(){
//包含属性title值是包含t1结束的div元素
$("div[title$=text]").css("background","red"); });
$("#btn2").click(function(){
//包含属性title值是包含t1结束的,包含id属性的div元素
//多个属性过滤选择器并列使用
$("div[title$=t1][id]").css("background","red"); });
表单对象属性选择器
:enabled :disabled :checked selected
//1. 改变页面中input 可用元素的value属性值 :enabled
$("#btn2").click(function(){
//val() 获取或设置制定元素的value值 获取val() 设置val(value)
$("input:enabled").val("改变内容");
});
//2. 改变页面中input不可用元素的value属性值 :disabled
$("#btn2").click(function(){
$("input:disabled").val("不可用元素改变内容 ");
});
//3. 打印被选中的input 单选框的value属性值
$("#btn2").click(function(){
//
console.log($("input:[name=love]:checked").val("不可用元素改变内容 "));
});
//4. 获取下拉列表 select 被选中的选项 的value属性值
$("#btn2").click(function(){
//
console.log($("#city>option:selected").val());
});
jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
选择器总结:
数量多 单一使用简单- 混合使用难度大
正确使用方式不唯一
选择器的建议
不用记- 会查JQ的帮助文档即可
前端小知识：孙鲁意博客网站
