jQuery基本介绍


typora-copy-images-to: images
typora-root-url: images

jQuery基本介绍

什么是jQuery?

jQuery是一个快速的、轻量的、功能丰富的js库。

jQuery的官网 http://jquery.com/

jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js+)。

jquey和js的关系

1 就jq底层是计算,就是把js进行了封装。

2 jq能够很方便获取节点,发送ajax。

为什么要学jQuery

使用JS操作DOM的时候,会遇到以下的一些缺点:

1. 获取元素的方法太少且长,麻烦。
2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。
3. 注册的事件会覆盖。
4. 有兼容性问题。
5. 实现动画很麻烦

伪数组:拥有length,可以通过下表获取元素,但是不能使用数组的方法。

let str = ‘abcdef’;

通过getxxx获取的页面节点,都是伪数组一类

使用jQuery的优点
1. 获取元素的方式非常的简单,而且非常的丰富
2. jQuery的隐式迭代特性,不再需要书写for循环语句。
3. 使用jQuery完全不用考虑兼容性问题。
4. jQuery提供了一系列动画相关的函数,使用非常方便。

没有对比,就没有伤害,有了对比,处处戳中要害。

版本介绍

官网下载地址:http://jquery.com/download/

jQuery版本有很多,分为1.x 2.x 3.x

大版本分类:

1.x版本:能够兼容IE678浏览器(最终版本2.2.42.x版本:不兼容IE678浏览器(最终版本2.2.4//jQuery目前正在更新的版本
3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678,3.x版本只是在原来的基础上增加了一些新的特性。

关于压缩版和未压缩版

jquery-2.2.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有可阅读性。
jquery-2.2.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。
Jquery的引入

引入本地jquery包

入口函数

入口函数的好处:

1. 等待文档加载完成,保证能够获取到元素
2. 形成了一个沙箱,防止全局变量污染。

window.onload = function(){ }

等待html再执行js代码

两种写法:

//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

jQuery入口函数与js入口函数的对比

1.	JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
2.	jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

jQuery对象与DOM对象

基本概念:

1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象
3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))

jQuery对象与DOM对象的区别:

1. DOM对象与jQuery对象的方法不能混用。
2. DOM对象可以和jQuery对象相互转化

DOM对象转换成jQuery对象

// 将dom对象放入,$()中,既可以进行转化
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象:

var $li = $(“li”);
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)

准备:html代码

    <ul>
        <li id="cloth">衣服</li>
        <li>裤子</li>
        <li>裤衩子</li>
        <li>袜子</li>
      </ul>

第一步: 使用js获取id,且修改背景颜色

    //   1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)
     var cloth = document.getElementById("cloth");
     cloth.style.backgroundColor = "pink";

第二步:使用jquery获取li,使用text()修改文本内容

     //2. 什么是jq对象:使用jq的方式获取到的元素就是jq对象
      var $li = $("li");
      console.log($li);
       $li.text("我改了内容");

第三步: 使用js对象调用jquery的text方法

    //js对象对象不能调用jq对象的方法
     var cloth = document.getElementById("cloth");
   cloth.text("呵呵");

第四步:jquery对象也不能直接调用js的方法:setAttribute()

 var $li = $("li");
 $li[0].setAttribute("name","hehe");

总结:

    DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象
    DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。  $(DOM对象)
    jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)

第五步:将js对象转化为Jquery对象

 var cloth = document.getElementById("cloth");
    
    //DOM对象就变成jQuery对象
 $(cloth).text("呵呵");

第六步:将jquey对象转化为js

 //jQuery对象怎么转换成DOM对象(取出来)
    var $li = $("li");
    $li[1].style.backgroundColor = "red";
    $li[2].style.backgroundColor = "yellow";

$的本质

其实就是一个函数,以后用 其实就是一个函数,以后用 其实就是一个函数,以后用的时候,记得跟小括号 $();

有三种用法:

  //$其实就是一个函数,以后用$的时候,记得跟小括号 $();
  //参数不同,功能就不同
  //3种用法
  //1. 参数是一个function, 入口函数
  $(function () {
    
  });
  console.log(typeof $);
  
  //2. $(domobj)  把dom对象转换成jquery对象
//  $(document).ready(function () {
//
//  });
  
  //3. 参数是一个字符串,用来找对象
  //$("div") $("div ul")   $(".current")

选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

css选择器

jQuery完全兼容css选择器

名称用法描述
ID选择器$(“#id”);获取指定ID的元素
类选择器$(“.class”);获取同一类class的元素
标签选择器$(“div”);获取同一类标签的所有元素
并集选择器$(“div,p,li”);使用逗号分隔,全部获取
交集选择器$(“div.redClass”);获取class为redClass的div元素
子代选择器$(“ul>li”);使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器$(“ul li”);使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

跟CSS的选择器一模一样。

过滤选择器【记住】

这类选择器都带冒号:

名称用法描述
:eq(index)$(“li:eq(2)”).css(“color”, ”red”);获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd$(“li:odd”).css(“color”, ”red”);获取到的li元素中,选择索引号为奇数的元素
:even$(“li:even”).css(“color”, ”red”);获取到的li元素中,选择索引号为偶数的元素
:first$(“li:first”).css(“color”, ”red”);获取到的li元素中的第一个
:last$(“li:last”).css(“color”, ”red”);获取到的li元素中的最后一个
筛选选择器(方法)[记住]

筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

名称用法描述
children(selector)$(“ul”).children(“li”)获取当前元素的所有子元素中的li元素
find(selector)$(“ul”).find(“li”);获取当前元素中的后代元素中的li元素
siblings(selector)$(“#first”).siblings(“li”);查找兄弟节点,不包括自己本身。
parent()$(“#first”).parent();查找父亲
eq(index)$(“li”).eq(2);相当于$(“li:eq(2)”),index从0开始
next()$(“li”).next()找下一个兄弟
prev()$(“li”).prev()找上一次兄弟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{height: 10px;}
			.top{width: 100px;height: 100px;}
			.one{background: red;}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="点击试试" />
		<div class="top"></div>
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<input type="text" id="search" value="" />
		<p>p1</p>
		<p></p>
		<p>p3</p>
		<ul class="list ul" id="">
			<li>html</li>
			<li>php</li>
			<li class="red">mysql</li>
			<li>ajax</li>
			<li>python</li>
			<li>javascript</li>
		</ul>
		<ul class="list" id="list">
			<li>html</li>
			<li>php</li>
			<li>mysql</li>
			<li>ajax</li>
			<li>python</li>
			<li>javascript</li>
		</ul>
		<!--<div id="cont">4</div>
		<div id="cont">5</div>
		<div id="cont">6</div>-->
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<div class="msg">
			<h3>三级标题</h3>
			<h3>三级标题</h3>
			<div class="xbox">
				<h3>三级标题</h3>
				<h3>三级标题</h3>
			</div>
		</div>
		<input type="text" name="user" id="a" value="" />
		<input type="password" name="user" id="b" />
		<input type="tel" id="c" value="" name="tel" />
	</body>
	<script src="../jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
//		$("#cont").css({background:"red"})
		
//		$(".box").css({background:"red"})
		
//		$("span").css({background:"red"})
         // 包含的节点
//		$(".msg h3").css({background:"red"})
//		$(".msg").find("h3").css({background:"red"})
		// 子节点
//		$(".msg>h3").css({background:"red"})
//		$(".msg").children("h3").css({background:"red"})
		// 后代选择
//		$(".msg .xbox h3").css({background:"red"})
//		$(".msg").children(".xbox").children("h3").css({background:"red"})
		
		// 下一个兄弟节点
//		$(".msg+input").css({background:"red"})
//		$(".msg").next("input").css({background:"red"})
		// 选中后面所有符合条件的节点
//		$(".msg~input").css({background:"red"})
//		$(".msg").nextAll("input").css({background:"red"})
        
        // 选中拥有指定属性的节点
//		$("input").css({background:"red"})
//		$("input[value]").css({background:"red"})
//		$("input[name=user]").css({background:"red"})
//		$("input[name=user][value]").css({background:"red"})
		// 选中第一个,和最后一个元素
//		$(".list li:first").css({background:"red"})
//		$(".list li").first().css({background:"red"})

//		$(".list li:last").css({background:"red"})
//		$(".list li").last().css({background:"red"})
		// 选中子元素中除了class=red之外的元素
//		$(".list li:not(.red)").css({background:"red"})
//		$(".list li").not(".red").css({background:"red"})
        //
//		$(".list li:even").css({background:"red"})
//		$(".list li:odd").css({background:"red"})

//		$(".list li:eq(2)").css({background:"red"})
//		$(".list li").eq(2).css({background:"red"})
		
//		$(".list li:contains(h)").css({background:"red"})
		
		
		

		// 是否存在class=red,指定条件存在,就设置样式
//		$(".list:has(.red)").css({border:"solid 1px black"})
		// .is()判断某一个class/id/tagName是否存在
//		console.log($(".list").eq(1).is(".ul"))
//		console.log($(".list").eq(0).is("#list"))	
//		console.log($(".list").eq(1).hasClass("ul")
		
		
	</script>
</html>

jquery事件用法

js中原有的事件,在js中都是支持的,但是都变成了方法,注意jquery中要去掉on

注:在jquery中事件都是不要加on前缀,原生js需要加on

①通过事件名直接绑定

语法:jquery对象.事件名( function(){} )   
如单击事件:$(‘div’).click( function(){} )

②在jq中可以使用bind方法进行事件的绑定:

1, bind(type,callback) :对事件进行绑定 只能绑定一个事件
参数说明:
type:指事件名  但是这里的事件名不要带on前缀。
fn:匿名函数,事件的处理程序 
2, bind({type:fn,type:fn}):对事件进行绑定  可以绑定多个事件
参数说明:
要求是一个JSON对象
type:指事件名,注事件名不带on前缀
fn:匿名函数  事件的处理程序 
        
1, unbind([type]) :对事件进行解绑  
参数说明:
		type:可缺省,type指解绑的事件名。如果没有指定事件名,则表示将所有的事	件都解绑!
③在jq中可以使用on方法进行事件的绑定:

③ 在jq中可以使用on方法进行事件的绑定:

jQuery1.7之后,jQuery用on统一了所有事件的处理方法。

1,  on(type,callback) 只能给页面已有的元素的绑定事件。
 参数说明:
type:事件名
callback:事件的处理程序
    
  给未来创建的元素绑定事件  
2,  on( type,selector,callback) 在已有的元素上绑定代理的事件。(事件委托的方式)
参数说明:
type :事件名
selector:选择器
callback:事件的处理程序
委托的调用形式:父选择器.on(type,子选择器,callback);

例1: 直接绑定方式

格式:jquery对象.事件名(function(event){ });

    //简单事件,给自己注册的事件
    $("div").click(function () {
      alert("哈哈");
    });

例2:使用bind方式绑定

    $("div").bind('click',function () {
      alert("哈哈");
    });

例3:使用on给原有和新增的元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-2.2.4.js"></script>
</head>
<body>
    <input type="button" value="点我新增">
    <ul>
        <li>哪吒</li>
        <li>我是小妖怪</li>
        <li>杀人不眨眼</li>
        <li>吃人不放盐</li>
        <li>一口气八个</li>
    </ul>
    <script>
      // on 不仅可以给页面中存在的元素绑定事件
      //   还可以个给新增的元素绑定事件
    //   $('ul').on('click',function(){
    //       console.log('哈哈')
    //   });
      
    //  $('li').on('click',function(){
    //      console.log('嘿嘿')
    //  })

      /// 点击之后新增一个li
      $('input').on('click',function(){
          var liObj = $('<li></li>');
              liObj.text('肚皮要撑破');
              liObj.appendTo('ul')
      });

      // 给新增的li邦定事件
      // $('父级元素').on(事件类型,指定元素,回调函数)
      $('ul').on('click','li',()=>{
          console.log('新增的也有事件')
      });
    </script>
</body>
</html>

Jquery中动画

三组基本动画

显示(show)与隐藏(hide)与切换是一组动画:
滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

show() hide() toggle()三个方法参数一致

show([speed], [callback]);
speed(可选):动画的执行时间
	 1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal
	 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
callback(可选):执行完动画后执行的回调函数

例1:使用show与hide实现红色div的显示,与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #f99;
            display: none;
        }
    </style>
</head>
<body>

    <button>展示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>

    
    <script src="./jquery.js"></script>
    <script>
        $(function(){
            // show(speed, callback)
            // hide(speed,callback)
            // toggle(speed,callback)
            // 不传参,就没有动画效果
            // 主要修改的时候元素的width、height、opacity
            // 三个参数都是可选的
            
            // 参数:
            // speed: 动画时长,单位是ms,默认还提供了三个字符串的值,可选
            //          "slow": 600
            //          "normal": 400
            //          "fast": 200
            //          如果传递的是除了上面三个之外的字符串,取normal
            // callback: 动画结束的时候来执行的函数,可选
            $("button").eq(0).click(function(){
                $("div").show(1000, function(){
                    console.log("show 动画结束了");
                });
            })

            $("button").eq(1).click(function(){
                $("div").hide(1000, function(){
                    console.log("hide 动画结束了");
                });
            })

            $("button").eq(2).click(function(){
                $("div").toggle(1000, function(){
                    console.log("toggle 动画结束了");
                });
            })
        })
    </script>
</body>
</html>

例2: 使用slide系列,类似卷帘门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #f99;
            display: none;
        }
    </style>
</head>
<body>

    <button>展示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>

    
    <script src="./jquery-2.4.4.js"></script>
    <script>
        $(function(){
            // slideDown(speed, easing, callback)
            // slideUp(speed, easing, callback)
            // slideToggle(speed, easing, callback)
            // 不传参,有动画效果,normal = 400
            // 参数和show方法一样,主要是动画效果不同
            $("button").eq(0).click(function(){
                $("div").slideDown(3000, function(){
                    console.log("slideDown 运动结束了");
                });
            })

            $("button").eq(1).click(function(){
                $("div").slideUp(3000, function(){
                    console.log("slideUp 运动结束了");
                });
            })

            $("button").eq(2).click(function(){
                $("div").slideToggle(3000, function(){
                    console.log("slideToggle 运动结束了");
                });
            })


            // fadeIn()
            // fadeOut()
            // fadeToggle()
        })
    </script>
</body>
</html>

例3:fade的淡入与淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #f99;
            display: none;
        }
    </style>
</head>
<body>

    <button>展示</button>
    <button>隐藏</button>
    <button>切换</button>
    <button>淡一般</button>
    <div></div>

    
    <script src="./jquery-1.4.4.js"></script>
    <script>
        $(function(){
            // fadeIn(speed, easing, callback)
            // fadeOut(speed, easing, callback)
            // fadeToggle(speed, easing, callback)
            // 不传参,有动画效果,normal = 400
            // 参数和show方法一样,主要是动画效果不同
            $("button").eq(0).click(function(){
                $("div").fadeIn(3000, function(){
                    console.log("slideDown 运动结束了");
                });
            })

            $("button").eq(1).click(function(){
                $("div").fadeOut(3000, function(){
                    console.log("slideUp 运动结束了");
                });
            })

            $("button").eq(2).click(function(){
                $("div").fadeToggle(3000, function(){
                    console.log("slideToggle 运动结束了");
                });
            })
          
            $("button").eq(3).click(function(){
			$(".box").fadeTo(1000,0.5)
		})

            // fadeIn()
            // fadeOut()
            // fadeToggle()
        })
    </script>
</body>
</html>

自定义动画
语法
$(selector).animate({params},[speed],[easing],[callback]);
// {params}:要执行动画的CSS属性,带数字(必选)
// speed:执行动画时长(可选)
// easing:执行效果,默认为swing(缓动)  可以是linear(匀速)
// callback:动画执行完后立即执行的回调函数(可选)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
                width: 100px;
                height:100px;
                background: red;
                position: absolute;
                top: 50px;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn1" id="btn1" value="开始" />
		<div class="box"></div>
	</body>
	<script src="./jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

基本动画案例

一次性全部执行完毕

	//情况1 基本动画案例
		$("#btn1").click(function(){
			$(".box").animate({
				width:"+=100px", // 在原来基础上添加100px
				height:200,   // 目标值
				left:300,
				top:200
			})
		})
回调式动画

使用回调函数,执行一个样式完成后,在函数函数中,再执行另一个


		$("#btn1").click(function(){
          
			$(".box").animate({
				width:"+=100px"
			},function(){
				$(".box").animate({
					height:200
				})
			})
链式调用

jq提供了动画队列来实现依次执行动画的效果, 给元素的动画队列添加多个动画,依次来执行动画队列里面的动画, 就是链式编程的写法

 
      // 如果链式的动画调用的还是之前那个元素
			$(".box").animate({
				width:"+=200px"
			}).animate({
			   height:"+=200px"
			})
特殊情况

1 如在动画完成后,需要通过.css(),设置,样式,则必须使用回调函数

			在animate之后,调用其他方法,会异步执行
			$(".box").animate({
				width:"+=200px"
     		}).animate({
				height:"+=200px"
			}).css({background:"yellow"})
			
//			只能使用回调函数
			$(".box").animate({
				width:"+=200px"
			}).animate({
				height:"+=200px"
			},function(){
				$(".box").css({
					background:"yellow"
				})
			}).animate({
				left:300
			})

2 也可以单独设置一个函数,来完成动画完成后的其他操作

queue()在所有的动画结束后,调用

			
//		情况四	jQuery单独设置了一个方法,用来解决其他方法的异步执行,等同于回调函数
   $('input').click(function(){
         $('.box').animate({width:300},2000)
                  .animate({left:500},2000)
                  .queue(()=>{
                       $('.box').css({background:'blue'});
                 })
    })

动画的小案例

$(‘#div1’).slideDown(1000); //向下展开,下拉。1000毫秒,表示动画展开过程时间。

$(‘#div1’).slideUp(1000); //向上收起

$(‘#div1’).slideToggle(1000); //合成展开收起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #f99;
            position: relative;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>swing</div>

    <script src="./jquery-2.2.4.js"></script>
    <script>

            // 动画队列
            // jq提供了动画队列来实现依次执行动画的效果
            // 给元素的动画队列添加多个动画,依次来执行动画队列里面的动画
            // 就是链式编程的写法
            // $("div").animate({
            //     left: 500
            // }, 1000)
            // .animate({
            //     top: 300
            // }, 1000)
            // .animate({
            //     borderRadius: 50
            // }, 1000)
            // .slideUp(1000)
            // .slideDown(1000);


            // 有了动画队列的好处:
            //  依次执行动画
            // 坏处:
            //  如果元素动画频发的触发,就会不停的去做动画队列的里面的动画
        })
    </script>
</body>
</html>

动画队列与动画的停止

在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行(联想:火车进站)。

//stop方法:停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果
动画的延迟
jq对象.delay(2000).animate()
以毫秒为单位

例:让所有的动画延迟2s执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{width: 100px;height:100px;background: red;position: absolute;}
		</style>
	</head>
	<body>
		<input type="button" name="btn1" id="btn1" value="开始" />
		<input type="button" name="btn1" id="btn2" value="停止" />
		<div class="box"></div>
	</body>
	<script src="../jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$("#btn1").click(function(){
			
			$(".box").delay(2000).animate({
				left:500
			},2000).delay(2000).animate({
				top:300
			},2000).delay(2000).animate({
				left:0
			},2000).delay(2000).animate({
				top:40
			},2000)
			
		})
		
		$("#btn2").click(function(){
			$(".box").stop(true,false)
		})
		
	
	</script>
</html>

动画的队列
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div></div>

<script src="jquery-2.2.4.js"></script>
<script>
  $(function () {
    $("#btn").click(function () {
      
      //把这些动画存储到一个动画队列里面
      $("div").animate({left:800})
        .animate({top:400})
        .animate({width:300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({width:100,height:100})
    })
  });
</script>
</body>
</html>

动画的停止 stop方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div>

<script src="jquery-2.2.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });
    
    
    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false
      
      
      //.stop().animate();
      $("div").stop(true, true);
    })
  });
</script>
</body>
</html>

腾讯课堂mysql

https://ke.qq.com/course/435487?taid=3773661345916191

.animate({top:400})
.animate({width:300,height:300})
.animate({top:0})
.animate({left:0})
.animate({width:100,height:100})
})
});

```

动画的停止 stop方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div>

<script src="jquery-2.2.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });
    
    
    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false
      
      
      //.stop().animate();
      $("div").stop(true, true);
    })
  });
</script>
</body>
</html>

腾讯课堂mysql

https://ke.qq.com/course/435487?taid=3773661345916191

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V06A24dA-1663214003194)(/1565484400797.png)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值