-
jQuery中操作元素的顯示和隱藏：
????1.改變樣式display為none：show/hide
????2.設(shè)置位置高度為0????????????：slideDown/slideUp
????3.設(shè)置透明度為0????????????????：fadeIn/fadeOut
對應(yīng)的切換方法：toggle,slideToggle,fadeToggle
區(qū)別：
toggle：切換顯示與隱藏效果
slideToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果
toggle與slideToggle細(xì)節(jié)區(qū)別：
toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。
元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。
注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）
查看全部 -
<body>
? ? <h2>animate(下)</h2>
? ? <p>慕課網(wǎng),專注分享</p>
? ? <div id="aaron">內(nèi)部動畫</div>
? ? 點擊觀察動畫效果：
? ? <select id="animation">
? ? ? ? <option value="1">動畫step動畫</option>
? ? ? ? <option value="2">動畫progress回調(diào)</option>
? ? </select>
? ? <a></a>
? ? <input id="exec" type="button" value="執(zhí)行動畫">
? ? <script type="text/javascript">
? ? $("#exec").click(function() {
? ? ? ? var v = $("#animation").val();
? ? ? ? var $aaron = $("#aaron");
? ? ? ? if (v == "1") {
? ? ? ? ? ? //觀察每一次動畫的改變
? ? ? ? ? ? $aaron.animate({
? ? ? ? ? ? ? ? height: '50'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? duration :2000,
? ? ? ? ? ? ? ? //每一個動畫都會調(diào)用
? ? ? ? ? ? ? ? step: function(now, fx) {
? ? ? ? ? ? ? ? ? ?$aaron.text('高度的改變值:'+now)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? } else if (v == "2") {
? ? ? ? ? ? //觀察每一次進度的變化
? ? ? ? ? ? $aaron.animate({
? ? ? ? ? ? ? ? height: '50'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? duration :2000,
? ? ? ? ? ? ? ? //每一步動畫完成后調(diào)用的一個函數(shù)，
? ? ? ? ? ? ? ? //無論動畫屬性有多少，每個動畫元素都執(zhí)行單獨的函數(shù)
? ? ? ? ? ? ? ? progress: function(now, fx) {
? ? ? ? ? ? ? ? ? ?$aaron.text('進度:'+arguments[1])
? ? ? ? ? ? ? ? ? ? // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
? ? ? ? ? ? ? ? ? ? // alert(data)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }?
? ? });
? ? </script>
</body>
查看全部 -
stop()：只會停止第一個動畫，第二個第三個繼續(xù)
stop(true)：停止第一個、第二個和第三個動畫
stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態(tài)
查看全部 -
toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果
查看全部 -
<body>
? ? <h2>toggle與slideToggle以及fadeToggle的比較</h2>
? ? <p>測試文字淡入效果</p>
? ? <p>慕課網(wǎng),專注分享</p>
? ? 動畫切換：
? ? <select id="animation">
? ? ? ? <option value="1">toggle</option>
? ? ? ? <option value="2">slideToggle</option>
? ? ? ? <option value="3">fadeToggle</option>
? ? </select>
? ? <input id="btnShow" type="button" value="點擊切換" />
? ? <script type="text/javascript">
? ? $("#btnShow").click(function() {
? ? ? ? var v = $("#animation").val();
? ? ? ? if (v == "1") {
? ? ? ? ? ? $("p").toggle();
? ? ? ? } else if (v == "2") {
? ? ? ? ? ? $("p").slideToggle("slow");
? ? ? ? } else if (v == "3") {
? ? ? ? ? ? $("p").fadeToggle(1000, "linear");
? ? ? ? }
? ? });
? ? </script>
</body>
查看全部 -
jQuery中toggle與slideToggle以及fadeToggle的比較
操作元素的顯示和隱藏可以有幾種方法。
例如：改變樣式display為none
設(shè)置位置高度為0
設(shè)置透明度為0
都能達到這個目的，并且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法
toggle、sildeToggle以及fadeToggle的區(qū)別：
toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果
當(dāng)然細(xì)節(jié)上還是有更多的不同點:
toggle與slideToggle細(xì)節(jié)區(qū)別：toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。
元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。
注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）
查看全部 -
<body>
? ? <h2>fadeOut</h2>
? ? <p>測試文字淡入效果</p>
? ? <p>慕課網(wǎng),專注分享</p>
? ? 淡出的隱藏效果：
? ? <select id="animation">
? ? ? ? <option value="1">fadeOut( )</option>
? ? ? ? <option value="2">fadeOut( "slow" )</option>
? ? ? ? <option value="3">fadeOut( 3000 )</option>
? ? ? ? <option value="4">fadeOut( 1000, complete )</option>
? ? ? ? <option value="5">fadeOut( 1000, "linear" )</option>
? ? ? ? <option value="6">fadeOut( options )</option>
? ? </select>
? ??
? ? <br/><br/>
? ??
? ? <input id="btnFadeOut" type="button" value="點擊淡出隱藏" />
? ? <input id="btnShow" type="button" value="顯示" />
? ??
? ? <script type="text/javascript">
? ? //【顯示】按鈕
? ? $("#btnShow").click(function() {
? ? ? ? $("p").show();
? ? });
? ? //【隱藏】按鈕
? ? $("#btnFadeOut").click(function() {
? ? ? ? var v = $("#animation").val();
? ? ? ? if (v == "1") {
? ? ? ? ? ? $("p").fadeOut();
? ? ? ? } else if (v == "2") {
? ? ? ? ? ? $("p").fadeOut("slow");
? ? ? ? } else if (v == "3") {
? ? ? ? ? ? $("p").fadeOut(3000);
? ? ? ? } else if (v == "4") {
? ? ? ? ? ? $("p").fadeOut(2000, function() {
? ? ? ? ? ? ? ? alert("隱藏完畢!");
? ? ? ? ? ? });
? ? ? ? } else if (v == "5") {
? ? ? ? ? ? $("p").fadeOut(1000, "linear");
? ? ? ? } else if (v == "6") {
? ? ? ? ? ? $("p").fadeOut({
? ? ? ? ? ? ? ? duration: 1000
? ? ? ? ? ? });
? ? ? ? }
? ? });
? ? </script>
</body>
查看全部 -
slideDown()：用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫，這會導(dǎo)致頁面的下面部分滑下去，彌補了顯示的方式
常見的操作，提供一個動畫是時間，然后傳遞一個回調(diào)，用于知道動畫是什么時候結(jié)束
.slideDown(?[duration?]?[,?complete?]?)
持續(xù)時間（duration）是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)被省略，那么默認(rèn)使用400 毫秒的延時。
具體使用：
$("ele").slideDown(1000,?function()?{ ????//等待動畫執(zhí)行1秒后,執(zhí)行別的動作.... });注意事項：
下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設(shè)置display:none
如 果提供回調(diào)函數(shù)參數(shù)，callback會在動畫完成的時候調(diào)用。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是 this會設(shè)成將要執(zhí)行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調(diào)函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次，而不是這組 動畫整體才執(zhí)行一次
查看全部 -
<body>
? ? <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
? ? <h2>hide</h2>
? ? <div class="left">
? ? ? ? <h4>測試一</h4>
? ? ? ? <div id="a1">hide操作</div>
? ? ? ? <button>直接hide</button>
? ? ? ? <script type="text/javascript">
? ? ? ? //點擊buttom1 直接隱藏
? ? ? ? $("button:first").click(function() {
? ? ? ? ? ? $("#a1").hide()
? ? ? ? });
? ? ? ? </script>
? ? ? ? <h4>測試二</h4>
? ? ? ? <div id="a2">hide動畫操作</div>
? ? ? ? <button>hide帶動畫</button>
? ? ? ? <script type="text/javascript">
? ? ? ? //點擊buttom2 執(zhí)行動畫隱藏
? ? ? ? $("button:last").click(function() {
? ? ? ? ? ? $("#a2").hide({
? ? ? ? ? ? ? ? duration: 3000,///毫秒
? ? ? ? ? ? ? ? complete: function() {
? ? ? ? ? ? ? ? ? ? alert('執(zhí)行3000ms動畫完畢')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? });
? ? ? ? </script>
? ? </div>
</body>
查看全部 -
$("#a1").stop().hide(3000).show(3000)
//stop（） 用于避免動畫執(zhí)行過程中反復(fù)觸發(fā)
//語法結(jié)構(gòu)
$("#div").stop();//停止當(dāng)前動畫，繼續(xù)下一個動畫
$("#div").stop(true);//清除元素的所有動畫
$("#div").stop(false, true);//讓當(dāng)前動畫直接到達末狀態(tài) ，繼續(xù)下一個動畫
$("#div").stop(true, true);//清除元素的所有動畫，讓當(dāng)前動畫直接到達末狀態(tài)查看全部 -
.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計數(shù)。
語法：參數(shù)接受一個jQuery或者dom對象作為查找的條件
.index() .index(?selector?) .index(?element?)
如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置
如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對于原先集合的位置
如果參數(shù)是一個選擇器， .index() 返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1
查看全部 -
.get(?[index?]?)
注意2點
get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象
get方法是從0開始索引
所以第二個a元素的查找： $(a).get(1)
負(fù)索引值參數(shù)
get方法還可以從后往前索引，傳遞一個負(fù)索引值，注意的負(fù)值的索引起始值是-1
同樣是找到第二元素，可以傳遞?$(a).get(-2)?
查看全部 -
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個函數(shù)很簡單，沒有多余的參數(shù)用法
需要注意：
移除字符串開始和結(jié)尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab）
如果這些空白字符在字符串中間時，它們將被保留，不會被移除
查看全部 -
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。
語法：
jQuery.inArray(?value,?array?,[?fromIndex?]?)
用法非常簡單，傳遞一個檢測的目標(biāo)值，然后傳遞原始的數(shù)組，可以通過fromIndex規(guī)定查找的起始值，默認(rèn)數(shù)組是0開始
例如：在數(shù)組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7])?//返回對應(yīng)的索引：4
注意：
如果要判斷數(shù)組中是否存在指定值，你需要通過該函數(shù)的返回值不等于(或大于)-1來進行判斷
查看全部 -
.each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數(shù)組的遍歷
語法
jQuery.each(array,?callback?) jQuery.each(?object,?callback?)
第一個參數(shù)傳遞的就是一個對象或者數(shù)組，第二個是回調(diào)函數(shù)
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ???//index是索引,也就是數(shù)組的索引 ???//value就是數(shù)組中的值了 });each就是for循環(huán)方法的一個包裝，內(nèi)部就是通過for遍歷數(shù)組與對象，通過回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù)，第一個參數(shù)是當(dāng)前迭代成員在對象或數(shù)組中的索引值(從0開始計數(shù))，第二個參數(shù)是當(dāng)前迭代成員(與this的引用相同
jQuery.each()函數(shù)還會根據(jù)每次調(diào)用函數(shù)callback的返回值來決定后續(xù)動作。如果返回值為false，則停止循環(huán)(相當(dāng)于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個循環(huán)。
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ????return?false;?//停止迭代 });?
jQuery方法可以很方便的遍歷一個數(shù)據(jù)，不需要考慮這個數(shù)據(jù)是對象還是數(shù)組
查看全部
舉報