JQuery选择器杂记.doc

JQuery选择器总结 一、CSS三种选择符 1 二、属性选择符 1 三、自定义选择符（类似CSS伪类） 1 一、CSS三种选择符 （1）id选择器 $(#tagId) [例] $(#tagId li) //子元素（比如一个ul下三个li，则这3个都满足前面的关系） (2)类选择器 $(.myClass) [例] $(.myClass li:not(.firstStyle)) :not() 表示否定 (3)标签选择器 $（p） ================================================================== 二、属性选择符 用途：属性选择 $(a[@title]) 选择所有带title属性的a链接，方括号内只是作为筛选的标准，方括号左边的元素才是真正要选择的目标对象。 另一种用途： 在不带@的情况下，可用来指定包含在另一个元素中的元素 $(div[ol]) 取得包含一个ol元素的所有DIV元素 /** 为所有外部网站的链接增加样式 !:以www：开头的*/ $(a[href!=www:]).addClass(outer); /** 为所有指向PDF的链接增加样式 $：以.pdf结尾的 */ $(a[href$=.pdf]).addClass(pdflink); /** 为所有内部链接增加样式 *:属性中还有初始化的*/ $(a[href*=初始化]).addClass(inner); //所有的内部链接,可以出现在href属性中的任何位置上 三、自定义选择符（类似CSS伪类）---------以：开头 { :eq() , :not() , :odd() , :even() , :contains() } （1）匹配mystyle类的div集合中，选择第二个项 $(div.mystyle：eq(1))// js数组以0开始，但是CSS中是以1开始 :eq() ( :not() 相反 （2） .odd{ /** 奇数行红色 */ background:#FF0000; } .even{ /** 偶数蓝色*/ background:#0033FF; } js中使用： $(tr:odd).addClass(odd); $(tr:even).addClass(even); ========================================================================================== 【注】$(tr:even).addClass(even) 《=》 $(tr).filter(even).addClass(even) 两种写法 *表格的第一行编号是0，属于偶数。 （3）含有-- contains $(td:contains(like)).addClass(highlight); // td中包含like这个单词的 加入class：highlight 【补】 $(‘tr:not([th]):odd’).addClass(‘odd’); $(‘#tagId li :not(.highlight)’).addClass(‘mystyle’); 1 目前遇到这些 选中所有奇数行 选中所有偶数行 使用[]中括号 样式属性不是高亮的li.