一、基本选择器
1.id选择器
找到id=main的元素给它增加border：1px solid red；
//JQuery中调用css（）的两种写法，
$("#main").css("border","1px solid red");
$("#main").css({"border":"1px solid red","color":"red"});
2.标签选择器
找到p标签元素给他添加边框 border：1px solid green；
$("p").css("border","1px solid green");
3. 类选择器
找到含有类名为one的元素改变它的字体颜色 ；
$(".one").css("color","red");
4. 通配符选择器 *
找到全部元素 改变字体 28px；
$("*").css("font-size","28px");
5.组选择器
找到ID ClassName 添加background：red；
$("#main,.one").css("background","red");
二、属性选择器
[attribute] 匹配包含给定属性的元素
$("div[id]").css("background","red");
$("div[class]").css("background","red");[attribute=value] 匹配给定的属性是某个特定值的元素
$("div[id=main]").css("background","red");[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素
$("div[id!=main]").css("background","#0000FF");[attribute^=value] 匹配给定的属性是以某些值开始的元素
$("div[id^=m]").css("background","red");[attribute$=value] 匹配给定的属性是以某些值结尾的元素
$("div[id$=n]").css("background","#0000FF");[attribute=value] 匹配给定的属性是以包含某些值的元素
$("div[id=a]").css("background","#008000");[selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用。
$("div[id][class]").css("background","#1B6D85");
三、层级选择器
-
后代选择 $(a b)
$("div input").css("border","1px solid red"); -
子选择 $(a>b)
$("div>input").css("border","1px solid red"); - 兄弟相邻选择器$（a+b) 向下来取相邻的一个
$("div+input").css("border","1px solid red"); - 所有兄弟$(a~b) 向下来取相邻的所有
$("div~input").css("border","1px solid red");
三、伪类选择器
:first 匹配找到的第1个元素
$("ul li:first").css("border","1px solid red");:last 匹配找到的第最后一个元素
$("ul li:last").css("border","1px solid red");:eq 匹配指定下标位置的元素，下标数从0开始
$("ul li:eq(3)").css("border","1px solid red");:even 匹配偶数位的元素
$("ul li:even").css("border","1px solid red");:odd 匹配奇数位的元素
$("ul li:odd").css("border","1px solid green");:gt(index) 匹配所有大于给定索引值的元素
$("ul li:gt(3)").css("border","1px solid red");:lt(index) 匹配所有小于给定索引值的元素
$("ul li:lt(3)").css("border","1px solid red");:not 除去指定外都选取
$("ul li:not(:eq(3))").css("border","1px solid red");:empty 匹配所有不包含子元素或者文本的空元素
$("ul li:empty").css("border","1px solid red");:parent 选择器选取所有是其他元素的父元素且包含文本节点的元素。
$("ul li:parent").css("border","1px solid blue");:contains(text) 匹配包含给定文本的元素
$("ul li:contains(1)").css("border","1px solid red");:header 匹配如 h1, h2, h3之类的标题元素 $(":header")
$(":header").css("background","blue");:has(selector) 匹配含有选择器所匹配的元素的元素
$("ul li:has(span)").css("border","1px solid red");:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
$("ul li:hidden").show();
$("ul li:visible").css("border","1px solid red");
4-1子元素选择器
- :nth-child 匹配其父元素下的第N个子或奇偶元素 从1开始 $(":eq()")
(个人理解：li所在的父元素ul，如果其第2个子元素是li元素的话，则添加border样式，否则本语句不生效。其他子元素雷同)；
$("ul li:nth-child(2)").css("border","1px solid red"); - :first-child 匹配第一个子元素 $(":first")
$("ul li:first-child").css("border","1px solid red"); - :last-child 匹配第最后一个子元素 $(":last")
$("ul li:last-child").css("border","1px solid blue"); - :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
$("ul li:only-child").css("border","1px solid green");
五、表单选择器
//val() 给表单元素传递参数，或获取表单的value
//通过id选择器会最快获取元素
$("#username").val("张三");
$("#nickname").val("老张");
$(":password").val(1234567890);
$("#sex").val("female");
$(":checkbox").val([1,2,4]);
$(":radio").val([1]);
$("button:submit")
