第7 节 高效简洁的jQuery

一、为什么用jquery

可以把当做java里系统自带的框架和方法，直接调用方法就能完成一些动作。

二、jQuery的入口

2.1 jQuery的简洁入口

 $(function(){

        });

2.2jQuery的标准入口

 $(document).ready(function(){


        });

2.3当前页面加载完成后执行

window.onload = function(){


        }

三、jQuery选择器

3.1基本选择器

就跟css里一样只是要放在$（选择器）中

3.1.1 #id

返回值：Array[Element](http://www.shouce.ren/api/view/a/13081#articleHeader37)

• id: 一个用来查找的ID，即元素的id属性。

  //获取id值为hid元素节点          
  $("#hid")
  

  3.1.2 element

  返回值：Array[Element](http://www.shouce.ren/api/view/a/13081#articleHeader37)

• element: 一个用来搜索的元素。 指DOM节点的标签名。
  

  //获取网页中所有li元素节点
  $("li")
  

  3.1.3 .class

  返回值：Array[Element](http://www.shouce.ren/api/view/a/13081#articleHeader37)

• class: 一个用来查找的类名。一个元素可以有多个类；其中只有一个必须匹配。
  

  //获取class属性值为cc所有元素节点，并设置css样式
  $(".cc").css("color","red");
  

  3.1.4 *

  返回值：Array[Element](http://www.shouce.ren/api/view/a/13081#articleHeader37)
  匹配所有元素
  多用于结合上下文来搜索。
  警告： 除非被它自己使用，否则 * 选择器或通用选择器，其速度是极其慢的。

  3.1.5 selector1,selector2,selectorN

  返回值：Array[Element](http://www.shouce.ren/api/view/a/13081#articleHeader37)

• selector1: 任何有效的选择
  selector2: 其他有效的选择
  selectorN: 更多有效的选择只要你喜欢。
  

  //选择器组，统一设置指定css样式
  $("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");
  

  3.1.6获取第一个li节点并设置样式

   //获取第一个li节点并设置样式
   $("li:first").css("color","red");
  

  3.1.7获取最后一个li节点并设置样式

   //获取最后一个li节点并设置样式
            $("li:last").css("color","red");
  

  3.1.8获取偶数索引号对应的所有li节点并设置样式

  //获取偶数索引号对应的所有li节点并设置样式
            //$("li:even").css("color","red");
  

3.1.9获取奇数索引号对应的所有li节点并设置样式

 //获取奇数索引号对应的所有li节点并设置样式
            $("li:odd").css("color","red");

3.1.10获取class属性值为cc的所有li节点并设置样式

   //获取class属性值为cc的所有li节点并设置样式
            $("li.cc").css("color","red");

3.1.11获取class属性值不为cc的所有li节点并设置样式

            //获取class属性值不为cc的所有li节点并设置样式
            $("li:not(.cc)").css("color","red");

3.1.12获取索引位置为2的li节点并设置样式

  //获取索引位置为2的li节点并设置样式
   $("li:eq(2)").css("color","red");

3.1.13获取前2个li节点并设置样式

            //获取前2个li节点并设置样式
            $("li:lt(2)").css("color","red");

3.2层级选择器

3.2.1ancestor descendant

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择给定的祖先元素的所有后代元素。
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。

        一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。 

  //获取ul中所有子元素节点li（包括后代节点），并设置样式
  $("ul li").css("color","red");

3.2.2parent > child

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择所有指定“parent”元素中指定的”child”的直接子元素。
parent: 任何有效的选择器。
child: 用来筛选子元素的选择器。

//获取ul中所有直接子元素节点li（不包括后代节点），并设置样式
$("ul>li").css("color","red");

3.2.3prev + next

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择所有紧接在 “prev” 元素后的 “next” 元素
prev: 任何有效的选择器。
next: 用于筛选紧跟在 “prev” 后面的元素的选择器。

 //获取ul同级紧邻后面的第一个兄弟节点li，并设置样式
  $("ul+li").css("color","red");

3.2.4prev ~ siblings

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
prev: 任何有效的选择器
siblings: 一个选择器来过滤第一选择器以后的兄弟元素。

//获取ul后面所有同级兄弟li元素节点，并设置样式
            $("ul~li").css("color","red");

3.3内容选择器

3.3.1:contains(text)

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择所有包含指定文本的元素。
text: 用来查找的一个文本字符串。这是区分大小写的。

        匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。正如属性值选择器，`:contains()`选择器中括号内的文字，可为纯文本，或用引号包围。文本必须有匹配的情况下被选中。

查找所有包含 "John" 的 div 元素 
$("div:contains('John')")

3.3.2:empty
返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择所有没有子元素的元素（包括文本节点）。
这个和 :parent选择器相反。
需要注意的一件重要的事情是:empty(和 :parent)的子元素包括文本节点。

查找所有不包含子元素或者文本的空元素
$("td:empty")

3.3.3:has(selector)

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择元素其中至少包含指定选择器匹配的一个种元素。
selector: 任何选择器。

        如果表达式 `$('div:has(p)')` 匹配一个 `<div>`，那么应有一个`<p>`存在于 `<div>` 后代元素中的任何地方，不是直接的子元素也可以。

给所有包含 p 元素的 div 元素添加一个 text 类 
("div:has(p)").addClass("test");

3.3.4:parent

返回值：[Array](http://www.shouce.ren/api/view/a/13081#articleHeader21)<Element(s)>
描述：选择所有含有子元素或者文本的父级元素。
这个正好和 :empty相反。

查找所有含有子元素或者文本的 td 元素 
$("td:parent")

3.4属性选择器

3.4.1获取所有含有value属性的input元素标签，并设置样式

//获取所有含有value属性的input元素标签，并设置样式
            $("input[value]").css("border","1px solid red");

3.4.2获取name属性值为phone的input元素标签，并设置样式

            //获取name属性值为phone的input元素标签，并设置样式
            $("input[name='phone']").css("border","1px solid red");

3.4.3获取name属性值不为phone的input元素标签，并设置样式

  //获取name属性值不为phone的input元素标签，并设置样式
            $("input[name!='phone']").css("border","1px solid red");

3.4.4获取name属性值是以a字符开头的所有input元素标签，并设置样式

   //获取name属性值是以a字符开头的所有input元素标签，并设置样式
            $("input[name^='a']").css("border","1px solid red");

3.4.5获取name属性值是以e字符结尾的所有input元素标签，并设置样式

      //获取name属性值是以e字符结尾的所有input元素标签，并设置样式
            $("input[name$='e']").css("border","1px solid red");

3.4.6获取name属性值中含有m字符的所有input元素标签，并设置样式

            //获取name属性值中含有m字符的所有input元素标签，并设置样式
            $("input[name*='m']").css("border","1px solid red");

3.5子元素选择器

3.5.1获取每组ul中的第一个li节点并添加样式

//获取每组ul中的第一个li节点并添加样式
 $("ul li:first-child").css("color","red");

3.5.2获取每组ul中的最后一个li节点并添加样式

  //获取每组ul中的最后一个li节点并添加样式
   $("ul li:last-child").css("color","red");

3.5.3获取每组ul中的第三个li节点并添加样式

 //获取每组ul中的第三个li节点并添加样式
 $("ul li:nth-child(3)").css("color","red");

3.6表单中选择器

3.6.1获取所有多选框中选择中的元素节点

//获取所有多选框中选择中的元素节点
第一种： var list = $("input[type='checkbox']:checked");
第二种：var list = $(":checkbox:checked");

3.6.2获取li元素节点（条件是里面的多选框必须选中），并设置样式

  //获取li元素节点（条件是里面的多选框必须选中），并设置样式
   $("li:has(input:checked)").css("color","red");

四、jQuery属性

4.1属性

4.1.1 attr()

返回值：String
描述：获取匹配的元素集合中的第一个元素的属性的值。

• attributeName
  类型: String
  要获取的属性名称

  方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的 .each()或者.map()方法循环。

  a.attr("href"); //获取
  a.attr("href","http://news.baidu.com"); //添加或更改
  

  4.1.2.removeAttr( attributeName )

  返回值：[jQuery](http://www.shouce.ren/api/view/a/13081#articleHeader38)
  描述：为匹配的元素集合中的每个元素中移除一个属性（attribute）。

• attributeName
  类型: String
  要移除的属性名,从1.7版本开始，它可以是一个空格分隔的属性列表。
  

  a.removeAttr("title"); //删除title属性
  

  4.1.3 .prop( propertyName )

  返回值：String
  描述：获取匹配的元素集中第一个元素的属性（property）值

• propertyName
  类型: String
  要得到的属性的名称
  

.prop()方法只获得第一个匹配元素的属性值 。如果元素上没有该属性，或者如果没有匹配的元素。那么该方法会返回undefined值。若要取得每个匹配元素的属性值（property），请使用循环结构，如jQuery .each()或.map()方法。

a.prop("href"); //获取

4.1.4.removeProp( propertyName )

返回值：[jQuery](http://www.shouce.ren/api/view/a/13081#articleHeader38)
描述：为集合中匹配的元素删除一个属性（property）。

• propertyName
  类型: String
  要移除属性的名称.
  

.removeProp()方法用来删除由.prop()方法设置的属性集。

  a.removeProp("title"); //删除title属性

4.1.5小结：prop和attr区别

（1）attr能添加属性，prop不能
（2）prop性能好，响应时间快，优先使用

4.2class类

4.2.1切换class类属性

 //切换class类属性
 $(this).toggleClass("active");

4.2.2删除class类属性

 //删除class类属性
  $(this).removeClass("active");

4.2.3添加class类属性

 //添加class类属性
 $(this).addClass("active");

4.3HTML代码/文本/值

4.3.1 .html()

返回值：String
描述：获取集合中第一个匹配元素的HTML内容

返回p元素的内容。//类似于js中的innerHTML
$('p').html();

为每个div设置一些内容。 
1.<!doctype html>
2.<html lang="en">
3.<head>
4.  <meta charset="utf-8">
5.  <title>html demo</title>
6.  <style>
7.  .red {
8.    color: red;
9.  }
10.  </style>
11.  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
12.</head>
13.<body>
14. 
15.<span>Hello</span>
16.<div></div>
17.<div></div>
18.<div></div>
19. 
20.<script>
21.$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
22.</script>
23. 
24.</body>
25.</html>

4.3.2 .text()

返回值：String
描述：得到匹配元素集合中每个元素的合并文本，包括他们的后代
和 .html() 方法不同， .text() 在XML 和 HTML 文档中都能使用。.text() 方法返回一个字符串，包含所有匹配元素的合并文本。

返回p元素的文本内容。     
jQuery 代码:     
1. $('p').text();

设置所有 p 元素的文本内容 
jQuery 代码: 
1.$("p").text("Hello world!");

4.3.3 .val()

返回值：String
描述：获取匹配的元素集合中第一个元素的当前值。
.val()方法主要用于获取表单元素的值，如input, select 和 textarea。当在一个空集合上调用，它返回undefined

// 在下拉列表中获取所选选项的值
2.$( "select#foo option:checked" ).val();
3. 
4.// 直接从下拉列表中选择值
5.$( "select#foo" ).val();
6. 
7.// 从复选框获取选中值
8.$( "input[type=checkbox][name=bar]:checked" ).val();
9. 
10.// 从一组单选按钮获取选中值
11.$( "input[type=radio][name=baz]:checked" ).val();

4.4jQuery属性操作—全选/全不选

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery属性操作--全选/全不选</h1>
    <ul class="uu">
        <li><input type="checkbox" name="likes[]" value="1"/> 苹果</li>
        <li><input type="checkbox" name="likes[]" value="2"/> 橘子</li>
        <li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li>
        <li><input type="checkbox" name="likes[]" value="4"/> 菠萝</li>
        <li><input type="checkbox" name="likes[]" value="5"/> 芒果</li>
    </ul>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取按钮并绑定点击事件
            $("button").click(function(){
                //判断按钮上的文本，指定对应的操作
                switch($(this).html()){
                    case "全选":
                        //获取所有多选框并设置选中
                        $("ul.uu input:checkbox").prop("checked",true);
                        break;
                    case "全不选":
                        $("ul.uu input:checkbox").prop("checked",false);
                        break;
                    case "反选":
                        $("ul.uu input:checkbox").each(function(){
                            $(this).prop("checked",!$(this).prop("checked"));
                        });
                        break;
                }
            });
        });

    </script>
</body>
</html>

4.5jQuery中的CSS样式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        *{padding:0px;margin:0px;}
        #outer{background-color:#ddd;width:400px;height:400px;margin:50px;padding:20px;position:relative;}
        #inner{background-color:#fc0;width:200px;height:200px;position:absolute;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery中的CSS样式操作</h1>
    <div id="outer">
        <div id="inner"></div>
    </div>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取标题并设置css样式
            //$("#hid").css("color","red"); //单个属性设置
            $("#hid").css({"color":"green","background-color":"#ddd"});
            console.log($("#hid").css("color")); //获取css属性

            //获取div层的位置
            var offset = $("#inner").offset();
            console.log(offset.left,offset.top);

            //获取偏移位置
            var position = $("#inner").position();
            console.log(position.left,position.top);

            //获取尺寸
            console.log($("#inner").width(),$("#inner").height());
            $("#inner").width(300)
        });

    </script>
</body>
</html>

4.6节点遍历操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--节点遍历操作</h1>
    <ul>
        <li>2</li>
        <li>1</li>
        <li>10</li>
        <li>18</li>
        <li>8</li>
    </ul>
    <button>乘以2</button>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           $("button").click(function(){
               //$("li").css("color","red");
               //获取li节点并遍历执行操作
               $("li").each(function(i){
                    //alert(i); //索引位置
                    $(this).html($(this).html()*2);
               });
           });

           /*
           //统一绑定点击事件
           $("li").click(function(){
               alert($(this).html());
           });
           */
        });
    </script>
</body>
</html>

五、jQuery实例—文档处理

5.1文档处理—内部插入

5.1.1append(content|fn)

描述：在每个匹配元素里面的末尾处插入参数内容。

• .append(content [, content ] )
  • content
    类型: String, Element, [jQuery](http://www.shouce.ren/api/view/a/13081#articleHeader38)
    DOM 元素，文本节点，元素和文本节点的数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
    
  • content
    类型: String, Element, Array, [jQuery](http://www.shouce.ren/api/view/a/13081#articleHeader38)
    一个或多个DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或jQuery对象插入到每个匹配元素的末尾。
    
• function(index, html) )
  • function(index, html)
    类型: Function()
    一个返回HTML字符串，DOM元素（或多个），文本节点（或多个），jQuery对象的函数，该字符串用来插入到匹配元素的末尾。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向元素集合中的当前元素。 ```javascript 在所有的段落内的尾部，追加一些 HTML。

1.<!DOCTYPE html> 2. 3.

2. 8. 9.

3. I would like to say:

   11.
4. 15. 16.

```javascript
在所有的段落内的尾部，追加一个元素。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.  p { background:yellow; }
6.</style>
7.  <script src="http://code.jquery.com/jquery-latest.js"></script>
8.</head>
9.<body>
10.  <p>I would like to say: </p>
11. 
12.<script>
13.  $("p").append(document.createTextNode("Hello"));
14.</script>
15. 
16.</body>
17.</html>

在所有的段落内的尾部，追加一个 jQuery 对象（类似于一个 DOM 元素数组）。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.  p { background:yellow; }
6.</style>
7.  <script src="http://code.jquery.com/jquery-latest.js"></script>
8.</head>
9.<body>
10.  <strong>Hello world!!!</strong><p>I would like to say: </p>
11.<script>
12.  $("p").append( $("strong") );
13.</script>
14. 
15.</body>
16.</html>

5.1.2appendTo(content)

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式 或创建作为标记上的标记，它都将被插入到目标容器的末尾。

把所有段落追加到ID值为foo的元素中。 

HTML 代码: 
1.<p>I would like to say: </p>
2.<div></div><div></div>


jQuery 代码: 
1.$("p").appendTo("div");


结果: 
1.<div><p>I would like to say: </p></div>
2.<div><p>I would like to say: </p></div>

实例 

新建段落追加div中并加上一个class 

HTML 代码: 
1.<div></div><div></div>


jQuery 代码: 
1. $("<p/>")
2.   .appendTo("div")
3.   .addClass("test")
4.   .end()
5.   .addClass("test2");


结果: 
1.<div><p class="test test2"></p></div>
2.<div><p class="test"></p></div>

实例 

将所有的 span 插入到 ID 为 "foo" 的元素内的末尾。 

1.<!doctype html>
2.<html lang="en">
3.<head>
4.  <meta charset="utf-8">
5.  <title>appendTo demo</title>
6.  <style>
7.  #foo {
8.    background: yellow;
9.  }
10.  </style>
11.  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
12.</head>
13.<body>
14. 
15.<span>I have nothing more to say... </span>
16. 
17.<div id="foo">FOO! </div>
18. 
19.<script>
20.$( "span" ).appendTo( "#foo" );
21.</script>
22. 
23.</body>
24.</html>

5.1.3prepend(content|fn)

将参数内容插入到每个匹配元素的前面（元素内部）。

描述：将参数内容插入到每个匹配元素的前面（元素内部）。

.prepend( content [, content ] )

content
类型: String, Element, [jQuery](http://www.shouce.ren/api/view/a/13081#articleHeader38)
DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

content
类型: String, Element, [jQuery](http://www.shouce.ren/api/view/a/13081#articleHeader38)
一个或多个DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

.prepend( function(index, html) )

function(index, html)
类型: Function()
一个返回HTML字符串，DOM元素（或多个），文本节点（或多个），jQuery对象的函数，该字符串用来插入到匹配元素的开始处。 接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向元素集合中的当前元素。

实例 

在所有段落前添加一些HTML。

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>there, friend!</p>
9. 
10.<p>amigo!</p>
11.<script>$("p").prepend("<b>Hello </b>");</script>
12. 
13.</body>
14.</html>

实例 

在所有段落前面添加一个DOM元素。

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>is what I'd say</p>
9.<p>is what I said</p>
10.<script>$("p").prepend(document.createTextNode("Hello "));</script>
11. 
12.</body>
13.</html>

实例 

在所有段落前面添加一个jQuery对象（类似于DOM元素数组）。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p> is what was said.</p><b>Hello</b>
9.<script>$("p").prepend( $("b") );</script>
10. 
11.</body>
12.</html>

5.1.4prependTo(content)

.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同。 对于 .prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数。而 .prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

把所有段落追加到ID值为foo的元素中。 

HTML 代码: 
1.<p>I would like to say: </p><div id="foo"></div>


jQuery 代码: 
1.$("p").prependTo("#foo");


结果: 
1.<div id="foo"><p>I would like to say: </p></div>

5.2文档处理—外部插入

5.2.1 after(content|fn)

描述： 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

.after( content [, content ] )

content
类型: htmlString or Element or Array or jQuery
HTML字符串，DOM 元素，文本节点，元素和文本节点的数组，或者jQuery对象，用来插入到集合中每个匹配元素的后面（手册网注：外部插入）。

content
类型: htmlString or Element or Array or jQuery
一个或多个附加的DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或jQuery对象，用来插入到集合中每个匹配元素的后面（手册网注：外部插入）。

.after( function )

function
类型: Function( Integer index ) => htmlString or Element or jQuery
一个返回HTML字符串，DOM元素（或多个），文本节点（或多个），或jQuery对象的函数，返回的内容用来插入到集合中每个匹配元素的后面（手册网注：外部插入）。 接收元素集合中该元素的索引位置作为一个参数（index 参数）。在函数中this指向元素集合中的当前元素。

.after( function-html )

function
类型: Function( Integer index, String html ) => htmlString or Element or jQuery
一个返回HTML字符串，DOM元素，jQuery对象的函数，返回的内容用来插入到集合中每个匹配元素的后面（手册网注：外部插入）。接收元素集合中该元素的索引位置（手册网注：index 参数）和元素的原来HTML值（手册网注：html 参数）作为参数。在函数中this指向元素集合中的当前元素。

实例 

在所有的段落后插入一些HTML。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>I would like to say: </p>
9.<script>$("p").after("<b>Hello</b>");</script>
10. 
11.</body>
12.</html>

实例 

在所有的段落后插入一个DOM元素。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>I would like to say: </p>
9.<script>$("p").after( document.createTextNode("Hello") );</script>
10. 
11.</body>
12.</html>

实例 

在所有段落后插入一个jQuery对象。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <b>Hello</b><p>I would like to say: </p>
9.<script>$("p").after( $("b") );</script>
10. 
11.</body>
12.</html>

5.2.2 before(content|fn)

描述：根据参数设定，在匹配元素的前面插入内容（译者注：外部插入）

• .before(content [, content ] )
  • content
    类型: htmlString 或 Element 或 Array 或 jQuery
    HTML字符串，DOM 元素，文本节点，元素和文本节点的数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面（手册网注：外部插入）。
    
  • content
    类型: htmlString 或 Element 或 Array 或 jQuery
    一个或多个附加的DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或jQuery对象，用来插入到集合中每个匹配元素的前面（手册网注：外部插入）。
    
• .before( function )
  • function
    类型: Function( Integer index ) => htmlString 或 Element 或 jQuery
    一个返回HTML字符串，DOM元素（或多个），文本节点（或多个），或jQuery对象的函数，返回的内容用来插入到集合中每个匹配元素的前面（手册网注：外部插入）。 接收元素集合中该元素的索引位置作为一个参数（index 参数）。在函数中this指向元素集合中的当前元素。
    
• .before( function-html )
  • function
    类型: Function( Integer index, String html ) => htmlString 或 Element 或 jQuery
    一个返回HTML字符串，DOM元素（或多个），文本节点（或多个），jQuery对象的函数，返回的内容用来插入到集合中每个匹配元素的前面（手册网注：外部插入）。接收元素集合中该元素的索引位置（手册网注：index 参数）和元素的原来HTML值（手册网注：html 参数）作为参数。在函数中this指向元素集合中的当前元素。 ```javascript 实例

在所有段落前插入一些HTML。

1.<!DOCTYPE html> 2. 3.

2. 6. 7.

3. is what I said…

   9.
4. 11. 12.

```javascript
实例 

在所有段落前插入一个DOM元素。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p> is what I said...</p>
9.<script>$("p").before( document.createTextNode("Hello") );</script>
10. 
11.</body>
12.</html>

实例 

在所有段落前插入一个jQuery对象（类似于一个DOM元素数组）。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p> is what I said...</p><b>Hello</b>
9.<script>$("p").before( $("b") );</script>
10. 
11.</body>
12.</html>

5.2.3 insertAfter(content)

.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于 .after(), 选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面。

实例 

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 

HTML 代码: 
1.<p>I would like to say: </p><div id="foo">Hello</div>


jQuery 代码: 
1.$("p").insertAfter("#foo");


结果: 
1.<div id="foo">Hello</div><p>I would like to say: </p>

5.2.4insertBefore(content)

The .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于.before()，选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面。

把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。 

HTML 代码: 
1.<div id="foo">Hello</div><p>I would like to say: </p>


jQuery 代码: 
1.$("p").insertBefore("#foo");


结果: 
1.<p>I would like to say: </p><div id="foo">Hello</div>

5.3文档处理—-包裹

5.3.1wrap(html|ele|fn)

描述： 在集合中匹配的每个元素周围包裹一个HTML结构。

.wrap( wrappingElement )

wrappingElement
类型: Selector 或 htmlString 或 Element 或 jQuery
一个选择器，元素，HTML字符串，或jQuery对象指定的html结构环绕包裹的匹配元素。当你传递一个包含多个元素一个jQuery集合，或选择器的匹配多个元素时，第一元素将被使用。

.wrap( function )

function
类型: Function( Integer index ) => String 或 jQuery
一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。接受的 index 参数表示匹配元素在集合中的索引位置。该函数内的 this 指向集合中的当前元素。

实例 

在所有段落外包一个div 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.  div { border: 2px solid blue; }
7.  p { background:yellow; margin:4px; }
8.  </style>
9.  <script src="http://code.jquery.com/jquery-latest.js"></script>
10.</head>
11.<body>
12.  <p>Hello</p>
13.  <p>cruel</p>
14.  <p>World</p>
15.<script>$("p").wrap("<div></div>");</script>
16. 
17.</body>
18.</html>

5.3.2unwrap()

描述：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

.unwrap()

这个方法不接受任何参数。

.unwrap( [selector ] )

selector
类型: String
一个选择器，用来检查匹配的父元素。如果一个元素的父不匹配该选择器，该元素将不会被解开。

示例 

在每个段落外层加上div或者删除div 

1.<!doctype html>
2.<html lang="en">
3.<head>
4.  <meta charset="utf-8">
5.  <title>unwrap demo</title>
6.  <style>
7.  div {
8.    border: 2px solid blue;
9.  }
10.  p {
11.    background: yellow;
12.    margin: 4px;
13.  }
14.  </style>
15.  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
16.</head>
17.<body>
18.  <button>wrap/unwrap</button>
19.<p>Hello</p>
20.<p>cruel</p>
21.<p>World</p>
22.<script>
23.var pTags = $( "p" );
24.$( "button" ).click(function() {
25.  if ( pTags.parent().is( "div" ) ) {
26.    pTags.unwrap();
27.  } else {
28.    pTags.wrap( "<div></div>" );
29.  }
30.});
31.</script>
32. 
33.</body>
34.</html>

5.3.3wrapAll(html|ele)

函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

实例 

在所有段落外包上新的div: 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.  div { border: 2px solid blue; }
7.  p { background:yellow; margin:4px; }
8.  </style>
9.  <script src="http://code.jquery.com/jquery-latest.js"></script>
10.</head>
11.<body>
12.  <p>Hello</p>
13.  <p>cruel</p>
14.  <p>World</p>
15.<script>$("p").wrapAll("<div></div>");</script>
16. 
17.</body>
18.</html>

实例 

为 span 标签包裹一个对象树。注意，任何 span 之间的元素都不会被包裹，例如示例中使用的 <strong> (红色文本)。即使是 span 之间的空格也不会被包裹。可以查看原始 HTML 的源代码。  

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.  div { border:2px blue solid; margin:2px; padding:2px; }
7.  p { background:yellow; margin:2px; padding:2px; }
8.  strong { color:red; }
9.  </style>
10.  <script src="http://code.jquery.com/jquery-latest.js"></script>
11.</head>
12.<body>
13.  <span>Span Text</span>
14.  <strong>What about me?</strong>
15.  <span>Another One</span>
16.<script>$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");</script>
17. 
18.</body>
19.</html>

实例 

用一个 div 将所有的段落包裹起来。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.  div { border: 2px solid blue; }
7.  p { background:yellow; margin:4px; }
8.  </style>
9.  <script src="http://code.jquery.com/jquery-latest.js"></script>
10.</head>
11.<body>
12.  <p>Hello</p>
13.  <p>cruel</p>
14.  <p>World</p>
15.<script>$("p").wrapAll(document.createElement("div"));</script>
16. 
17.</body>
18.</html>

实例 

使用一个嵌套深度为两层 div 的 jQuery 对象来包裹所有的段落。注意，这并不会移动用于包裹的对象，只是将克隆后的对象用于包裹。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.  div { border: 2px solid blue; margin:2px; padding:2px; }
7.  .doublediv { border-color:red; }
8.  p { background:yellow; margin:4px; font-size:14px; }
9.  </style>
10.  <script src="http://code.jquery.com/jquery-latest.js"></script>
11.</head>
12.<body>
13.  <p>Hello</p>
14.  <p>cruel</p>
15.  <p>World</p>
16.  <div class="doublediv"><div></div></div>
17.<script>$("p").wrapAll($(".doublediv"));</script>
18. 
19.</body>
20.</html>

5.3.4wrapInner(html|ele|fn)

描述：在匹配元素里的内容外包一层结构。

实例 

选中所有段落，然后在段落内容外加粗体： 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:#bbf; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>Hello</p>
9. 
10.  <p>cruel</p>
11.  <p>World</p>
12.<script>$("p").wrapInner("<b></b>");</script>
13. 
14.</body>
15.</html>

实例 

选择所有的段落，并用 b 标签包裹每个匹配元素的内容。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:#9f9; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>Hello</p>
9. 
10.  <p>cruel</p>
11.  <p>World</p>
12.<script>$("p").wrapInner(document.createElement("b"));</script>
13. 
14.</body>
15.</html>

实例 

选择所有的段落，并用 jQuery object 包裹每个匹配元素的内容。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.  p { background:#9f9; }
7.  .red { color:red; }
8.  </style>
9.  <script src="http://code.jquery.com/jquery-latest.js"></script>
10.</head>
11.<body>
12.  <p>Hello</p>
13.  <p>cruel</p>
14.  <p>World</p>
15.<script>$("p").wrapInner($("<span class='red'></span>"));</script>
16. 
17.</body>
18.</html>

5.4文档处理—-替换

5.4.1replaceWith(content|fn)

描述：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

.replaceWith( newContent )

newContent
类型: String, Element, jQuery
用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。

.replaceWith( function )

function
类型: Function()
一个函数，返回的内容会替换匹配的元素集合。

实例 

点击按钮，用包含同样文字的div替换按钮： 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.  button { display:block; margin:3px; color:red; width:200px; }
6.  div { color:red; border:2px solid blue; width:200px;
7.      margin:3px; text-align:center; }
8.  </style>
9.  <script src="http://code.jquery.com/jquery-latest.js"></script>
10.</head>
11.<body>
12. 
13.<button>First</button>
14.<button>Second</button>
15.<button>Third</button>
16. 
17.<script>
18.$("button").click(function () {
19.  $(this).replaceWith( "<div>" + $(this).text() + "</div>" );
20.});
21.</script>
22. 
23.</body>
24.</html>

实例 

用粗体字替换所有段落。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
5.</head>
6.<body>
7. 
8.<p>Hello</p>
9.<p>cruel</p>
10.<p>World</p>
11. 
12.<script>
13.$("p").replaceWith( "<b>Paragraph. </b>" );
14.</script>
15. 
16.</body>
17.</html>

5.4.2replaceAll(selector)

描述：用集合的匹配元素替换每个目标元素。

.replaceAll( target )

target
类型: Selector or jQuery or Array or Element
一个选择器字符串，jQuery对象，DOM元素，或者元素数组，包含哪个元素被替换。

.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 。

将所有段落换成粗体字 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
5.</head>
6.<body>
7.  <p>Hello</p>
8.  <p>cruel</p>
9.  <p>World</p>
10.<script>$("<b>Paragraph. </b>").replaceAll("p");</script>
11. 
12.</body>
13.</html>

5.5文档处理—-删除

5.5.1 empty() （清空）

描述：从DOM中移除集合中匹配元素的所有子节点。
V : 1.0.empty()

这个方法不接受任何参数。

    这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点

移除段落中的所有子节点包括文本 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.  p { background:yellow; }
6.</style>
7.  <script src="http://code.jquery.com/jquery-latest.js"></script>
8.</head>
9.<body>
10.  <p>
11.  Hello, <span>Person</span> <a href="javascript:;">and person</a>
12.</p>
13. 
14.<button>Call empty() on above paragraph</button>
15.<script>
16.  $("button").click(function () {
17.    $("p").empty();
18.  });
19.</script>
20. 
21.</body>
22.</html>

5.5.2remove([expr])

描述：将匹配元素集合从DOM中删除。（手册网注：同时移除元素上的事件及 jQuery 数据。）

.remove( [selector ] )

selector
类型: String
一个选择器表达式用来过滤将被移除的匹配元素集合。

    和 `.empty()`相似。`.remove()` 将元素移出DOM。 当我们想将元素自身移除时我们用 `.remove()`，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。要删除的元素不删除数据和事件的情况下，使用`.detach()`来代替。

实例 

将所有段落从DOM删除： 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; margin:6px 0; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p>Hello</p>
9.  how are
10.  <p>you?</p>
11.  <button>Call remove() on paragraphs</button>
12.<script>
13.$("button").click(function () {
14.  $("p").remove();
15.});
16.</script>
17. 
18.</body>
19.</html>

实例 

从 DOM 中移除所有含有 "Hello" 的段落。也可以使用 $("p").filter(":contains('Hello')").remove() 达到相同的目的。  

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { background:yellow; margin:6px 0; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.</head>
7.<body>
8.  <p class="hello">Hello</p>
9.  how are
10.  <p>you?</p>
11. 
12.  <button>Call remove(":contains('Hello')") on paragraphs</button>
13.<script>
14.$("button").click(function () {
15.  $("p").remove(":contains('Hello')");
16.});
17.</script>
18. 
19.</body>
20.</html>

5.5.3detach([expr])

描述：从DOM中去掉所有匹配的元素。
.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用

实例 

从DOM中把带有hello类的段落删除 

HTML 代码: 
1.<p class="hello">Hello</p> how are <p>you?</p>


jQuery 代码: 
1.$("p").detach(".hello");


结果: 
1.how are <p>you?</p>

5.6文档处理—-复制

描述：创建一个匹配的元素集合的深度拷贝副本。
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
注意:出于性能方面的考虑，表单元素动态的状态（例如，用户将数据输入到 textarea中的值，或者用户在select中已经选中某一项）不会被复制到克隆元素。当克隆input元素时候，该元素的动态状态（例如，用户数据输入到文本输入框(手册网注：<input type="text">) 和用户选中一个复选框）将被保留在克隆元素中。

复制所有 b 元素然后将他们插入到所有段落里面的前面。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
5.</head>
6.<body>
7. 
8.  <b>Hello</b><p>, how are you?</p>
9. 
10.<script>
11.  $("b").clone().prependTo("p");
12.</script>
13. 
14.</body>
15.</html>

六、jQuery特效

6.1显示和隐藏

6.1.1 show([s,[e],[fn]])

描述：显示隐藏的匹配元素。
字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。

实例 

缓慢地显示所有隐藏的段落，600毫秒内完成的动画。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.p { background:yellow; }
6.</style>
7.  <script src="http://code.jquery.com/jquery-latest.js"></script>
8.</head>
9.<body>
10.  <button>Show it</button>
11.      <p style="display: none">Hello  2</p>
12.<script>
13.$("button").click(function () {
14.  $("p").show("slow");
15.});
16.</script>
17. 
18.</body>
19.</html>

6.1.2hide([s,[e],[fn]])

描述： 隐藏匹配的元素。

实例 

点击链接隐藏所有段落。 

1.<!doctype html>
2.<html lang="en">
3.<head>
4.  <meta charset="utf-8">
5.  <title>hide demo</title>
6.  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
7.</head>
8.<body>
9.  <p>Hello</p>
10.  <a href="#">Click to hide me too</a>
11.  <p>Here is another paragraph</p>
12.<script>
13.    $("p").hide();
14.    $("a").click(function ( event ) {
15.      event.preventDefault();
16.      $(this).hide();
17.    });
18.</script>
19. 
20.</body>
21.</html>

6.2滑动

6.2.1slideDown([s],[e],[fn])

描述：用滑动动画显示一个匹配元素。

用 600 毫秒让所有的 div 下滑显示出来。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4. <style>
5.div { background:#de9a44; margin:3px; width:80px;
6.height:40px; display:none; float:left; }
7.</style>
8. <script src="http://code.jquery.com/jquery-latest.js"></script>
9.</head>
10.<body>
11. Click me!
12.<div></div>
13.<div></div>
14.<div></div>
15.<script>
16.$(document.body).click(function () {
17.if ($("div:first").is(":hidden")) {
18.$("div").slideDown("slow");
19.} else {
20.$("div").hide();
21.}
22.});
23. 
24.</script>
25. 
26.</body>
27.</html>

6.2.2slideUp([s,[e],[fn]])

描述：用滑动动画隐藏一个匹配元素。

实例 

让所有的 div 向上滑，用时 400 毫秒。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4. <style>
5. div { background:#3d9a44; margin:3px; width:80px;
6. height:40px; float:left; }
7. </style>
8. <script src="http://code.jquery.com/jquery-latest.js"></script>
9.</head>
10.<body>
11. Click me!
12. <div></div>
13. <div></div>
14. <div></div>
15. <div></div>
16. 
17. <div></div>
18.<script>
19. $(document.body).click(function () {
20. if ($("div:first").is(":hidden")) {
21. $("div").show("slow");
22. } else {
23. $("div").slideUp();
24. }
25. });
26. 
27. </script>
28. 
29.</body>
30.</html>
31.

6.2.3slideToggle([s],[e],[fn])

描述：用滑动动画显示或隐藏一个匹配元素。

实例 

让所有的段落滑上或滑下，用时 600 毫秒。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4. <style>
5. p { width:400px; }
6. </style>
7. <script src="http://code.jquery.com/jquery-latest.js"></script>
8.</head>
9.<body>
10. <button>Toggle</button>
11. 
12. <p>
13. This is the paragraph to end all paragraphs.  You
14. should feel <em>lucky</em> to have seen such a paragraph in
15. your life.  Congratulations!
16. </p>
17.<script>
18. $("button").click(function () {
19. $("p").slideToggle("slow");
20. });
21.</script>
22. 
23.</body>
24.</html>

6.2.4短信墙特效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        ul,li{margin:0px;padding:0px;}
        ul{width:400px;list-style:none;}
        ul li{line-height:80px;margin-bottom:2px;background-color:#ddd;}
        #did{width:400px;height:326px;border:1px solid #fc0;overflow:hidden;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery效果展示--短信墙特效</h1>
    <div id="did">
        <ul class="uu">
            <li>苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
            <li>香蕉</li>
            <li>荔枝</li>
            <li>芒果</li>
        </ul>
    </div>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //定时每隔3秒后执行一次
            setInterval(function(){
                //获取ul中的最后一个li节点设置隐藏后添加到ul里面的最前面，并设置滑动显示
                //$("ul.uu li:last").hide().prependTo("ul.uu").slideDown("slow");

                //向上滚动展示
                $("ul.uu li:first").slideUp("slow",function(){
                    $(this).appendTo("ul.uu").show();
                });

            },3000);
        });
    </script>
</body>
</html>

6.3淡入淡出

6.3.1fadeIn([s],[e],[fn])

描述：通过淡入的方式显示匹配元素。

实例 

淡出所有段落，在600毫秒内完成这些动画。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.span { color:red; cursor:pointer; }
6.div { margin:3px; width:80px; display:none;
7.  height:80px; float:left; }
8.  div#one { background:#f00; }
9.  div#two { background:#0f0; }
10.  div#three { background:#00f; }
11.</style>
12.  <script src="http://code.jquery.com/jquery-latest.js"></script>
13.</head>
14.<body>
15.  <span>Click here...</span>
16. 
17.    <div id="one"></div>
18.    <div id="two"></div>
19.    <div id="three"></div>
20.<script>
21.$(document.body).click(function () {
22.  $("div:hidden:first").fadeIn("slow");
23.});
24.    </script>
25. 
26.</body>
27.</html>

6.3.2fadeOut([s],[e],[fn])

描述：通过淡出的方式隐藏匹配元素。

实例 

让所有段落渐渐消失，用时 600 毫秒。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.  p { font-size:150%; cursor:pointer; }
6.  </style>
7.  <script src="http://code.jquery.com/jquery-latest.js"></script>
8.</head>
9.<body>
10.  <p>
11.  If you click on this paragraph
12.  you'll see it just fade away.
13.  </p>
14.<script>
15.  $("p").click(function () {
16.  $("p").fadeOut("slow");
17.  });
18.  </script>
19. 
20.</body>
21.</html>

6.3.3fadeTo([[s],o,[e],[fn]])

描述：调整匹配元素的透明度。

实例 

把第一个段落的透明度渐变成 0.33 (33%，大约三分之一透明度), 用时 600 毫秒。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
5.</head>
6.<body>
7.  <p>
8.Click this paragraph to see it fade.
9.</p>
10. 
11.<p>
12.Compare to this one that won't fade.
13.</p>
14.<script>
15.$("p:first").click(function () {
16.$(this).fadeTo("slow", 0.33);
17.});
18.</script>
19. 
20.</body>
21.</html>

6.3.4fadeToggle([s,[e],[fn]])

描述：通过匹配的元素的不透明度动画，来显示或隐藏它们。

示例 

第一段落渐隐或渐显，用时 600 毫秒，并且是线性缓冲效果。而最后一个段落渐隐渐显用时 200 毫秒, 并且在每次动画完成后插入一个 "finished"。  

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
5.</head>
6.<body>
7. 
8.<button>fadeToggle p1</button>
9.<button>fadeToggle p2</button>
10.<p>This paragraph has a slow, linear fade.</p>
11. 
12.<p>This paragraph has a fast animation.</p>
13.<div id="log"></div>
14. 
15.<script>
16.$("button:first").click(function() {
17.  $("p:first").fadeToggle("slow", "linear");
18.});
19.$("button:last").click(function () {
20.  $("p:last").fadeToggle("fast", function () {
21.    $("#log").append("<div>finished</div>");
22.  });
23.});
24.</script>
25. 
26.</body>
27.</html>

6.3.5jQuery效果展示—树形菜单

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        ul.uu{display:none;}
        h4{line-height:40px;}
        h4:hover{background-color:#ddd;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery效果展示--树形菜单</h1>
    <h4>水果系列</h4>
    <ul class="uu">
        <li>苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    <h4>水果系列</h4>
    <ul class="uu">
        <li>苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    <h4>水果系列</h4>
    <ul class="uu">
        <li>苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    <br/><br/>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取上面所有的h4标题并绑定点击事件
            $("h4").click(function(){
                //获取当前h4紧邻的兄弟ul节点，并滑动展开显示
                $(this).next("ul.uu").slideToggle("slow")
            });
        });

    </script>
</body>
</html>

6.5.6jQuery效果展示—选项卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        ul,li,div{margin:0px;padding:0px;}
        #did .header ul{list-style:none;}
        #did .header ul li{line-height:50px;width:120px;float:left;margin-right:4px;background-color:#ddd;}
        #did .header ul li:hover{background-color:#fc0;}
        #did .body{clear:both;width:500px;height:400px;border:1px solid #ddd;}
        #did .body .cc{display:none;height:400px;}
        #did .header ul li.b1,#did .body div.d1{background-color:red;}
        #did .header ul li.b2,#did .body div.d2{background-color:green;}
        #did .header ul li.b3,#did .body div.d3{background-color:blue;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery效果展示--选项卡</h1>
    <div id="did">
        <div class="header">
            <ul>
                <li class="b1">aaa</li>
                <li class="b2">bbb</li>
                <li class="b3">ccc</li>
                <li>ddddd</li>
            </ul>
        </div>
        <div class="body">
            <div class="cc d1">AAA</div>
            <div class="cc d2">BBB</div>
            <div class="cc d3">CCC</div>
            <div class="cc">DDDD</div>
        </div>
    </div>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           //获取上面header头中ul里面的所有li节点，并绑定鼠标移入事件
           $("#did .header ul li").mouseover(function(){
               //获取事件源对象li的索引位置
               var m = $(this).index();
               //隐藏所有body层
               $("#did .body div").hide();
               //显示索引位置m对应的div层
               $("#did .body div").eq(m).fadeIn("slow");

           });
        });

    </script>
</body>
</html>

6.5.7jQuery效果展示—导航栏效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        div,ul,li,a{margin:0px;padding:0px;}
        ul{list-style:none; position:absolute;}
        a{text-decoration:none;display:block;width:100px;line-height:40px;}
        a:hover{background-color:#fc0;}
        #menu{width:100%;height:40px;line-height:40px;}
        #menu ul li{width:100px;float:left;
                    line-height:40px;
                    background-color:#ddd;
                    text-align:center;
                    border-right:2px solid #fff;}
        #menu ul li ul.item li{border-top:2px solid #fff;}
        #menu ul li ul.item{display:none;position:relative;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery效果展示--导航栏效果</h1>
    <div id="menu">
        <ul>
            <li><a href="#">商品展示</a>
                <ul class="item">
                    <li><a href="#">热卖商品</a></li>
                    <li><a href="#">最新商品</a></li>
                    <li><a href="#">特价商品</a></li>
                    <li><a href="#">推荐商品</a></li>
                </ul>
            </li>
            <li><a href="#">站内新闻</a>
                <ul class="item">
                    <li><a href="#">国内新闻</a></li>
                    <li><a href="#">体育信息</a></li>
                    <li><a href="#">热点新闻</a></li>
                </ul>
            </li>
            <li><a href="#">网站公告</a>
                <ul class="item">
                    <li><a href="#">国内新闻</a></li>
                    <li><a href="#">体育信息</a></li>
                    <li><a href="#">热点新闻</a></li>
                    <li><a href="#">体育信息</a></li>
                    <li><a href="#">热点新闻</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a>
                <ul class="item">
                    <li><a href="#">国内新闻</a></li>
                    <li><a href="#">体育信息</a></li>
                    <li><a href="#">热点新闻</a></li>
                </ul>
            </li>
            <li><a href="#">在线帮助</a></li>
        </ul>
    </div>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取所有菜单中li选项，并绑定鼠标移入和移出事件
            $("#menu ul li").mouseover(function(){
                //移入事件处理
                //$(this).find("ul.item").show();
                $("ul.item:animated").stop().hide();
                $(this).find("ul.item").slideDown("slow");
            }).mouseout(function(){
                //移出事件处理
                $(this).find("ul.item").hide();
            });
        });

    </script>
</body>
</html>

七、jQuery事件

7.1页面载入

ready(fn)

描述：当DOM准备就绪时，指定一个函数来执行。

示例 

显示当DOM加载的信息。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>p { color:red; }</style>
5.  <script src="http://code.jquery.com/jquery-latest.js"></script>
6.  <script>
7.  $(document).ready(function () {
8.  $("p").text("The DOM is now loaded and can be manipulated.");
9.});
10.  </script>
11. 
12.</head>
13.<body>
14.  <p>Not loaded yet.</p>
15. 
16.</body>
17.</html>

7.2事件处理

7.2.1on(eve,[sel],[data],fn）

描述：在选定的元素上绑定一个或多个事件处理函数。

实例 

当点击段落时，显示该段落中的文本： 

1.$("p").on("click", function(){
2.alert( $(this).text() );
3.});

7.2.2off(eve,[sel],[fn])

描述：移除一个事件处理函数。

移除所有段落上的事件： 

1.$("p").off()



实例 

R移除所有段落上的代理事件： 

1.$("p").off( "click", "**" )



实例 

通过传入的第三个参数，仅移除先前绑定的事件处理函数： 

1.var foo = function () {
2.  // code to handle some kind of event
3.};
4. 
5.// ... now foo will be called when paragraphs are clicked ...
6.$("body").on("click", "p", foo);
7. 
8.// ... foo will no longer be called.
9.$("body").off("click", "p", foo); 

1.

7.2.3one(type,[data],fn)

描述：为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。

实例 

在每个段落上第一次点击时，显示该段落的内容： 

1.$("p").one("click", function(){
2.alert( $(this).text() );
3.});

7.2.4trigger(type,[data])

描述： 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

实例 

点击 button #2 时，同时触发 button #1 的点击事件。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5. 
6.button { margin:10px; }
7.div { color:blue; font-weight:bold; }
8.span { color:red; }
9.</style>
10.  <script src="http://code.jquery.com/jquery-latest.js"></script>
11.</head>
12.<body>
13.  <button>Button #1</button>
14.<button>Button #2</button>
15.<div><span>0</span> button #1 clicks.</div>
16. 
17.<div><span>0</span> button #2 clicks.</div>
18.<script>
19.$("button:first").click(function () {
20.update($("span:first"));
21.});
22.$("button:last").click(function () {
23.$("button:first").trigger('click');
24. 
25.update($("span:last"));
26.});
27. 
28.function update(j) {
29.var n = parseInt(j.text(), 10);
30.j.text(n + 1);
31.}
32.</script>
33. 
34.</body>
35.</html>

7.2.5triggerHandler(type, [data])

描述：为一个事件执行附加到元素的所有处理程序。

示例 

如果您使用 .triggerHandler() 触发 focus 事件，那么它只会触发绑定了该事件的处理函数，
而浏览器的默认 focus 动作是不会被触发的。 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <script src="http://code.jquery.com/jquery-latest.js"></script>
5.</head>
6.<body>
7.  <button id="old">.trigger("focus")</button>
8.<button id="new">.triggerHandler("focus")</button><br/><br/>
9. 
10.<input type="text" value="To Be Focused"/>
11.<script>
12. 
13.$("#old").click(function(){
14.$("input").trigger("focus");
15.});
16.$("#new").click(function(){
17.$("input").triggerHandler("focus");
18.});
19.$("input").focus(function(){
20.$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
21.});
22. 
23.</script>
24. 
25.</body>
26.</html>

7.3事件切换

hover([over,]out)

描述：将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

实例 

当鼠标在列表中来回滑动的时候添加特殊的样式， try: 

1.<!DOCTYPE html>
2.<html>
3.<head>
4.  <style>
5.  ul { margin-left:20px; color:blue; }
6.  li { cursor:default; }
7.  span { color:red; }
8.</style>
9.  <script src="http://code.jquery.com/jquery-latest.js"></script>
10.</head>
11.<body>
12.  <ul>
13.    <li>Milk</li>
14.    <li>Bread</li>
15.    <li class='fade'>Chips</li>
16. 
17.    <li class='fade'>Socks</li>
18.  </ul>
19.<script>
20.$("li").hover(
21.  function () {
22.    $(this).append($("<span> ***</span>"));
23.  },
24.  function () {
25.    $(this).find("span:last").remove();
26.  }
27.);
28. 
29.//li with fade class
30.$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
31. 
32.</script>
33. 
34.</body>
35.</html>