jQuery系列选择器理论.ppt

* 选择器 JQuery系列 * 回顾 jQuery是什么？ 一个优秀的Javascrīpt框架 jQuery的核心函数有哪些？ jQuery(expression, [context]) jQuery(elements) jQuery(callback) jQuery(html, [ownerDocument]) * 本章任务 掌握jQuery选择器 操作页面元素属性和样式 * 使用jQuery选择器获取页面元素 操作元素的属性和样式 本章目标 * 操作属性 attr attr(“属性名”) 取得属性的值 attr(“属性名”, “属性值”) 修改属性的值 removeAttr(“属性名”) 删除属性 例： $(“#divTest”).attr(“id”); $(“#divTest”).attr(“class”, “hidden”); * 操作样式 css css(“样式名”) 取得样式的值 css(“样式名”, “样式值”) 修改样式的值 例： $(“#divTest”).css(“background”); $(“#divTest”).css(“background”,”blue”); * 操作样式 addClass/removeClass/toggleClass addClass(“css类名”) 添加一个css类 removeClass(“css类名”) 删除一个css类 toggleClass (“css类名”) 切换css类 例： $(“#divTest”).addClass(“highlight”); $(“#divTest”).removeClass(“highlight”); * 操作样式 addClass(“css类名”) vs attr(“class”, “css类名”) 例 执行$(“#divTest”).attr(“class”,”other”);后 而执行$(“#divTest”).addClass(“other”);后 div id=“divTest” class=“test”/div div id=“divTest” class=“other”/div div id=“divTest” class=“test other”/div * jQuery选择器 基本选择器.class再探 使用.class选择器如何取得上面所示的层？ $(“.test”) or $(“.other”) div class=“test other”/div * jQuery选择器 层次选择器 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 例：$(“#divTest p”) parent child 在给定的父元素下匹配所有的子元素 例：$(“#divTestp”) * jQuery选择器 基本过滤器 选择器 说明 实例 :first 取得第一个元素 $(“div:first”) :last 取得最后一个元素 $(“div:last”) :even 匹配所有索引值为偶数的元素 $(“div:even”) :odd 匹配所有索引值为奇数的元素 $(“div:odd”) :eq 匹配一个给定索引值的元素 $(“div:eq(2)”) :gt 匹配所有大于给定索引值的元素 $(“div:gt(2)”) :lt 匹配所有小于给定索引值的元素 $(“div:lt(2)”) * jQuery选择器 表单选择器 选择器 说明 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有的单行文本框 :password 匹配所有密码框 :radio 匹配所有单选按钮 :checkbox 匹配所有复选框 :submit 匹配所有提交按钮 :file 匹配所有文件域 :hidden 匹配所有不可见元素，或者type为hidden的元素 * jQuery选择器 其它 选择器 说明 :contains 匹配包含给定文本的元素 :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) :selected 匹配所有选中的option元素 * jQuery筛选 查找 选择器 说明 children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 find(expr) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 sibling