Jquery基础知识讲解.doc

jQuery 选择器 主要包括标签选择器，id选择器，类选择器，通用选择器，组选择器 $(#divId) 获取ID为divId的元素 $(a) 获取所有a元素 $(.bgRed) 获取所用CSS类为bgRed的元素 $(*)获取页面所有元素 $(#divId, a, .bgRed)获取三个满足条件的选择器 （主要包括子元素选择器、后代元素选择器、紧邻同辈元素选择器、相邻同辈元素选择器） 子元素选择器 ===============选择儿子元素 ul class=topnav liItem 1/li liItem 2 ulliNested item 1/liliNested item 2/liliNested item 3/li/ul /li liItem 3/li /ul script$(ul.topnav li).css(border, 3px double red);/script 此处用“”号表示只选择儿子集的元素 2后代选择器 直接用空格表示 不仅包括儿子还包括孙子........===============选择后代元素 form divForm is surrounded by the green outline/div labelChild:/label input name=name / fieldset labelGrandchild:/label input name=newsletter / /fieldset /form Sibling to form: input name=none / script $(form input).css(border, 2px dotted blue);/script 3 紧邻同辈元素选择器 所有符合条件的都可以会被选择 主要是选择一个元素之后的平行元素 ===============选择指定元素的下一个平辈元素 form labelName:/label input name=name / fieldset labelNewsletter:/label input name=newsletter / /fieldset /form input name=none / script$(label + input).css(color, blue).val(Labeled!)/script 4 相邻同辈元素选择器 ===============选择指定元素的所有指定的平辈元素，可以隔几个不是指定的元素 divdiv (doesnt match since before #prev)/div span id=prevspan#prev/span divdiv sibling/div divdiv sibling div id=smalldiv niece/div/div spanspan sibling (not div)/span divdiv sibling/div script$(#prev ~ div).css(border, 3px groove blue);/script 三、基本过滤器主要包括 名称 说明 举例 :first 匹配找到的第一个元素 查找表格的第一行:$(tr:first) :last 匹配找到的最后一个元素 查找表格的最后一行:$(tr:last) :not(selector) 去除所有与给定选择器匹配的元素 查找所有未选中的 input 元素: $(input:not(:checked)) :even 匹配所有索引值为偶数的元素，从 0 开始计数 查找表格的1、3、5...行:$(tr:even) :odd 匹配所有索引值为奇数的元素，从 0 开始计数 查找表格的2、4、6行:$(tr:odd) :eq(index) 匹配一个给定索引值的元素注:index从 0 开始计数 查找第二行:$(tr:eq(1)) :gt(index) 匹配所有大于给定索引值的元素注:index从 0 开始计数 查找第二第三行，即索引值是1和2，也就是比0大:$(tr:gt(0)) :lt(index) 选择结果集中索引小于 N 的 elements注:index从 0 开始计数 查找第一第二