一个JavaScript库

功能

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities

    CDN

    Staticfile CDN

    1. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    百度 CDN

    1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    又拍云 CDN

    1. <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

    语法

    JQuery是通过选取HTML元素，并对选取的元素执行某些操作。 JQuery使用的语法是XPath与CSS选择器语法的组合。

基础语法：$(selector).action()

  • 美元符号定义JQuery
  • 选择符(selector)”查询”和”查找”HTML元素

  • JQuery的action()执行对元素的操作

    实例

  • $(this).hide() - 隐藏当前元素

  • $("p").hide()- 隐藏所有

    元素

  • $("p.test").hide() - 隐藏所有 class=”test” 的

    元素

  • $("#test").hide() - 隐藏 id=”test” 的元素

文档就绪事件

  1. $(document).ready(function(){
  3.    // 开始写 jQuery 代码...
  5. });
  6. 或者
  7. $(function(){
  9.    // 开始写 jQuery 代码...
  11. });

这是为了防止在完全加载（就绪）之前运行JQuery代码，就是在DOM加载完成之后才可以对DOM进行操作。

$(document).ready(function(){})用于 DOM 结构加载完毕后就可以执行方法内代码块，由此得出，onload 是在 ready 后执行。

window.onload = function(){} 用于整个网页（包括图片等）加载完毕后执行方法内代码块

jQuery选择器

基于CSS3选择器，除此之外，还有一些自定义的选择器。 jQuery中所有选择器都以美元符号开头：$( )

元素选择器

基于元素名选取

在页面中选取所有

元素
$("p")
隐藏所有

元素

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("p").hide();
  4.   });
  5. });

#id 选择器

通过HTML元素的id属性选取指定的元素

选取id为test的元素
$("#test")
隐藏id=”test”属性的元素

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("#test").hide();
  4.   });
  5. });

.class 选择器

通过指定的class查找元素

$(".test")
隐藏class=”test”属性的元素

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $(".test").hide();
  4.   });
  5. });

实例

  1. $("#id", ".class")  复合选择器
  2. $(div p span)       层级选择器 //div下的p元素中的span元素
  3. $(div>p)            父子选择器 //div下的所有p元素
  4. $(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
  5. $(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
  6. $(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
  7. $("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
  8. $("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
  9. $("[href]")         选取带有href属性的元素
  10. $("a[href='www.baidu.com']")  属性选择器
  11. $("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素
  12. $(":emtyp")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
  13. $(":hidden")       //所有隐藏元素 visible 
  14. $("input:enabled") //选取所有启用的表单元素
  15. $(":disabled")     //所有不可用的元素
  16. $("input:checked") //获取所有选中的复选框单选按钮等
  17. $("select option:selected") //获取选中的选项元素
  18. $("a[target='_blank']")   选取所有 target 属性值等于 "_blank" 的 <a> 元素
  19. $("a[target!='_blank']")    选取所有 target 属性值不等于 "_blank" 的 <a> 元素

关于：和[]

：可以理解为种类
[]可以理解为属性

jQuery事件

页面对不同访问者的响应叫做事件。 事件处理程序指的是当HTML中发生某些事件时所调用的方法。

  • 在元素上移动鼠标
  • 选取单选按钮
  • 点击元素

触发
常见DOM事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
Click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

事件方法语法

  1. $("p").click(function(){
  2.     // 动作触发后执行的代码!!
  3. });

click()

当按钮点击事件被触发时会调用一个函数。

点击

元素，之后隐藏

  1. $(document).ready(function(){
  2.   $("p").click(function(){
  3.     $(this).hide();
  4.   });
  5. });

dblclick()

双击元素，发生dblclick事件

双击

元素，之后隐藏

  1. $("p").dblclick(function(){
  2.   $(this).hide();
  3. });

mouseenter()

当鼠标穿过元素时，会发生mouseenter事件。

实例

  1. $("#p1").mouseenter(function(){
  2.     alert('您的鼠标移到了 id="p1" 的元素上!');
  3. });

mouseleave()

当鼠标离开元素时，会发生mouseleave事件。

实例

  1. $("#p1").mouseleave(function(){
  2.     alert("再见，您的鼠标离开了该段落。");
  3. });

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

实例

  1. $("#p1").mousedown(function(){
  2.     alert("鼠标在该段落上按下！");
  3. });

mouseup()

当在元素上松开鼠标按钮时，会发生mouseup事件。

实例

  1. $("#p1").mouseup(function(){
  2.     alert("鼠标在段落上松开。");
  3. });

hover()

hover()方法用于模拟光标悬停事件。

实例

  1. $("#p1").hover(
  2.     function(){
  3.         alert("你进入了 p1!");
  4.     },
  5.     function(){
  6.         alert("拜拜! 现在你离开了 p1!");
  7.     }
  8. );

focus()

当元素获得焦点时，发生focus事件 当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点

blur()

当元素失去焦点时，发生blur事件。

实例

  1. $(document).ready(function () {
  2.         $("input").focus(function () {
  3.           $(this).css("background-color", "#cccccc");
  4.         });
  5.         $("input").blur(function () {
  6.           $(this).css("background-color", "#ffffff");
  7.         });
  8.       });

jQuery效果

隐藏，显示，切换，滑动，淡入淡出，以及动画。

隐藏和显示

hide（）和show（）

使用以上方法隐藏和显示HTML元素 语法：

  • $(selector).hide(speed,callback);
  • $(selector).show(speed,callback);

speed参数规定隐藏和显示的速度，可以取”slow”,”fast”或者毫秒 callback参数是隐藏或显示完成后所执行的函数名称

  1. <script>
  2. $(document).ready(function(){
  3.   $("#hide").click(function(){
  4.     $("p").hide();
  5.   });
  6.   $("#show").click(function(){
  7.     $("p").show();
  8.   });
  9. });
  10. </script>
  11. <body>
  12. <p>如果你点击“隐藏” 按钮，我将会消失。</p>
  13. <button id="hide">隐藏</button>
  14. <button id="show">显示</button>
  15. </body>
  1. <style>
  2. div{
  3. width: 130px;
  4. height: 50px;
  5. padding: 15px;
  6. margin: 15px;
  7. background-color: green;
  8. }
  9. </style>
  11. <script>
  12. $(document).ready(function(){
  13.   $(".hidebtn").click(function(){
  14.     $("div").hide(1000,"linear",function(){
  15.       alert("Hide() 方法已完成!");
  16.     });
  17.   });
  18. });
  19. </script>
  21. <body>
  22. <div>隐藏及设置回调函数</div>
  23. <button class="hidebtn">隐藏</button>
  24. </body>

速度后面的字符串表示的是过渡使用哪种缓动函数，”linear”和”swing”其他的需要使用插件。

toggle（）

可以通过这个方法来切换hide（）和show（）方法 语法

  • $(selector).toggle(speed,callback);
  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("p").toggle();
  5.   });
  6. });
  7. </script>
  9. <body>
  10. <button>隐藏/显示</button>
  11. <p>这是一个文本段落。</p>
  12. <p>这是另外一个文本段落。</p>
  13. </body>

淡入淡出

实现元素的淡入淡出效果

fading方法

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

fadeIn()

用于淡入已隐藏的元素 语法：

  • $(selector).fadeIn(speed,callback);

实例

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("#div1").fadeIn();
  4.     $("#div2").fadeIn("slow");
  5.     $("#div3").fadeIn(3000);
  6.   });
  7. });
  9. <body>
  10. <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
  11. <button>点击淡入 div 元素。</button>
  12. <br><br>
  13. <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
  14. <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
  15. <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
  16. </body>

fadeOut()

用于淡出可见元素 语法：

  • $(selector).fadeOut(speed,callback);

实例

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("#div1").fadeOut();
  4.     $("#div2").fadeOut("slow");
  5.     $("#div3").fadeOut(3000);
  6.   });
  7. });
  9. <body>
  10. <p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
  11. <button>点击淡出 div 元素。</button>
  12. <br><br>
  13. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
  14. <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
  15. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  17. </body>

fadeToggle()

可以在fadeIn() 与 fadeOut() 方法之间进行切换。 语法：

  • $(selector).fadeToggle(speed,callback);

实例

  1. <script>
  2. $(document).ready(function(){
  3.     $("button").click(function(){
  4.         $("#div1").fadeToggle();
  5.         $("#div2").fadeToggle("slow");
  6.         $("#div3").fadeToggle(3000);
  7.     });
  8. });
  9. </script>
  11. <body>
  13. <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
  14. <button>点击淡入/淡出</button>
  15. <br><br>
  16. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
  17. <br>
  18. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
  19. <br>
  20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  22. </body>

fadeTo()

这个方法允许渐变为给定的不透明度（值介于0和1之间） 语法：

  • $(selector).fadeTo(speed,opacity,callback);

speed参数必须规定效果的时长。
opacity参数也是必须的，用于将淡入淡出的效果设置为给定的不透明度（介于0与1之间）

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("#div1").fadeTo("slow",0.15);
  5.     $("#div2").fadeTo("slow",0.4);
  6.     $("#div3").fadeTo("slow",0.7);
  7.   });
  8. });
  9. </script>
  11. <body>
  12. <p>演示 fadeTo() 使用不同参数</p>
  13. <button>点我让颜色变淡</button>
  14. <br><br>
  15. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
  16. <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
  17. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  19. </body>

滑动

可以使元素上下滑动

slideDown()

用于向下滑动元素 语法：

  • $(selector).slideDown(speed,callback);

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("#flip").click(function(){
  10.     $("#panel").slideDown("slow");
  11.   });
  12. });
  13. </script>
  15. <style type="text/css"> 
  16. #panel,#flip
  17. {
  18.     padding:5px;
  19.     text-align:center;
  20.     background-color:#e5eecc;
  21.     border:solid 1px #c3c3c3;
  22. }
  23. #panel
  24. {
  25.     padding:50px;
  26.     display:none;
  27. }
  28. </style>
  29. </head>
  30. <body>
  32. <div id="flip">点我滑下面板</div>
  33. <div id="panel">Hello world!</div>
  35. </body>
  36. </html>

slideUp()

用于向上滑动元素 语法：

  • $(selector).slideUp(speed,callback);

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("#flip").click(function(){
  10.     $("#panel").slideUp("slow");
  11.   });
  12. });
  13. </script>
  15. <style type="text/css"> 
  16. #panel,#flip
  17. {
  18.     padding:5px;
  19.     text-align:center;
  20.     background-color:#e5eecc;
  21.     border:solid 1px #c3c3c3;
  22. }
  23. #panel
  24. {
  25.     padding:50px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  31. <div id="flip">点我拉起面板</div>
  32. <div id="panel">Hello world!</div>
  34. </body>
  35. </html>

slideToggle()

这个方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 语法：

  • $(selector).slideToggle(speed,callback);

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("#flip").click(function(){
  10.     $("#panel").slideToggle("slow");
  11.   });
  12. });
  13. </script>
  15. <style type="text/css"> 
  16. #panel,#flip
  17. {
  18.     padding:5px;
  19.     text-align:center;
  20.     background-color:#e5eecc;
  21.     border:solid 1px #c3c3c3;
  22. }
  23. #panel
  24. {
  25.     padding:50px;
  26.     display:none;
  27. }
  28. </style>
  29. </head>
  30. <body>
  32. <div id="flip">点我，显示或隐藏面板。</div>
  33. <div id="panel">Hello world!</div>
  35. </body>
  36. </html>

动画

允许自己创建自定义动画

animate()

创建自定义动画 语法：

  • $(selector).animate({params},speed,callback);

params参数必须给定，定义形成动画的CSS属性。
实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("div").animate({left:'250px'});
  11.   });
  12. });
  13. </script> 
  14. </head>
  16. <body>
  17. <button>开始动画</button>
  18. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  19. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  20. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  21. </div>
  23. </body>
  24. </html>

操作多个属性

生成动画时，可以同时使用多个属性。

实施

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("div").animate({
  11.       left:'250px',
  12.       opacity:'0.5',
  13.       height:'150px',
  14.       width:'150px'
  15.     });
  16.   });
  17. });
  18. </script> 
  19. </head>
  21. <body>
  22. <button>开始动画</button>
  23. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  24. 如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  25. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  26. </div>
  28. </body>
  29. </html>

使用相对值

也可以使用相对值（就是该值相当于元素的当前值）。需要在值的签名加上+=或-=

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("div").animate({
  11.       left:'250px',
  12.       height:'+=150px',
  13.       width:'+=150px'
  14.     });
  15.   });
  16. });
  17. </script> 
  18. </head>
  20. <body>
  21. <button>开始动画</button>
  22. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  23. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  24. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  25. </div>
  27. </body>
  28. </html>

使用预定义的值

甚至可以把属性的动画值设置为”show”，”hide”或”toggle”

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("div").animate({
  11.       height:'toggle'
  12.     });
  13.   });
  14. });
  15. </script> 
  16. </head>
  18. <body>
  19. <button>开始动画</button>
  20. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  21. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  22. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  23. </div>
  25. </body>
  26. </html>

使用队列功能

jQuery提供针对动画的队列功能 如果编写多个animate（）调用，jQuery会创建包含这些方法调用的”内部”队列。然后逐一运行这些调用。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     var div=$("div");
  11.     div.animate({height:'300px',opacity:'0.4'},"slow");
  12.     div.animate({width:'300px',opacity:'0.8'},"slow");
  13.     div.animate({height:'100px',opacity:'0.4'},"slow");
  14.     div.animate({width:'100px',opacity:'0.8'},"slow");
  15.   });
  16. });
  17. </script> 
  18. </head>
  20. <body>
  21. <button>开始动画</button>
  22. <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  23. 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  24. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  25. </div>
  27. </body>
  28. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           var div = $("div");
  10.           div.animate({ left: "300px" }, "slow");
  11.           div.animate({ left: "+=30px" }, "slow");
  12.           div.animate({ left: "+=30px" }, "fast");
  13.           div.animate({ left: "+=30px" }, "fast");
  14.           div.animate({ left: "+=30px" }, "slow");
  15.           div.animate({ left: "+=30px" }, "fast");
  16.           div.animate({ left: "+=30px" }, "fast");
  17.           div.animate({ left: "+=30px" }, "slow");
  18.           div.animate({ height: "300px", opacity: "0.4" }, "slow");
  19.           div.animate({ width: "300px", opacity: "0.8" }, "slow");
  20.           div.animate({ height: "100px", opacity: "0.4" }, "slow");
  21.           div.animate({ width: "100px", opacity: "0.8" }, "slow");
  22.           div.animate({ fontSize: "5em" }, "slow");
  23.         });
  24.       });
  25.     </script>
  26.   </head>
  28.   <body>
  29.     <button>开始动画</button>
  30.     <p>
  31.       默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  32.       如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或
  33.       absolute!
  34.     </p>
  35.     <div
  36.       style="
  37.         background: #98bf21;
  38.         height: 100px;
  39.         width: 200px;
  40.         position: absolute;
  41.       "
  42.     >
  43.       HELLO
  44.     </div>
  45.   </body>
  46. </html>

停止动画

用于在动画或效果完成前对它们进行停止。

stop()

适用于所有jQuery效果函数，包括滑动，淡入淡出和自定义动画。 语法：

  • $(selector).stop(stopAll,goToEnd);

stopAll参数规定是否应该清除动画队列。默认为false，就是仅停止活动的动画，允许任何排入队列的动画向后执行。
goToEnd参数规定是否立即完成当前动画。默认为false，所以被选元素上的当前动画会被默认清除。
实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script> 
  8. $(document).ready(function(){
  9.   $("#flip").click(function(){
  10.     $("#panel").slideDown(1000);
  11.   });
  12.   $("#stop").click(function(){
  13.     $("#panel").stop();
  14.   });
  15. });
  16. </script>
  18. <style type="text/css"> 
  19. #panel,#flip
  20. {
  21.     padding:5px;
  22.     text-align:center;
  23.     background-color:#e5eecc;
  24.     border:solid 1px #c3c3c3;
  25. }
  26. #panel
  27. {
  28.     padding:50px;
  29.     display:none;
  30. }
  31. </style>
  32. </head>
  33. <body>
  35. <button id="stop">停止滑动</button>
  36. <div id="flip">点我向下滑动面板</div>
  37. <div id="panel">Hello world!</div>
  39. </body>
  40. </html>

Callback 回调函数

Callback函数在当前动画100%完成之后执行。

实例
有回调函数，隐藏效果完完全全实现后回调函数

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("p").hide("slow",function(){
  11.       alert("段落现在被隐藏了");
  12.     });
  13.   });
  14. });
  15. </script>
  16. </head>
  17. <body>
  18. <button>隐藏</button>
  19. <p>我们段落内容，点击“隐藏”按钮我就会消失</p>
  20. </body>
  21. </html>

如果没有回调函数，警告框会在隐藏效果完成前弹出

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("p").hide(1000);
  11.     alert("现在段落被隐藏了");
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <button>隐藏</button>
  18. <p>这是一个段落，内容很少</p>
  19. </body>
  20. </html>

链（Chaining）

通过jQuery可以将动作或方法链接在一起。 Chainiing允许我们在一条语句中允许多个jQuery方法 这样浏览器就不需要多次查找相同的元素。

实例

这是把css(),slideUp()和slideUp链接在一起

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
  10.         });
  11.       });
  12.     </script>
  13.   </head>
  14.   <body>
  15.     <p id="p1">菜鸟教程!!</p>
  16.     <button>点我</button>
  17.   </body>
  18. </html>

JQuery HTML

JQuery可以操作HTML和属性

DOM（文档对象模型）操作

捕获

获得内容

  • text（）- 设置或返回所选元素的文本内容。
  • html（）- 设置或返回所选元素的内容（包括HTML标签）。
  • val（）- 设置或返回表单字段的值。

例一

通过text() 和 html() 方法获得内容

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9.   $("#btn1").click(function(){
  10.     alert("Text: " + $("#test").text());
  11.   });
  12.   $("#btn2").click(function(){
  13.     alert("HTML: " + $("#test").html());
  14.   });
  15. });
  16. </script>
  17. </head>
  19. <body>
  20. <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
  21. <button id="btn1">显示文本</button>
  22. <button id="btn2">显示 HTML</button>
  23. </body>
  24. </html>

例二

通过val() 方法获得输入字段的值

  1. <!DOCTYPE html>
  2. <html>
  3.   <meta charset="utf-8" />
  4.   <head>
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           alert("值为: " + $("#test").val());
  10.         });
  11.       });
  12.     </script>
  13.   </head>
  15.   <body>
  16.     <p>名称: <input type="text" id="test" value="菜鸟教程" /></p>
  17.     <button>显示值</button>
  18.   </body>
  19. </html>

获取属性

  • attr（）

    获取属性值

实例

获取链接中的href属性

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           alert($("#runoob").attr("href"));
  10.         });
  11.       });
  12.     </script>
  13.   </head>
  15.   <body>
  16.     <p><a href="//www.4399.com" id="runoob">4399</a></p>
  17.     <button>显示 href 属性的值</button>
  18.   </body>
  19. </html>

设置

设置内容

  • text（）- 设置或返回所选元素的文本内容。
  • html（）- 设置或返回所选元素的内容（包括HTML标签）。
  • val（）- 设置或返回表单字段的值。

实例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("#btn1").click(function () {
  9.           $("#test1").text("Hello world!");
  10.         });
  11.         $("#btn2").click(function () {
  12.           $("#test2").html("<b>Hello world!</b>").html("<p>啊这</p>");
  13.         });
  14.         $("#btn3").click(function () {
  15.           $("#test3").val("RUNOOB");
  16.         });
  17.       });
  18.     </script>
  19.   </head>
  21.   <body>
  22.     <p id="test1">这是一个段落。</p>
  23.     <p id="test2">这是另外一个段落。</p>
  24.     <p>输入框: <input type="text" id="test3" value="菜鸟教程" /></p>
  25.     <button id="btn1">设置文本</button>
  26.     <button id="btn2">设置 HTML</button>
  27.     <button id="btn3">设置值</button>
  28.   </body>
  29. </html>

text()、html() 以及 val() 的回调函数

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

实例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("#btn1").click(function () {
  9.           $("#test1").text(function (i, origText) {
  10.             return (
  11.               "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"
  12.             );
  13.           });
  14.         });
  16.         $("#btn2").click(function () {
  17.           $("#test2").html(function (i, origText) {
  18.             return (
  19.               "旧 html: " +
  20.               origText +
  21.               " 新 html: Hello <b>world!</b> (index: " +
  22.               i +
  23.               ")"
  24.             );
  25.           });
  26.         });
  27.       });
  28.     </script>
  29.   </head>
  31.   <body>
  32.     <p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
  33.     <p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
  34.     <button id="btn1">显示 新/旧 文本</button>
  35.     <button id="btn2">显示 新/旧 HTML</button>
  36.   </body>
  37. </html>

设置属性 - attr()

用于设置和改变属性值。

实例

修改链接中href属性的值

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           $("#runoob").attr("href", "http://www.baidu.com");
  10.         });
  11.       });
  12.     </script>
  13.   </head>
  15.   <body>
  16.     <p><a href="//www.4399.com" id="runoob">菜鸟教程</a></p>
  17.     <button>修改 href 值</button>
  18.     <p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
  19.   </body>
  20. </html>

同时修改href属性和title属性

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           $("#runoob").attr({
  10.             href: "http://www.runoob.com/jquery",
  11.             title: "jQuery 教程",
  12.           });
  13.           // 通过修改的 title 值来修改链接名称
  14.           title = $("#runoob").attr("title");
  15.           $("#runoob").html(title);
  16.         });
  17.       });
  18.     </script>
  19.   </head>
  21.   <body>
  22.     <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
  23.     <button>修改 href 和 title</button>
  24.     <p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
  25.   </body>
  26. </html>

attr() 的回调函数

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  7.     <script>
  8.       $(document).ready(function () {
  9.         $("button").click(function () {
  10.           $("#runoob").attr("href", function (i, origValue) {
  11.             return origValue + "/jquery";
  12.           });
  13.         });
  14.       });
  15.     </script>
  16.   </head>
  17.   <body>
  18.     <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
  20.     <button>修改 href 值</button>
  22.     <p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
  23.   </body>
  24. </html>

添加元素

添加新元素内容

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

    append（）

    在被选中的元素的结尾插入内容（仍在该元素内部） 语法：

    • $("p").append("追加文本");

实例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("#btn1").click(function () {
  9.           $("p").append(" <b>追加文本</b>。");
  10.         });
  12.         $("#btn2").click(function () {
  13.           $("ol").append("<li>追加列表项</li>");
  14.         });
  15.       });
  16.     </script>
  17.   </head>
  19.   <body>
  20.     <p>这是一个段落。</p>
  21.     <p>这是另外一个段落。</p>
  22.     <ol>
  23.       <li>List item 1</li>
  24.       <li>List item 2</li>
  25.       <li>List item 3</li>
  26.     </ol>
  27.     <button id="btn1">添加文本</button>
  28.     <button id="btn2">添加列表项</button>
  29.   </body>
  30. </html>

prepend（）

在被选中元素的开头插入内容 语法：

  • $("p").prepend("在开头追加文本");
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  7.     <script>
  8.       $(document).ready(function () {
  9.         $("#btn1").click(function () {
  10.           $("p").prepend("<b>在开头追加文本</b>。 ");
  11.         });
  12.         $("#btn2").click(function () {
  13.           $("ol").prepend("<li>在开头添加列表项</li>");
  14.         });
  15.       });
  16.     </script>
  17.   </head>
  18.   <body>
  19.     <p>这是一个段落。</p>
  20.     <p>这是另外一个段落。</p>
  21.     <ol>
  22.       <li>列表 1</li>
  23.       <li>列表 2</li>
  24.       <li>列表 3</li>
  25.     </ol>
  26.     <button id="btn1">添加文本</button>
  27.     <button id="btn2">添加列表项</button>
  28.   </body>
  29. </html>

通过 append() 和 prepend() 方法添加若干新元素

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>菜鸟教程(runoob.com)</title>
  6.     <meta charset="utf-8" />
  7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  8.     <script>
  9.       function appendText() {
  10.         var txt1 = "<p>文本-1。</p>"; // 使用 HTML 标签创建文本
  11.         var txt2 = $("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本
  12.         var txt3 = document.createElement("p");
  13.         txt3.innerHTML = "文本-3。"; // 使用 DOM 创建文本 text with DOM
  14.         $("body").append(txt1, txt2, txt3); // 追加新元素
  15.       }
  16.     </script>
  17.   </head>
  18.   <body>
  19.     <p>这是一个段落。</p>
  20.     <button onclick="appendText()">追加文本</button>
  21.   </body>
  22. </html>

after（）和before（）方法

after（）在被选元素之后插入内容 before（）在被选元素之前插入内容 语法：

  • $("img").after("在后面添加文本");
  • $("img").before("在前面添加文本");

实例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("#btn1").click(function () {
  9.           $("img").before("<b>之前</b>");
  10.         });
  12.         $("#btn2").click(function () {
  13.           $("img").after("<i>之后</i>");
  14.         });
  15.       });
  16.     </script>
  17.   </head>
  19.   <body>
  20.     <img src="/images/logo.png" />
  21.     <br /><br />
  22.     <button id="btn1">之前插入</button>
  23.     <button id="btn2">之后插入</button>
  24.   </body>
  25. </html>

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  7. </script>
  8. <script>
  9. function afterText(){
  10.     var txt1="<b>I </b>";                    // 使用 HTML 创建元素
  11.     var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
  12.     var txt3=document.createElement("big");  // 使用 DOM 创建元素
  13.     txt3.innerHTML="jQuery!";
  14.     $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
  15. }
  16. </script>
  17. </head>
  18. <body>
  20. <img src="/images/logo2.png" >
  21. <br><br>
  22. <button onclick="afterText()">之后插入</button>
  24. </body>
  25. </html>

删除元素

删除已有HTML元素

删除元素/内容

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

remove()

删除被选中的元素及其子元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9.   $("button").click(function(){
  10.     $("#div1").remove();
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  17. <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
  19. 这是 div 中的一些文本。
  20. <p>这是在 div 中的一个段落。</p>
  21. <p>这是在 div 中的另外一个段落。</p>
  23. </div>
  24. <br>
  25. <button>移除div元素</button>
  27. </body>
  28. </html>

empty()

删除被选元素的子元素

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  6.     <script>
  7.       $(document).ready(function () {
  8.         $("button").click(function () {
  9.           $("#div1").empty();
  10.         });
  11.       });
  12.     </script>
  13.   </head>
  14.   <body>
  15.     <div
  16.       id="div1"
  17.       style="
  18.         height: 100px;
  19.         width: 300px;
  20.         border: 1px solid black;
  21.         background-color: yellow;
  22.       "
  23.     >
  24.       这是 div 中的一些文本。
  25.       <p>这是在 div 中的一个段落。</p>
  26.       <p>这是在 div 中的另外一个段落。</p>
  27.     </div>
  28.     <br />
  29.     <button>清空div元素</button>
  30.   </body>
  31. </html>

过滤被删的元素

remove()方法可以接受一个参数，允许对被删元素进行过滤