jQuery学习全面总结一

来源：互联网发布：人工智能不包含的内容编辑：程序博客网时间：2024/06/10 13:07

1.jQuery入门

Jquery是一个快速、简洁的JavaScript框架,jQuery设计宗旨是：Write Less,Do More（写更少的代码,做更多的事情）。

一、Jquery框架优势：

1、轻量级

jQuery源代码压缩后仅仅有几十KB，是jQuery的先天优势，是任何其它框架无法比拟的。在jQuery官网上下载的最新的库文件版本是2.1.0，大小为82KB

2、兼容主流浏览器

jQuery能在常用的各种主流浏览器中正常运行，解决了JavaScript在不同浏览器上的差异性

3、操作比较方便

jQuery提供了强大的HTML元素选择功能。Sizzle引擎功能强大，能够支持CSS1到CSS3的所有选择器、Xpath选择器以及Jquery自定义选择器

4、优雅的语法规则

jQuery中最具特色的莫过于它的链式操作方式，即对发生在同一jQuery对象上的一组动作可直接连写而无需重复获取对象。这一点使得jQuery代码无比优雅

5、支持拓展功能

jQuery提供了丰富的插件支持。jQuery的易拓展性可以方便任何用户拓展jQuery的功能。

6、完善的ajax

jQuery将所有的ajax操作封装到$.ajax()中，使得用户在处理ajax操作的时候能够专心处理业务逻辑而无需关注复杂的浏览器兼容性以及XMLHttpRequest对象创建和使用的问题。

7、无污染

jQuery只建立了一个名为jQuery的对象，其所有的方法都在这个对象之下。另外一个别名$也是可以随时交出控制权的，不会污染其他对象，也不会与JavaScript对象发生冲突。

8、开源、完善的学习文档等。

二、一段最简单的jQuery代码

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> Hello jQuery </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
    $(document).ready(function(){  
        alert('Hello jQuery')  
    })  
  
    $(function(){  
        alert('简写形式')  
    })  
  //-->  
  </script>  
 </head>  
 <body>  
    
 </body>  
</html>  

下面整理一下jQuery我们最常用也是最重要的一个事件$(document).ready(function())：

1、window.onload 和 $(document).ready(function())的区别

A、我们实际最容易发现的就是两者的可同时存在个数

对于window.onload来说只能同时存在一个

对于 $(document).ready(function())可以同时存在多个,顺序执行

B、是否有简写形式

window.onload没有

$(document).ready(function())有$(function())

C、最重要的一个区别是二者的执行时机

window.onload是页面中所有元素(包含元素关联的所有文件)都加载完毕后才执行。

而通过jQuery的$(function())，在DOM完全就绪时就可以被调用，此时页面上的所有元素对于jQuery而言都是可以访问的，但是这并不意味这这些元素的关联文件都已经加载完毕。

举个例子来说,有一个大型图库网站，加载页面的时候为所有图片添加了某些样式。当我们使用window.onload的时候，需要等到页面上所有的图片都加载出来之后才执行给图片添加样式的行为。而用$(function())，那么只需要DOM就绪就可以执行了，不需要等待所有图片加载完毕，显而易见，$(function())相比于window.onload效果更好，它能提高web页面的加载速度。

三、jQuery代码风格

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> jQuery代码风格 </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <style type="text/css">  
    #menu{width:300px;}  
    .has_children{background:#555;color:#fff;cursor:pointer;}  
    .highlight{color:#fff;background:green;}  
    div{padding:0;margin:10px 0}  
    div a{background:#888;display:none;float:left;width:300px;}  
  </style>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $(".has_children").click(function(){  
                $(this).addClass("highlight")           //为当前元素增加highlight类  
                    .children("a").show().end()         //将子节点a元素显示出来并重新定位到上次操作的元素  
                .siblings().removeClass("highlight")    //获取元素的兄弟元素并去掉他们的highlight类  
                    .children("a").hide();              //将兄弟元素下的a元素隐藏  
            })  
        })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <div id="menu">  
        <div class="has_children">  
            <span>jQuery学习笔记一</span>  
            <a>1.1 aaaa</a>  
            <a>1.2 bbbb</a>  
            <a>1.3 cccc</a>  
            <a>1.4 dddd</a>  
            <a>1.5 eeee</a>  
            <a>1.6 ffff</a>  
            <a>1.7 gggg</a>  
        </div>  
        <div class="has_children">  
            <span>jQuery学习笔记二</span>  
            <a>2.1 aaaa</a>  
            <a>2.2 bbbb</a>  
            <a>2.3 cccc</a>  
            <a>2.4 dddd</a>  
            <a>2.5 eeee</a>  
            <a>2.6 ffff</a>  
            <a>2.7 gggg</a>  
        </div>  
    </div>  
 </body>  
</html>  

这是利用jQuery实现的一个导航栏，我们来看一下这段代码：

[html] view plaincopy
$(".has_children").click(function(){  
    $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children ("a").hide();  
})  

意思是当鼠标单击到class为has_children元素上的时候：

A、为该元素增加样式highlight

B、将该元素的子节点中的a标签显示出来并重新定位到本身

C、找到该元素的兄弟元素并删除它们的highlight样式并将其子节点中的a标签隐藏

这里我们看到了jQuery强大的链式操作，一行代码就实现了导航栏的功能。但是有一点，这段代码都放在一行的话可读性会很不好，这里换一种方式，并且为其加上注释：

[html] view plaincopy
$(".has_children").click(function(){  
$(this).addClass("highlight") //为当前元素增加highlight类  
<span style="white-space:pre">  </span>.children("a").show().end() //将子节点a元素显示出来并重新定位到上次操作的元素  
.siblings().removeClass("highlight") //获取元素的兄弟元素并去掉他们的highlight类  
<span style="white-space:pre">  </span>.children("a").hide(); //将兄弟元素下的a元素隐藏  
})  

代码格式调整后,易读性好了很多，总结下规范：

A、对于同一个对象不超过三个操作的可以写在一行

B、对于同一对象有多个操作,建议每一行写一个操作

C、对于多个对象的少量操作，可以考虑每个对象写一行，如果涉及到子元素，适当缩进

D、为代码添加注释

四、jQuery对象和DOM对象

1、获得方式

DOM(Document Object Model 文档对象模型)对象获取方式是通过JavaScript中的getElementById、getElementByTagName等方法获取到的。

如下：

[html] view plaincopy
var domObj=document.getElementById("id") //获取DOM对象  
var objHtml=domObj.innerHTML //使用JavaScript中的方法----innerHTML  

jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，只要是jQuery对象就可以使用jQuery提供的方法

$("#foo").html() //获取id为foo的元素内的html代码 html()是jQuery内的方法。

注意：jQuery对象只能使用jQuery中提供的方法,不能使用DOM对象的方法,DOM对象只能使用JavaScript提供的方法，不能使用jQuery提供的方法。

2、jQuery对象与DOM对象的相互转换

在考虑两者之间的相互转换之前先约定好定义变量的风格。如果获取的对象为jQuery对象那么就在定义的变量前面加上$。例如

[html] view plaincopy
var $variable=jQuery对象;  
var variable=DOM对象;  

(1)、jQuery对象转换成DOM对象：

当我们对jQuery封装的方法不能完全掌握或者jQuery没有封装的方法，那么我们需要将jQuery对象转换成DOM对象，然后调用JavaScript对象中的方法，jQuery提供了两种方法将jQuery对象转换成DOM对象，即index[] ,get(index)

A、jQuery对象是一个数组对象，可以通过[index]将其转换成DOM对象：

[html] view plaincopy
var $cr=$("#id"); //jQuery对象  
var cr=$cr[0]; //DOM对象  

B、另一种方法是jQuery本身提供的，通过get(index)方法得到DOM对象

[html] view plaincopy
var $cr=$("#id"); //jQuery对象  
var cr=$cr.get(0); //DOM对象  

（2）、DOM对象转换成jQuery对象

只需要用$把DOM对象包装起来就可以了

[html] view plaincopy
var cr =document.getElementById('id') //DOM对象  
var $cr=$(cr); //jQuery对象  

通过以上方法可以任意的转换jQuery对象和DOM对象

3、实例研究

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
    //jquery判断  
    function isChecked(){  
        var $ch=$("#agree");  
        if($ch.is(":checked")){  
            alert("jquery判断当前处于选中状态");  
        }else{  
            alert("jquery判断当前处于非选中状态");  
        }  
    }  
    //dom判断  
    function isChecked1(){  
        var $ch=$("#agree");  
        var ch=$ch.get(0);  
        if(ch.checked){  
            alert("dom判断当前处于选中状态");  
        }else{  
            alert("dom判断当前处于非选中状态");  
        }  
    }  
  //-->  
  </script>  
 </head>  
      
 <body>  
    <input type="checkbox" id="agree"  name="a">同意  
    <input type="button" value="jQuery判断是否选中" onclick="isChecked()">  
    <input type="button" value="DOM判断是否选中" onclick="isChecked1()">  
 </body>  
</html>  

2.jQuery选择器整理

一、基本选择器

1、ID选择器

JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下：

var element=document.getElementById("id");

jQuery简化了其操作： var $element=$("#id");

实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaScript的原生方法。

2、类型选择器

跟ID选择器一样，JavaScript同样提供了原生的方法用来在DOM中选择指定类型的元素。

var elements=document.getElementByTagName(tagName"");

jQuery对其包装后的简化方法是 var $elements=$("tagName");

3、类选择器

JavaScript没有提供内置的类选择方法，我们可以自己为其拓展一个，代码如下：

[html] view plaincopy
document.getElementsByClassName=function(className){  
  
     var el=[],  
  
         _el=document.getElementsByTagName("*");   //获取所有元素  
  
         for(var i=0;i<_el.length;i++){  
  
            if(_el[i]==className){  
  
              el[el.length]=_el[i];  
  
            }  
  
          }  
  
    return el;  
  
}

下面举个例子，一个页面有4个div,通过JavaScript使div1和div3的前景色设置成红色，通过jQuery将div2和div4的前景色设置成蓝色

代码如下实例2-1：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  document.getElementsByClassName=function(className){  
  
     var el=[],  
         _el=document.getElementsByTagName("*");   //获取所有元素  
         for(var i=0;i<_el.length;i++){  
            if(_el[i].className==className){  
              el[el.length]=_el[i];  
            }  
          }  
         return el;  
    }  
  
    window.onload=function (){  
        var redDiv= document.getElementsByClassName("red");  
        for(var i=0;i<redDiv.length;i++){  
          redDiv[i].style.color="red";  
        }  
    };  
  
    $(function(){  
        $(".blue").css("color","blue");  
    })  
  </script>  
 </head>  
  
 <body>  
  <div id="" class="red">  
    div1  
  </div>  
  <div id="" class="blue">  
    div2  
  </div>  
  <div id="" class="red">  
    div3  
  </div>  
  <div id="" class="blue">  
      
  </div>  
  
 </body>  
</html>  

上述例子可以看得到jQuery的写法要相对简单一些，而且jQuery已经是一个成熟的框架了，它内部封装的类选择器方法要比咱们自定义的效率高。

4、通配选择器（"*"）

该选择器可以匹配上下文中的所有元素，下面示例将选择body下的所有元素

实例2-2：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
    $(function(){  
        $("body *").css("color","red");  
        $("div *").css("color","blue");  
    })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <div id="" class="">  
        div1  
        <span class="">div下的span</span>  
        <table>  
        <tr>  
            <td>div下的table</td>  
        </tr>  
        </table>  
    </div>  
    </br>  
    <span class="">span1</span>  
    </br>  
    <textarea name="" rows="3" cols="80">textarea1</textarea>  
          
    <table>  
    </br>  
    <tr>  
        <td>table1</td>  
    </tr>  
    </table>  
 </body>  
</html>  

5、分组选择器

jQuery支持CSS的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强jQuery选择器的应用能力，选个多组元素可以通过逗号分隔符来分隔多个不同的选择器。，这些选择器可以是任意类型的，也可以是复合选择器。

实例2-3：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
        $("h2,#wrap,span.red,[title='text']").css("color","red");//分别选择了元素h2、id为wrap的、span下的class为red的、title为text的  
    })  
  </script>  
 </head>  
  
 <body>  
    <h2>H2</h2>  
    <div id="wrap" class="">  
        DIV  
    </div>  
    <div id="" class="red">  
        DIV_CLASS_RED  
    </div>  
    <span class="red">SPAN</span>  
    <p title="text">P</p>  
 </body>  
</html>  

二、层级选择器

层级选择器就是根据HTML文档结构中节点之间的包含或者并列关系，决定匹配元素的一种方法。

1、关系选择器

表2-1 关系选择器选择器说明ancestor descendant

在给定祖先元素下匹配所有后代元素。ancestor，表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("form input")可以匹配表单下的所有input元素。

parent>child

在给定父元素下匹配所有子元素。perent表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("table>tr")可以匹配table下的所有tr元素

prev + next

匹配所有紧接在prev元素后的next元素。prev表示任何有效选择器，next表示一个有效选择器并且紧接着第一个选择器。例如：$("lable + input")匹配所有跟在lable后面的input元素

prev ~ siblings

匹配prev元素之后的所有siblings元素。prev表示任何有效选择器，siblings表示一个选择器，并且它是作为prev选择器的同辈。例如：$("form ~ input")匹配所有跟form元素同辈的input元素。

通过上面的表格我们不一定能完全明白这几个选择器的细节地方，还是写个实例演示一下。

实例2-4：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> 关系选择器演示实例 </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
    $(function(){  
        $("div").css("border","solid 1px red");         //控制所有div元素的边框宽度为1 颜色为红色  
        $("div>div").css("margin","2em");                //控制div下属的所有子div缩进两个中文字符  
        $("div div").css("background","#ff0");          //控制一级div下属的所有div元素的背景色为#ff0  
        $("div div div").css("background","#f0f");      //控制第三层div背景色为#f0f  
        $("div + p").css("margin","2em");               //控制与div相邻的p元素缩进两个中文字符，只匹配div后面紧接着那个p元素  
        $("div:eq(1) ~ p").css("background","blue");    //控制页面第二个div（eq(1)代表取第二个)之后所有的与第二个div同辈的p元素的背景色为蓝色  
    })  
  //-->  
  </script>  
 </head>  
  
 <body>  
     <p>段落文本10</p>  
    <div id="" class="">一级div元素  
        <div id="" class="">二级div元素  
            <div id="" class="">三级div元素  
                  
            </div>  
            <p>段落文本31</p>  
            <p>段落文本32</p>  
        </div>  
        <p>段落文本21</p>  
        <p>段落文本22</p>  
    </div>  
    <p>段落文本11</p>  
    <p>段落文本12</p>     
 </body>  
</html>  

2、子元素选择器

这个写个实例吧。

实例2-5：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
 </head>  
 <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
 <script type="text/javascript">  
 <!--  
    $(function(){  
        //$("ul li:nth-child(1)").css("background","#ff6")      //匹配每个ul元素下的第一个li元素，可能匹配0个或者多个  
        //$("ul li:nth-child(3n+2)").css("background","#6ff")   //匹配每个ul元素下第3n+2个li元素，n取值为0，1,2，.......  
        //$("ul li:first-child").css("color","red");            //匹配每个ul元素下的第一个li元素  
        //$("ul li:first").css("color","red");                  //匹配第一个ul元素下的第一个li元素 跟上面的那个是有区别的  
        //$("ul li:last-child").css("color","blue");            //匹配每个ul元素下的最后一个li元素  
        //$("ul li:last").css("color","red");                   //匹配最后一个ul元素下的最后一个li元素  
        $("ul li:only-child").css("color","red")                //如果li元素是ul元素下的唯一子元素(只有一个li元素,没有其他元素)，  
                                                                //那么可以匹配，否则不可匹配  
    })  
 //-->  
 </script>  
 <body>  
    <ul>  
        <li>列表11</li>  
        <li>列表12</li>  
        <li>列表13</li>  
        <li>列表14</li>  
        <li>列表15</li>  
        <li>列表16</li>  
    </ul>  
    <ul>  
        <li>列表21</li>  
        <li>列表22</li>  
        <li>列表23</li>  
        <li>列表24</li>  
        <li>列表25</li>  
        <li>列表26</li>  
    </ul>  
 </body>  
</html>  

注意：

A、:nth-child(even) :nth-child(odd) //分别是匹配偶数位元素和奇数位元素可以用2n和2n+1替代

B、我们用过的eq(n)选择器是从0开始计数的，而刚刚整理的那些选择器是从1开始计数的，使用的时候要注意

三、过滤选择器

过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器与CSS的伪类选择器语法格式相同，即以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器、可见过滤器。下面分别介绍：

1、定位过滤器

定位过滤器主要通过编号和排位筛选特定位置上的元素，或者过滤掉特定元素.

以上效果实现代码实例2-6：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("tr:first").css("color","red");                   //设置第一行字体为红色  
            $("tr:eq(0)").css("font-size","20px");              //设置第一行字体大小为20像素 font-size:20px  
            $("tr:last").css("color","blue");                   //设置最后一行字体为蓝色  
            $("tr:even").css("background","#ffd");              //设置偶数行背景色为#ffd  
            $("tr:odd").css("background","#dff");               //设置技术行背景色为#dff  
            $("tr:gt(3)").css("font-size","14px");              //设置从第五行开始所有的字体大小为14px  
            $("tr:lt(4)").css("font-size","14px");              //设置1-4行字体大小为14px  
              
        })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <table>  
    <tr>  
        <th>选择器</th>  
        <th>说  明</th>  
    </tr>  
    <tr>  
        <td>:first</td>  
        <td>匹配找到的第一个元素，例如，$("tr:first")表示匹配表格的第一行</td>  
    </tr>  
    <tr>  
        <td>:last</td>  
        <td>匹配找到的最后一个元素，例如，$("tr:last")表示匹配表格的最后一行</td>  
    </tr>  
    <tr>  
        <td>:not</td>  
        <td>去除所有与给定选择器匹配的元素。例如，$("input:not(:checked)")可以匹配所有未选中的input元素</td>  
    </tr>  
    <tr>  
        <td>:even</td>  
        <td>匹配所有索引值为偶数的元素，从0开始计数。例如$("tr:even"),可以匹配表格的偶数行</td>  
    </tr>  
    <tr>  
        <td>:odd</td>  
        <td>上面是偶数，这个是奇数</td>  
    </tr>  
    <tr>  
        <td>:eq</td>  
        <td>匹配一个给定索引值的元素，例如，$("tr:eq(0)")可以匹配第一个tr</td>  
    </tr>  
    <tr>  
        <td>:gt</td>  
        <td>匹配所有大于给定索引值的元素，从0开始计数。例如，$("tr:gt(0)")可以匹配表格的第二行以及后面的行</td>  
    </tr>  
    <tr>  
        <td>:lt</td>  
        <td>上面是大于，这个是小于，eq就相当于等于呗</td>  
    </tr>  
    <tr>  
        <td>:header</td>  
        <td>匹配如h1\h2\h3类标题元素</td>  
    </tr>  
    <tr>  
        <td>:animated</td>  
        <td>匹配所有正在执行动画效果的元素</td>  
    </tr>  
    </table>  
 </body>  
</html>  

2、内容过滤器

内容过滤器主要根据匹配元素所包含的的子元素或者文本内容进行过滤。主要有四种方式：

表2-2 内容选择器选择器说明:contains匹配包含给定文本的元素，例如，$("div:contains('图片')") 匹配所有包含文本"图片"的div元素:has匹配含有选择器所匹配的元素的元素，例如，$("div:has(p)")匹配所有包含p元素的div元素:empty匹配所有不包含子元素或者文本的空元素:parent匹配含有子元素或者文本的元素，与empty相互对应

实例2-7：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("li:empty").text("空内容");              //匹配空li元素  
            $("div ul:parent").css("background","#ff1");//匹配div下包含的不为空的ul元素  
            $("h2:contains('标题')").css("color","red");//匹配包含文本内容"标题"的h2元素  
            $("p:has(span)").css("color","blue");       //包含span元素的p元素    
        })  
  //-->  
  </script>  
 </head>  
  
 <body>  
     <div id="" class="">  
        <h2>标题</h2>  
        <p>段落文本1</p>  
        <p><span>段落文本2</span></p>  
        <ul>  
            <li></li>  
            <li></li>  
        </ul>  
     </div>  
 </body>  
</html>  

执行效果如下：

3、可见过滤器

可见过滤器就是根据元素的可见或者隐藏来进行匹配的

表2-3 可见过滤器选择器说明:hidden匹配所有不可见元素，或者type为hidden的元素:visible匹配所有可见元素这个比较简单好记

实例2-8：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
    $(function(){  
        $("p:odd").hide();  
        $("p:odd").css("color","red");  
        $("p:visible").css("color","blue");  
        $("p:hidden").show();  
    })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <p>段落文本1</p>  
    <p>段落文本2</p>  
    <p>段落文本3</p>  
    <p>段落文本4</p>  
 </body>  
</html>  

执行效果：

四、属性选择器

属性选择器一般是根据元素的属性和其值作为过滤的条件来匹配相应的DOM元素

1、七种属性选择器

表2-4 属性选择器选择器说明[attribute]匹配包含给定属性的元素，例如，$("div[id]") 匹配所有包含id属性的div元素[attridute=value]匹配属性等于特定值的元素，属性值的引号大多数是可选的，如果属性值包含"]"时，需要加引号以避免冲突。[attridute!=value]跟上面的相对应，很好理解[attridute^=value]匹配给定的属性是以某些值开始的元素，例如，$("input[name^='text']")表示所有name属性值是以text开始的input元素[attridute$=value]匹配给定的属性是以某些值结尾的元素，跟上面的相对应[attridute*=value]匹配给定的属性是包含某些值得元素[selector1][selector2][selector3]复合属性选择器，需要同时满足多个条件时使用，例如，$(input[name*='text'][id])表示匹配所有name属性值包含text的且包含id属性的input元素。

2、使用属性选择器示例

看一个示例，在这个示例中将根据超链接文件的类型，分别为不同类型的文件添加图标。

实例2-8

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
    $(function(){  
        var $a1=$("a[href$=pdf]");  
        $a1.html($a1.attr("href")+"<img src='images/pdf.jpg'/>");  
        var $a2=$("a[href$=rar]");  
        $a2.html($a2.attr("href")+"<img src='images/rar.jpg'/>");  
        var $a3=$("a[href$=jpg],[href$=bmp]");  
        $a3.html($a3.attr("href")+"<img src='images/jpg.jpg'/>");  
        var $a4=$("a[href^='http']");  
        $a4.html($a4.attr("href")+"<img src='images/html.jpg'/>");      
          
  
    })  
  //-->  
  </script>  
 </head>  
  
 <body>  
  <a href="1.pdf">超链接</a><br>  
  <a href="2.rar">超链接</a><br>  
  <a href="3.jpg">超链接</a><br>  
  <a href="4.bmp">超链接</a><br>  
  <a href="http://www.baidu.com">超链接</a>  
 </body>  
</html>  

执行前后效果：

五、表单选择器

表单是页面中使用频率较高的元素之一，但是很多表单域都是使用input元素来定义的，为了方便用户能够灵活操作表单，jQuery专门定义了表单选择器，使用表单选择器可以方便地获取表单中某类表单域对象。

1、基本表单选择器

表2-5 表单选择器选择器说明:input匹配所有input、textarea、select和button元素:text匹配所有单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:image匹配所有图像域:reset匹配所有重置按钮:button匹配所有普通按钮:file匹配所有文件域:hidden匹配所有隐藏域
下面看一个表单实例

实例2-9：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("#form1 :text").val("修改后的文本域");  
            $("#form1 :password").val("修改后的密码域");  
            $("#form1 :checkbox").val("修改后的复选框");  
            $("#form1 :radio").val("修改后的单选框");  
            $("#form1 :image").val("修改后的图像域");  
            $("#form1 :file").val("修改后的文件框");  
            $("#form1 :hidden").val("修改后的隐藏域");  
            $("#form1 :button").val("修改后的普通按钮");  
            $("#form1 :submit").val("修改后的提交按钮");  
            $("#form1 :reset").val("修改后的重置按钮");  
        })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <form id="form1" method="post" >  
        <input type="text" name="" value="文本域"><br>  
        <input type="password" name="" value="密码域"><br>  
        <input type="checkbox" name="" value="复选框">复选框<br>  
        <input type="radio" name="" value="单选按钮">单选按钮<br>  
        <input type="image" src="" value="图像域"><br>  
        <input type="file" src="" value="文件域"><br>  
        <input type="hidden" name="" value="隐藏域"><br>  
        <input type="button" value="普通按钮" onclick=""><br>  
        <input type="submit" value="提交按钮" onclick=""><br>  
        <input type="reset"  value="重置按钮" onclick=""><br>  
     </form>  
 </body>  
</html>  

处理前后效果图：

注意：$("#form1 text") 在form1后面有一个空格

2、高级表单选择器

除了简单的表单域选择器外，jQuery还根据表单域中特有的属性定义了4个表单属性选择器，这些选择器与基础表单选择器不同，它们可以选择任何类型的表单域，因为它主要根据表单属性来选择。

表2-6 高级表单选择器选择器说明:enabled匹配所有可用元素:disabled匹配所有不可用元素:checked匹配所有被选中的元素（复选框、单选按钮等，不包括select的option）:selected匹配所有选中的option元素

实例2-10：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("#form1 :disabled").val("不可用");  
            $("#form1 :enabled").val("可用");  
            $("#form1 :checked").removeAttr("checked");  
            $("#form1 :selected").removeAttr("selected");  
        })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <form id="form1" method="post" >  
        <input type="text" name=""  disabled="disabled" value="文本域"><br>  
        <input type="text"          disabled="disabled" value="文本域"><br>  
        <input type="text"  value="文本域"><br>  
        <input type="checkbox" name="" value="复选框" checked="checked">复选框<br>  
        <input type="radio" name="" value="单选按钮">单选按钮<br>  
        <select name="">  
            <option value="1">1</option>  
            <option value="2">2</option>  
            <option value="3" selected>3</option>  
        </select>  
     </form>  
 </body>  
</html>  

前后效果：

3.jQuery 过滤函数

在前面介绍了许多功能实用的选择器，jQuery在此基础上还拓展了许多功能函数，这些函数作为jQuery对象的方法直接实用，这样就能够在选择器的基础上更加精确地控制对象。请注意：筛选函数与选择器在用法上是不同的。例如，在下面这个列表结构中。

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">   <ul>  
        <li>1</li>  
        <li>2</li>  
        <li>3</li>  
    </ul></span>  

如果要设置第二个列表项的字体颜色为红色，可以用选择器进行选择

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">$("li:eq(1)").css("color","red");  
</span>  

而如果使用过滤函数，则可以使用如下方法来实现

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">$("li").eq(1).css("color","red");  
</span>  

选择器是构建jQuery对象的基础，而过滤函数则是jQuery对象的成员，用法截然不同，jQuery定义的过滤函数如下表所示：

表2-7 jQuery过滤函数jQuery过滤函数说明eq(index)获得指定索引值位置上的元素,索引值从0开始计数hasClass(class)检查当前元素是否含有某个特定的类，如果有则返回truefilter(expr)筛选出与指定表达式匹配的元素集合，这个方法用于缩小匹配的范围，用逗号分隔多个表达式filter(fn)筛选出与指定函数返回值匹配的元素集合is(expr)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回truemap(callback)将一组元素转换成其他数组(不论是否是元素数组)not(expr)删除与指定表达式匹配的元素slice(start,[end])选取一个匹配的子集，与原来的slice方法类似add(expr)把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合contents()查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个ifame，则查找文本内容find (expr)搜索所有与指定表达式匹配的元素。这个元素是找出正在处理的元素的后代元素next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合nextAll([expr])查找当前元素之后的所有元素parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合prevAll([expr])查找当前元素之前所有的同辈元素，可以用表达式过滤siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选andSelf()加入先前所选的当前元素中，对于筛选或查找后的元素，加入先前所选元素的将会很有用end()回到最近的一个‘破坏性’操作之前，即将匹配的元素列表变为前一次的状态

说明：

1、find() 和 filter()两者的区别

简单的说就是find()是在jQuery对象集合的所有的子元素中查找，而filter()是在jQuery对象集合中查找。

还有就是两者参数的区别，find()需要的参数是且只是jQuery选择器的表达式，而filter()的参数可以是jQuery选择器的表达式，也可以是多个jQuery选择器的表达式并列，中间用逗号隔开（逻辑或的关系），filter()参数也可以是一个函数，调用函数时自动传入index参数(jQuery对象集合的长度),函数需返回true或者false来选中或者排除元素。看个例子就明白两者的用法了：

实例3-1：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
<title>Document</title>   
<script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
<script>   
$(function(){   
    $('#btn1').click(function(){   
        alert('这样的jQuery对象有'+$('div').find('.test').length+'个')  
    });   
    $('#btn2').click(function(){   
        alert('这样的jQuery对象有'+$('div').filter('.test').length+'个');   
    });   
    $('#btn3').click(function(){   
        alert('这样的jQuery对象有'+$('div').filter('.last').length+'个');   
    });   
    $('#btn4').click(function(){   
        alert('这样的jQuery对象有'+$('div').filter('.test,.last').length+'个');   
    });   
    $('#btn5').click(function(){  
        alert('这样的jQuery对象有'+$('div').filter(function(index){  
            return $(this).hasClass("haha");//检查当前元素是否含有haha类  
        }).length+'个')  
    })  
});   
</script>   
</head>   
<body>   
    <input type="button" value="test-find" id="btn1" />   
    <input type="button" value="test-filter" id="btn2" />   
    <input type="button" value="test-filter" id="btn3" />   
    <input type="button" value="test-filter" id="btn4" />   
    <input type="button" value="test-filter" id="btn5" />   
    <div class="first">  
        first content  
        <span class="test">  
            test content  
        </span>  
        <span class="test">  
            test1 content  
        </span>  
    </div>   
  
    <div class="last">  
        last  
        <span class="test">  
            last test content  
        </span>  
    </div>   
  
    <div class="last">  
        last  
        <span>  
            last no test content  
        </span>  
    </div>   
    <div class="haha">  
          
    </div>   
</body>   
</html>   
</span>  

2、map和each的区别

$.map(array,fn(value))的作用是将一个数组转换成另一个数组，循环传递数组内的每个元素（value）进行处理，将所有的返回值组成一个新的数组。

特别需要注意的是.$map()不能处理json格式的数组。

$.each(array,fn(value))的作用是循环处理数组中的各个元素，也就是相当于java中的for循环，它没有返回值。它可以处理json格式的数组。

分别看一下例子就了解这两个函数的区别了

实例3-2 $.map()例子：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<title>$.map()函数</title>  
<script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
<script language="javascript">  
$(function(){  
    var aArr = ["a", "b", "c", "d", "e"];  
    $("p:eq(0)").text(aArr.join());  
    aArr = $.map(aArr,function(value,index){  
       //将数组转化为大写并添加序号  
       return (value.toUpperCase() + index);  
    });  
    $("p:eq(1)").text(aArr.join());  
    aArr = $.map(aArr,function(value){  
       //将数组元素的值双份处理  
       return value + value;  
    });  
    $("p:eq(2)").text(aArr.join());  
});  
</script>  
</head>  
<body>  
<p></p><p></p><p></p>  
</body>  
</html></span>  

执行结果如图：

实例3-3 $,each例子：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">   var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };//json格式的对象(dict)  
    $.each(arr, function(key, value) { alert(key+"="+value); });</span>  

3、not()用法需要参数为jQuery选择器的表达式

例如，要从jQuery对象集合中删除id为seleced的

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;">$("p").not("#selected")</span>  

4、slice(start,[end])

根据下标选取匹配的子集

实例3-4：

[html] view plaincopy
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
        $("body").html($("p").slice(0, 1))  
    })  
  </script>  
 </head>  
 <body>  
  <p>Hello</p><p>cruel</p><p>World</p>  
 </body>  
</html>  
</span>  

执行结果：Hello

4.jQuery操作Dom对象

一、使用jQuery创建节点

节点是DOM结构的基础。根据DOM规范，节点是一个很宽泛的概念，范围包含元素、属性、文本、文档、注释等。实际开发过程中，要创建动态内容，主要操作的节点包括元素、

属性和文本。

看一个例子实例4-1：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> jQuery创建元素、文本和属性 </title>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
        var $h1=$("<h1  title='一级标题'>jQuery创建元素、文本和属性</h1>");  
        $("body").append($h1);  
        //写成一行   
        $("body").append("<h2  title='二级标题'>二级标题</h2>")  
    })  
  </script>  
 </head>  
 <body>  
    
 </body>  
</html>  

执行效果如图：

很简单的一行代码就可以完成创建元素、文本和属性并且把该元素放到body元素下。比JavaScript简化了太多了。

二、使用jQuery插入元素

1、在节点内部插入内容

jQuery提供了4种方法用于在节点内部插入内容

表4-1 在节点内部插入内容方法方法说明append()向每个匹配的元素内部追加内容（既然是‘追加’，那旧说明是在匹配元素内部的后面增加）appendTo() 把所有匹配的元素追加到另一个指定的元素集合中，实际上，这个方法颠倒了append()方法的应用。例如$(A).append($B)和
$B.appendTo($A)是等价的prepend()与append()相反，它是把元素插到到匹配元素内部的最前面prependTo()与prepend()用法颠倒，不多说了

这四个方法的参数可以是字符串、DOM元素对象或者是jQuery对象。下面示例演示append()方法分别把DOM元素对象、jQuery对象和字符串添加到ul对象下面。

实例4-2：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> jQuery在节点内部插入内容 </title>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
        $(function(){  
            var $li =$("<li>jQuery对象</li>");  
            var li=document.createElement("li");  
            li.innerText="DOM对象";  
            $("ul").append($li)  
            $("ul").append(li)  
            $("ul").append("<li>字符串</li>");  
        })  
  </script>  
 </head>  
  
 <body>  
    <ul></ul>  
 </body>  
</html>  

执行结果如图：

2、在节点外部插入内容

jQuery同样提供了四个方法

表4-2 在节点外部插入内容方法方法说明after()在每个匹配的元素之后插入内容before()在每个匹配的元素之前插入内容insertAfter()把所有匹配的元素插入到另一个指定的元素集合的后面insertBefore()把所有匹配的元素插入到另一个指定的元素集合的前面
这四个方法跟前面那四个方法用法相似，看个例子

实例4-3：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> jQuery在节点外部插入内容 </title>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
        $("div").after($("<p>最后一段文本</p>"))  
        $("div").before($("<p>第一段文本</p>"))  
        $("div").css("background","red");  
    })  
  </script>  
 </head>  
 <body>  
    <div id="" class="" bgcolor="red">  
        <p >段落文本</p>  
    </div>  
 </body>  
</html>  

执行效果如图：

特别注意：appendTo()、prependTo()、insertAfter()、insertBefore()四个方法具有破坏性操作的特性。也就是说，如果选择已存在的内容并把他们插入到指定对象中，则原位

置的内容将被删除。

实例4-4：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> 插入内容的破坏性 </title>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
    $("div").css("background","red");  
    })  
  </script>  
 </head>  
 <body>  
    <div id="" class="" bgcolor="red">  
        <p >段落文本</p>  
    </div>  
 </body>  
</html>  

执行效果：

加上一段js：

[html] view plaincopy
$("p").insertAfter($("div"))  

执行效果如下：

三、使用jQuery删除元素

jQuery支持两种删除元素的方法：remove()和empty()。而DOM仅定义了与jQuery的remove()方法对应的removeChild()方法。

表4-3 jQuery删除元素的方法方法说明remove()从DOM中删除所有的匹配的元素，也就是把本身都删除。empty()这个意义是清空，是清空内部，本身保留。

四、使用jQuery复制元素

jQuery定义了clone()方法用来复制节点，与之对应的DOM定义了cloneNote()方法实现相同的操作功能。

这个比较简单，看个例子得了：

实例4-5：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> 使用jQuery复制元素 </title>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
    $(function(){  
        var $tr=$("table tr:last").clone();  
        $tr.find("td").each(function(index,value){  
            $(this).text("第3行第"+(index+1)+'列')  
        })  
        $("table").append($tr)  
    })  
  </script>  
 </head>  
 <body>  
    <div id=""  >  
        <table width="100%" border="1" cellpadding="2" cellspacing="0">  
        <tr>  
            <td>第1行第1列</td>  
            <td>第1行第2列</td>  
        </tr>  
        <tr>  
            <td>第2行第1列</td>  
            <td>第2行第2列</td>  
        </tr>  
        </table>  
    </div>  
 </body>  
</html>  

执行结果：

五、使用jQuery替换元素

jQuery定义了replaceWith()方法和replaceAll()方法用来替换节点，与之对应的DOM定义了replaceChild()方法实现相同的操作功能，不过他们的用法迥然不同。

replaceWith()方法能够将所有匹配的元素替换成指定的HTML或DOM元素，replaceAll()方法与之功能相同，但是操作相反，例如在下例中将所有的p元素替换为div元素

实例4-6：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> jQuery替换元素 </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
        $(function(){  
            $("p").replaceWith("<div>111</div>")  
  
            //$("<div>111</div>").replaceAll($("p")) 与上面的效果相同  
        })  
  </script>  
 </head>  
  
 <body>  
    <p>段落1</p>  
    <p>段落2</p>  
    <p>段落3</p>  
 </body>  
</html>  

看一下它的DOM结构：

六、使用jQuery操作属性

jQuery和DOM都提供了元素属性的基本操作方法

1、设置属性

jQuery通常使用attr()方法来设置属性,而DOM定义了setAttribute()方法来设置元素的属性。

在使用jQuery提供的attr()方法的时候，需要为该方法设置两个参数值，分别是属性名和属性值。还可以用一个函数替换第二个参数（属性值），用函数的返回结果充当属性值。

用法很简单，例如：$("p").attr("title","段落文本");

2、获取属性

jQuery里还是用attr(),DOM里用getAttribute()。

当为attr()设置了一个参数值时，代表要获取这个属性的属性值，如果没有该属性，那么返回undefined。不用举例了，很简单，也经常用。

3、删除属性

jQuery里定义的方法是removeAttr()方法删除指定的元素属性，DOM里定义的是removeAttribute()。

$("p").removeAttr("title");

七、jQuery操作类样式

在设计动态样式时，经常需要与元素的class属性打交道，该属性可以为元素定义样式。既然作为元素的属性，我们当然可以用上面介绍的attr()方法进行动态修改元素的class。

不过，jQuery为了开发者方便操作，又单独定义了几个与class操作相关的方法。

1、追加样式 addClass

使用addClass方法前首先的定义好样式类。用法也很简单，看个例子

实例4-7：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>addClass </title>  
  <style type="text/css">  
    .red{  
        color:red;/*红色字体样式*/  
    }  
    .bold{  
        font-weight:bold;/*加粗字体样式*/  
    }  
    .italic{  
        font-style:italic;/*倾斜字体样式*/  
    }  
  </style>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("input").eq(0).click(function(){  
                $("p").addClass("red");  
            });  
            $("input").eq(1).click(function(){  
                $("p").addClass("bold");  
            })  
            $("input").eq(2).click(function(){  
                $("p").addClass("italic");  
            })  
        })  
  //-->  
  </script>  
 </head>  
  
 <body>  
    <p>手握日月摘星辰,世间无我这般人</p>  
    <input type="button" value="红色" onclick="">  
    <input type="button" value="加粗" onclick="">  
    <input type="button" value="倾斜" onclick="">  
 </body>  
</html>  

执行前的效果和分别点击三个按钮后的变化如图：

2、移除样式removeClass()

使用方法大同小异，不做介绍了。

3、切换样式toggleClass()

样式切换在鼠标动态操作中非常实用，在Web开发中诸如折叠、开关、伸缩、Tab切换等动态效果中都需要用到交互切换。jQuery为此定义了toggleClass()方法，该方法可用来

开/关指定类样式，从而实现切换类样式的目标。

jQuery的toggleClass()方法包含两个参数，第一个参数指定作为开关的类样式名称，第二个参数用来决定是否打开类样式，该参数为可选。如果没有设置第二个参数，则

toggleClass()方法根据是否存在参数设置的样式，如果存在，就去除，否则追加。

实例4-8：

[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <style type="text/css">  
    .hidden{  
        display:none;  
    }  
  </style>  
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  <!--  
        $(function(){  
            $("input").click(function(){  
                $("p").toggleClass("hidden")  
            })  
        })  
  //-->  
  </script>  
 </head>  
 <body>  
    <input type="button" value="切换样式" >  
    <p>手握日月摘星辰,世间无我这般人</p>  
 </body>  
</html>  

4、判断样式hasClass()

在过滤函数里总结过，不重复写了。

八、使用jQuery操作HTML、文本和值

就是经常用的html() text() val()

没有参数的时候是读取，有参数的时候是赋值。

0 0