第二章jquery选择器.pptVIP

子元素过滤选择器示例 页面JavaScript代码片段 script type=text/javascript $(function(){ $(table tr:nth-child(3n)).css(background-color,red); $(tr td:last-child).css(background-color,red); }); /script table border=1 width=250 trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr trtd1/tdtd2/tdtd3/tdtd4/td/tr /table 表单元素选择器 选择器 描述 示例 :input 选取所有的input、textarea、select和button元素 $(:input)选取所有的input、textarea、select和button元素 :text 选取所有的单行文本框 $(:text)选取所有的单行文本框 :password 选取所有的密码框 $(:password)选取所有的密码框 :radio 选取所有的单选按钮 $(:radio)选取所有的单选按钮 :checkbox 选取所有的复选框 $(:checkbox)选取所有的复选框 :submit 选取所有的提交按钮 $(:submit)选取所有的提交按钮 :image 选取所有的图像按钮 $(:image)选取所有的图像按钮 :reset 选取所有的重置按钮 $(:reset)选取所有的重置按钮 :button 选取所有的按钮 $(:button)选取所有的按钮 :file 选取所有的上传控件 $(:file)选取所有的上传控件 :hidden 选取所有不可见元素 $(:hidden)选取所有的不可见元素，已经在可见性过滤选择器中讲解过 表单对象属性过滤选择器 选择器 描述 示例 :enabled 选取所有可用元素 $(#form1 :enabled)选取id为form1的表单内的所有可用元素 :disabled 选取所有不可用元素 $(#form1 :disabled)选取id为form1的表单内的所有不可用元素 :checked 选取所有被选中的元素(单选按钮，复选框) $(input:checked)选取所有被选中的input元素 :selected 选取所有被选中的选项元素(下列列表) $(select :selected)选取所有被选中的选项元素 表单对象属性过滤选择器示例 页面JavaScript代码片段 script type=text/javascript function doDelete(){ if($(:checkbox:checked).length == 0){ alert(请至少选择一条数据!); }else{ alert(删除成功!); } } /script 总结 选择器简介 层次选择器 过滤选择器 表单选择器 作业 1. 给网页中所有的 p 元素添加 onclick 事件 2. 是一个特定的表格隔行变色 3. 对多选框进行操作, 输出选中的多选框的个数 作业 简述选择器的概念。 简述选择器的分类。 简述选择器:first和:first-child的区别。 简单属性过滤选择器的用法。 SSOFT V2.0 第2章Jquery选择器 目标 选择器简介 层次选择器 过滤选择器 表单选择器 选择器的概念 CSS选择器 它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构 jQuery选择器 jQuery中的选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。 jQuery中的基本选择器 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $(#test)选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(.test)选取所有class为test的元素 element 根据给定的元素名称匹