结束动画的操作在很多业务场景都是很必需的,比如:当我点击一个Button的时候,某个块会产生一个动画,但当这个动画还没有执行完的时候,我又接着进行了别的操作,这时为了体验效果与充分利用内存等,我们就必须手动结束这些还没有结束的动画。
在jQuery库里面,结束动画有无参跟有参两个方法
立即停止被选元素当前正在进行的动画。即不管被选元素有多少个动画组合,只要都在进行,则都将被停止。eg:
<head> <script> $(document).ready(function(){ $("#stop").click(function(){ //结束id为panel的元素上的正在进行的所有动画 $("#panel").stop(); }); }); </script> </head> <body> <button id="stop">停止动画</button> <div id="panel"> <h1>标题啊</h1> <p>somethins.....</p> <div> </body>
这个是有参的结束动画的方法,参数含义如下:
参数名 | type | 默认值 | 是否必传 | 描述 |
---|---|---|---|---|
stopAll | boolean | false | 否 | 是否清除动画队列。true:是,false:仅停止当前活动的动画,队列中尚未执行的动画可以继续排列向后执行 |
goToEnd | boolean | false | 否 | 是否立即完成当前所有动画。true:是,false:根据设定的动画执行速度,时间来完成 |
有时,我们可能会在动画完成的同时去进行相应的其它操作,比如刷新界面等。这时我们就必须得知道动画何时结束。为此jQuery作出了很好的支持,通过回调来达到目的。
$("#panel").stop(function(){ //todo 做相应的操作 });
此外,jQuery里的动画跟其它一样,还有很多别的效果,比如:渐变,淡入淡出等等,具体大家可以参考http://www.w3school.com.cn/jquery/jquery_ref_effects.asp“>jQuery 效果参考手册
这个很容易理解,如果你知道面向对象的话。相反,如果你不知道什么是面向对象,那么你还得下点功夫补下课,因为js也是面向对象的。
在前面那些例子中,我们通过选择器去查找相应的元素时,都是通过$或jQuery对象来进行操作,其实它后面的所有操作方法都可以返回jQuery对象,基于此,我们就可以通过链操作实现一系列的方法调用。
var jqObj = $.noConflict(); //让button显示,并且显示文字 jqObj("#btn1").show().text("我显示了!");
对于jQuery DOM文档操作,其实我们已经很熟悉了,我们经常通过jQuery来查询相应的元素。
其实对于DOM操作,我们还有其它一些很方便的方法,下面是三个最实用的代表:
1. text() : set或get所需文本的内容;
2. html() : set或get所选元素的内容(包括HTML标记);
3. val() : set或get表单字段的值。
【注】以上这些方法,每个其实都包含有两个方法,即setter()与getter()方法。
DOM操作还有另外一个比较重要的操作就是DOM树的遍历。
即,在DOM树上,通过jQuery遍历,我们可以从当前的被选元素开始,向上查找父类或向下查找子类,也可以水平方向查找同类。不理解的同学,我们看一下DOM树:
jQuery提供了很多有用的方法来遍历DOM树,这里我只做一个向上遍历的笔记,想了解更多的同学可以查阅jQuery 遍历
向上遍历DOM树的方法:
方法名 | 描述 |
---|---|
parent() | 向上一级查询当前被选元素的父元素。【注】:只会向上查询一级 |
parents() | 向上查询当前被选元素的所有父元素 |
parentsUntil(“params”) | 向上查询从当前被选元素的所有父元素,直到指定的params元素为止 |
这个很容易理解,就没有再举例了。
在实际项目开发中,可能要求动态的增减元素,jQuery支持这一点,使我们开发又便捷了一步。具体怎么操作呢?这里同样,我们记录jQuery的几个常用的代表,其它的,各位可以去W3School上查看。
jQuery4个常用的添加内容的方法:
为了方便下面的方法讲解,假如统一有下面这段代码:
<p> <div> 这里是,,,,, </div> </p>
假设
为被选元素。
append():在被选元素的所包裹的内容的结尾插入内容,上例则是指在“,,,,,”后面与前面插入。
prepend():在被选元素的所包裹的内容开头插入内容,上例是指插入在
后面”这里是,,,,,”前面插入。after():在被选元素结束标签之后添加,上例是在后。
before():在被选元素开始标签之前添加,上例是在
前。属性,即元素所拥有的特性。
jQuery通过attr(“attrName”)方法来set或get属性值。由于一个元素可能有很多属性,因此调用attr()方法必须指明属性名。
比如:获取元素中href属性的属性值。
$("#btn1").click(function(){ $("a").attr("href"); });
attr()方法也有回调函数,支持对原数据进行更改后返回。
$("#btn1").click(function(){ $("#a1").attr("href",function(i,origValue){ //这个i表示被选<a>元素的位置,当只有一个<a>时,i=0,如果有多个<a>元素, //id为a1的<a>元素在第三个,则i=2;依此类推 }) }); ...... <p> <h1>标题</h1> <a href="www.baidu.com">百度</a> <a id = "a1" href="www.520yangyang.cn">阳洋的空间</a> </p>
jQuery对被选元素进行动态的样式操作提供了便捷,通过css()方法,开发者可以方便的get被选元素当前的css样式属性以及set样式给被选元素。
主要注意几点:
- 被选元素得添加class属性,
- 在
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn3").click(function(){ //假设输入框输入数字为111,则打印222,反之输入222,打印111 $("#test").text(function(){ var result = ""; var inputStr = $("#input1").val().toString(); if(inputStr === "111"){ result = "222"; }else if(inputStr === "222"){ result = "111"; }else{ result = inputStr; } return result; }); }); //元素的添加操作 //after:在被选元素结束标签后面添加 $("p").after("</br>加个链接:<a href='www.w3school.com'>W3School学习</a>"); //before:在被选元素开始标签前面添加 $("p").before("<div class='addCls'>在被选元素前添加</div>"); }); </script> <style type="text/css"> div.addCls{ width:'200px'; height:'100px'; background-color:#e5eecc; } </style> </head> <body> <p id="test">这是段落中的<b>粗体</b>文本。</p> <button id="btn1">显示文本</button> <button id="btn2">显示 HTML</button></br> <button id="btn3">读取值</button> <input id="input1">请输入内容</input> </body> </html>