jQuery选择器

$(

function

(){

//查找id="divOne"的元素

$(

"#divOne"

).css(

"background"

,

"red"

);

//查找class="clsOne"的元素

$(

".clsOne"

).css(

"background"

,

"red"

);

//查找class="clsOne" 和class="clsFrame"的两个元素

$(

".clsFrame .clsOne"

).css(

"background"

,

"red"

);

//两个class一起写不起作用，待验证

//查找每个div下的span元素

$(

"div span"

).css(

"background"

,

"red"

);

//查找id="divOne"元素，和span元素

$(

"#divOne,span"

).css(

"background"

,

"red"

);

});

$(

function

(){

//查找form的下的所有input元素，跟form同级的将不会获取到

$(

"form input"

);

//查找form的下的所有子级div元素：form是父元素，div是子元素，如果div下还有div将不会获取到

$(

"form > div"

);

//查找所有紧跟着label后面的input元素，如果input没有紧跟着label后面将不会获取到

$(

"label + input"

);

//这个+号的可以用next方法代替，如下：

$(

"label"

).next(

"input"

);

//查找所有跟form同级的input元素，如果是form里面的input将不会获取到

$(

"form ~ input"

);

//这个~可以用siblings方法代替。如下：

$(

"form"

).siblings(

"input"

);

//跟上面是一样的效果

});

$(

function

(){

//一、基本过滤

$(

"li:first"

);

//获取li中第一个元素

$(

"li"

).first();

//跟li:first同样的效果

$(

"li:last"

);

//获取li中最后一个元素

$(

"li"

).last();

//获取去除给定元素的所有元素

$(

"input:not(.checked)"

);

//获取所有未选中的input

//获取所有索引值为偶数的元素，从 0 开始计数

$(

"li:even"

).css(

"background"

,

"red"

);

//将所有偶数行的li背景色设为红色

//获取所有索引值为奇数的元素，从 0 开始计数

$(

"li:odd"

).css(

"background"

,

"green"

);

//将所有奇数行的li背景色设为红色

//获取给定索引值的元素

$(

"li:eq(1)"

);

//获取li索引为1的元素，也就是第二个

$(

"li:gt(2)"

);

//获取大于给定索引值的元素

$(

"li:lt(5)"

);

//获取小于给定索引值的元素

//二、内容过滤

$(

"div:contains('abc')"

);

//查找所有div中包含abc的元素

$(

"div:empty"

);

//查找所有没有子元素的div，或者div中内容为空的div

$(

"div:has(span)"

);

//查找所有子元素中有span元素的div元素

$(

"div:parent"

);

//查找有子元素的div元素，或者div内容不为空的div元素

//三、可见性过滤

$(

"input:hidden"

);

//查找所有隐藏的或者type="hidden"的input元素

$(

"input:visible"

);

//查找所有显示的input元素

//四、属性过滤选择器

$(

"div[id]"

);

//查找包含id属性div元素，不用确定id的值。例如：<div id="aa"></div>

$(

"div[id='aa']"

);

//查找包含id="aa"属性div元素，例如：<div id="aa"></div>

$(

"input[name!='username']"

);

//查找所有name不等于username的input元素

$(

"input[name^='a']"

);

//查找所有name的值以a开头的input元素

$(

"input[name$='a']"

);

//查找所有name的值以a结尾的input元素

$(

"input[name*='a']"

);

//查找所有name的值中包含a的input元素

$(

"input[id][name$='man']"

);

//查找所有存在id属性，并且name是以man结尾的input元素

//五、子元素过滤选择器

$(

"ul li:nth-child(2)"

);

//查找所有ul中每个ul的第2个li元素

$(

"ul li:first-child"

);

//查找每个ul中的第一个li元素

$(

"ul li:last-child"

);

//查找每个ul中的最后一个li元素

$(

"ul li:only-child"

);

//查找只有一个li元素的ul元素

//六、表单对象属性过滤

$(

"input:enabled"

);

//查找所有可用的input元素，也就是没有 disabled="disabled" 的元素

$(

"input:disabled"

);

//查找所有不可用的元素，就是有disabled="disabled"属性 的元素

$(

"input:checked"

);

//查找所有选中的checkbox元素

$(

"select option:selected"

);

//查找所有选中的option元素

//七、使用jQuery表单过滤选择器获取元素

$(

"#form1 :input"

);

//获取form1中所有input元素：input textarea select

$(

"#form1 :text"

);

//获取form1中所有text元素

$(

"#form1 :password"

);

//获取form1中所有密码框

$(

"#form1 :radio"

);

//获取form1中所有单选按钮

$(

"#form1 :checkbox"

);

//获取form1中所有复选框

$(

"#form1 :image"

);

//获取form1中所有图像按钮

$(

"#form1 :reset"

);

//获取form1中所有重置按钮

$(

"#form1 :button"

);

//获取form1中所有按钮

$(

"#form1 :submit"

);

//获取form1中所有提交按钮

$(

"#form1 :file"

);

//获取form1中所有file元素

$(

"#form1 :hidden"

);

//获取form1中所有type="hidden"的元素

});