第7讲、Jquery表单选择器.ppt

注意 select 标签中的 option 是 select 的子元素 B/S前端高级技术Jquery 主讲教师：方丹 JQUERY属性选择器 本 讲 目 标 任务三： 什么是可见度过滤选择器 任务一： 什么是属性选择器 任务二： 属性选择器案例 任务四： 可见度过滤选择器案例 任务五： 内容过滤器案例 表单选择器 1、:input用法: $(”:input”) ; 返回值 集合元素 注意区别$(input) 说明:匹配所有 input, textarea, select 和 button 元素 2、:text用法: $(”:text”) ; 返回值 集合元素 说明: 匹配所有的单行文本框. 3、:password用法: $(”:password”) ; 返回值 集合元素 说明: 匹配所有密码框. 4、:radio用法: $(”:radio”) ; 返回值 集合元素 说明: 匹配所有单选按钮. 5、:checkbox用法: $(”:checkbox”) ; 返回值 集合元素 说明: 匹配所有复选框 6、:submit用法: $(”:submit”) ; 返回值 集合元素 说明: 匹配所有提交按钮. 表单选择器 7、:image用法: $(”:image”) 返回值 集合元素 说明: 匹配所有图像域. 8、:reset用法: $(”:reset”) ; 返回值 集合元素 说明: 匹配所有重置按钮. 9、:button用法: $(”:button”) ; 返回值 集合元素 说明: 匹配所有按钮.这个包括直接写的元素button. 10、:file用法: $(”:file”) ; 返回值 集合元素 说明: 匹配所有文件域. 11、:hidden用法: $(”input:hidden”) ; 返回值 集合元素 说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配. 注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的, 练习1 1. 给网页中所有的 p 元素添加 onclick 事件 2. 使一个特定的表格隔行变色 p段落1/p p段落2/p p段落3/p $(“table:eq(0) tr:even).css(background,red); 练习 3. 对多选框进行操作, 输出选中的多选框的个数 表单对象属性过滤选择器 此选择器主要对所选择的表单元素进行过滤 1、:enabled用法: $(”input:enabled”) 返回值 集合元素 说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦. 2、:disabled用法: $(”input:disabled”) 返回值 集合元素 说明: 匹配所有不可用元素.与上面的那个是相对应的. 3、:checked用法: $(”input:checked”) 返回值 集合元素 说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口. 4、:selected用法: $(”select option:selected”) 返回值 集合元素 说明: 匹配所有选中的option元素. 表单对象属性过滤选择器示例 利用 jQuery 对象的 val() 方法改变表单内可用 input 元素的值 利用 jQuery 对象的 val() 方法改变表单内不可用 input 元素的值 利用 jQuery 对象的 length 属性获取多选框选中的个数 利用 jQuery 对象的 text() 方法获取下拉框选中的内容 $(select option:selected).each(function(){ alert($(this).text()); }); 任务一、什么是属性选择器 属性选择器就是: 通过元素的属性来获取相应的元素 1、属性选择器 1、[attribute]用法: $(”div[id]“) ; 返回值 集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签