2017/12/22 jQuery

选择器

判断一个jQuery对象是否存在:  if ($("tr").length>0){

}

jQuery的选择器一共有1.基本选择器 2.结构选择器 3.过滤选择器 4.属性选择器 5.表单选择器

1.基本选择器:

ID选择器，类型选择器，类选择器，通配选择器，分组选择器

任何带$返回的都是一个jQuery对象

用jQuery对象的速度是不如DOM方法的

在ID选择器里面，如果有特殊符号，用 \\ 转义

页面初始化，js原生的是用window.onload，而在jQuery里面，直接就是$(function(){

}

)

用类型选择器肯定会比用ID选择器慢，是因为类型选择器是多分支条件判断，有很多个if else，而ID选择器则是只有一个if else

一个DOM对象，可以通过jQuery()函数，成为了jQuery对象来直接用，比如:

var all =document.getElementsByTagName("*")

$(all).css=("color","red");

在使用通配符的时候，如果需要用到某一个元素下面的所有标签，语法是:$("body *").css("color","red");

这里的分组选择器，是把素有符合要求的对象全部拿到

2.结构选择器

包含选择器，子选择器，相邻选择器，兄弟选择器

包含选择器 $(form input) 父，子子孙孙

子选选择器$(parent>child)父，子

相邻选择器:相邻的第一个同级选择器

兄弟选择器:同级的所有指定选择器

子元素选择器:

:nth-child,:first-child,:last-child,:only-child;

其中:nth-child可以加类似数列的的情况。比如:nth-child（3n+1），n=0，1，2，3...自然数

3.过滤选择器:

定位过滤器，内容过滤器，可见过滤器

定位过滤器

:first 第一个元素

:last 最后一个元素

:not 除了这个元素以外匹配的元素

:even 偶数索引值，若是表格，那就是奇数行

:odd 奇数索引值，若是表格，那就是偶数行

:eq 匹配一个给定索引值，类似数组从0开始

:gt 匹配一个大于给定索引值，类似数组从0开始

:lt 匹配一个小于给定索引值，类似数组从0开始

:header 按照标题元素名，入h1，h2，h3来匹配

:animated 正在执行动画效果的元素

内容过滤器

:contains 匹配包含文本的元素

:empty 匹配不包含子元素或者文本的空白元素

:has 匹配包含某元素的元素

:parent 匹配含有子元素或者文本的元素

可见过滤器

:hidden 匹配所有可见元素

:visible 匹配所有不可见元素

4.属性选择器:

[attribute] 包含给定属性

[attribute=value] 属性等于特定值，只有一个

[!attribute=value] 属性不等于特定值

[attribute^=value] 属性开始于某特定值

[arttribute$=value] 属性结尾为某特定值

[attribute*=value]  属性包含某特定值，有很多个

[selector1][selector2][selector3] 以上的属性，要同时包含多个条件时使用

5.表单选择器:

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

高级表单选择器

:enable

:disable

:checked 匹配所有的被选中元素，除了option元素

:selected 所有选中的option元素

选择器的注意事项

#id选择器是最快的

少直接选用class选择器

多用父子关系，而不是祖 孙的那种嵌套关系

优先缓存jQuery对象会快很多  保留疑问？？？

原生选择器:querySelector() 和 querySelectorAll()需要用到的时候再去查一查API即可