一、什么是JQuery

1.1 JQuery 介绍

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使像HTML文档的遍历和操作，事件处理，动画和Ajax的东西简单得多，一个易于使用的API，适用于众多浏览器。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。

1.2 资料

image.png

官网 https://jquery.com/
API 手册 https://jquery.cuishifeng.cn/

1.3 JQuery 使用方法

1.3.1 下载Jquery库

image.png

1.3.2 在线CDNY引入

  • Google CDN
  • Microsoft CDN
  • CDNJS CDN
  • jsDelivr CDN

    二、JQuery 选择器

    jquery 选择元素的方法就是css选择器，除外还提供了更加灵活的选择方法。

    2.1 常用选择器

    1. $('#id') //id选择器 
    2. $('.className')// 类选择器
    3. $('tagName') //元素选择器
    4. $("selector[attr='value']")   //属性选择器

    2.2 其他选择器

    ```javascript $(“selector:first”)
    $(“selector:last”) $(“selector:eq(index)”)

//表单选择器 $(“input:text”) $(“input:checkbox”)

//状态选择器 $(“input:checked”) $(“input:disabled”)

  1. <a name="jGibh"></a>
  2. ### 选择器练习题
  3. ```javascript
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <title>Title</title>
  9.     <script src="./lib/jquery-3.6.0.js">
  11.     </script>
  12. </head>
  13. <body>
  14.       <hr>
  15.       使用 层级选择器（1把li设置为红色 2使用过滤选择器把HTML改为绿色 ）
  16.       <ul>
  17.         <li>JAVA</li>
  18.         <li>CSS</li>
  19.         <li>HTML</li>
  20.         <li>JAVASCRIPT</li>
  21.         <li>MYSQL</li>
  22.       </ul>
  24.       <hr/>
  25.       使用ID选择(1 给第一段话设置一个红色边框  2 给第二段话设置蓝色边框)
  26.       <p id="x">
  27.          好好学习天天向上！
  28.       </p>
  29.       <p id="y">
  30.         好好学习天天向上！
  31.       </p>
  33.       <hr/>
  34.       使用表单类别选择器 把密码框设置 灰色背景
  35.          <div>
  36.              <input name="hello">
  37.              <input type="password" >
  38.              <input type="password" >
  39.          </div>
  40.       </div>
  42.      <hr/>
  43.       使用属性选择器，把href属性值为abc的链接设置红色字体   把连接中包含f的元素设置绿色背景
  44.      <a href="abc.com">连接A</a>
  45.      <a href="dnf.com">连接B</a>
  46.      <a href="kfc.com">连接C</a>
  47.      <a href="fuck.com">连接D</a>
  49.      <script type="text/javascript">
  50.         $("ul li ").css("color","red");
  51.         $("ul li:eq(2) ").css("color","green");
  54.          $("#x").css("border","1px solid red");
  55.         $("#y").css("border","1px solid blue");
  58.         $("input:password").css("background-color"," #ccc");
  61.         $("a[href='abc.com']").css("color","red");
  62.         $("a[href*='f']").css("background-color","green");
  64.         //*=表示以包含
  65.      </script>     
  67. </body>
  68. </html>

三、JQuery 事件

3.1事件绑定

  1. obj.on('事件类型',回调函数)
  2. obj.on('click',function(e){
  3.    此处写点击后需要做的逻辑代码。
  4. })
  6. //原生js
  7. obj.addeventLinsterner( 'click', 回调 )
  8. obj.on('click', 回调)

3.2 off 取消事件 以及 trigger触发器

  1.  <button id="btn">点击按钮有惊喜</button>
  2.    <button id="btn-off">关闭</button>
  3.    <button id="trigger">模拟点击按钮</button>
  4.    <div id="box" style="width: 300px;height: 300px;background-color: green;"></div>
  5.    <script>
  6.        /* 1 通用事件绑定 */
  7.        $("#btn").on('click',function (e){
  8.             var colors= ['red','green','blue','pink','gray','yellow'];
  9.             var index =  Math.round(Math.random()*colors.length);
  10.             $('body').css('background-color', colors[index] );
  11.        });
  13.        /* 事件移除*/
  14.        $("#btn-off").on('click', (e)=>{ $("#btn").off('click')     }  )
  16.        /* 事件触发 */  
  17.        $('#trigger').on('click',()=>{  $("#btn").trigger('click')    })
  18. </script>

hover事件 融合了 mouseover 以及 mouseenter 

  1.  <div style="display: flex;justify-content: flex-start; height: 300px; ">
  2.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  3.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  4.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  5.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  6.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  7.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  8.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  9.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  10.     <div class="bar" style="width: 20px ; height: 100px; border: 1px solid #ccc"></div>
  11.   </div>
  12.    <script>
  13.      $(".bar").hover(
  14.              function () {
  15.                //这里this 是事件源对象， lambda 中不不支持this对象
  16.                $(this).css('height', '200px').css('transition', 'height 2s');
  17.              }
  18.              ,
  19.              function (){
  20.                $(this).css('height','50px').css('transition','height 2s');
  21.              }
  22.      )
  23.    </script>

3.3 快捷事件

  1. <a name="gX0l2"></a>
  2. #### 4.2.1 css( )
  3. 类似于与style属性的作用
  4. <a name="vwQKE"></a>
  5. #### 4.2.2 单个样式
  6. ```javascript
  7. $("div").css('color','green').css('background-color','red'); //控制单个属性可级联调用

4.2.3 多个样式

  1. $("div").css({'color':'green','background-color':'red' }); //控制多个属性

4.2.4 addClass() removeClass() toggleClass()（有就移除 没有就添加）

  1. <style>
  2.         #box{ width: 500px; height: 40px;background-color: rgba(0,0,0,.5);display: flex;justify-content: space-between}
  4.         .active{
  5.             background-color: orange;
  6.         }
  7. </style>
  12. <div id="box">
  13.      <button class="active">女人</button>
  14.      <button>科技</button>
  15.      <button>数码</button>
  16.   </div>
  18. <script>
  20.      // $("#box button").hover(
  21.      //           function (){
  22.      //    //获得当前事件源 this
  23.      //    $(this).addClass("active");
  24.      //  }  ,
  25.      //          function (){
  26.      //            //获得当前事件源 this
  27.      //            $(this).removeClass("active");
  28.      //          }
  29.      //  )
  30.      $("#box button:first").toggleClass("active");  //这里第一个button有了active 就会被移除掉
  31.      $("#box button:eq(1)").toggleClass("active");  //第二个botton没有active就会加上一个
  32. </script>

4.3 赋值 取值内容

类与 innerText innerHTML value 的作用

4.3.1 text( [content] ) html([content]) val([content])

  1.  <div id="a" >hello fuck !</div>
  2.    <div id="b"> <span>hello fuck !</span></div>
  3.    <input id="c" value="admin" >
  6.    <script>
  7.        console.log($("#a").text())  //text() 里面有内容就相当于赋值  没有就是取值 下同
  8.       $("#a").text("hello java");
  10.        console.log( $("#b").html()  )
  11.        $("#b").html( "<ul><li>aaaa</li><li>dddddd</li><li>dddddd</li><li>dddddddd</li></ul>" );
  13.        console.log($("#c").val())
  14.        $("#c").val("6666")
  15.    </script>

存取值 综合练习题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../lib/jquery-3.6.0.js" type="text/javascript">
  8.     </script>
  9.     <style type="text/css">
  10.         .ys{font-size: 1.25rem;
  11.         background-color: #A52A2A;
  12.         border: 1px solid #A52A2A;
  13.         box-shadow: 1px 2px 1px 3px rgba(1,1,1,.1);
  15.         }
  16.     </style>
  18. </head>
  19. <body>
  21.    <hr/>
  23.    <button id="a" >点击按钮对出下联填入输入框中</button>
  24.    <input id="b" type="text" value="上海自来水来自海上"> <!-- 提示val()-->
  25.    <input id="c" type="text" placeholder="填写下联处">  <!--提示val(content)-->
  27.    <hr/>
  28.    <button id="bt">点击按钮设置div的 添加一个样式 nb  改样式定义了字体大小 颜色 背景 投影 </button>
  29.    <div id="box" style="width: 300px;height: 40px;border: 1px solid #ccc" > 需要改变样式的div </div>  <!--提示addClass()-->
  31.    <hr/>
  32.    <button id="bt2">点击按钮获取 span中的文本</button>       <!--提示 text(content)-->
  33.    <button id="bt3">点击按钮获取 span中的添加一个图片</button> <!--提示html(content)-->
  34.    <span>span中测试文本</span>
  36.    <script type="text/javascript">
  37.        $("#a").click(function(){
  38.         $("#c").val("海南自来水来自海南");
  39.     })
  41.     $("#bt").click(function(){
  42.         $("#box").addClass("ys");
  43.     })
  45.     $("#bt2").click(function(){
  46.         console.log($(this).text());
  47.     })
  49.     $("#bt3").click(function(){
  50.         $(this).html("<img src='img/0.jpg' >");
  51.     })
  53.    </script>
  55. </body>
  56. </html>

4,4 属性

attr() prop() removeAttr
对于boolean属性值修改使用 prop()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <script src="../libs/jquery-3.6.0.js"></script>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9.   <input type="checkbox" value="java">Java高级
  10.   <div id="box" cc="cls"></div>
  11.   <button onclick="setAttr()" >修改/设置</button>
  12.   <button onclick="getAttr()" >获取</button>
  13.   <script>
  14.         function  setAttr(){
  15.              $("#box").attr("abc","刘德华");//设置值
  16.              $("#box").attr("cc","波多xxx");//修改值
  17.              $("input").prop("checked",true); //对于boolean属性值修改使用 prop()
  18.         }
  19.         function getAttr(){
  20.           var id = $("#box").attr("id");
  21.           var cc = $("#box").attr("cc");
  22.           var prop = $("input").prop("checked");
  23.              console.log( id ,cc ,prop);
  24.           $("#box").removeAttr("cc"); //移除
  25.         }
  26.   </script>
  27. </body>
  28. </html>

4.5 查找

4.5.1 children()

先找到父级节点，通过次方法可以获得该节点全部的后代节点

  1. $(function(){
  2.   //全部的子节点
  3.   var arr= $("ul").children();
  4.   $( arr[0] ).css('color','red');
  5. })

4.5.2 parent()

先找到其中的一个子节点，通过次方法可以获得该子节点的直接父级节点，全部的父级节点通过示例中其他方法也可获得。

  1. $(function(){
  2.   $("#son").parent().css('border','1px solid red'); //直接父级
  3.   $("#son").parents().css('border','1px solid red'); //全部父级
  4.   $("#son").parentsUntil("html").css('border','1px solid red'); //全部父级直到 什么为止。
  5. }

4.5.3 prev()

先找到其中的一个子节点，通过次方法可以获得该子节点前一个节点，前面的全部节点通过示例中其他方法也可获得。

  1. $(function(){
  2.   $("#son").prev().css('color','red'); //前一个
  3.   $("#son").prevAll().css('color','red');//前全部
  4.   $("#son").prevUntil('.x').css('color','red');//前全部直到 .x为止
  5. })

4.5.3 next()

先找到其中的一个子节点，通过次方法可以获得该子节点后一个节点，后面的全部节点通过示例中其他方法也可获得。

  1. $("#son").next().css('color','red');  // 后一个
  2. $("#son").nextAll().css('color','red');//后全部
  3. $("#son").nextUntil('.x').css('color','red');//后全部直到 .x为止

4.5.4 siblings()

先找到其中的一个子节点，通过次方法可以获得该子节点同级的其他节点。

  1. $("#son").siblings().css('border','1px solid red');

4.5.5 find( 选择器 )

obj.find(“td”) 在obj内部选择td元素

4.6 添加

4.6.1 内部添加

指的是在指定容器的内部添加新的节点
image.png

  • append( content ) & prepend( content )

    1. obj.append("html代码" ) //内容追加
    2. obj.prepend("html代码" ) //顶部插入

  • appendTo( selector ) & prependTo( selector )

    1. $("html代码").appendTo( '.box' );
    2. $("html代码").prependTo( '.box' );

    两组api 作用一致， 第一组是容器调用api 添加新增节点 ， 第二组是 新增节点调用api 添加到指定的选择器中。

4.6.2 外部添加

指的是在指定容器外部同级，前后添加新节点。
image.png

  • after() & before()

    1. obj.after( "html代码" ) //在obj后面添加新节点
    2. obj.before("html代码" ) //在obj前面添加新节点

  • insertAfter() insertBefore()

    1. $( "html代码" ).insertAfter("选择器")  //在obj后面添加新节点
    2. $( "html代码" ).insertBefore("选择器") //在obj前面添加新节

    这两组api 作用也是一样的，区别在于前者是容器节点调用，后者是新增节点调用。

4.7 替换 删除 复制 包裹

  • replaceWith( content )
  • replaceAll( selector )

删除

  • remove() //移除obj，移除自身。
  • empty() //清空obj的内容， 移除的是全部儿子，自己会保留。

复制

  • clone()

包裹
wrap()
wrapAll()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../libs/jquery-3.6.0.js"></script>
  7. </head>
  8. <body>
  9.   <div id="box" style="width: 800px;height: 120px;background-color: green;margin-bottom: 10px">
  10.       <img src="../images/a.jpeg" width="100" height="100">
  11.       <img src="../images/b.jpeg" width="100" height="100">
  12.       <img src="../images/c.jpg" width="100" height="100">
  13.   </div>
  14.    <button id="btn">替换</button>
  15.    <button id="btn-del">删除</button>
  16.    <button id="btn-del-all">清空</button>
  17.    <button id="btn-copy">copy</button>
  18.    <button id="btn-warp">包裹</button>
  19.     <script>
  20.         //替换
  21.         $("#btn").click( ()=>{
  22.              替换
  23.             //$("img:first").replaceWith("<img src='../images/bj.jpeg' width='100' height='100'>")
  24.             //$("#box img:eq(0)").replaceWith("<img src='../images/bj.jpeg' width='100' height='100'>");
  25.             $("<img src='../images/bj.jpeg' width='100' height='100'>").replaceAll("img");
  27.         });
  28.         //移除
  29.         $("#btn-del").click(()=>{
  30.              $("img:first").remove();
  31.         });
  32.         //清空
  33.         $("#btn-del-all").click( ()=>{
  34.             $("#box").empty();
  35.         });
  36.         var count=0;
  37.         //拷贝
  38.         $("#btn-copy").click( ()=>{
  39.                 var mycopy = $("#box").clone();
  40.                 mycopy.attr('id','box-'+(++count) );
  41.                 mycopy.insertAfter("div:last");
  42.         });
  43.         //包裹
  44.         $("#btn-warp").click( function (){
  45.               // $("#box img").wrap("<div style='padding: 4px;border: 1px solid #ccc;display: inline-block;background-color: white ';></div>");
  46.             $("#box img").wrapAll( "<div style='padding: 4px;border: 1px solid #ccc;display: inline-block;background-color: white ';></div>" );
  47.         });
  48.     </script>
  50. </body>
  51. </html>

五、JQuery 动画

5.1 可见性 淡入淡出 展开折叠 自定义

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <style>
  7.        #box{
  8.          width: 800px;height: 400px;background-color: pink;
  9.        }
  10.    </style>
  11.   <script src="../libs/jquery-3.6.0.js"></script>
  12. </head>
  13. <body>
  15.    <div id="box"></div>
  16.    <button id="btn-1" >显示</button>
  17.    <button id="btn-2">隐藏</button>
  18.    <button id="btn-3">隐藏/显示</button>
  20.    <button id="btn-4" >淡入</button>
  21.    <button id="btn-5">淡出</button>
  22.    <button id="btn-6">淡到</button>
  24.    <button id="btn-7" >上滑</button>
  25.    <button id="btn-8">下拉</button>
  26.    <button id="btn-9">滑动切换</button>
  27.    <button id="btn-10">自定义动画</button>
  30.    <script>
  32.      //隐藏
  33.      $("#btn-2").click( ()=>{  $("#box").hide(1000)  } );
  34.      //显示
  35.      $("#btn-1").click( ()=>{  $("#box").show(1000)  } );
  37.      //显示切换
  38.      $("#btn-3").click( ()=>{  $("#box").toggle(1000)  } );
  41.      //
  42.      $("#btn-4").click( ()=>{  $("#box").fadeIn(1000)  } );
  44.      //
  45.      $("#btn-5").click( ()=>{  $("#box").fadeOut(1000)  } );
  47.      //
  48.      $("#btn-6").click( ()=>{  $("#box").fadeTo(1000,0.4)  } );
  51.      //
  52.      $("#btn-7").click( ()=>{  $("#box").slideUp(1000)  } );
  54.      //
  55.      $("#btn-8").click( ()=>{  $("#box").slideDown(1000)  } );
  57.      //
  58.      $("#btn-9").click( ()=>{  $("#box").slideToggle(1000)  } );
  60.      //
  61.      $("#btn-10").click(  ()=>{ $("#box").animate({ 'width':'100px','opacity':'0.1'} ,1000 )   } );
  64.    </script>
  65. </body>
  66. </html>

旅游路线

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="../lib/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
  7.         <link rel="stylesheet" type="text/css" href="new_file.css"/>
  9.     </head>
  10.     <body>
  12.         <div class="kuangkuang">
  13.             <!-- 创建第一个层面 -->    
  15.             <div class="first">
  16.                 <div class="address1">
  17.                     <input name="di" type="text"  value="" />
  18.                 </div>
  19.                 <div class="add1">
  20.                     <button id="mybt" type="button">继续添加</button>
  21.                 </div>    
  22.             </div>    
  24.         </div>
  25.         <div class="route">
  26.             <button type="button">生成线路图</button>
  28.         </div>
  30.         <div class="luxiantu">
  31.             <p> </p>
  33.         </div>
  37.         <script type="text/javascript">
  39.         var count=0;
  40.         $("#mybt").click(function(){
  41.             //克隆的dom
  42.             var cloneDom = $(".first").clone(true);
  43.             cloneDom.attr('class','class-'+(++count))
  45.             //插入到其他位置
  46.             cloneDom.addClass('firstt')
  47.             cloneDom.appendTo(".kuangkuang");
  48.         })
  49.         //打印路线图
  50.         $(".route button").click(function(){
  51.         var arr =     $(".address1").children()
  52.         //拼接路线
  53.         var str = "";
  54.         for (var i = 0; i < arr.length; i++) {
  55.             str+=($(arr[i]).val());
  56.             str+="==>";
  58.         }
  59.         $(".luxiantu p").text(str);    
  60.         })
  62.         </script>
  64.     </body>
  65. </html>