Jquery 常用选择器及用法
什么是Jquery：Jquery是js的一个函数库，相当于一个封装函数，使用前需要引入。jQuery 中所有选择器都以美元符号开头：$()
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
一、基本选择器
1、Id选择器
$('#选择器Id名') //$("#test") //选择id值为test的元素，id值是唯一的所以返回单个元素。
2、类名选择器 // $(".myclass") //选择使用myclass类的css的所有元素
$('.选择器Class名')
3、标签选择器 //$("div") //选择所有的div标签元素，返回div元素数组
$('选择器名')
4、并集选择器
$('header,#list,footer') //同时选择标签名为header，id名为list和标签名为footer的
5、交集选择器
$('p.liC') //选择类名为lic的p标签
6、*通配符选择器
$("*") //选取所有元素
二、层级选择器
1、子代选择器
$('父代元素>子代元素')//$("div >span") //选取<div>元素下一级元素名是<span>的子元素
2、后代选择器
$('父代元素 后代元素')//$("div span") //选取<div>里的所有<span>元素
3、兄弟选择器
$('兄弟元素+兄弟元素')//$('div+p') //选取位于div后面紧邻的第一个同级元素p，必须挨着不然不会生效
4、兄弟选择器
$('兄弟元素~兄弟元素')//$('div~p') //选取位于div后面的所有同级元素p
三、过滤选择器
1、获取索引
$('li:eq(1)') //获取li中索引为1的元素
2、索引奇数
$('li:even') //获取li中索引为奇数的元素
3、兄弟选择器
$('li:odd') //获取li中索引为偶数的元元素
4、获取第一个元素
$("div:first") //选取所有<div>元素中第1个<div>元素
5、获取最后一个元素
$("div:last") //选取所有<div>元素中最后一个<div>元素
6、获取不是x的元素
$("input:not(.myClass)") //选取class不是myClass的<input>元素
7、选择索引大于n的元素
$("input:gt(4)") //选取索引大于4的<input>元素
8、、选择索引小于n的元素
$("input:lt(4)") //选取索引大于4的<input>元素
9、获取当前获取了焦点的元素
$(":focus") //选取当前获取焦点的元素
10、获取x元素中的第一个元素
$("div span:first-child") //选取每个<div>中的第1个<span>元素
11、获取x元素中的最后一个元素
$("div span:last-child") //选取每个<div>中的最后一个<span>元素
12、获取x元素中的第n个元素
$("div .one:nth-child(2)") //选取class为'one'的<div>父元素下的第2个子元素
四、属性过滤选择器
$("div[id]") //选取所有拥有属性id的元素
$("input[name='test']") //选取所有的name属性等于'test'的<input>元素
$("input[name!='test']") //选取所有的name属性不等于'test'的<input>元素
$("input[name^='news']") //选取所有的name属性以'news'开头的<input>元素
$("input[name$='news']") //选取所有的name属性以'news'结尾的<input>元素
$("input[name*='news']") //选取所有的name属性包含'news'的<input>元素
$("div[title|='en']") //选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素
$("div[title~='en']") //选取属性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']") //选取拥有属性id,并且属性title以'test'结束的<div>元素
五、筛选选择器
1、儿子，添加参数返回指定的子元素
console.log($('ul').children()) //选择ul的子元素
console.log($('ul').children('li')) //选择ul的子元素li
2、后代，必须添加参数
console.log($('ul').find('li')) //获取ul后代中的所有li元素
3、兄弟，添加参数返回指定的兄弟
console.log($('.li3').siblings()) //获取class名li3的所有兄弟元素
console.log($('.li3').siblings('li')) //获取获取class名li3的li兄弟元素
4、父亲
console.log($('.li3').parent()) //获取class名li3的父元素
5、祖先
console.log($('.li3').parents()) //获取class名li3的祖先元素
6、下一个兄弟
console.log($('.li3').next()) //获取获取class名li3的下一个兄弟元素
7、下边所有的兄弟
console.log($('.li3').nextAll()) //获取获取class名li3的所有兄弟元素
8、上一个兄弟元素
console.log($('.li3').prev()) //获取获取class名li3的上一个兄弟元素
9、获取索引
console.log($('.li3').index()) //获取获取class名li3的元素的索引
六、表单选择器
1、$(":input") //选取所有<input>,<textarea>,<select> 和 <button>元素
2、$(":text") //选取所有的单行文本框
3、$(":password") //选取所有的密码框
4、$(":radio") //选取所有单的选框
5、$(":checkbox") //选取所有的多选框
6、$(":submit") //选取所有的提交按钮
7、$(":image") //选取所有的图像按钮
8、$(":reset") //选取所有的重置按钮
9、$(":button") //选取所有的按钮
10、$(":file") //选取所有的上传域
11、$(":hidden") //选取所有不可见元素
