01-jQuery的介绍

1.为什么要使用jQuery

在用js写代码时，会遇到一些问题：

  • window.onload 事件有事件覆盖的问题，因此只能写一个事件。

  • 代码容错性差。

  • 浏览器兼容性问题。

  • 书写很繁琐，代码量多。

  • 代码很乱，各个页面到处都是。

  • 动画效果很难实现。

jQuery的出现，可以解决以上问题。

 什么是 jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

关于jQuery的相关资料：

学习jQuery，主要是学什么

初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功API。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

jQuery的第一个代码

用原生js来实现下面代码效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: green;
  11.             margin-top: 20px;
  12.             display: none;
  13.         }
  14.     </style>
  15.  
  16.     <script type="text/javascript">
  17.         window.onload = function () {
  18.             var oBtn = document.getElementsByTagName('button')[0];
  19.             var divArr = document.getElementsByTagName('div');
  20.             oBtn.onclick = function () {
  21.                 for (var i = 0; i < divArr.length; i++) {
  22.                     divArr[i].style.display = "block";
  23.                     divArr[i].innerHTML = "赵云";
  24.                 }
  25.             }
  26.         }
  27.     </script>
  28.  
  29. </head>
  30. <body>
  31.  
  32.     <button>操作</button>
  33.     <div></div>
  34.     <div></div>
  35.     <div></div>
  36.  
  37. </body>
  38. </html>

如果用 jQuery 来写，保持其他的代码不变，<script>部分的代码修改为：（需要提前引入 ）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: green;
  11.             margin-top: 20px;
  12.             display: none;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <button>操作</button>
  18.     <div></div>
  19.     <div></div>
  20.     <div></div>
  21.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  22.     <script type="text/javascript">
  23.         $(document).ready(function(){
  24.             // 获取dom元素
  25.             var oBtn = $('button'); //根据标签名获取元素
  26.             var oDiv = $('div'); //根据标签名获取元素
  27.             oBtn.click(function(){
  28.                 oDiv.show(1000);//显示盒子
  29.                 oDiv.html('赵云'); // 设置内容
  30.             });//事件是通过方法绑定的
  31.         })
  32.     </script>
  33.  
  34. </body>
  35. </html>

jQuery 的两大特点

  • 链式编程：比如.show()和.html()可以连写成.show().html()。

  • 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

jQuery 的使用 

使用 jQuery 的基本步骤 

（1）引包

（2）入口函数

（3）功能实现代码（事件处理）

如图

主要：导包的代码一定要放在js代码的最上面。

jQuery 的版本 

jQuery 有两个大版本：

  • 1.x版本：最新版为 v1.11.3。

  • 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。

  • 3.x版本。

下载jQuery包之后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js

它们的区别是：

  • 第一个是未压缩版，第二个是压缩版。

  • 平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。

jQuery 的入口函数和 $ 符号 

入口函数（重要） 

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

  1.         //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
  2.         //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
  3.        window.onload = function () {
  4.            alert(1);
  5.        }

而 jQuery的入口函数，有以下几种写法：

写法一：

  1.  //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
  2.        $(document).ready(function () {
  3.            alert(1);
  4.        })

写法二：（写法一的简洁版）

  1.  //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
  2.        $(function () {
  3.            alert(1);
  4.        });

写法三：

  1.   //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
  2.        $(window).ready(function () {
  3.            alert(1);
  4.        })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的$符号 

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

  1. <script src="jquery-3.3.1.min.js"></script>
  2. <script>
  3.     console.log($);
  4.     console.log(jQuery);
  5.     console.log($===jQuery)
  6. </script>

打印结果：

从打印结果可以看出，$ 代表的就是 jQuery。

那怎么理解jQuery里面的 $ 符号呢？

$ 实际上表示的是一个函数名 如下：

  1.     $(); // 调用上面我们自定义的函数$
  2.  
  3.     $(document）.ready(function(){}); // 调用入口函数
  4.  
  5.     $(function(){}); // 调用入口函数
  6.  
  7.     $(“#btnShow”) // 获取id属性为btnShow的元素
  8.  
  9.     $(“div”) // 获取所有的div标签元素

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。

jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

js中的DOM对象 和 jQuery对象 比较（重点，难点） 

二者的区别 

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

  1. <div></div>
  2. <div id="app"></div>
  3. <div class="box"></div>
  4. <div class="box"></div>
  5. <div></div

通过原生 js 获取这些元素节点的方式是：

  1.     var myBox = document.getElementById("app");           //通过 id 获取单个元素
  2.     var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
  3.     var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

  1.   //获取的是数组，里面包含着原生 JS 中的DOM对象。
  2. 　　console.log($('#app'));
  3. 　　console.log($('.box'));
  4. 　　console.log($('div'));

设置当前4个div的样式：

  1. 　　　　　　$('div').css({
  2.                 'width': '200px',
  3.                 'height': '200px',
  4.                 "background-color":'red',
  5.                 'margin-top':'20px'
  6.             })

由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

 二者的相互转换

1、 DOM 对象 转为 jQuery对象： 

  1. $(js对象);

2、jQuery对象 转为 DOM 对象：

  1.   jquery对象[index];      //方式1（推荐）
  2.  
  3.   jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

  1. $('div')[1].style.backgroundColor = 'yellow';
  2. $('div')[3].style.backgroundColor = 'green';

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

举例：

隔行换色

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-3.3.1.js"></script>
  7.     <script>
  8.         //入口函数
  9.         jQuery(function () {
  10.             var jqLi = $("li");
  11.             for (var i = 0; i < jqLi.length; i++) {
  12.                 if (i % 2 === 0) {
  13.                     //jquery对象，转换成了js对象
  14.                     jqLi[i].style.backgroundColor = "pink";
  15.                 } else {
  16.                     jqLi[i].style.backgroundColor = "yellow";
  17.                 }
  18.             }
  19.         });
  20.     </script>
  21. </head>
  22. <body>
  23. <ul>
  24.     <li>小马哥</li>
  25.     <li>小马哥</li>
  26.     <li>小马哥</li>
  27.     <li>小马哥</li>
  28.     <li>小马哥</li>
  29.     <li>小马哥</li>
  30. </ul>
  31. </body>
  32. </html>

效果如下：

02-jQuery的选择器

我们以前在CSS中学习的选择器有：

今天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

1、jQuery 的基本选择器 

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div></div>
  9.     <div id="box"></div>
  10.     <div class="box"></div>
  11.     <div class="box"></div>
  12.     <div></div>
  13.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  14.     <script type="text/javascript">
  15.         //入口函数
  16.         $(function(){
  17.             //三种方式获取jquery对象
  18.             var jqBox1 = $("#box");
  19.                    var jqBox2 = $(".box");
  20.             var jqBox3 = $('div');
  21.  
  22.             //操作标签选择器
  23.             jqBox3.css('width', '100');
  24.             jqBox3.css('height', 100);
  25.             jqBox3.css('background-color', 'red');
  26.             jqBox3.css('margin-top', 10);
  27.  
  28.             //操作类选择器(隐式迭代，不用一个一个设置)
  29.                     jqBox2.css("background", "green");
  30.                     jqBox2.text('哈哈哈')
  31.  
  32.                     //操作id选择器
  33.                     jqBox1.css("background", "yellow");
  34.  
  35.         })
  36.     </script>
  37.  
  38. </body>
  39. </html>

效果如下：

2、层级选择器

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-3.3.1.js"></script>
  7.     <script>
  8.         $(function () {
  9.             //获取ul中的li设置为粉色
  10.             //后代：儿孙重孙曾孙玄孙....
  11.             var jqLi = $("ul li");
  12.             jqLi.css("margin", 5);
  13.             jqLi.css("background", "pink");
  14.  
  15.             //子代：亲儿子
  16.             var jqOtherLi = $("ul>li");
  17.             jqOtherLi.css("background", "red");
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  22. <ul>
  23.     <li>111</li>
  24.     <li>222</li>
  25.     <li>333</li>
  26.     <ol>
  27.         <li>aaa</li>
  28.         <li>bbb</li>
  29.         <li>ccc</li>
  30.     </ol>
  31. </ul>
  32. </body>
  33. </html>

效果如下：

3、基本过滤选择器

解释：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>基本过滤选择器</title>
  6.     </head>
  7.     <body>
  8.         <ul>
  9.             <li>哈哈哈哈，基本过滤选择器</li>
  10.             <li>嘿嘿嘿</li>
  11.             <li>天王盖地虎</li>
  12.             <li>小鸡炖蘑菇</li>
  13.  
  14.         </ul>
  15.     </body>
  16.     <script src="jquery-3.3.1.js"></script>
  17.     <script type="text/javascript">
  18.  
  19.         $(function(){
  20.             //获取第一个 :first ,获取最后一个 :last
  21.  
  22.             //奇数
  23.             $('li:odd').css('color','red');
  24.             //偶数
  25.             $('li:even').css('color','green');
  26.  
  27.             //选中索引值为1的元素 *
  28.             $('li:eq(1)').css('font-size','30px');
  29.  
  30.             //大于索引值1
  31.             $('li:gt(1)').css('font-size','50px');
  32.  
  33.             //小于索引值1
  34.             $('li:lt(1)').css('font-size','12px');
  35.  
  36.         })
  37.  
  38.     </script>
  39. </html>

效果如下：

4、属性选择器

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.          <div id="box">
  9.             <h2 class="title">属性元素器</h2>
  10.             <!--<p class="p1">我是一个段落</p>-->
  11.             <ul>
  12.                 <li id="li1">分手应该体面</li>
  13.                 <li class="what" id="li2">分手应该体面</li>
  14.                 <li class="what">分手应该体面</li>
  15.                 <li class="heihei">分手应该体面</li>
  16.  
  17.             </ul>
  18.  
  19.             <form action="" method="post">
  20.  
  21.                 <input name="username" type='text' value="1" checked="checked"></input>
  22.                 <input name="username1111" type='text' value="1"></input>
  23.                 <input name="username2222" type='text' value="1"></input>
  24.                 <input name="username3333" type='text' value="1"></input>
  25.                 <button class="btn-default">按钮1</button>
  26.                 <button class="btn-info">按钮1</button>
  27.                 <button class="btn-success">按钮1</button>
  28.                 <button class="btn-danger">按钮1</button>
  29.  
  30.             </form>
  31.         </div>
  32.     </body>
  33.     <script src="jquery-3.2.1.js"></script>
  34.     <script type="text/javascript">
  35.  
  36.         $(function(){
  37.             //标签名[属性名] 查找所有含有id属性的该标签名的元素
  38.             $('li[id]').css('color','red');
  39.  
  40.             //匹配给定的属性是what值得元素
  41.             $('li[class=what]').css('font-size','30px');
  42.             //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
  43.             $('li[class!=what]').css('font-size','50px');
  44.  
  45.             //匹配给定的属性是以某些值开始的元素
  46.             $('input[name^=username]').css('background','gray');
  47.             //匹配给定的属性是以某些值结尾的元素
  48.             $('input[name$=222]').css('background','greenyellow');
  49.  
  50.             //匹配给定的属性是以包含某些值的元素
  51.             $('button[class*=btn]').css('background','red')
  52.  
  53.         })
  54.  
  55.     </script>
  56. </html>

效果如下：

5.筛选选择器

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.          <div id="box">
  9.             <p class="p1">
  10.                 <span>我是第一个span标签</span>
  11.                 <span>我是第二个span标签</span>
  12.                 <span>我是第三个span标签</span>
  13.             </p>
  14.             <button>按钮</button>
  15.         </div>
  16.         <ul>
  17.             <li class="list">2</li>
  18.             <li>3</li>
  19.             <li>4</li>
  20.             <li>5</li>
  21.         </ul>
  22.     </body>
  23.     <script src="jquery-3.2.1.js"></script>
  24.     <script type="text/javascript">
  25.  
  26.         //获取第n个元素 数值从0开始
  27.         $('span').eq(1).css('color','#FF0000');
  28.  
  29.         //获取第一个元素 :first :last    点语法  ：get方法 和set方法
  30.         $('span').last().css('color','greenyellow');
  31.         $('span').first().css('color','greenyellow');
  32.  
  33.         //查找span标签的父元素（亲的）
  34.         $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
  35.  
  36.         //选择所有的兄弟元素（不包括自己）
  37.                   $('.list').siblings('li').css('color','red');
  38.  
  39.                 //查找所有的后代元素
  40.                    $('div').find('button').css('background','yellow');
  41.  
  42.                 //不写参数代表获取所有子元素。
  43.                    $('ul').children().css("background", "green");
  44.                    $('ul').children("li").css("margin-top", 10);
  45.  
  46.     </script>
  47. </html>

效果如下：

选择器介绍完毕，内容比较多，大家根据之前学习到的css选择器可以更好的使用jquery选择器的用法

03-jQuery动画效果

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画 

方式一：

  1.  $("div").show();

方式二：

  1. $('div').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

  1. $("div").show("slow");

参数可以是：

  • slow 慢：600ms

  • normal 正常：400ms

  • fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

  1.  //show(毫秒值，回调函数;
  2.     $("div").show(5000,function () {
  3.         alert("动画执行完毕！");
  4.     });

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

隐藏动画 

方式参照上面的show()方法的方式。如下：

  1.     $(selector).hide();
  2.  
  3.     $(selector).hide(1000); 
  4.  
  5.     $(selector).hide("slow");
  6.  
  7.     $(selector).hide(1000, function(){});

实现点击按钮显示盒子，再点击按钮隐藏盒子

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #box{
  8.                 width: 200px;
  9.                 height: 200px;
  10.                 background-color: green;
  11.                 border: 1px solid red;
  12.                 display: none;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div id="box">
  18.         </div>
  19.         <button id="btn">隐藏</button>
  20.     </body>
  21.     <script src="jquery-3.3.1.js"></script>
  22.  
  23.     <script type="text/javascript">
  24.  
  25.         //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
  26.         var isShow = true;
  27.         $('#btn').click(function(){
  28.             if(isShow){
  29.                 $('#box').show('slow',function(){
  30.                     $(this).text('盒子出来了');
  31.                     $('#btn').text('显示');
  32.                     isShow = false;
  33.                 })
  34.             }else{
  35.                 $('#box').hide(2000,function(){
  36.                     $(this).text('');
  37.                     $('#btn').text('隐藏');
  38.                     isShow = true;
  39.  
  40.                 })
  41.             }
  42.         })
  43.  
  44.     </script>
  45. </html>

开关式显示隐藏动画

  1. $('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

代码如下：

  1.     $('#btn').click(function(){
  2.             $('#box').toggle(3000,function(){
  3.                 $(this).text('盒子出来了');
  4.                 if ($('#btn').text()=='隐藏') {
  5.                     $('#btn').text('显示');
  6.                 }else{
  7.                     $('#btn').text('隐藏');
  8.                 }
  9.             });
  10.         })

滑入和滑出

1、滑入动画效果：（类似于生活中的卷帘门）

  1. $(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2、滑出动画效果：

  1.  $(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

  1. $(selector).slideToggle(speed, 回调函数);

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             background-color: green;
  12.         }
  13.     </style>
  14.  
  15.     <script src="jquery-3.3.1.js"></script>
  16.     <script>
  17.         $(function () {
  18.             //点击按钮后产生动画
  19.             $("button:eq(0)").click(function () {
  20.  
  21.                 //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
  22.                 $("div").slideDown(2000, function () {
  23.                     alert("动画执行完毕！");
  24.                 });
  25.             })
  26.  
  27.             //滑出动画
  28.             $("button:eq(1)").click(function () {
  29.  
  30.                 //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
  31.                 $("div").slideUp(2000, function () {
  32.                     alert("动画执行完毕！");
  33.                 });
  34.             })
  35.  
  36.             $("button:eq(2)").click(function () {
  37.                 //滑入滑出切换（同样有四种用法）
  38.                 $("div").slideToggle(1000);
  39.             })
  40.  
  41.         })
  42.     </script>
  43. </head>
  44. <body>
  45. <button>滑入</button>
  46. <button>滑出</button>
  47. <button>切换</button>
  48. <div></div>
  49.  
  50. </body>
  51. </html>

淡入淡出动画

1、淡入动画效果：

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

作用：让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果：

  1. $(selector).fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果：

  1. $(selector).fadeToggle('fast', callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             /*透明度*/
  12.             opacity: 0.5;
  13.             background-color: red;
  14.         }
  15.     </style>
  16.  
  17.     <script src="jquery-3.3.1.js"></script>
  18.     <script>
  19.         $(function () {
  20.             //点击按钮后产生动画
  21.             $("button:eq(0)").click(function () {
  22.  
  23. //                //淡入动画用法1:   fadeIn();   不加参数
  24.                 $("div").fadeIn();
  25.  
  26. //                //淡入动画用法2:   fadeIn(2000);   毫秒值
  27. //                $("div").fadeIn(2000);
  28. //                //通过控制  透明度和display
  29.  
  30.                 //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  31. //                $("div").fadeIn("slow");
  32. //                $("div").fadeIn("fast");
  33. //                $("div").fadeIn("normal");
  34.  
  35.                 //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
  36. //                $("div").fadeIn(5000,function () {
  37. //                    alert("动画执行完毕！");
  38. //                });
  39.             })
  40.  
  41.             //滑出动画
  42.             $("button:eq(1)").click(function () {
  43. //                //滑出动画用法1:   fadeOut();   不加参数
  44.                $("div").fadeOut();
  45.  
  46. //                //滑出动画用法2:   fadeOut(2000);   毫秒值
  47. //                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
  48. //                //通过控制  透明度和display
  49.  
  50.                 //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  51. //                $("div").fadeOut("slow");
  52. //                $("div").fadeOut("fast");
  53. //                $("div").fadeOut("normal");
  54.  
  55.                 //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
  56. //                $("div").fadeOut(2000,function () {
  57. //                    alert("动画执行完毕！");
  58. //                });
  59.             })
  60.  
  61.             $("button:eq(2)").click(function () {
  62.                 //滑入滑出切换
  63.                 //同样有四种用法
  64.                 $("div").fadeToggle(1000);
  65.             })
  66.  
  67.             $("button:eq(3)").click(function () {
  68.                 //改透明度
  69.                 //同样有四种用法
  70.                 $("div").fadeTo(1000, 0.5, function () {
  71.                     alert(1);
  72.                 });
  73.             })
  74.         })
  75.     </script>
  76. </head>
  77. <body>
  78. <button>淡入</button>
  79. <button>淡出</button>
  80. <button>切换</button>
  81. <button>改透明度为0.5</button>
  82. <div></div>
  83.  
  84. </body>
  85. </html>

自定义动画

语法：

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

作用：执行一组CSS属性的自定义动画。

  • 第一个参数表示：要执行动画的CSS属性（必选）

  • 第二个参数表示：执行动画时长（可选）

  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             position: absolute;
  9.             left: 20px;
  10.             top: 30px;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: green;
  14.         }
  15.     </style>
  16.     <script src="jquery-3.3.1.js"></script>
  17.     <script>
  18.         jQuery(function () {
  19.             $("button").click(function () {
  20.                 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
  21.                 var json2 = {
  22.                     "width": 100,
  23.                     "height": 100,
  24.                     "left": 100,
  25.                     "top": 100,
  26.                     "border-radius": 100,
  27.                     "background-color": "red"
  28.                 };
  29.  
  30.                 //自定义动画
  31.                 $("div").animate(json, 1000, function () {
  32.                     $("div").animate(json2, 1000, function () {
  33.                         alert("动画执行完毕！");
  34.                     });
  35.                 });
  36.  
  37.             })
  38.         })
  39.     </script>
  40. </head>
  41. <body>
  42. <button>自定义动画</button>
  43. <div></div>
  44. </body>
  45. </html>

停止动画

  1. $(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

  • true：后续动画不执行。

  • false：后续动画会执行。

第二个参数：

  • true：立即执行完成当前动画。

  • false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         ul {
  13.             list-style: none;
  14.         }
  15.  
  16.         .wrap {
  17.             width: 330px;
  18.             height: 30px;
  19.             margin: 100px auto 0;
  20.             padding-left: 10px;
  21.             background-color: pink;
  22.         }
  23.  
  24.         .wrap li {
  25.             background-color: green;
  26.         }
  27.  
  28.         .wrap > ul > li {
  29.             float: left;
  30.             margin-right: 10px;
  31.             position: relative;
  32.         }
  33.  
  34.         .wrap a {
  35.             display: block;
  36.             height: 30px;
  37.             width: 100px;
  38.             text-decoration: none;
  39.             color: #000;
  40.             line-height: 30px;
  41.             text-align: center;
  42.         }
  43.  
  44.         .wrap li ul {
  45.             position: absolute;
  46.             top: 30px;
  47.             display: none;
  48.         }
  49.     </style>
  50.     <script src="jquery-3.3.1.js"></script>
  51.     <script>
  52.         //入口函数
  53.         $(document).ready(function () {
  54.             //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
  55.             var jqli = $(".wrap>ul>li");
  56.  
  57.             //绑定事件
  58.             jqli.mouseenter(function () {
  59.                 $(this).children("ul").stop().slideDown(1000);
  60.             });
  61.  
  62.             //绑定事件(移开隐藏)
  63.             jqli.mouseleave(function () {
  64.                 $(this).children("ul").stop().slideUp(1000);
  65.             });
  66.         });
  67.     </script>
  68.  
  69. </head>
  70. <body>
  71. <div class="wrap">
  72.     <ul>
  73.         <li>
  74.             <a href="javascript:void(0);">一级菜单1</a>
  75.             <ul>
  76.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  77.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  78.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  79.             </ul>
  80.         </li>
  81.         <li>
  82.             <a href="javascript:void(0);">二级菜单1</a>
  83.             <ul>
  84.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  85.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  86.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  87.             </ul>
  88.         </li>
  89.         <li>
  90.             <a href="javascript:void(0);">三级菜单1</a>
  91.             <ul>
  92.                 <li><a href="javascript:void(0);">三级菜单2</a></li>
  93.                 <li><a href="javascript:void(0);">三级菜单3</a></li>
  94.                 <li><a href="javascript:void(0);">三级菜单4</a></li>
  95.             </ul>
  96.         </li>
  97.     </ul>
  98. </div>
  99. </body>
  100. </html>

ps:

  1. javascript:void(0); //跟javascript:;效果一样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。

python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)的更多相关文章

  1. python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  2. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  3. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  4. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  5. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  6. Python全栈开发

    Python全栈开发 一文让你彻底明白Python装饰器原理,从此面试工作再也不怕了. 一.装饰器 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“ ...

  7. Win10构建Python全栈开发环境With WSL

    目录 Win10构建Python全栈开发环境With WSL 启动WSL 总结 对<Dev on Windows with WSL>的补充 Win10构建Python全栈开发环境With ...

  8. python全栈开发之正则表达式和python的re模块

    正则表达式和python的re模块 python全栈开发,正则表达式,re模块 一 正则表达式 正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的 ...

  9. python全栈开发目录

    python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...

  10. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

随机推荐

  1. HTML - form 表单提交

    form 表单提交 数据发送 disabled:不发送 display_none:发送 type_hidden:发送 readonly:发送 测试 html: <!DOCTYPE html> ...

  2. rpm安装软件时提示warning: *.rpm: Header V3 RSA/SHA256 Signature, keykey ID c105b9de

    在RedHat下有时候用rpm安装软件是会出现下面则中错误 1.安装时提示:warning: *.rpm: Header V3 RSA/SHA256 Signature, keykey ID c105 ...

  3. astype()函数

    1astype()函数可用于转化dateframe某一列的数据类型 如下将dateframe某列的str类型转为int,注意astype()没有replace=True的用法,想要在原数据上修改,要写 ...

  4. win10+jdk+mysql+tomcat+jpress环境搭建与部署

    本机搭建jpress用于接口测试的学习 目录 1.环境与工具准备 2.mysql服务端安装 3.tomcat配置 4.jpress部署 1.环境与工具准备 a.服务器为本机为win10 64位 b.j ...

  5. Good teachers,they inspire you, they entertain you,and you end up learning a ton even when you don't know it.

    pardon. v. 原谅.抱歉.再说一次 honourable.adj.值得钦佩的 specification.n.规格.标准 amongst.prep.在...中 gallon.n.加仑 comp ...

  6. TypeScript + Webpack 环境搭建

    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...

  7. SpringBoot 参数检查 Controller中检查参数是否合法

    springboot 验证 默认使用的是hibernate validator ,不用额外增加引用包,springboot已经内置包含. 设置pom相关依赖 <?xml version=&quo ...

  8. TFS版本对应

    原文: MSDN Operating systems TFS can be installed on a Windows server or client operating system. TFS ...

  9. SCUT - 274 - CC B-Tree - 树形dp

    https://scut.online/p/274 首先要判断是一颗树,并且找出树的直径. 是一棵树,首先边恰好有n-1条,其次要连通,这两个条件已经充分了,当然判环可以加速. 两次dfs找出直径,一 ...

  10. JS相比TS的缺点（或TS的优点）

    JS只有在运行时,才会抛出错误, JS里有任何的拼写错误 都不会提示错误 JS运行时报的错,指向也未必是错误的源头,也就是说:A类里因为书写代码有误,会造成运行时其他的类报错如B JS无法做到不同pa ...