jQuery_day02(选择器应用实例表单插件).docVIP

day02：jQuery选择器应用实例 学习要点： jQuery选择器（重点） 基本选择器 层次选择器 过滤选择器 表单选择器 jQuery实用案例 表格隔行变色 表格的展开与收缩 多选框与表格加亮 广告/五屏幻灯片 jQuery选择器详细（重点） jQuery选择器分为： 基本选择器 层次选择器 过滤选择器 表单选择器 示例：demo-base.html 说明： 创建jQuery选择器演示静态页面（里面包含各种div和span元素） 下面使用jQuery选择器来匹配元素并调整它们的样式 图示： 代码：（略） 基本选择器 概念/语法 基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素 在网页中，每个id名称只能使用一次，class允许重复使用 基本选择器的介绍说明如下表所示 选择器 描 述 返 回 示 例 #id 根据给定的id匹配一个元素 单个元素 $(#test)选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(.test)选取所有class为test的元素 element 根据给定的元素名匹配元素 集合元素 $(p)选取所有的p元素 * 匹配所有元素 集合元素 $(*)选取所有的元素 selector1,selectr2……,selectorN 将每一个选择器匹配到元素合并后一起返回 集合元素 $(div,span,p,myClass)选取所有div,span和拥有class为myClass的p标签的一组元素 demo01-jq.html 可以使用这些基本选择器来完成绝大多数的工作下面用它们来匹配刚才HTML代码中的div，span等元素并进行操作（改变背景色），示例如下表所示功 能 代 码 改变id为one的元素的背景色 $(#one).css(background, #bbffaa) 改变class为mini的所有元素的背景色 $(.mini).css(background, #bbffaa) 改变元素名是div的所有元素的背景色 $(div).css(background, #bbffaa) 改变所有元素的背景色 $(*).css(background, #bbffaa) 改变所有的span元素和id为two的元素的背景色 $(span, #two).css(background, #bbffaa) 层次选择器DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择 层次选择器的介绍说明如下表所示： 选择器 描 述 返 回 示 例 $(ancestor descebdabt) 选取ancestor元素里的所有descendant(后代)元素 集合元素 $(div span)选取div里的所有的span元素 $(parent child) 选取parent元素下child(子)元素，与$(ancestor descebdabt)有区别，$(ancestor descebdabt)选择的是后代元素 集合元素 $(div span)选取div元素下元素名是span的子元素 $(prev + next) 选择进阶在prev元素后的next元素 集合元素 $(.one + .div)选取class为one的下一个div元素 $(prev ~ slblings) 选择prev元素之后的所有slblings元素 集合元素 $(#two ~ div)选取id为two的元素后面的所有div兄弟元素 demo01-jq.html 继续沿用刚才例子中的HTML和CSS代码，然后用层次选择器来对网页中的div，span等元素进行操作，示例如下表所示： 功 能 代 码 改变(body内所有div的背景色 $(body div).css(background, #bbffaa) 改变body内子div元素的背景色 $(body div).css(background, #bbffaa) 改变class为one的下一个div元素背景色 $(.one + div).css(background, #bbffaa) 改变id为two的元素后面的所有div兄弟元素的背景色 $(#two ~ div).css(background, #bbffaa) 等同选择 在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的儿率相对少些 可以使用next()方法来代替$(prev + next)选择器，如下表所示 选 择 器 方 法 等价关系 $(.one + div); $(.one).ne