一、jQuery简介
jQuery是一个优秀的javascrip库，它以写更少的代码、做更多的事情为宗旨。jQuery是一个快速、简洁的javascript库，使用户能够方便地遍历HTML Documents、操作DOM、处理事件、实现动画效果和提供Ajax交互，此外jQuery兼容CSS3.0及各种浏览器。
老规矩，喏给你图
选择器.png
首先，我们先要学习如何获取节点，然后才能更好的去操作我们的页面。
但是我们需要注意的是jq和js还是有区别的、
DOM节点：通过原生js获的DOM对象（DOM树上的节点）
jquery节点：通过jquery选择器获得的是jQuery对象
jQuery对象只能使用jQuery中封装的方法，不能使用DOM对象的方法，同理，DOM对象只能使用DOM的方法不能使用jQuery中封装的方法。
但是：两种选择器之间是可以相互转换的
DOM对象转换成JQ对象： $(DOM对象)
JQ对象转换成DOM对象：(注意：下标是从1开始的)
第一种方法：jQuery对象[index]
第二种方法：jQuery对象.get(index)
好了，直接开始学习挑选我们的选择器吧！
二、基本选择器
2.1通过id名获取元素节点: $("#id)
2.2通过class名获取元素节点：$(".class名")
2.3通过元素标签获取元素节点：$("标签名")
2.4群组选择器：$("选择器1，选择器2")
注意：中间用逗号分割
2.5通配符选择器：$(" * ")
2.6后代选择器：$("list li")
注意：中间用空格分割
2.7子元素选择器：$("#list>li")
注意：中间用>分割
2.8紧邻的同辈选择器 （忽略空白文本节点）
$("#first+");
$("#first++");
$("#first+++");
2.9紧临的后面的同辈选择器$("#first~")
~后面加标签名。可以获取到相邻的后面的所有此标签名的同辈选择器
三、表单元素选择器
重要！！！冒号前面一定要空格
根据此图理解下面内容.jpg
3.1 :input 获取表单中所有的input select textarea元素
console.log($("#f1 :input"));
3.2 ：text获取单行输入框
console.log($("#f1 :text"));
3.3 :password
console.log($("#f1 :password"));
3.4 :radio
console.log($("#f1 :radio"));
3.5 :checkbox
console.log($("#f1 :checkbox"));
3.6 :file
console.log($("#f1 :file"));
3.7 :image
console.log($("#f1 :image"));
3.8 :hidden
console.log($("#f1 :hidden"));
3.9 :submit
console.log($("#f1 :submit"));
3.10 :reset
console.log($("#f1 :reset"));
3.11 :button
console.log($("#f1 :button"));
四、过滤选择器
注意：过滤选择器要和其他选择器搭配使用
基本过滤选择器：根据下标来过滤
4.1 :first 在匹配的所有li的集合中选取第一个元素
console.log($("li:first"));
4.2 :last 在匹配的所有li的集合中选取最后一个元素
console.log($("li:last"));
4.3 :eq(index) 下标从0开始
console.log($("li:eq(2)))//第三个li
4.4 :gt(dinex) 下标大于index gt：great that
console.log($("li:gt(2)"));
4.5 :lt(dinex) 下标小于index lt: little that
console.log($("li:lt(2)"));
4.6 :odd 奇数
console.log($("li:odd"));
4.7 :even 偶数
console.log($("li:even"));
4.8 :not(指定选择器) 去除与指定选择器匹配的元素
console.log($("li:not(#li2)"));
4.9 :header() 获取到标题元素的集合
$(":header").css("backgroundColor","red");
4.10 :animated 匹配正在执行动画的元素
五、内容过滤选择器
5.1 :contains(指定文本值) 查找所有的包含指定文本值的元素
重要：面试实例
查找出页面中所有包含“招聘”二字的div，把招聘高亮显示
var num = $("div:contains(招聘)")
for( var i = 0; i<num.length;i++){
var div = num[i];
div.innerHTML=div.innerHTML.replace(/招聘/g,"<span style='background:red'>招聘</span>");
}
5.2 :has(selector)
//查找所有包含指定选择器的子元素的元素
console.log($("div:has(p)"));
//筛选出含有class为text的子元素的div
console.log($("div:has(.text)"));
5.3 :empty 删选出空元素
5.4 :parent 筛选出非空元素
六、属性过滤选择器
6.1[attr]筛选出含有指定属性的元素
//筛选出含有placeholder属性的元素
console.log($("input[placeholder]"));
6.2 [attr=value]筛选出含有指定属性值的元素
console.log($("input[type=checkbox]"))
6.3 [attr!=value]筛选出属性值不等于指定值的元素
console.log($("input[type!=checkbox]"))
6.4 [attr^=value]筛选出属性值以指定值开头的
$("[class^=banner]").css({"background-color":"red","height":"100px"})
6.5 [attr$=value]筛选出属性值以指定值结尾的
$("[class$=div]").css('background-color','green');
$("[class$=div]").css('height','50px');
$("[class$=div]").css('width','50px');
6.6 [attr*=value]筛选出属性值包含指定值的元素
$("[placeholder*=密码]").css('background-color','red');
6.7 [attr1] [attr2]... [attrN]筛选多个指定属性的元素
$("input[type][placeholder]").css('background-color','pink');
七、子元素过滤选择器
**
注意：子元素过滤选择器
需要在前一个selector与子元素过滤选择器之间加上空格**
7.1 :first-child
console.log($("#big_div div:first-child"));
7.2 :last-child
console.log($("#big_div div:last-child"));
7.3 :nth-child(num|表达式|even|odd) 下标从1开始
$("tbody tr:nth-child(2n)").css("background","orange");
7.4 :nth-last-child(num|表达式|even|odd) 倒数
$("tr :nth-last-child(2)").css("background","blue");
八、可见性选择器
8.1 :hidden
console.log( $("div:hidden"));
var div1=$("div:hidden")[0];
var div2=$("div:hidden")[1];
var div3=$("div:visible")[0];
var div4=$("div:visible")[1];
var div5=$("div:visible")[2];
var jsbtn = document.getElementById("but");
jsbtn.onclick=function(){
div1.style.display="block";
div2.style.display="block";
div3.style.display="none";
div4.style.display="none";
div5.style.display="none";
}
8.2 :visible
console.log( $("div:visible"));
九、表单属性过滤选择器
9.1 :enabled 可用的
console.log($(":text:enabled"));
9.2 :disabled 不可用的
console.log($(":text:disabled"));
9.3 :checked 选中的（单选框 多选框）
console.log($(":input:checked"));
9.4 :selected 选中的（下拉列表）
console.log($("option:selected"));
看吧，jquery的选择器是不是比js的选择器简单多了，一个$符号解决了多少问题，果然，通行货币的用处就是多，累不累，文章的末尾给大家讲一个笑话吧，爱笑的小孩，运气都不会太差！
小张墨问：“爸爸，这个楼为什么叫逸夫楼？”
“哦，那是以邵逸夫先生的名字命名的，邵逸夫先生捐了很多教学楼，非常了不起。”
“爸爸也了不起！你看，新加坡国立大学，瑞士国立大学，国立牛津大学，国立清华大学...”
喜欢就赞咯~
网友评论