Jquery 常用选择器_jquery id选择器正确用法

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
2
3
4
5
6
7
8
9
10
11
12

二、层级选择器

1、子代选择器
$('父代元素>子代元素')//$("div >span")		//选取<div>元素下一级元素名是<span>的子元素
2、后代选择器
$('父代元素 后代元素')//$("div span")		//选取<div>里的所有<span>元素
3、兄弟选择器
$('兄弟元素+兄弟元素')//$('div+p')           //选取位于div后面紧邻的第一个同级元素p，必须挨着不然不会生效
4、兄弟选择器
$('兄弟元素~兄弟元素')//$('div~p')           //选取位于div后面的所有同级元素p
1
2
3
4
5
6
7
8

三、过滤选择器

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个子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

四、属性过滤选择器

$("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
2
3
4
5
6
7
8
9

五、筛选选择器

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

六、表单选择器

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")                     //选取所有不可见元素
1
2
3
4
5
6
7
8
9
10
11