01-JQuery选择器
- 浏览器简介:
- jquery对象是类数组对象,类数组有length长度,并且可以通过索引访问,类数组对象如果不手动添加,不可用数组对象的方法。
- 数组添加元素length会自动增长,类数组不会。
- 类数组通过slice方法可以转成数组:
Array.prototype.slice.call(a);
- JQuery基本选择器:
- ID选择器
- 类选择器
- 后代选择器 ul>li
- 属性选择器 a[href="http://www.baidu.com"]
- a[href!="http://www.baidu.com"],jquery新增方法,选择所有不等于百度网址的元素。
- JQuery筛选器/过滤器:
- 位置筛选器:
- :first
- :last
- :even
- :odd
- :eq(n) : 等于n
- :gt(n) :大于n
- :lt(n) :小于n
- 表单筛选器
- :checked :选择处于选中状态的
- :disabled :选中禁用
- :enabled :除了禁用的都能被选中
- :focus :一般不直接用,等待表单载入完之后才用
- :button :不光选中button,也会选中type为button的
- :checkbox :选中所有多选框
- :file :选中文件输入框
- :image :选中type为image的元素
- :input :选中所有的form元素
- :password
- :radio :选中单选框
- :reset :选中type是reset,
- :selected :选中所有选中状态
- :submit :选中type是submit,某些浏览器也会选择 button
- :text :选中type为text,也会选择没有设置type的
- 子元素筛选器
- :first-child
- :last-child
- first-of-type : 选择第一个类型相同的:li:first-of-type
- last-of-type
- nth-child() :从1开始计数
- nth-last-child()
- nth-of-type()
- nth-last-of-type()
- only-child
- only-of-type
- 内容筛选器
- :empty :选中内容为空的元素
- :contains(text) :选择筛选文本的元素
- :has(selector) :例如选中p:has(span)
- :parent :选择父元素
- 其他筛选器
- lang(language) :选择指定语言的元素
- not(selector) :选择所有不是指定元素的元素
- root :选择所有文档的根源是
- target :选中页面的识别码,hash
- hidden :选中不可见元素,不包含opacity,不包含hidden的元素,不包括又占位置有不显示的元素
- visible :与hidden刚好相反
- header :选中标题类元素
- animated :选中所有正在执行动画效果的元素
- 自定义选择器
- 位置筛选器:
- JQuery选择器的性能优化:
- 尽量使用CSS中有的选择器
- 避免过度约束
- 尽量以ID开头
- 让选择器的右边有更多特征
- 避免使用全局选择器
- 缓存选择器结果