2. it技术
  3. jQuery入门（三）--- jQuery语法

jQuery入门（三）--- jQuery语法

it2025-04-28  15

jQuery入门（三）--- jQuery语法

5、jQuery动画-显示show（）隐藏hide（）5.1 三组基本动画5.2 自定义动画 animate5.3 动画队列--stop函数 6、动态创建元素7、jQuery添加节点的几种方法8、清空节点9、克隆节点clone（）

5、jQuery动画-显示show（）隐藏hide（）

5.1 三组基本动画

+ 显示（show（））与隐藏（hide（））是一组动画 $obj.show([speed],[callback]); //参数1：speed(可选)；动画的执行时间 //1.如果不传，就没有动画效果。如果是slidde和fade系列，会默认为normal //2.毫秒值（比如1000），动画再1000毫秒执行完成（推荐） //3.固定字符串，slow（600），normal（400），fast（200），如果传递其他字符串，则默认为normal。 //参数2：callback（可选）；执行完动画后执行的回调函数 + 滑入（slideDown（）） 与 滑出（slideUp（））与切换（slideToggle（）），效果与卷帘门类似 + 淡入（fadeIn（））与淡出（fadeOut（））与切换（fadeToggle（））

10种jQuery动画案例：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> div{ width: 200px; height: 200px; background-color: red; display:none; } </style> <body> <input type="button" value="显示" id="show"/> <input type="button" value="隐藏" id="hide"/> <input type="button" value="切换" id="toggle"/> <br/> <input type="button" value="滑入" id="slideDown"> <input type="button" value="滑出" id="slideUp"> <input type="button" value="切换" id="slideToggle"> <br/> <input type="button" value="淡入" id="fadeIn"/> <input type="button" value="淡出" id="fadeOut"/> <input type="button" value="切换" id="fadeToggle"/> <input type="button" value="淡入到哪里" id="fadeTo"/> <br/> <div id="div1"></div> <script> $(function(){ //1、显示 show（）： //参数1：动画执行时间,毫秒数，或者代表时长的字符串 fast200 normal400 slow6 00 //参数2：动画执行完成后的回调函数 $('#show').click(function(){ //给id为div1的元素动画显示 //1.1 如果show（）这个方法没有参数，就没有动画效果 //$('#div1').show(); //1.2 要添加效果，给show添加参数, 回调函数 $('#div1').show(2000,function(){ alert('动画执行完毕了'); }); }) //2、隐藏 hide（） $('#hide').click(function(){ //让id为div1的元素动画隐藏 //2.1 没有参数没有动画效果 //$('#div1').hide(); //2.2 要添加效果，给hide添加参数, 回调函数 $('#div1').hide(2000,function(){ alert('隐藏了'); }); }) //3、切换状态 toggle（） $('#toggle').click(function(){ $('#div1').toggle(1000); }) //4、滑入 slideDown(); //参数1：动画执行时间 //参数2：动画执行完成后的回调函数 $('#slideDown').click(function(){ //让id为div1的元素滑入 //没有参数，相当于给默认时长normal $('#div1').slideDown(2000,function(){ alert('已经滑入了'); }) }) //5、滑出 slideUp(); //参数1：动画执行时间 //参数2：动画执行完成后的回调函数 $('#slideUp').click(function(){ //让id为div1的元素滑出 //没有参数，相当于给默认时长normal $('#div1').slideUp(2000,function(){ alert('已经滑出了'); }) }) //6、切换 slideToggle $('#slideToggle').click(function(){ $('#div1').slideToggle(1000); }) //7、淡入 fadeIn（） $('#fadeIn').click(function(){ //让id为div1的元素淡入 //没有参数，相当于给默认时长normal $('#div1').fadeIn(1000,function(){ alert('淡入完成'); }) }) //8、淡出 fadeOut（） $('#fadeOut').click(function(){ //让id为div1的元素淡出 //没有参数，相当于给默认时长normal $('#div1').fadeOut(1000,function(){ alert('淡入完成'); }) }) //9、切换 fadeToggle $('#fadeToggle').click(function(){ $('#div1').fadeToggle(1000); }) //10、淡入到哪里 fadeTo（） $('#fadeTo').click(function(){ $('#div1').fadeTo(1000,0.5); }) }) </script> </body>

5.2 自定义动画 animate

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: red; position:absolute; left:0; } #div1 { top:50px; } #div2 { top:170px; } </style> <body> <input type="button" value="从左到由800" id="lr800"/> <div id="div1"></div> <!--<div id="div2"></div>--> <script> $(function(){ //自定义动画 animate() //参数1：必选的 对象 代表需要做动画的属性 //参数2：可选的 时长 代表执行动画的时长 //参数3：可选的 easing 代表缓动还是匀速 linear匀速 swing中间快（默认） //参数4：动画执行完毕时的回调函数 $('#lr800').click(function(){ //让id为lr800的元素动画移动到800的位置上 $('#div1').animate({left:800,width:200,height:200,opacity:0.5},2000,'linear',function(){alert('动画完毕了')}); //$('#div2').animate({left:800},2000,'swing',function(){alert('动画完毕')}) }) }) </script> </body>

5.3 动画队列–stop函数

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> div{ width: 200px; height: 300px; background-color: red; display: none; } </style> <body> <input type="button" value="开始动画" id="start"> <input type="button" value="结束动画" id="stop"> <div></div> <script> $(function(){ //1、开始动画：模拟一个动画队列 $('#start').click(function(){ $('div').slideDown(2000).slideUp(2000); }); //2、停止动画：执行stop() //参数1：是否清除队列 //参数2：是否跳转到最终效果 $('#stop').click(function(){ //$('div').stop(true,true); //$('div').stop(true,false); //$('div').stop(false,true); $('div').stop(false,false); //默认效果 }) }) </script> </body>

6、动态创建元素

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> #div1{ width: 300px; height: 300px; border:1px solid red; } </style> <body> <input type="button" value="html()" id="btnHtml1"> <input type="button" value="$()" id="btn1"> <br/><br/> <div id="div1"> <p>p1 <span>span1</span> </p> </div> <script> $(function(){ //原生js中创建节点： document.write(); innerHTML; document.createElement(); //jQuery中如何创建节点： html(); $(); //1、html(); //设置或者获取内容 $('#btnHtml1').click(function(){ //1.1获取内容：html()方法不给参数 //获取到元素的所有内容，包括标签和内容 console.log($('#div1').html()); //1.2 设置内容：html()给参数 会把原来的内容覆盖，设置的标签会被解析出来，搭配字符串拼接 $('#div1').html('我是新设置的内容<a>解析标签</a>'); }) //2、$(); //确实能创建元素，但创建的元素只存在于内存中，如果要在页面上显示，就要追加节点 $('#btn1').click(function(){ var $link = $('<a href="http://news.baidu.com">我是新闻</a>'); //追加节点 $('#div1').append($link); }) }) </script> </body>

7、jQuery添加节点的几种方法

append(); 父元素.append(子元素) prepend(); 父元素.prepend（子元素） before(); 元素A.before（元素B） after(); 元素A.after（元素B） appendTo(); 子元素.appendTo（父元素） <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <input type="button" value="append" id="btnAppend"> <input type="button" value="prepend" id="btnPrepend"> <input type="button" value="after" id="btnAfter"> <input type="button" value="before" id="btnBefore"> <input type="button" value="appendTo" id="btnAppendTo"> <ul id="ul1"> <li>我是第1个li标签</li> <li>我是第2个li标签</li> <li id="li31">我是第3个li标签</li> <li>我是第4个li标签</li> <li>我是第5个li标签</li> </ul> <ul id="ul2"> <li>我是第1个li标签2</li> <li>我是第2个li标签2</li> <li id="li32">我是第3个li标签2</li> <li>我是第4个li标签2</li> <li>我是第5个li标签2</li> </ul> <script> $(function(){ //1.append(); //父元素.append(子元素) 作为最后一个子元素添加 $('#btnAppend').click(function(){ //1.1 给id为ul1的元素添加一个新li标签 //var $liNew=$('<li>我是新创建的li标签，我在最后面</li>'); //$('#ul1').append($liNew); $('#ul1').append('<li>我是新添加的li标签，我在最后面</li>'); //以上两行代码简写 //1.2 把ul1中已经存在的li标签添加到ul中去 剪切后作为最后一个元素添加 var $li31 = $('#li31'); $('#ul1').append($li31); //1.3 把ul2中已经存在的li标签添加到ul1中去 剪切后作为最后一个元素添加到要添加的地方 var $li31 = $('#li31'); $('#ul2').append($li31); }) //2、prepend（） //父元素.prepend（子元素） $(function(){ $('#btnPrepend').click(function(){ //2.1 新建一个li标签，添加到ul1中 $('#ul1').prepend('<li>我是新添加的li,我在最前面</li>') //2.2 把ul1中已经存在的li标签添加到ul1中去，剪切后作为第一个元素添加 //$li31=$('#li31'); //$('#ul1').prepend($li31); $('#ul1').prepend($('#li31')); //以上两行缩写 //2.3 把ul2中已经存在的li标签添加到ul1中去 剪切后作为第一个元素添加到要添加的地方 var $li31 = $('#li31'); $('#ul2').prepend($li31); }) }) //3、before（） //元素A.before（元素B） 把元素B插到元素A前面，作为兄弟元素添加 $('#btnBefore').click(function(){ //新建一个div var $divNew1=$('<div>我是新建的div</div>'); $('#ul1').before($divNew1); }) //4、after（） //元素A.after（元素B） 把元素B插到元素A后面，作为兄弟元素添加 $('#btnAfter').click(function(){ //新建一个div var $divNew2=$('<div>我是新建的div</div>'); $('#ul1').after($divNew2); }) //5、appendTo（） //子元素.appendTo（父元素） //把子元素作为父元素的最后一个元素添加 $('#btnAppendTo').click(function(){ //新建一个li元素添加到ul1的最后 var $liNew=$('<li>我是新创建的li</li>'); $liNew.appendTo('#ul1'); }) }) </script> </body>

8、清空节点

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <input type="button" value="按钮" id="btn"> <ul id="ul1"> <li>我是第1个标签</li> <li>我是第2个标签</li> <li id="li3">我是第3个标签</li> <li>我是第4个标签</li> <li>我是第5个标签</li> </ul> <script> //清空元素：empty（） $(function(){ $('#btn').click(function(){ //1、清空ul //$('#ul1').html(""); //不推荐使用，由可能会造成内存泄漏，不安全 $('#ul1').empty(); //不仅清空掉元素，还清空掉元素上的事件，推荐使用 //2、移除id为li3的元素 $('#li3').remove(); //3、移除ul，通过li3这个标签，移除他的父元素ul $('#li3').parent().remove(); }) }) </script> </body>

9、克隆节点clone（）

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <input type="button" value="克隆" id="clone"> <div id="div1"> <span>span1</span> <p>p1 <b>b1</b> </p> </div> <script> $(function(){ //jQuery中克隆节点：clone（） //存在于内存中，要显示在页面中，就要追加到页面中 //clone（）方法参数不管是true还是false，都是会克隆到后代节点的 //clone（）方法参数是true，会把事件也一起克隆，false，不会克隆事件，默认false //给按钮设置点击事件 $('#clone').click(function(){ var $cloneDiv = $('#div1').clone(); // console.log($cloneDiv); //把克隆的节点追加到body中 $('body').append($cloneDiv); }) }) </script> </body>
最新回复(0)