jQuery入門（三）--- jQuery語法
jQuery入門（三）--- jQuery語法
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>
相關文章
- jQuery 語法jQuery
- jQuery語法jQuery
- jQuery入門jQuery
- JQuery-入門jQuery
- jQuery 基礎語法jQuery
- jQuery基礎語法jQuery
- jQuery入門（四）案例jQuery
- jQuery入門-DOM操作jQuery
- jQuery入門（六）jQuery實現瀑布分頁jQuery
- jQuery 的語法詳解jQuery
- jQuery入門（七）jQuery實現按鈕分頁jQuery
- jQuery（三）jQuery
- jQuery入門（五）Ajax和jsonjQueryJSON
- jQuery入門-DOM/$/選擇器jQuery
- 新知識：jQuery語法基礎與操作jQuery
- 網站前端_jQuery-基礎入門網站前端jQuery
- 前端基礎入門六(JQuery進階)前端jQuery
- JQuery基本知識彙總；JQuery常用方法；淺入瞭解JQueryjQuery
- jQuery系列第三章jQuery框架操作CSSjQuery框架CSS
- 動力節點jQuery學習教程，jQuery入門看這一篇就夠了jQuery
- web專案技術必備-------jQuery快速入門WebjQuery
- jQuery入門看這一篇就夠了jQuery
- jQuery初探：自制jQueryjQuery
- LaTeX語法入門
- Markdown語法入門
- thymeleaf語法入門
- Laravel-admin 自定義擴充套件，jQuery 語法錯誤？Laravel套件jQuery
- jQuery常用方法總結【三】jQuery
- 前端入門6-JavaScript客戶端api&jQuery前端JavaScript客戶端APIjQuery
- 我的’jQuery’和jQueryjQuery
- go 語法快速入門Go
- yaml語法快速入門YAML
- python 語法總結：Python語法快速入門Python
- jQueryjQuery
- JQuery模板外掛-jquery.tmpljQuery
- jquery列印頁面（jquery.jqprint）jQuery
- YAML語法簡易入門YAML
- jQuery原始碼剖析(三) - Callbacks 原理分析jQuery原始碼