基本选择器
1. 获取唯一 id:$("#")
$("#myid").CSS("color","blue");
2. 获取所有 class:$(".")
$(".class").css("color","yellow");
3. 获取所有元素:$("*")
$("*").css("color","green");
$("p").css("color","red");
5. 获取同时满足两个选择器的元素:$("选择器 1 选择器 2")
$("#id,.class").css("color","orange");
层叠选择器
1. 父元素中包含的所有元素:($"选择器 1 选择器 2")
$("#second .second").css("color","red");
2. 父元素的子元素:($"选择器 1 > 选择器 2")
$("#second>div").css("color","grey");
3. 相邻的下一个兄弟元素:$("选择器 1 + 选择器 2")
$("h2+h3").css("color","orange");
4. 后面的所有兄弟元素
$("#as1~div").css("color","orange");
方法选择器
1. 符合条件的第一个元素
$(".first:first").css("color","yellow");
2. 符合条件的最后一个元素
$(".first:last").css("color","red");
3. 符合条件的索引为偶数的元素
$(".first:even").css("color","red");
4. 符合条件的索引为奇数的元素
$(".first:odd").css("color","green");
5. 符合条件的索引值元素
$(".first:eq(0)").css("color","greenyellow");
6. 符合条件的大于索引值的元素
$(".first:gt(0)").css("color","blue");
7. 符合条件的小于索引值的元素
$(".first:lt(1)").css("color","green");
8. 获取满足第一个条件且不满 (满足) 足第二个条件 (empty,checked...) 的元素:$("选择器: 条件")
- $("div:not(empty)").css("background","yellow");
- $("div:empty").css("background","green");
9. 所有标题元素
$(":header").css("background","green");
10. 所有动画元素
$(":animated").css("background","green");
11. 包含指定字符串的所有元素
$("div:contains('child')").css("width","500px");
12. 所有带有匹配选择的元素
$("h5,.child_child,#myid").css("background","green");
属性选择器
1. 属性等于属性值的元素
$("[href='#']");
2. 属性不等于属性值的元素
$("[href!='#']");
3. 属性以属性值结尾的元素
$("[href$='.jpg']");
4. 带有某属性的元素
$("[href]");
表单选择器
1. 所有 input 元素
$(":input");
2. 通过 input 的类型选则元素
$(":text"); 文字框
$(":password"); 密码框
$(":radio"); 单选框
$(":checkbox"); 复选框
$(":submit"); 提交按钮
$(":buttom"); 普通按钮
$(":reset"); 重置按钮
$(":image"); 图片按钮
$(":file"); 上传文件
3. 通过 input 的状态选则元素
$(":endabled"); 所有激活的 input 元素
$(":disable"); 所有禁用的 input 元素
$(":selecte"); 所有被选取的 input 元素
$(":checked"); 所有被选中的 input 元素
来源: https://www.cnblogs.com/zhengleilei/p/9211392.html