常用选择器（CSS+JQuery）

>css选择器：

元素（标签）选择器：h1{ css}  p{ css}
类选择器：.class名{ css}    类选择器可以结合元素使用 如：p.class名{ css}    类可以写多个，空格隔开 <p class="color font"/>
id选择器：# id值{ css}
组合选择器：组合选择器是多个选择器(包括元素选择器、class选择器、ID选择器等)通过逗号连接而成的。 如：h1, h2, .special, #intro {color: blue; font-family: Arial}
通用选择器： *{ css}
后代（包含）选择器：通过元素在其位置的上下文关系来定义样式，可以使标记更加简洁。 有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
如：ul  em{ color:red;}
   <ul> 
   <li>List item 1 
        <ol> 
    <li>List item 1-1</li>
     <li>List item 1-2</li> 
    <li>List item 1-3 
           <ol> <li>List item 1-3-1</li> 
         <li>List item <em>1-3-2</em></li> 
         <li>List item 1-3-3</li>
            </ol> 
    </li>
    <li>List item 1-4</li>
         </ol>
    </li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul> 
子代选择器：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）
如：与后代选择器相比，子选择器只能选择作为某元素子元素的元素
       h1 > strong { color : red ; }
相邻兄弟选择器：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用加号(+)表示 。
如：要改变紧接在 h1 元素后出现的段落为粗体（只会p应用样式，后面的兄弟）：
     h1 + p { font-weight : bold; }
属性选择器：属性选择器可以根据元素的属性及属性值来选择元素 。属性选择器把所需属性列在方括号([ ])中。
如：         [title] {color: red;} /*包含标题的所有元素变为红色 */
     a[href] {color: red;} /*只对有href属性的a元素应用样式*/ 
     a[href][title] {color: red;} /*将同时有href和title属性的a设置为红色*/ 
    a[href=“http://www.w3school.com.cn/about_us.asp”] {color: red;}    /*根据具体属性值来选择该元素 */
    a[href=“http://www.w3school.com.cn/”][title=“W3School”] {color: red;}  /*多个属性-值选择器链接在一起选择该元素*/

伪类选择器：CSS伪类用于向某些选择器添加特殊的效果。伪类的语法： selector : pseudo-class {property: value}
如：a:link  {color: #FF0000;}     a:hover {color: #FF00FF}
      a:active {color: #0000FF}    a:visited{color:#00FF00;}
      input:focus{background-color:yellow;}
      li:first-child {text-transform:uppercase;}

>jq选择器：

基本选择器：
id选择器：$("#id")  根据给定的ID匹配一个元素
元素选择器：$("元素名")  根据给定的元素名匹配所有元素
如：$("div");
类选择器：$(".class名")  根据给定的类匹配元素
通用选择器：$("*")  匹配所有元素
组合选择器：$("selector1,selector2,selectorN")
如：$("div,span,p.myClass")

css的基本选择器？层级选择器：
后代选择器：在给定的祖先元素下匹配所有的后代元素
如：找到表单中所有的 input 元素  $("form input")
子代选择器：在给定的父元素下匹配所有的子元素
如：匹配表单中所有的子级input元素  $("form > input")
相邻兄弟选择器：prev + next  匹配所有紧接在 prev 元素后的 next 元素
如：匹配所有跟在 label 后面的 input 元素  $("label + input")
兄弟选择器：prev ~ siblings  匹配 prev 元素之后的所有 siblings 元素
如：找到所有与表单同辈的 input 元素  $("form ~ input")

基本选择器：
:first
获取第一个元素
如：选取第一个li元素    $('li:first');

:not(selector)
去除所有与给定选择器匹配的元素
如：查找所有未选中的 input 元素 $("input:not(:checked)")

:even
匹配所有索引值为偶数的元素，从 0 开始计数
查找表格的1、3、5...行（即索引值0、2、4...）$("tr:even")

css六种选择器，:odd
匹配所有索引值为奇数的元素，从 0 开始计数
查找表格的2、4、6行（即索引值1、3、5...） $("tr:odd")

:last
获取最后个元素
如：选取第一个li元素    $('li:last')

:focus
匹配当前获取焦点的元素。
如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。 

内容选择器：
:contains(text)  匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
如：给所有包含 p 元素的 div 元素添加一个 text 类    $("div:has(p)").addClass("test");
:parent  匹配含有子元素或者文本的元素

jquery选择器类型、可见性:
:hidden  匹配所有不可见元素，或者type为hidden的元素 
如：查找隐藏的 tr     $("tr:hidden")
:visible  匹配所有的可见元素

属性
[attribute] 
匹配包含给定属性的元素。
如：查找所有含有 id 属性的 div 元素   $("div[id]")
[attribute=value] 
匹配给定的属性是某个特定值的元素。
[attribute!=value] 
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于:not([attr=value])    要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN]  复合属性选择器，需要同时满足多个条件时使用。
如：找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
$("input[id][name$='man']")

子元素
:first-child 
:last-child 

css五种选择器，表单
:input 
:text 
:password 
:radio 
:checkbox 
:submit 
:image 
:reset 
:button 
:file 
:hidden 

表单对象属性
:enabled 
:disabled 
:checked  匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
如：$("input:checked")
:selected  匹配所有选中的option元素
如：$("select option:selected")

补充：

jq 遍历元素：
如：迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。如果你想得到 jQuery对象，可以使用 $(this) 函数。
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

jq 设置或返回被选元素的属性值：
如：
返回被选元素的属性值。
$(selector).attr(attribute)
$(selector).prop(property)
设置被选元素的属性和值。
$(selector).attr(attribute,value)
$(selector).prop(property,value)
设置多个属性和值。
$(selector).attr( {attribute:value, attribute:value ...} ) //对象的写法，键值对
$(selector).prop( {property:value, property:value,...} ) //对象的写法，键值对

CSS选择器，jq  CSS 类
addClass(class|fn) 
removeClass([class|fn]) 
toggleClass(class|fn[,sw]) 
jq  HTML代码/文本/值
html([val|fn]) 
text([val|fn]) 
val([val|fn|arr])