PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

就视宦
5 years ago
Views:

1 jquery 选择器管理科学与工程学科耿方方

2 主要内容什么是选择器选择器的优势选择器详述

3 什么是选择器在页面中为某个元素添加属性或事件时, 必须先准确地找到元素在 jquery 库中, 可以通过选择器实现这一重要核心功能选择器是 jquery 的根基, 在 jquery 中无论是对事件处理遍历 DOM 还是 Ajax 操作都依赖于选择器, 熟练的使用选择器不仅能简化代码, 而且可以达到事半功倍的效果根据所获取页面中元素的不同, 可以将 jquery 选择器分为 : 基本选择器层次选择器过滤选择器表单选择器四大类而过滤选择器又可分为 : 简单过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器子元素过滤选择器表单对象过滤选择器六种

4 什么是选择器

5 选择器的优势与传统的 JavaScript 获取页面元素和编写事务相比, jquery 选择器具有明显的优势, 具体表现在以下两个方面 : 代码更简单由于在 jquery 库中, 封装了大量可以通过选择器直接调用的方法或函数, 使编写代码更加简单轻松, 简单几行代码就可实现较为复杂的功能 :

6 选择器的优势完善的检测机制在传统的 JavaScript 代码, 给页面中某元素设置事务时必须先找到该元素, 否则, 浏览器将提示出错信息, 影响后续代码的执行因此, 为避免出错, 先检测元素是否存在, 然后再运行代码, 从而导致代码冗余, 影响执行效率在 jquery 选择器定位页面元素时, 无需考虑所定位的元素在页面中是否存在, 即使该元素不存在, 浏览器也不提示出错信息, 极大地方便了代码的执行效率

7 基本选择器基本选择器基本选择器是 jquery 中使用最频繁的选择器, 它由元素 id class 元素名多个选择符组成, 通过基本选择器可以实现大多数页面元素的查找, 其具体使用说明如下表所示 :

8 基本选择器 id ID 选择器是 #id, 顾名思义就是利用 DOM 元素的 id 属性值来匹配的元素, 并以 jquery 包装集的形式返回给对象 ID 选择器的使用方法 : $("#id"); 其中 id 为要查元素的 id 属性值例如, 要查询 id 属性值为 username 的元素, 可以使用下面的 jquery 代码 : $( #username )

9 基本选择器实例 1:<html> <head> <title>id 选择器 </title> <meta charset="utf-8"> <body> <input type="text" id="test" name="test" value=""/> <input type="button" value=" 查看输入的值 "/> </body> </html> <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ $("input[type='button']").click(function(){ var inputvalue=$("#test").val(); alert(inputvalue); }); }); </script> </head>

10 基本选择器元素选择器元素选择器是根据元素名称匹配相应的元素 ID 选择器的使用方法 : $("element"); 其中 element 为要查询元素的标记名例如, 要查询全部的 div 元素, 可以使用下面的 jquery 代码 : $( div )

11 基本选择器案例 2:<html> <head> <title> 元素选择器 </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery/jquery js" type="text/javascript"></script> <script> $(function(){ <body> <div><img src="images/10-strawberry.jpg"/> 这里种了一棵草莓 </div> <div><img src="images/10-fish.jpg"/> 这里养了一条鱼 </div> <input type="button" value=" 几年后 " /> </body> $("input[type='button']").click(function(){ 一片草莓 "); 有了 "; $("div").eq(0).html("<img src='images/10-strawberry1.jpg'/> 这里长出了 $("div").get(1).innerhtml="<img src='images/10-fish1.jpg'/> 这里的鱼没 }); }); </script> </head>

12 基本选择器类名选择器元素选择器是通过元素拥有的 CSS 类的名称查找匹配的 DOM 元素 ID 选择器的使用方法 : $(".class"); 其中 class 为要查询元素的类名例如, 要查询使用 CSS 类名为 mybook 的元素, 可以使用下面的 jquery 代码 : $(.mybook )

13 基本选择器案例 3: <html> <head> <title> 元素选择器 </title> <meta charset="utf-8"> <body> <div> 默认的样式 </div> <div class="myclass"> 更改后的样式 </div> </body> </html> < s c r i p t s r c = " j Q u e r y / j q u e r y j s " type="text/javascript"></script> <script> $(function(){ $ (". m y C l a s s " ). css("backgroundcolor","#c50210"); </head> }) </script> $(".myclass").css("color","#fff");

14 基本选择器复合选择器复合选择器是将多个选择器 ( 可以是 ID 选择器元素选择器或是类名选择器 ) 组合在一起 ; 两个选择器之间以逗号, 分隔, 只要符合其中的任何一个筛选条件就会被匹配, 返回的是一个集合形式的 jquery 包装集, 利用 jquery 索引器可以取得集合中的 jquery 对象复合选择器的使用方法 : $(" selector1,selector2,selectorn");

15 基本选择器案例 4: <script> $(function(){ $("input[type=button]").click(function(){ $("div,#span").addclass("change"); }); }); </script> </head> <body> <div class="default">div 元素 </div> <p class="default">p 元素 </p> <span class="default" id="span">id 为 span 的元素 </span> <input type="button" value=" 为 div 元素和 id 为 span 的元素换肤 " /> </body>

16 基本选择器通配符选择器所谓通配符, 就是指符号 *, 它代表页面上的每一个元素, 也就是使用 $( * ), 将取得页面上所有的 DOM 元素集合的 jquery 包装集

17 层级选择器层次选择器通过 DOM 元素间的层次关系获取元素, 其主要的层次关系包含后代父子相邻兄弟关系, 通过其中某类关系可以方便快捷的定位元素, 其具体使用说明如下表所示 :

18 层级选择器 ancestor descendan 选择器 ancestor 代表祖先,descendan 代表子孙, 用于在给定的祖先元素下匹配所有的后代元素 ancestor descendan 选择器的使用方法 : 例如要匹配 ul 元素下的 li 元素, 可以使用以下代码 : $( ul li ) $("ancestor descendant");

19 层级选择器案例 5: <script> $(function(){ $("div ul").addclass("copyright"); }); </script>

20 层级选择器 parent > child 选择器 parent 代表父元素,child 代表子元素, 用于在给定的父元素下匹配所有的子元素使用该选择器只能选择父元素的直接子元素使用方法 : 例如要匹配表单中的所有子元素 input, 可以使用以下代码 : $( form>input ) $("parent > child");

21 层级选择器案例 6: <script> $(function(){ $("#change").click(function(){ $("form>input").addclass("input"); }); $("#default").click(function(){ $("form>input").removeclass("input"); }); }); </script>

22 层级选择器 prev+next 选择器 prev+next 选择器用于匹配所有紧接在 prev 元素后的 next 元素其中,prev 和 next 是两个相同级别的元素使用方法 : 例如要匹配 <div> 标记后的 <img> 标记, 可以使用以下代码 : $( div+img ) $("prev + next"); 注意 : 选择的是紧接着的那个元素

23 案例 7: <script> $(function(){ $("label+p").addclass("background"); }); </script> 层级选择器 <body> <div> <label> 第一个 label 标记 </label> <p> 第一个 p 标记 </p> <fieldset> <label> 第二个 label 标记 </label> <p> 第二个 p 标记 </p> </fieldset> </div> <p>div 外面的 p 标记 </p> </body>

24 层级选择器 prev ~ siblings 选择器 prev ~ siblings 选择器用于匹配 prev 元素后的所有 sibling 元素其中,prev 和 next 是两个相同级别的元素使用方法 : $("prev ~ siblings"); 例如要匹配 <span> 标记后的 <ul> 标记, 可以使用以下代码 : $( span~ul ) 注意 : 选择的是所有紧接着的元素

25 层级选择器案例 8: <script> $(function(){ $("div~p").addclass("background"); }); </script> </head> <body> <div> <p> 第一个 p 标记 </p> <p> 第二个 p 标记 </p> </div> <p>div 外面的 p 标记 </p> <p>div 外面的 p 标记 </p>

26 过滤选择器简单过滤选择器过滤选择器根据某类过滤规则进行元素的匹配, 书写时都以冒号 (:) 开头, 而简单过滤器便是过滤器当中使用最为广泛的一种, 其具体使用说明如下表所示 :

27 过滤选择器简单过滤选择器过滤器说明示例 :first 匹配找到的第一个元素, 它是与选择器结合使用的 $("tr:first") // 匹配表格的第一行 :last 匹配找到的最后一个元素, 它是与选择器结合使用的 $("tr:last") // 匹配表格的最后一行 :even 匹配所有索引值为偶数的元素, 索引值从 0 开始计数 $("tr:even") // 匹配索引值为偶数的行 :odd 匹配所有索引值为奇数的元素, 索引从 0 开始计数 $("tr:odd") // 匹配索引值为奇数的行 :eq(index) 匹配一个给定索引值的元素 $("div:eq(1)") // 匹配第二个 div 元素 :gt(index) 匹配所有大于给定索引值的元素 $("div:gt(0)") // 匹配第二个及以上的 div 元素 :lt(index) 匹配所有小于给定索引值的元素 $("div:lt(2)") // 匹配第二个及以下的 div 元素 :header 匹配如 h1, h2, h3 之类的标题元素 $(":header") // 匹配全部的标题元素 :not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)") // 匹配没有被选中的 input 元素 :animated 匹配所有正在执行动画效果的元素 $(":animated ") // 匹配所有正在执行的动画

28 过滤选择器案例 9: <script> $(function(){ $("tr:even").addclass("even"); $("tr:odd").addclass("odd"); $("tr:first").removeclass("even"); $("tr:first").addclass("th"); }); </script>

29 过滤选择器内容过滤选择器内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素, 其文字内容可以模糊或绝对匹配进行元素定位, 其具体使用说明如下表所示 : 过滤器说明示例 contains(text) 匹配包含给定文本的元素 $("li:contains('dom')") 内容的 li 元素 // 匹配含有 DOM 文本 :empty :has(selector) :parent 匹配所有不包含子元素或者文本的空元素匹配含有选择器所匹配元素的元素匹配含有子元素或者文本的元素 $("td:empty") // 匹配不包含子元素或者文本的单元格 $("td:has(p)") // 匹配表格的单元格中含有 <p> 标记的单元格 $("td: parent") // 匹配不为空的单元格, 即在该单元格中还包括子元素或者文本

30 过滤选择器案例 10: <script> $(function(){ $("td:parent").css("background-color","#e8f3d1"); $("td:empty").html(" 暂无内容 "); // 为空的单元格添加默认内容 $("td:contains('javascript')").css("color","red"); // 将含有文本 wgh 的单元格的文字颜色设置为红色 }); </script>

31 过滤选择器可见性过滤选择器可见性过滤选择器根据元素是否可见的特征获取元素, 其具体使用说明如下表所示 :

32 过滤选择器案例 11: <script type="text/javascript"> $(document).ready(function() { var visibleval = $("input:visible").val(); // 取得显示的 input 的值 var hiddenval1 = $("input:hidden:eq(0)").val(); // 取得隐藏的 input 的值 var hiddenval2 = $("input:hidden:eq(1)").val(); // 取得隐藏的 input 的值 alert(visibleval+"\n\r"+hiddenval1+"\n\r"+hiddenval2); //alert 取得的信息 }); </script> <body> <input type="text" value=" 显示的 input 元素 "> <input type="text" value=" 不显示的 input 元素 " style="display:none"> <input type="hidden" value=" 隐藏域 "> </body>

33 过滤选择器表单对象属性过滤选择器表单对象属性过滤选择器通过表单中的某个对象属性特征获取该元素, 其具体使用说明如下表所示 : 过滤器说明示例 :checked 匹配所有选中的被选中元素 $("input:checked") // 匹配 checked 属性为 checked 的 input 元素 :disabled 匹配所有不可用元素 $("input:disabled") // 匹配 disabled 属性为 disabled 的 input 元素 :enabled 匹配所有可用的元素 $("input:enabled ") // 匹配 enabled 属性为 enabled 的 input 元素 :selected 匹配所有选中的 option 元素 $("select option:selected") // 匹配 select 元素中被选中的 option

34 过滤选择器案例 12: <script> $(document).ready(function() { $("input:disabled").val(" 被禁用的按钮 "); // 为灰色不可用按钮赋值 }); function selectval(){ // 下拉列表框变化时执行的方法 alert($("select option:selected").val()); // 显示选中的值 } </script> 不可用按钮 : <input type="button" value=" 不可用按钮 " disabled><br /> 下拉列表框 : <select onchange="selectval()"> <option value=" 列表项 1"> 列表项 1</option> <option value=" 列表项 2"> 列表项 2</option> <option value=" 列表项 3"> 列表项 3</option> </select>

35 过滤选择器子元素过滤选择器在页面开发过程中, 常常遇到突出指定某行的需求虽然使用基本过滤选择器 :eq(index) 可实现单个表格的显示, 但并不能满足大量数据和多个表格的选择需求为了实现这样的需求,jQuery 中可以通过子元素过滤选择器十分轻松的获取所有父元素中的某个元素, 其具体使用说明如下 : 选择器说明示例 :first-child :last-child :only-child 匹配所有给定元素的第一个子元素匹配所有给定元素的最后一个子元素匹配元素中唯一的子元素 $("ul li:first-child") // 匹配 ul 元素中的第一个子元素 li $("ul li:last-child") // 匹配 ul 元素中的最后一个子元素 li $("ul li:only-child") // 匹配只含有一个 li 元素的 ul 元素中的 li :nthchild(index/even/o dd/equation) 匹配其父元素下的第 index 个子元素或奇偶元素,index 从 1 开始, 而不是从 0 开始 $("ul li:nth-child(even)") // 匹配 ul 中索引值为偶数的 li 元素 $("ul li:nth-child(3)") // 匹配 ul 中第 3 个 li 元素

36 过滤选择器案例 13: <script> $(function(){ $("li:nth-child(2)").addclass("getfocus"); $("li:only-child").addclass("getfocus"); }) </script> <body> <ul> <li>item1-0</li> <li>item1-1</li> <li>item1-2</li> <li>item1-3</li> </ul> <ul> <li>item2-0</li> <li>item2-1</li> <li>item2-2</li> <li>item2-3</li> </ul> <ul> <li>item3-0</li> </ul> </body>

37 过滤选择器属性过滤选择器属性过滤选择器根据元素的某个属性获取元素, 如 id 属性值或匹配属性值的内容, 并用中括号包裹, 如下表所示 : 选择器说明示例 [attribute] [attribute=value] [attribute!=value] [attribute*=value] [attribute^=value] [attribute$=value] [selector1][selector2][s electorn] 匹配包含给定属性的元素匹配给定的属性是某个特定值的元素匹配所有含有指定的属性, 但属性不等于特定值的元素匹配给定的属性是以包含某些值的元素匹配给定的属性是以某些值开始的元素匹配给定的属性是以某些值结尾的元素复合属性选择器, 需要同时满足多个条件时使用 $("div[name]") // 匹配含有 name 属性的 div 元素 $("div[name='test']") // 匹配 name 属性是 test 的 div 元素 $("div[name!='test']") // 匹配 name 属性不是 test 的 div 元素 $("div[name*='test']") // 匹配 name 属性中含有 test 值的 div 元素 $("div[name^='test']") // 匹配 name 属性以 test 开头的 div 元素 $("div[name$='test']") // 匹配 name 属性以 test 结尾的 div 元素 $("div[id][name^='test']") // 匹配具有 id 属性并且 name 属性是以 test 开头的 div 元素

38 过滤选择器表单选择器无论是提交还是传递数据, 表单在页面中的作用是显而易见的通过表单进行数据的提交或处理, 在前端页面开发中占据重要地位因此, 为了使用户能够更加方便的高效的使用表单, 在 jquery 选择器中引入了表单选择器, 该选择器专为表单量身打造, 通过它可以在页面中快速定位某表单对象, 其具体使用说明如下表所示 :

39 过滤选择器表单选择器选择器说明示例 :input 匹配所有的 input 元素 $(":input") // 匹配所有的 input 元素 $("form :input") // 匹配 <form> 标记中的所有 input 元素, 需要注意, 在 form 和 : 之间有一个空格 :button 匹配所有的普通按钮, 即 type="button" 的 input 元素 $(":button") // 匹配所有的普通按钮 :checkbox 匹配所有的复选框 $(":checkbox") // 匹配所有的复选框 :file 匹配所有的文件域 $(":file") // 匹配所有的文件域 :hidden 匹配所有的不可见元素, 或者 type 为 hidden 的元素 $(":hidden") // 匹配所有的隐藏域 :image 匹配所有的图像域 $(":image") // 匹配所有的图像域 :password 匹配所有的密码域 $(":password") // 匹配所有的密码域 :radio 匹配所有的单选按钮 $(":radio") // 匹配所有的单选按钮 :reset 匹配所有的重置按钮, 即 type=" reset " 的 input 元素 $(":reset") // 匹配所有的重置按钮 :submit 匹配所有的提交按钮, 即 type=" submit " 的 input 元素 $(":submit ") // 匹配所有的提交按钮 :text 匹配所有的单行文本框 $(":text ") // 匹配所有的单行文本框

40 过滤选择器案例 14: <script type="text/javascript"> $(document).ready(function() { $(":checkbox").attr("checked","checked"); // 选中复选框 $(":radio").attr("checked","true"); // 选中单选框 $(":image").attr("src","images/10-fish1.jpg"); // 设置图片路径 $(":file").hide(); // 隐藏文件域 $(":password").val("123"); // 设置密码域的值 $(":text").val(" 文本框 "); // 设置文本框的值 $(":button").attr("disabled","disabled"); // 设置按钮不可用 $(":submit").val(" 提交按钮 "); // 设置提交按钮的值 $(":reset").val(" 重置按钮 "); // 设置重置按钮的值 $("#testdiv").append($("input:hidden:eq(1)").val()); // 显示隐藏域的值 }); </script>

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值