JQuery基础--选择器

使用$("xxx")，返回的是一个jquery的对象，可以调用该对象的各种方法，对其中的DOM对象集合进行操作。

 

将一个DOM对象放进$()中，目的是为了将DOM对象转化为Jquery对象，从而可以使用jquery中定义的方法。

 

可以通过jquery的length属性来获取选中的DOM对象元素的个数 $("img").length。

 

可以通过中括号或者get(i)，在$()选中之后的jquery对象集合中，选择第i+1个query对象，将其转化为DOM对象，比如下面的代码

$("li").get(0).innerHTML='demo'

注意：到底是使用DOM的方式解决问题还是使用Jquery中的方法解决问题，可以根据情况而定。

 

如果项目中有多个框架使用了$符号，或者说无意间使用了$变量，那么在使用$就不会使用Jquery

此时可以使用JQuery关键字来继续使用$，此时JQuery是$的别名。

$() == JQuery()

 

如果一个元素有多个class属性，并且要同时选中所有的calss属性时，可以采用如下方式:

<div class="cls1 cls2 cls3"></div>

$(".cls1.cls2.cls3")

注意不要写为$(".cls1 .cls2 .cls3")，这个格式表示的层级关系，并不是并列关系。 

 

选择器

基础选择器

层级选择器

基本选择器

内容

属性

子元素

表单

表单属性

 

层级选择器

$("div1 h1")

$("div1>h1")

$("div1,h1")

$("div1+h1")

$("div1~h1")

 

基本选择器

$("div:first")

$("div:last")

$("div:not(:first,:last)")

$("div:odd")

$("div:even")

$("div:eq(index)")   index从0开始

$("div:gt(index)")

$("div:lt(index)")

 

内容选择器

$("div:has(p)")  寻找包含p标签的div标签，目标是div标签

$("div:empty")  寻找内容为空的div

$("div:not(:empty)")  寻找内容非空的div

$("div:parent")  匹配含有子元素或者文本的div，注意文本可能是一个空格。

 

属性选择器

$("div[attr]")  选择有attr属性的div

$("div[attr=val]") 选择有attr属性，并且attr属性值为val的div

$("div[attr^=val]") 选择有attr属性，并且attr属性值以val开始的div

$("div[attr$=val]") 选择有attr属性，并且attr属性值以val结尾的div

$("div[attr*=val]") 选择有attr属性，并且attr属性值包含val子串的div

$("div[attr~=val]") 选择有attr属性，并且attr属性值中以空格分隔，包含val这一项的div

组合一下

$("div[attr1~=val1][attr2=val]")  表示的与，不是或，必须同时满足才行。

 

子元素选择器

$("div h1:first") 会先找到所有div，然后找到每一个div中的h1，然后在所有的h1中选择第一个，最终只选择一个h1

$("div h1:first-child") 选择每一个div中的第一个h1。如果有多个div，那么就会选择多个div中的h1

$("div h1:last-child") 选择每一个div中的最后一个h1。

$("div h1:nth-child(index)") 先选择所有div，然后再选择每一个div中的第index个元素是h1，那么就选定这些h1

$("div h1:only-child") 选取属于其父元素(div)的唯一子元素的每个h1元素

 

表单选择器

:input  匹配所有的input、select、button、textarea表单元素。

 

过滤筛选

first()

eq()

not()

last()

not()

slice(start,end)   [start , end)

 

查找

children()

find()

next()

nextAll()

parent()

prev()

prevAll()

 

串联

add()        $("h1,p") == $("h1").add("p")

andSelf()     

 

updating