jquery 选择器

1. id

<div id="box">hello</box>

$("#box").css("color","red");

2. class

<div class="box">1</div>
<div class="box">2</div>

$(".box").css("color","red");  // 所有.box的集合 , 都加上字体红色

//如果是javascript,给集合的元素都加上某种样式，要加循环：
//  divs=document.getElementsByClassName("box");  ClassName 低版本ie不支持
//  for(var i=0; i<divs.length;i++){
//　　　divs[i].style.color="red";
//　}

3. 元素选择器

<p>hello</p>
<h1>你好</h1>
<div>China</div>

$("p").html("java");
$("h1")
$("div")

4. 全选择器 *

如css中
*{padding:0;margin:0;}


$("*")

5.层级选择器

<div class="box">
    <h1>11</h1>
    <p>22</p>
    <div><span>33</span><a>44</a></div>
</div>

$(".box>h1"); //大于号>：子选择器
$(".box span");//空格 ：后代选择器
$("h1+p");   //加号 +：相邻兄弟选择器，p在后面
$("p~span"); //p 后面的span兄弟

6.基本筛选选择器

注意jQuery合集都是从0开始索引

$(".div:first"); //.div集合中 第一个
$(".div:last"); //.div集合中 最后一个
$(".div:even"); //.div集合中 偶数的.div
$(".div:odd");  //.div集合中 奇数的.div
$(".div:eq(2)");  //.div集合中 索引下标为2 的那个
$(".div:gt(3)"); //.div集合中 索引下标大于3 的那些
$(".div:lt(3)"); //.div集合中 索引下标小于于3 的那些

//注：索引下标都是从0开始

7.内容筛选选择器

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

$(".box:contains()").css("color","f00");//不写或空格，则包含文本的就起作用
$(".box:contains(你好)").css("color","#f00");
$(".div:has(span)").css("color","#f00");// 有后代元素span 的.div 的样式是...，样式不是设给span

8.可见性筛选选择器

我们有几种方式可以隐藏一个元素：

CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

9.属性筛选选择器

$('div[name=p1]');　　　　//查找所有div中，属性name=p1的div元素
$('div[p2]'); 　　　　　　//查找所有div中，有属性p2的div元素
$('div[name|="-"]');　　　　//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name~="a"]');　　　　//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name^=imooc]'); 　　//查找所有div中，属性name的值是用imooc开头的
$('div[name$=imooc]');　　　　//查找所有div中，属性name的值是用imooc结尾的
$('div[name*="test"]');　　　　//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[testattr!="true"]');　　//查找所有div中，有属性testattr中的值没有包含"true"的div

10.子元素筛选选择器

$(".div a:first-child").css("color", "#f00");//第一个子元素a的集合
$(".div a:last-child").css("border", "1px solid red");
$(".div a:only-child").css("color", "yellow");
$(".div a:nth-child(2)").css("color", "#CD00CD");//查找每个.div里的第二个子元素a 
$(".div a:nth-last-child(2)").css("font-size", "30px"); //倒数  nth-last-child()

11.表单元素选择器

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。

大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

12.表单属性筛选选择器

13.this选择器

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。