• jQuery的学习(一篇文章齐全)

    目录

    Day29 jQuery

    1、jQuery介绍

    2、jQuery的选择器

    2.1、直接查找

    2.2、导航查找

    3、jQuery的绑定事件

    案例1：绑定取消事件

    案例2：模拟事件触发

    4、jQuery的操作标签

    tab切换案例jQuery版本：

    案例1：

    案例2：clone案例

    案例3：返回顶部

    案例4：位置偏移

    5、jQuery的动画

    5.1、基本方法

    案例：动画显示

    5.2、自定义动画

    6、扩展方法 (插件机制)

    Day29 jQuery

    1、jQuery介绍

    • jQuery是什么

    jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

    jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

    • jQuery的版本

    目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

    • jQuery的引入

    根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>

    • jQuery的基本语法

    $().方法()
​
1 查找标签
2 .方法 操作标签

    • jQuery对象和dom对象的关系

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     
    9.     <script src="jquery3.6.js">script>
    10. ​
    11. head>
    12. <body>
    13. ​
    14. <ul class="c1">
    15.     <li>123li>
    16.     <li>234li>
    17.     <li>345li>
    18. ul>
    19. ​
    20. <script>
    21. ​
    22.        // $(".c1 li").css("color","red");
    23.        console.log($(".c1 li"));   // dom集合对象  [dom1,dom2,...]
    24. ​
    25.        // 如何将jQury对象转换为Dom对象
    26.        console.log($(".c1 li")[1].innerHTML);
    27. ​
    28.        // 如何将Dom对象转换为jQuery对象;
    29.        var ele = document.querySelector(".c1 li");
    30.        // console.log(ele);
    31.        // ele.style.color = "red";
    32.       $(ele).css("color","orange")  // [ele]
    33. ​
    34. script>
    35. body>
    36. html>

    2、jQuery的选择器

    2.1、直接查找

    • 基本选择器

    1. /*
    2. #id         # id选择符 
    3. element     # 元素选择符
    4. .class      # claw43ss选择符  
    5. selector1, selector2, selectorN   # 同时获取多个元素的选择符 
    6.  
    7. $("#id")   
    8. $(".class")  
    9. $("element")  
    10. $(".class,p,div")
    11. */

    • 组合选择器

    1. /*
    2.   ancestor descendant  // 包含选择符 
    3.   parent > child       // 父子选择符 
    4.   prev + next          // 下一个兄弟选择符 
    5.   prev ~ siblings      // 兄弟选择符 
    6.  
    7. $(".outer div")  
    8. $(".outer>div")  
    9. $(".outer+div")  
    10. $(".outer~div")
    11. */

    • 属性选择器

    1. /*
    2. [attribute=value]    // 获取拥有指定数据attribute,并且置为value的元素 
    3. $('[type="checked"]')  
    4. $('[class*="xxx"]')  
    5. */

    • 表单选择器

    1. /*
    2. $("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")
    3. 同样适用表单的以下属性
    4. :enabled
    5. :disabled
    6. :checked
    7. :selected
    8. */

    • 筛选器

    1. /*
    2. ​
    3.   // 筛选器
    4.   :first               //  从已经获取的元素集合中提取第一个元素
    5.   :even                //  从已经获取的元素集合中提取下标为偶数的元素 
    6.   :odd                 //  从已经获取的元素集合中提取下标为奇数的元素
    7.   :eq(index)           //  从已经获取的元素集合中提取指定下标index对应的元素
    8.   :gt(index)           //  从已经获取的元素集合中提取下标大于index对应的元素
    9.   :last                //  从已经获取的元素集合中提取最后一个元素
    10.   :lt(index)           //  从已经获取的元素集合中提取下标小于index对应的元素
    11.   :first-child         //  从已经获取的所有元素中提取他们的第一个子元素
    12.   :last-child          //  从已经获取的所有元素中提取他们的最后一个子元素
    13.   :nth-child           //  从已经获取的所有元素中提取他们的指定下标的子元素
    14.   // 筛选器方法
    15.   $().first()          //  从已经获取的元素集合中提取第一个元素
    16.   $().last()           //  从已经获取的元素集合中提取最后一个元素
    17.   $().eq()             //  从已经获取的元素集合中提取指定下标index对应的元素
    18. ​
    19.   */

    2.2、导航查找

    1. /* 
    2. // 查找子代标签：         
    3.  $("div").children(".test")     
    4.  $("div").find(".test")  
    5.                                
    6.  // 向下查找兄弟标签 
    7. $(".test").next()               
    8. $(".test").nextAll()     
    9. $(".test").nextUntil() 
    10.                            
    11. // 向上查找兄弟标签  
    12. $("div").prev()                  
    13. $("div").prevAll()       
    14. $("div").prevUntil() 
    15. ​
    16. // 查找所有兄弟标签  
    17. $("div").siblings()  
    18.               
    19. // 查找父标签：         
    20. $(".test").parent()              
    21. $(".test").parents()     
    22. $(".test").parentUntil() 
    23. ​
    24. */

    3、jQuery的绑定事件

    1. /*
    2. 三种用法:
    3.   1. on 和 off
    4.      // 绑定事件
    5.      $().on("事件名",匿名函数)
    6.      
    7.      // 解绑事件,给指定元素解除事件的绑定
    8.      $().off("事件名")
    9.   
    10.   2. 直接通过事件名来进行调用
    11.      $().事件名(匿名函数)                //简易版本的
    12.      等同于
    13.      $().bind("事件名",匿名函数)
    14.     
    15.   3. 组合事件,模拟事件
    16.      $().ready(匿名函数)   // 入口函数
    17.      $().hover(mouseover, mouseout)   // 是onmouseover和 onmouseout的组合
    18.      $().trigger(事件名)  // 用于让js自动触发指定元素身上已经绑定的事件
    19.      
    20. */

    案例1：绑定取消事件

    1. <p>限制每次一个按钮只能投票3次p>
    2. <button id="zan">点下赞(<span>10span>)button>
    3. <script>
    4.     let zan = 0;
    5.     $("#zan").click(function(){
    6.         $("#zan span").text(function(){
    7.             zan++;
    8.             let ret = parseInt($(this).text())+1;
    9.             if(zan >= 3){
    10.                 $("#zan").off("click"); // 事件解绑
    11.             }
    12.             return ret;
    13.         });
    14.     })
    15. ​
    16. script>

    案例2：模拟事件触发

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="js/jquery-1.11.0.js">script>
    7.     <style>
    8.     input[type=file]{
    9.         display: none;
    10.     }
    11.     .upload{
    12.         width: 180px;
    13.         height: 44px;
    14.         border-radius: 5px;
    15.         color: #fff;
    16.         text-align: center;
    17.         line-height: 44px;
    18.         background-color: #000000;
    19.         border: none;
    20.         outline: none;
    21.         cursor: pointer;
    22.     }
    23.     style>
    24. head>
    25. <body>
    26.     <input type="file" name="avatar">
    27.     <button class="upload">上传文件button>
    28.     <script>
    29.     $(".upload").on("click", function(){
    30.        $("input[type=file]").trigger("click"); // 模拟事件的触发
    31.     });
    32.     script>
    33. body>
    34. html>

     

    4、jQuery的操作标签

    • 文本操作

    1. /*
    2. $("选择符").html()     // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
    3. $("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容
    4. ​
    5. $("选择符").text()     // 效果同上,但是获取的内容是纯文本,不包含html代码
    6. $("选择符").text(内容)  // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
    7. */

    • value操作

     $().val()

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7.     <script src="jquery3.6.js">script>
    8.     <script>
    9. ​
    10.     $(function () {
    11. ​
    12. ​
    13.         $("#i1").blur(function () {
    14. ​
    15.             // 获取jquery对象的value属性值
    16.             console.log(this.value);
    17.             console.log($(this).val());
    18. ​
    19.             // 设置value属性值
    20.             $(this).val("hello world")
    21. ​
    22.         });
    23.         
    24. ​
    25.         $("#i3").change(function () {
    26.             console.log(this.value);
    27.             console.log($(this).val());
    28. ​
    29.             $(this).val("guangdong");
    30. ​
    31.         });
    32. ​
    33.         console.log($("#i2").val());
    34.         console.log($("#i2").val("hello pig!"))
    35. ​
    36.     })
    37. ​
    38.     script>
    39. head>
    40. <body>
    41. ​
    42. ​
    43. <input type="text" id="i1">
    44. ​
    45. <select  id="i3">
    46.     <option value="hebei">河北省option>
    47.     <option value="hubei">湖北省option>
    48.     <option value="guangdong">广东省option>
    49. select>
    50. ​
    51. <p> <textarea name="" id="i2" cols="30" rows="10">123textarea>p>
    52. ​
    53. ​
    54. ​
    55. body>
    56. html>

    • 属性操作

    /*
//读取属性值
  $("选择符").attr("属性名");   // 获取非表单元素的属性值,只会提取第一个元素的属性值
  $("选择符").prop("属性名");   // 表单元素的属性,只会提取第一个元素的属性值
​
//操作属性
  $("选择符").attr("属性名","属性值");  // 修改非表单元素的属性值,如果元素有多个,则全部修改
  $("选择符").prop("属性名","属性值");  // 修改表单元素的属性值,如果元素有多个,则全部修改
  
  $("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
  $("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
*/
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7.     <script src="jquery3.6.js">script>
    8.    
    9. head>
    10. <body>
    11. ​
    12. <button class="select_all">全选button>
    13. <button class="cancel">取消button>
    14. <button class="reverse">反选button>
    15. <hr>
    16. <table border="1">
    17.     <tr>
    18.         <td>选择td>
    19.         <td>姓名td>
    20.         <td>年龄td>
    21.     tr>
    22.     
    23.     <tr>
    24.         <td><input type="checkbox">td>
    25.         <td>张三td>
    26.         <td>23td>
    27.     tr>
    28.     <tr>
    29.         <td><input type="checkbox">td>
    30.         <td>李四td>
    31.         <td>23td>
    32.     tr>
    33.     <tr>
    34.         <td><input type="checkbox">td>
    35.         <td>王五td>
    36.         <td>23td>
    37.     tr>
    38. table>
    39. ​
    40. <script>
    41.     
    42.     $(".select_all").click(function () {
    43.         $("table input:checkbox").prop("checked",true);
    44. ​
    45.     });
    46.     $(".cancel").click(function () {
    47.        $("table input:checkbox").prop("checked",false);
    48.     });
    49. ​
    50.     $(".reverse").click(function () {
    51.        $("table input:checkbox").each(function () {
    52.            $(this).prop("checked",!$(this).prop("checked"))
    53. ​
    54.        })
    55. ​
    56.    });
    57. ​
    58. script>
    59. ​
    60. body>
    61. html>

    • css样式操作

    /*
获取样式
$().css("样式属性");   // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
​
操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
​
$().css("样式属性":function(){
  
  // 其他代码操作 
  return "样式值";
});
*/

    • class 属性操作

    $().addClass("class1  class2 ... ...")   // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

    tab切换案例jQuery版本：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7.     <style>
    8. ​
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13. ​
    14.         .tab{
    15.             width: 800px;
    16.             height: 300px;
    17.             /*border: 1px solid rebeccapurple;*/
    18.             margin: 200px auto;
    19.         }
    20. ​
    21.         .tab ul{
    22.             list-style: none;
    23.         }
    24. ​
    25.         .tab ul li{
    26.             display: inline-block;
    27.         }
    28. ​
    29.         .tab_title {
    30.             background-color: #f7f7f7;
    31.             border: 1px solid #eee;
    32.             border-bottom: 1px solid #e4393c;
    33.         }
    34. ​
    35.         .tab .tab_title li{
    36.             padding: 10px 25px;
    37.             font-size: 14px;
    38.         }
    39. ​
    40.         .tab .tab_title li.current{
    41.             background-color: #e4393c;
    42.             color: #fff;
    43.             cursor: default;
    44.         }
    45. ​
    46.         .tab_con li.hide{
    47.             display: none;
    48.         }
    49. ​
    50.     style>
    51. ​
    52.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
    53. head>
    54. <body>
    55. ​
    56. <div class="tab">
    57.     <ul class="tab_title">
    58.         <li class="current">商品介绍li>
    59.         <li>规格与包装li>
    60.         <li>售后保障li>
    61.         <li>商品评论li>
    62.     ul>
    63. ​
    64.     <ul class="tab_con">
    65.         <li>商品介绍...li>
    66.         <li class="hide">规格与包装...li>
    67.         <li class="hide">售后保障...li>
    68.         <li class="hide">商品评论...li>
    69.     ul>
    70. div>
    71. ​
    72. <script>
    73. ​
    74. ​
    75.     // jQuery
    76. ​
    77.     $(".tab_title li").click(function (){
    78.            // current样式
    79.            $(this).addClass("current").siblings().removeClass('current');
    80.            // hide样式
    81.            $(".tab_con li").eq($(this).index()).removeClass("hide").siblings().addClass("hide")
    82.     })
    83. ​
    84. script>
    85. ​
    86. body>
    87. html>

    • 节点操作

    1. /*
    2. //创建一个jquery标签对象
    3.     $("<p>")
    4. ​
    5. //内部插入
    6. ​
    7.     $("").append(content|fn)       // $("p").append("<b>Hellob>");    父标签中追加一个子标签，放在最后
    8.     $("").appendTo(content)        // $("p").appendTo("div");           反过来：把子标签添加到父标签中，放在最后
    9.     $("").prepend(content|fn)      // $("p").prepend("<b>Hellob>");   父标签中加一个子标签，放在第一个
    10.     $("").prependTo(content)       // $("p").prependTo("#foo");      反过来：把子标签添加到父标签中，放在第一个中
    11. ​
    12. //外部插入
    13. ​
    14.     $("").after(content|fn)        // ("p").after("<b>Hellob>");
    15.     $("").before(content|fn)       // $("p").before("<b>Hellob>");
    16.     $("").insertAfter(content)     // $("p").insertAfter("#foo");
    17.     $("").insertBefore(content)    // $("p").insertBefore("#foo");
    18. ​
    19. //替换
    20.     $("").replaceWith(content|fn)  // $("p").replaceWith("<b>Paragraph. b>");
    21. ​
    22. //删除
    23. ​
    24.     $("").empty()     // 只是把标签中的内容清空了，但是标签还在
    25.     $("").remove([expr])
    26. ​
    27. //复制
    28.     $("").clone([Even[,deepEven]])
    29. */

    案例1：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="jquery3.6.js">script>
    7. head>
    8. <body>
    9. ​
    10. ​
    11. <button class="add_btn">添加节点button>
    12. <button class="del_btn">删除节点button>
    13. <button class="replace_btn">替换节点button>
    14. <div class="c1">
    15.     <h3>hello JS!h3>
    16.     <h3 class="c2">hello worldh3>
    17. ​
    18. div>
    19. ​
    20. ​
    21. <script>
    22.      
    23.     $(".add_btn").click(function () {
    24.         // 创建jquery对象
    25. ​
    26.         // var $img = $("");
    27.         // $img.attr("src","https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg")
    28. ​
    29.         // 节点添加
    30. ​
    31.         // $(".c1").append($img);
    32.         // $img.appendTo(".c1")
    33. ​
    34.         // $(".c1").prepend($img);
    35.         // $(".c2").before($img);
    36.         // 支持字符串操作
    37.         $(".c1").append("")
    38. ​
    39. ​
    40.     });
    41. ​
    42. ​
    43.     $(".del_btn").click(function () {
    44. ​
    45.           $(".c2").remove();
    46.           // $(".c2").empty();
    47. ​
    48.     });
    49. ​
    50. ​
    51.     $(".replace_btn").click(function () {
    52.         // alert(123);
    53.         // var $img = $("");
    54.         // $img.attr("src","https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg")
    55.         // $(".c2").replaceWith($img);
    56.         $(".c2").replaceWith("");
    57. ​
    58.     })
    59.     
    60. script>
    61. ​
    62. body>
    63. html>

    案例2：clone案例

    1. <div class="outer">
    2.     <div class="item">
    3.         <input type="button" value="+" class="add">
    4.         <input type="text">
    5.     div>
    6. ​
    7. div>
    8. ​
    9. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
    10. <script>
    11. ​
    12.    $(".add").click(function () {
    13. ​
    14.        var $clone=$(this).parent().clone()
    15.        $clone.children(".add").attr({"value":"-","class":"rem"})
    16.        $(".outer").append($clone);
    17.    });
    18. ​
    19.     $('.rem').click(function () {
    20.         $(this).parent().remove()
    21.     });
    22. ​
    23.     // 事件委派
    24.     $(".outer").on("click",".item .rem",function () {
    25.         $(this).parent().remove()
    26.     })
    27. ​
    28. ​
    29. script>

    • css尺寸

    /*
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
*/

    • css位置

    /*
$("").offset([coordinates])  // 获取匹配元素在当前视口的相对偏移。
$("").position()             // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val])       // 获取匹配元素相对滚动条顶部的偏移。
*/

    案例3：返回顶部

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         *{
    8.             margin: 0;
    9.         }
    10.         .content{
    11.             height: 2000px;
    12.             background-color: lightgray;
    13.         }
    14. ​
    15.         .return_top{
    16.             width: 120px;
    17.             height: 50px;
    18.             background-color: lightseagreen;
    19.             color: white;
    20.             text-align: center;
    21.             line-height: 50px;
    22. ​
    23.             position: fixed;
    24.             bottom: 20px;
    25.             right: 20px;
    26.         }
    27. ​
    28.         .hide{
    29.             display: none;
    30.         }
    31.     style>
    32. ​
    33.     <script src="jquery3.6.js">script>
    34. head>
    35. <body>
    36. ​
    37. ​
    38. <div class="content">
    39.     <h3>文章...h3>
    40. div>
    41. ​
    42. <div class="return_top hide">返回顶部div>
    43. ​
    44. ​
    45. <script>
    46. ​
    47.     console.log($(window).scrollTop());
    48.     $(".return_top").click(function () {
    49. ​
    50.         $(window).scrollTop(0)
    51.         
    52.     });
    53. ​
    54.     $(window).scroll(function () {
    55.         console.log($(this).scrollTop());
    56.         var v =$(this).scrollTop();
    57.         if (v > 100){
    58.             $(".return_top").removeClass("hide");
    59.         }else {
    60.             $(".return_top").addClass("hide");
    61.         }
    62. ​
    63.     })
    64. script>
    65. ​
    66. ​
    67. body>
    68. html>

    案例4：位置偏移

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         *{
    8.             margin: 0;
    9.             padding: 0;
    10.         }
    11.         .box{
    12.             width: 200px;
    13.             height: 200px;
    14.             background-color: orange;
    15. ​
    16.         }
    17. ​
    18.         .parent_box{
    19.              width: 800px;
    20.              height: 500px;
    21.              margin: 200px auto;
    22.              border: 1px solid rebeccapurple;
    23.         }
    24.     style>
    25. head>
    26. <body>
    27. ​
    28. <button class="btn1">offsetbutton>
    29. <div class="parent_box">
    30.     <div class="box">div>
    31. div>
    32. ​
    33. ​
    34. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
    35. <script>
    36. ​
    37.     var $offset=$(".box").offset();
    38.     var $left=$offset.left;
    39.     var $top=$offset.top;
    40. ​
    41.     console.log("$offset","top:"+$top+" left:"+$left)
    42. ​
    43.     var $position=$(".box").position();
    44.     var $left=$position.left;
    45.     var $top=$position.top;
    46. ​
    47.     console.log("$position","top:"+$top+" left:"+$left);
    48. ​
    49. ​
    50.     $(".btn1").click(function () {
    51.         $(".box").offset({left:50,top:50})
    52.     });
    53. ​
    54. ​
    55. script>
    56. ​
    57. ​
    58. body>
    59. html>

    5、jQuery的动画

    5.1、基本方法

    /*
//基本
  show([s,[e],[fn]])   显示元素
  hide([s,[e],[fn]])   隐藏元素
​
//滑动
  slideDown([s],[e],[fn])  向下滑动 
  slideUp([s,[e],[fn]])    向上滑动
​
//淡入淡出
  fadeIn([s],[e],[fn])     淡入
  fadeOut([s],[e],[fn])    淡出
  fadeTo([[s],opacity,[e],[fn]])  让元素的透明度调整到指定数值
​
//自定义
  animate(p,[s],[e],[fn])   自定义动画 
  stop([c],[j])             暂停上一个动画效果,开始当前触发的动画效果
  
*/

    案例：动画显示

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7.     <style>
    8. ​
    9. ​
    10.         .c1{
    11.             width: 250px;
    12.             height: 250px;
    13.             background-color: black;
    14.         }
    15. ​
    16.         .hide{
    17.             display: none;
    18.         }
    19.     style>
    20. ​
    21.     <script src="jquery3.6.js">script>
    22. head>
    23. <body>
    24. ​
    25. ​
    26. <p>
    27.     <button class="show01">显示button>
    28.     <button class="hide01">隐藏button>
    29. p>
    30. <p>
    31.     <button class="show02">显示button>
    32.     <button class="hide02">隐藏button>
    33. p>
    34. <p>
    35.     <button class="show03">显示button>
    36.     <button class="hide03">隐藏button>
    37. p>
    38. ​
    39. <p>
    40.     <button class="show04">显示button>
    41.     <button class="hide04">隐藏button>
    42. p>
    43. <hr>
    44. ​
    45. <div class="c1">div>
    46. ​
    47. ​
    48. <script>
    49.     // 自己实现的隐藏与显示
    50. ​
    51.     $(".show01").click(function () {
    52.         $(".c1").removeClass("hide")
    53.     });
    54.     $(".hide01").click(function () {
    55.         $(".c1").addClass("hide")
    56.     });
    57. ​
    58.     // (1) show与hide方法
    59. ​
    60.     $(".show02").click(function () {
    61. ​
    62.         $(".c1").show(1000,function () {
    63.             alert("显示成功")
    64.         });
    65. ​
    66.     });
    67.     $(".hide02").click(function () {
    68. ​
    69.         $(".c1").hide(1000,function () {
    70.             alert("隐藏成功")
    71.         })
    72. ​
    73.     });
    74. ​
    75.      // (2) slideDown与slideUp
    76. ​
    77.      $(".show03").click(function () {
    78. ​
    79.         $(".c1").slideDown(1000,function () {
    80.             alert("显示成功")
    81.         });
    82. ​
    83.      });
    84.      $(".hide03").click(function () {
    85. ​
    86.         $(".c1").slideUp(1000,function () {
    87.             alert("隐藏成功")
    88.         })
    89. ​
    90.     });
    91. ​
    92.       // (3) fadeIn与fadeOut
    93. ​
    94.      $(".show04").click(function () {
    95. ​
    96.         $(".c1").fadeIn(1000,function () {
    97.             alert("显示成功")
    98.         });
    99. ​
    100.      });
    101.      $(".hide04").click(function () {
    102. ​
    103.         $(".c1").fadeOut(1000,function () {
    104.             alert("隐藏成功")
    105.         })
    106. ​
    107.     });
    108. script>
    109. ​
    110. body>
    111. html>

    5.2、自定义动画

    $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)
    1. $(".animate").click(function () {
    2. ​
    3.         $(".c1").animate({
    4.             "border-radius":"50%",
    5.             "top":340,
    6.             "left":200
    7.         },1000,function () {
    8.             $(".c1").animate({
    9.                 "border-radius":"0",
    10.                 "top":240,
    11.                 "left":120
    12.             },1000,function () {
    13. ​
    14.                 $(".animate").trigger("click")
    15.             })
    16.         })
    17.         
    18.     })
    19. ​

    6、扩展方法 (插件机制)

    • jQuery.extend(object)

    扩展jQuery对象本身。
​
用来在jQuery命名空间上增加新函数。 
​
在jQuery命名空间上增加两个函数:

    1. <script>
    2.     jQuery.extend({
    3.       min: function(a, b) { return a < b ? a : b; },
    4.       max: function(a, b) { return a > b ? a : b; }
    5. });
    6. ​
    7.     jQuery.min(2,3); // => 2
    8.     jQuery.max(4,5); // => 5
    9. script>

     

    • jQuery.fn.extend(object)

    扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
​
增加两个插件方法：

    1. <body>
    2. ​
    3. <input type="checkbox">
    4. <input type="checkbox">
    5. <input type="checkbox">
    6. ​
    7. <script src="jquery.min.js">script>
    8. <script>
    9.     jQuery.fn.extend({
    10.       check: function() {
    11.          $(this).attr("checked",true);
    12.       },
    13.       uncheck: function() {
    14.          $(this).attr("checked",false);
    15.       }
    16.     });
    17. ​
    18.     $(":checkbox").check()
    19. script>
    20. ​
    21. body>

  • 相关阅读:
    面试精选：3、史上最详细的Linux精选面试题（二）
    redis--重要知识点扫盲
    使用 tensorboard 可视化 kears训练结果
    【完美云曦篇】新预告，云曦遭魔改被抓，石昊首秀九天劫光，反杀战王
    从Matrix-ResourceCanary看内存快照生成-ForkAnalyseProcessor(1)
    deepwalk&node2vec 代码实战
    认识ICMP协议 —— ping命令的作用过程
    概率论的案例分析[1]
    交叉熵与对数似然分析
    电机剧烈振动的原因及解决办法（附电机振动监测方案）
  • 原文地址：https://blog.csdn.net/wojiubugaosuni12/article/details/134562340