jquery_02选择器_第1页
jquery_02选择器_第2页
jquery_02选择器_第3页
jquery_02选择器_第4页
jquery_02选择器_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1. 一切从选择器开始 操作之前，必先选中！ 选择器语法： $(expression 表达式 )jQuery内部提供了9种选择器n 基本选择器n 层级选择器n 基本过滤选择器n 内容过滤选择器n 可见性过滤选择器n 属性过滤选择器n 子元素过滤选择器n 表单过滤选择器n 表单对象属性过滤选择器如果CSS3 选择器有基础 ，JQuery选择器 非常好学！ 1.1. 基本选择器 基本选择器，是jquery所有选择器的基础，通过元素标签的id属性、class属性、标签名称进行选择。l #id 根据id属性查找一个元素 例如：$("#mydiv")l .class 根据class属

2、性查找元素 例如：$(".myClass"); l element 根据元素标签名称查找所有元素 例如： $("div"); l * 匹配所有元素 例如 $("*"); l selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回 例如：$(“div, p); $(“#itcast”) 选择id属性为itcast的元素$(“.dellink”) 选择class属性为dellink的元素$(“p”) 选择标签名称为p的元素$(“p,div”) 选择页面所有p元素和div元素 【示例练习】HTM

3、L代码：<body><div>DIVAAAA</div><div class="itcast">DIVBBBB</div><div>DIVCCCC</div><div>DIVDDDD</div><div class="itcast">DIVEEEE</div><div id="foo">DIVFFFF</div><p>PAAAA</p><p class

4、="itcast">PBBBB</p><p>PCCCC</p></body>需求：/ 1通过each() 在每个div元素前 加入 “传智播客”/ 2通过size() / length 打印页面中 class属性为 itcast 的元素数量/ 3通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签脚本代码：1.2. 层次选择器层次选择器是根据DOM元素的层级关系，通过后代元素、子元素、兄弟元素进行选择两个元素位置关系 n 祖先n 后代n 父元素n 子元素n 兄弟元素l ancestor d

5、escendant 获取ancestor元素下边的所有元素 $("form input") l parent > child 获取parent元素下边的所有直接child 子元素 $("form > input") l prev + next 获取紧随pre元素的后一个兄弟元素 $("label + input") l prev siblings 获取pre元素后边的所有兄弟元素 $("form input") 空格 ： 后代元素（直接子元素、间接子元素 ）大于> ： 直接子元素 + 紧随下一个兄

6、弟元素 所有后边的兄弟元素 【事例代码】HTML代码：<body><div class="itcast"><a>div link</a><p>info <a>p link</a></p></div><a>link</a><p class="itcast"><a>p link</a></p><a>link</a></body>需求：/ 1将cl

7、ass属性值为itcast的元素下所有a元素字体变为红色/ 2将class属性值为itcast的元素下直接a元素字体变为蓝色/ 3将div元素后所有兄弟a元素，字体变为黄色，大小变为30px脚本代码：1.3. 过滤器过滤器 在基本选择器和层次选择器 选中一批元素后，通过过滤选择器缩小选中范围 ！通常语言： 编写 “:” 添加过滤条件 按照不同的过滤规则，过滤选择器被分为七类l 基本过滤选择器l 内容过滤选择器l 可见性过滤选择器l 属性过滤选择器l 子元素过滤选择器l 表单过滤选择器l 表单对象属性过滤选择器1.3.1. 基本过滤选择器 大部分都是根据元素位置 索引，缩小选中范围 l :fir

8、st 选取第一个元素 $("tr:first") l :last 选取最后一个元素 $("tr:last") l :not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)") l :even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even") l :odd 选取所有元素中奇数索引的元素 ，从 0 开始计数 $("tr:odd") l :eq(index) 选取指定索引的元素 $("tr:eq(1)") l

9、 :gt(index) 选取索引大于指定index的元素 $("tr:gt(0)") l :lt(index) 选取索引小于指定index的元素 $("tr:lt(2)") l :header 选取所有的标题元素 如：h1, h2, h3 $(":header")l :animated 匹配所有正在执行动画效果的元素【示例代码】HTML代码：<h1>表格信息</h1><h2>这是一张商品表</h2><table border="1" width="60

10、0"><tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr><tr><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr><tr><td>002</td><td>洗衣机</td&

11、gt;<td>2000</td><td>50</td></tr><tr><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr><tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr><

12、/table><div>slideDown(speed, callback) 概述通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery1.3中，上下的padding和margin也会有动画，效果更流畅。 参数speedString,Number三种预定速度之一的字符串("slow", "normal", or"fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Func

13、tionFunction在动画完成时执行的函数</div><div>fadeOut(speed, callback) 概述通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数speedString,Number三种预定速度之一的字符串("slow", "normal", or"fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数&

14、lt;/div>需求：/ 1设置表格第一行，显示为红色/ 2设置表格除第一行以外 显示为蓝色/ 3设置表格奇数行背景色 黄色/ 4设置表格偶数行背景色 绿色/ 5设置页面中所有标题 显示为灰色/ 6设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色脚本代码：1.3.2. 内容过滤选择器 根据元素或者子元素内部文本内容进行选中 l :contains(text) 选取包含text文本内容的元素 $("div:contains('John')") l :empty 选取不包含子元素或者文本节点的空元素 $("td:empty&qu

15、ot;) l :has(selector) 选取含有选择器所匹配的元素的元素 l $("div:has(p)").addClass("test"); l :parent 选取含有子元素或文本节点的元素 $("td:parent") 建议 :contains(text) 、:empty【示例代码】HTML代码：<div>今天是个晴天</div><div>明天要去传智播客学 java</div><div><span>JavaScript</span> 是网

16、页开发中脚本技术</div><div>Ajax 是异步的 JavaScript和 XML</div><div><p>jQuery</p>是 JavaScript一个 轻量级框架</div><div></div>需求：/ 1设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色/ 2设置没有子元素的div元素 文本内容 ”这是一个空DIV“/ 3设置包含p元素 的 div 背景色为黄色/ 4设置所有含有子元素的span字体为蓝色脚本代码：1.3.3. 可见度过滤选择器 选中可见或不可

17、见【隐藏】的元素 l :hidden 选取所有不可见元素 $("tr:hidden") 匹配所有 display:none 、input hidden 元素区分 display 和 visibility 区别l :visible 选取所有可见的元素 $("tr:visible") 扩展： CSS如何设置一个元素不可见 display:none; 页面没有体积visibility :hidden ; 页面有体积 可见度过滤选择器 ： 匹配所有display:none 或者 input hidden 元素 【示例代码】HTML代码：<form>&

18、lt;input type="hidden" /> <input type="text" name="xxx"style="display: none;" /></form><table><tr><td>洗衣机</td></tr><tr><td>热水器</td></tr><tr style="display: none"><td>电冰箱

19、</td></tr></table>需求：1 为表单中所有隐藏域 添加 class属性，值为itcast 2 设置table所有 可见 tr 背景色 黄色3 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值脚本代码：1.3.4. 属性过滤选择器 基于元素属性过滤 l attribute 选取拥有此属性的元素 $("divid") l attribute=value 选取指定属性值为value的所有元素: $("divid=mydiv") l attribute !=value 选取属性值不为

20、value的所有元素 l attribute = value 选取属性值以value开始的所有元素 l attribute $= value 选取属性值以value结束的所有元素 l attribute *= value 选取属性值包含value的所有元素 l selector1 selector2selectorN 复合性选择器，首先经selector1选择返回集合A，集合A再经过selector2选择返回集合B，集合B再经过selectorN选择返回结果集合 【事例代码】HTML代码：<div>AAAA</div><div id="mydiv&quo

21、t; class="itcast1">BBBB</div><div class="itcast2">CCCC</div><div id="mydiv2">DDDD</div><div class="divclass">EEEE</div><div id="xxx" class="itcast3">FFFF</div><p class="p-itca

22、st">PPPPPP</p>需求：/ 1.设置所有含有id属性的div，字体颜色红色/ 2.设置所有class属性值 含有itcast元素背景色为黄色/ 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容脚本代码：最常用 <input name=”username” /> - $(“inputname=username”)1.3.5. 子元素过滤选择器 l 对某元素中的子元素进行选取l :nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 - index

23、从1开始 区别 eql :first-child 此选择符将为每个父元素匹配第一个子元素 l :last-child 此选择符将为每个父元素匹配最后一个子元素 l :only-child 选取唯一子元素，它的父元素只有它这一个子元素【示例代码】HTML代码：<table border="1" width="400" id="mytable"><tr><td>1</td><td>冰箱</td></tr><tr><td>2</

24、td><td>洗衣机</td></tr><tr><td>3</td><td>热水器</td></tr><tr><td>4</td><td>电饭锅</td></tr><tr><td>5</td><td>电磁炉</td></tr><tr><td>6</td><td>豆浆机</td>&l

25、t;/tr><tr><td>7</td><td>微波炉</td></tr><tr><td>8</td><td>电视</td></tr><tr><td>9</td><td>空调</td></tr><tr><td>10</td><td>收音机</td></tr><tr><td>11&l

26、t;/td><td>排油烟机</td></tr><tr><td>12</td><td>加湿器</td></tr><tr><td>13 电暖气</td></tr></table>需求：/ 1.在每个表格 下3的倍数行，字体颜色为红色/ 2.每个表格 奇数行 背景色 黄色/ 3.每个表格 偶数行 背景色 灰色/ 4.每个tr 只有一个td的 字体为 蓝色脚本代码：1.3.6. 表单过滤选择器 l 选取表单元素的过滤选择器 l

27、:input 选取所有<input>、<textarea>、<select >和<button>元素 l :text 选取所有的文本框元素 l :password 选取所有的密码框元素 l :radio 选取所有的单选框元素 l :checkbox 选取所有的多选框元素 l :submit 选取所有的提交按钮元素 l :image 选取所有的图像按钮元素 l :reset 选取所有重置按钮元素 l :button 选取所有按钮元素 l :file 选取所有文件上传域元素 l :hidden 选取所有不可见元素 $(“inputtype=check

28、box”) -等于 :checkbox【示例代码】HTML代码：<form action="login">用户名 <input type="text" name="username" /> <br/>密码 <input type="password" name="password" /> <br/><input type="button" value="提交" /></form&

29、gt;需求：1 对所有text框和password框，添加离焦事件，校验输入内容不能为空2 对button 添加 点击事件，提交form表单脚本代码:blur(function) 离焦事件val() 可以获取表单元素value属性attr() 可以获取对象属性 1.3.7. 表单对象属性过滤选择器表单过滤选择器 根据元素类型进行选择 表单对象属性过滤选择器，根据元素特殊属性值选择 l 选取表单元素属性的过滤选择器 l :enabled 选取所有可用元素 l :disabled 选取所有不可用元素 l :checked 选取所有被选中的元素，如单选框、复选框 l :selected 选取所有被选中项元素，如下拉列表框、列表框 问题： disabled 和 readonly 不同？ disabled 被禁用后的元素，不会随表单提交 （用于放置form重复提交）readonly 不可修改， 会随表单提交 【示例代码】HTML代码：<body><form>性别 <input type="radio" value="男" name="

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论