jquery选择器

简介

jQuery是js的一个轻量级框架，兼容了各大浏览器，提供了dom、events、ajax的简易操作，jQuery的插件非常丰富

jQuery与js一些区别

1. js对象与jquery对象的转换
   约定：jquery对象的对象名为：(js对象)
   jquery对象转成js对象：jquery对象[0]或jquery对象.get(0)
2. 页面加载完成事件window.onload和(document).ready(function({}))方法是等待页面标签元素加载完毕之后执行代码，不需要图片的完全加载只需要图片标签加载完毕
   c. window.onload方法没有简写形式，(function(){})
3. 事件的区别
   js事件绑定：js对象.事件=function(){}
   jquery事件绑定：jquery对象.事件(function(){})

选择器

1. 基本选择器
   通过id、class、标签名来选择dom对象
   a. 元素选择器
   语法：("span")，选择所有span标签的元素
   b. id选择器
   语法：("#one")，选择id为one的元素
   c. 类选择器
   语法：(".cssClass")，选择class="cssClass"属性的元素
   d. 通配符选择器
   语法：("id选择，元素选择，类选择")
   如：$("span,#one,.cssClass")，选择标签为span，id为one，类属性为cssClass的所有元素
2. 属性选择器
   a. 元素包含属性值
   语法：("div[name]")，选择div标签中包含name的元素
   b. 选择特定的属性值
   语法：("div[name='gen']")，选择div标签中name属性为gen的元素
   c. 选择以某属性值开头的
   语法：("div[name^='gen']")，选择div标签中name属性以gen开头的元素
   d. 选择以某属性值结尾的
   语法：=value]")
   如：='gen']")，选择div标签中name属性以gen结尾的元素
   e. 选择某属性值包含某些字符
   语法：("div[name*='gen']")，选择div标签中name属性包含gen字符的元素
   注意：如需多个条件使用，可以并排表示
   如：$("div[id][name='gen'][class='myclass']")
3. 层级选择器
   如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
   a. ancestor descendant
   用法: (”form > input”) ; 返回值 集合元素
   说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
   c. prev + next
   用法: (”form ~ input”) ; 返回值 集合元素
   说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
   注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取,siblings()函数也可以写选择器

4. 过滤选择器
   过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
   按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
   （1）基础过滤选择器
   1、:first�用法: (”tr:last”) 返回值 集合元素
   说明: 匹配找到的最后一个元素.与 :first 相对应.
   3、:not(selector)�用法: (”tr:even”) 返回值 集合元素
   说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
   5、: odd�用法: (”tr:eq(0)”) 返回值 集合元素
   说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
   7、:gt(index)�用法: (”tr:lt(2)”) 返回值 集合元素
   说明: 匹配所有小于给定索引值的元素.
   9、:header(固定写法)�用法: $(”:header”).css(”background”, “#EEE”) 返回值 集合元素
   说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
   10、:animated(固定写法) 返回值 集合元素
   说明: 匹配所有正在执行动画效果的元素

(2) 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text)�用法: (”td:empty”) 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: (”td:parent”) 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

（3）可见过滤器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden�用法: (”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.