（每一段jQuery对应一段html代码，以标记为准则,css为共用代码，每段代码需独立运行。html和css代码在文章尾部，如下例）

                 

 

/*jQuery支持的CSS3最基本的选择器

*

^

E

EF

E>F

E+F

E~F

E:has(F)

E.C

E#I

E[A]

E[A=V]

E[A^=V]

E[A$=V]

E[A*=V]

*/

属性选择器（j1）“[]”

例子1

$(document).ready(function () {
       $("a[title]").addClass("myClass"); })

例子2 加属性值判断

$(document).ready(function () {
       $("a[href=GuangDong.html]").addClass("myClass"); })

例子3 加属性模糊判断  $,^

$(document).ready(function () {
       $("a[href$=html]").addClass("myClass"); })

例子4 加属性任意判断*

$(document).ready(function () {
       $("a[href*=G]").addClass("myClass"); })

包含选择器

$(document).ready(function () {
       $("ul li ul li:has(a)").addClass("myClass"); })

/*所有jQuery支持的CSS3位置选择器

:first

:last

:first-child

:last-child

:only-child

:nth-child(n)

:nth-child(odd||even)

:nth-child(nX+Y)

:odd或even

:eq(n)

:gt(n)

:lt(n)

*/

位置选择器（j2）

eg1:fist-child

$(document).ready(function () {
       $("p:first-child").addClass("myClass"); })

eg2：nth-child(odd)根据各自父元素单独排序 nth-child是从1开始计数

$(document).ready(function () {
       $("p:nth-child(odd)").addClass("myClass"); })

eg3:根据整个页面p:even

$(document).ready(function () {
       $("p:even").addClass("myClass"); })

/*jQuery常用的过滤选择器

:animated

:button

:checkbox 等同于input[type=checkbox]

:contains(foo) 包含了文本“foo”的元素

:disabled

:enableed

:file 上传文件的元素，等同于input[type=file]

:header 标题元素 <h1>~<h6>

:hidden

:image 等同于input[type=image]

:input

:not(filter) 方向选择

:parent

:password

:radio

:reset 包括input[type=reset],button[type=reset]

:selected

:submit 提交按钮 包括input[type=submit] button[type=submit]

:text 文本输入框 等同于input[type=text]

:visable

*/

过滤选择器（j3）

$(document).ready(function () {
       $('#btn').click(function () {
           $("input[name=phone]:checked").addClass("myClass-j3");     }); });

管理选择结果

获取元素的个数（j4） size()

$(document).ready(function () {
   var sum;     sum = $("div").size();     $("#btn").attr("value", "查看div个数").click(function () {
           $("#showmessage").html(sum);     }); });

提取元素（j4）get(index) index指定位置 index(element) element元素所处位置 reverse() 数组反序

$(document).ready(function () {
   var aDiv = $(".phone").get(); //转换为div对象数组     $("div[class=phone]").mouseover(function () {
   var index = $("div[class=phone]").index(this);         $("#showmessage").html("你所经过div的序号为：" + index);     });     $("#btn").attr("value", "提取元素").click(function () {
           show(aDiv.reverse());     }); }); function show(divs) {
   for (var i = 0; i < divs.length; i++)         $("#showmessage").append("
"+divs[i].innerHTML+"
"); }

添加，删除，过滤元素（j5）$(selector).add(selector)组合在一起，等同于$(selector,selector)

                          not(selector)去除元素中的某些元素，参数不能包含特定元素，只能是通用的表达式

eg1

$(document).ready(function () {
       $("div[class]").not(".Lumia900,.HTC").addClass("myClass1"); });

eg2:filter(）与not()方法使用通配符

$(document).ready(function () {
       $("div[class]").filter("[class*=i]").addClass("myClass1"); });

eg3:filter(）另一种方法是参数为函数的

$(document).ready(function () {
       $("div").addClass("myClass").filter(function (index) {
   return index == 1 || $(this).attr("class") == "HTC";     }).addClass("myClass1"); });

查询过滤元素的集合（j6） find(selector)

eg1

$(document).ready(function () {
       $("p").find("span").addClass("myClass"); //等同于$("span",$("p")).add("myClass"); });

eg2 is(selector)

采用jQuery链（j6）

eg1 end()

$(document).ready(function () {
       $("p").find("span").addClass("myClass").end().addClass("myClass1"); });

eg2 andSelf()

$(document).ready(function () {
       $("p").find("span").addClass("myClass").andSelf().addClass("myClass1"); });

html代码

<%--j1--%> 
     
 
      
中国 
       
 
        
GuangDong.html
 
        
BeiJing.html
 
        
ShangHai.html
 
       
 
 
     
 <%--j2--%> 
     
 
      
WindowsPhone
 
      
IOS
 
      
antroid
 
     
 
     
 
      
Lumia900
 
      
iPhone4
 
      
Htc
 
     
 <%--j3--%> iPhone Lumia900 HTC  <%--j4--%> 
     
      iPhone
     
 
     
      Lumia900
     
 
     
      HTC
     
  
 <%--j5--%> 
     
      iPhone
     
 
     
      Lumia900
     
 
     
      HTC
     
 <%--j6--%> 
iPhone苹果
 
Windows微软
 乔布斯 盖茨

css代码

body {
   } div{
    font-size:12px; border:1px solid #003a75; float:left; margin-right:10px; padding:5px 5px 5px 5px;} p{
    margin:0px; padding:4px 10px 4px 10px;} .myClass{
    color:#FF0000; font-weight:bold; background:#41e283;} /*j3*/ .myClass-j3{
    color:#FF0000; font-weight:bold; background:#FF0000;} /*j5*/ .myClass1{
    color:#6283e4; border:1px solid #6283e4; background:12e473;}