属性过滤选择器

$("#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的帮助文档即可

前端小知识：孙鲁意博客网站