第2讲 JQuery选择器.pptVIP

JQuery选择器 Jquery的根基 课堂回顾 怎样引入jquery 怎样引用事件 怎样使用连缀 addClass（类名）的使用（自己验证removeClass（类名）） jQuery选择器 引入：在页面中为某个元素添加属性或事件时，必须先准确地找到该元素—在jQuery 库中，可以通过选择器实现这一重要的核心功能 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 选择器的优势： 兼容性好 代码更简单。 完善的检测机制。 jQuery 选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制 语法简单（案例验证） 表格隔行变色效果 选择器的分类 基本选择器 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素 实现如下功能 ID 匹配元素（把ID为divOne 的层显示） 元素名匹配元素（把span元素内容显示） 类匹配元素（把类clsOne 元素内容显示） 匹配所有元素 合并匹配元素 基本选择器示例练习 改变 id 为 one 的元素的背景色为 红色 改变元素名为 p 的所有元素的背景色为 # bbffaa，字体颜色为红色 改变第一个p元素的背景色为红色 改变所有h1元素和 id 为 one 的元素的背景色为 # bbffaa 案例补充 在原来案例基础上，使用addClass和removeClass方法，实现在应用新的样式前把原有的样式清除。 补充分析 利用javascript来实现通过ID定位元素即： Document.getElementById(“id”)的执行效率要比jQuery下$(“#id”)高。原因如下： 补充 最高效的方法是javascript原生方法和jQuery迭代操作相结合，既可以提高代码执行效率，又可以减少代码，如选择所有元素的优化： 层次选择器引入案例 需求：实现选择ul下的第二个li标记 层次选择器 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取 层次选择器示例 改变 body 内所有 div 的背景色为 # bbffaa $(“body div) 改变 body 内子 div 的背景色为 # bbffaa $(“bodydiv) 改变 id 为 one 的下一个 div 的背景色为 # bbffaa $(#one+div) 改变 id 为 two 的元素后面的所有兄弟div的元素的背景色为 # bbffaa $(#two~div) 改变 id 为 two 的元素所有 p 兄弟元素的背景色为 # bbffaa $(#two). siblings(p) 过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div 元素的背景色为 # bbffaa $(div:first) 改变id不为 one 的所有p元素的背景色为 # bbffaa $(p:not(#one)) 改变索引值为偶数的 tr元素的背景色为 # bbffaa $(“tr:even) 改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa $(“p:gt(3):odd) 改变所有的标题元素的背景色为 # bbffaa $(:header) 改变当前正在执行动画的所有元素的背景色为 # bbffaa 内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 内容过滤选择器示例 改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa $(p:contains(di)) 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa $(“div:empty”) 改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa $(p:has(.mini)) 改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa $(“div:parent”) 可见性过滤选择器 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素 可见选择器 :hidde