JQuery选择器

一、基本选择器

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")