jQuery选择器
jopen
9年前
1,基本选择器
//选择ID,返回单个元素 $("#one").css("background", "#bfa"); //选择.mini类,返回集合 $(".mini").css("background", "#bfa"); //选择Element名,返回集合 $("div").css("background", "#bfa"); //选择所有,返回集合 $("*").css("background", "#bfa"); //选择所有div,span和类.myClass的p元素 $("div,span,p.myClass").css("background", "#bfa");
2,层次选择器
$("body div").css("background", "#bfa");//body内所有div $("body > div").css("background", "#bfa");//body的子元素div $(".one + div").css("background", "#bfa");//.one的同级div元素 $(".one").next("div");//.one的同级div元素 $("#two ~ div").css("background", "#bfa");//#two的后面div同级元素,不包括#two $(".one").nextAll("div");//#two的后面div同级元素,不包括#two $(".one").sibling("div").css("background", "#bfa");//所有.one同级的div元素,与位置无关
3,基本过虑选择器,过滤选择器以:开始
$("div:first");//第一个 $("div:last");//最后一个 $("input:not(.one)");//不包括.one $("input:even");//偶数,从0,2,4... $("input:odd");//奇数 $("input:eq(1)");//索引=1的input,从0开始 $("input:gt(1)");//索引>1的input,从0开始 $("input:lt(1)");//索引>1的input,从0开始 $(":header");//选取所有标题元素H1,H2.... $("div:animated")//选取正在执行动画的div元素 $(":focus")//选取当前获得焦点的元素
4,内容过滤选择器,子元素或文本内容
$("div:contains('text')");//含有文本"text"的元素 $("div:empty");//不包含子元素或者文本为空的div元素 $("div:parent");//包含子元素或者文本的div元素 $("div:has(p)");//包含p的div元素
5,可见性过滤器
$(":hidden");//选取所有隐藏元素集合,包含display:none,input="hidden",visibility="hidden"的元素 $(":visible");//选取所有可见元素集合 .show(),显示元素,3000ms
6,属性过滤器
$("div[id]");//选取div属性有id的元素 $("div[title=test]");//title=test的div元素 $("div[title!=test]");//title!=test的div元素 $("div[title^=test]");//title以test开始的div元素 $("div[title$=test]");//title以test结尾的div元素 $("div[title*=test]");//title包含test的div元素 $("div[title|=test]");//title以test开头或者=test的div元素 $("div[title~=test]");//title以空格分隔的值包含test的div元素 $("div[id][title=test]");//组合元素
7,子元素过滤选择器
:nth-child(index/even/odd/equation);//选取每个父元素下的第一个index元素或奇偶元素(index从1算起) :first-child;//选取每个父元素的第一个子元素 :last-child;//选取每个父元素的最后一个子元素 :only-child;//某个元素是它父元素中的唯一子元素;
8,表单对象属性过滤器,对所选表单元素进行过滤
:enabled; $("#form1 :enabled");//form1内所有可用元素,返回集合元素 :disabled; $("#form1 :disabled");//返回集合元素 :checked; $("input:checked");//所有被选中元素,单、复选框 :selected; $("select option:selected"); //下拉框选中.text()
9,表单选择器
:input 所有input,textarea,select,button元素 :text 所有单行文本框元素 :password 密码框元素 :radio 单选框元素 :checkbox :submit :image :reset :button :file :hidden