jQuery学習ノート-チェーンプログラミングとjQueryアニメーション
38365 ワード
1.基本原理
チェーンプログラミングとは、複数行のコードが1行のコードに結合されることであり、そのコードがオブジェクトを返すことを前提とし、オブジェクト内でreturn thisを使用すると、メソッドでチェーン呼び出しが可能になります.例:オブジェクト.html(‘コード’).css(‘属性’,‘属性値’).text(‘テキスト内容’).val(‘value属性値’);オブジェクトイベント1.イベント2...... //
$('#div').html('Hello World
').css('backgroundColor','red');
2.断鎖現象
チェーン解除現象の出現:オブジェクト呼び出し方法、返されるのは現在のオブジェクトではなく、この時またメソッドを呼び出すと、チェーン解除が発生します.チェーン切断を解決する方法:end()メソッドをもう一度呼び出す必要があるメソッドで呼び出す.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<script src="jquery-1.12.2.js"></script>
<script>
$(function() {
$('#uuu>li').click(function() {
$(this).css('backgroundColor','yellow');
// prevAll() end()
$(this).prevAll().css('backgroundColor','green').end().nextAll().css('backgroundColor','blue');
});
$('#uuu>li').each(function(index,element) {
// li
$(element).css('opacity',(index+1)/10);
});
});
</script>
</head>
<body>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
3.jQueryのアニメーション方法
非表示:hide()、表示:show().スライドイン:slideUp()スライドアウト:slideDown()スライドアウト切り替え:slideToggle()メソッドには、パラメータspeed:数値タイプ、単位はミリ秒、文字列タイプ:slow、normal、fastがあります.フェードイン:fadeIn()フェードアウト:fadeOut()フェードアウトスイッチ:fadeToggle()透明度の変更:fadeTo(時間、到達透明度)タイプスタイルの透明度css(‘opacity’,到達透明度).animate():パラメータ:1.キー値ペア-オブジェクト2.時間単位ミリ秒3.匿名関数コールバック関数.stop():アニメーションを停止します.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery </title>
<style>
#dv {
width: 200px;
height: 200px;
/* background-color: skyblue; */
}
#dv img {
width: 50px;
height: 50px;
float: left;
}
#slide {
width: 200px;
height: 100px;
background-color: pink;
}
#fade {
width: 200px;
height: 100px;
background-color: skyblue;
}
#animate {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function() {
$('#btnHide').click(function() {
// $('#dv').hide(1000);
// last()： ，
$('#dv>img').last().hide(800,function() {
// arguments.callee
$(this).prev().hide(800,arguments.callee);
});
});
$('#btnShow').click(function() {
// $('#dv').show('slow'); first()
$('#dv>img').first().show(800,function() {
$(this).next().show(800,arguments.callee);
});
});
//
$('#btnSlideUp').click(function() {
$('#slide').slideUp(1000);
});
//
$('#btnSlideDown').click(function() {
$('#slide').slideDown(1000);
});
//
$('#btnSlideToggle').click(function() {
$('#slide').slideToggle(500);
});
//
$('#btnFadeIn').click(function() {
$('#fade').fadeIn(500);
});
//
$('#btnFadeOut').click(function() {
$('#fade').fadeOut(500);
});
//
$('#btnFadeToggle').click(function() {
$('#fade').fadeToggle(600);
});
//
$('#btnFadeTo').click(function() {
$('#fade').fadeTo(600,0.3);
});
// animate
$('#btnAnimate').click(function() {
$('#animate').animate({
// ，
'width':'400px',
'height':'400px',
'left':'300px',
'top':'400px'
},600,function() {
//
$('#animate').animate({
'width':'50px',
'height':'50px',
'left':'600px',
'top':'600px',
//
'opacity':'0.3'
},1000);
});
});
});
</script>
</head>
<body>
<input type="button" id="btnHide" value=" ">
<input type="button" id="btnShow" value=" ">
<div id="dv">
<img src="images/animate1.jpg" alt="">
<img src="images/animate2.jpg" alt="">
<img src="images/animate3.jpg" alt="">
<img src="images/animate4.jpg" alt="">
</div>
<input type="button" id="btnSlideUp" value=" ">
<input type="button" id="btnSlideDown" value=" ">
<input type="button" id="btnSlideToggle" value=" ">
<div id="slide">
</div>
<input type="button" id="btnFadeIn" value=" ">
<input type="button" id="btnFadeOut" value=" ">
<input type="button" id="btnFadeToggle" value=" ">
<input type="button" id="btnFadeTo" value=" ">
<div id="fade">
</div>
<input type="button" id="btnAnimate" value=" ">
<div id="animate"></div>
</body>
</html>
//
$('#div').html('Hello World
').css('backgroundColor','red');
チェーン解除現象の出現:オブジェクト呼び出し方法、返されるのは現在のオブジェクトではなく、この時またメソッドを呼び出すと、チェーン解除が発生します.チェーン切断を解決する方法:end()メソッドをもう一度呼び出す必要があるメソッドで呼び出す.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<script src="jquery-1.12.2.js"></script>
<script>
$(function() {
$('#uuu>li').click(function() {
$(this).css('backgroundColor','yellow');
// prevAll() end()
$(this).prevAll().css('backgroundColor','green').end().nextAll().css('backgroundColor','blue');
});
$('#uuu>li').each(function(index,element) {
// li
$(element).css('opacity',(index+1)/10);
});
});
</script>
</head>
<body>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
3.jQueryのアニメーション方法
非表示:hide()、表示:show().スライドイン:slideUp()スライドアウト:slideDown()スライドアウト切り替え:slideToggle()メソッドには、パラメータspeed:数値タイプ、単位はミリ秒、文字列タイプ:slow、normal、fastがあります.フェードイン:fadeIn()フェードアウト:fadeOut()フェードアウトスイッチ:fadeToggle()透明度の変更:fadeTo(時間、到達透明度)タイプスタイルの透明度css(‘opacity’,到達透明度).animate():パラメータ:1.キー値ペア-オブジェクト2.時間単位ミリ秒3.匿名関数コールバック関数.stop():アニメーションを停止します.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery </title>
<style>
#dv {
width: 200px;
height: 200px;
/* background-color: skyblue; */
}
#dv img {
width: 50px;
height: 50px;
float: left;
}
#slide {
width: 200px;
height: 100px;
background-color: pink;
}
#fade {
width: 200px;
height: 100px;
background-color: skyblue;
}
#animate {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function() {
$('#btnHide').click(function() {
// $('#dv').hide(1000);
// last()： ，
$('#dv>img').last().hide(800,function() {
// arguments.callee
$(this).prev().hide(800,arguments.callee);
});
});
$('#btnShow').click(function() {
// $('#dv').show('slow'); first()
$('#dv>img').first().show(800,function() {
$(this).next().show(800,arguments.callee);
});
});
//
$('#btnSlideUp').click(function() {
$('#slide').slideUp(1000);
});
//
$('#btnSlideDown').click(function() {
$('#slide').slideDown(1000);
});
//
$('#btnSlideToggle').click(function() {
$('#slide').slideToggle(500);
});
//
$('#btnFadeIn').click(function() {
$('#fade').fadeIn(500);
});
//
$('#btnFadeOut').click(function() {
$('#fade').fadeOut(500);
});
//
$('#btnFadeToggle').click(function() {
$('#fade').fadeToggle(600);
});
//
$('#btnFadeTo').click(function() {
$('#fade').fadeTo(600,0.3);
});
// animate
$('#btnAnimate').click(function() {
$('#animate').animate({
// ，
'width':'400px',
'height':'400px',
'left':'300px',
'top':'400px'
},600,function() {
//
$('#animate').animate({
'width':'50px',
'height':'50px',
'left':'600px',
'top':'600px',
//
'opacity':'0.3'
},1000);
});
});
});
</script>
</head>
<body>
<input type="button" id="btnHide" value=" ">
<input type="button" id="btnShow" value=" ">
<div id="dv">
<img src="images/animate1.jpg" alt="">
<img src="images/animate2.jpg" alt="">
<img src="images/animate3.jpg" alt="">
<img src="images/animate4.jpg" alt="">
</div>
<input type="button" id="btnSlideUp" value=" ">
<input type="button" id="btnSlideDown" value=" ">
<input type="button" id="btnSlideToggle" value=" ">
<div id="slide">
</div>
<input type="button" id="btnFadeIn" value=" ">
<input type="button" id="btnFadeOut" value=" ">
<input type="button" id="btnFadeToggle" value=" ">
<input type="button" id="btnFadeTo" value=" ">
<div id="fade">
</div>
<input type="button" id="btnAnimate" value=" ">
<div id="animate"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery </title>
<style>
#dv {
width: 200px;
height: 200px;
/* background-color: skyblue; */
}
#dv img {
width: 50px;
height: 50px;
float: left;
}
#slide {
width: 200px;
height: 100px;
background-color: pink;
}
#fade {
width: 200px;
height: 100px;
background-color: skyblue;
}
#animate {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function() {
$('#btnHide').click(function() {
// $('#dv').hide(1000);
// last()： ，
$('#dv>img').last().hide(800,function() {
// arguments.callee
$(this).prev().hide(800,arguments.callee);
});
});
$('#btnShow').click(function() {
// $('#dv').show('slow'); first()
$('#dv>img').first().show(800,function() {
$(this).next().show(800,arguments.callee);
});
});
//
$('#btnSlideUp').click(function() {
$('#slide').slideUp(1000);
});
//
$('#btnSlideDown').click(function() {
$('#slide').slideDown(1000);
});
//
$('#btnSlideToggle').click(function() {
$('#slide').slideToggle(500);
});
//
$('#btnFadeIn').click(function() {
$('#fade').fadeIn(500);
});
//
$('#btnFadeOut').click(function() {
$('#fade').fadeOut(500);
});
//
$('#btnFadeToggle').click(function() {
$('#fade').fadeToggle(600);
});
//
$('#btnFadeTo').click(function() {
$('#fade').fadeTo(600,0.3);
});
// animate
$('#btnAnimate').click(function() {
$('#animate').animate({
// ，
'width':'400px',
'height':'400px',
'left':'300px',
'top':'400px'
},600,function() {
//
$('#animate').animate({
'width':'50px',
'height':'50px',
'left':'600px',
'top':'600px',
//
'opacity':'0.3'
},1000);
});
});
});
</script>
</head>
<body>
<input type="button" id="btnHide" value=" ">
<input type="button" id="btnShow" value=" ">
<div id="dv">
<img src="images/animate1.jpg" alt="">
<img src="images/animate2.jpg" alt="">
<img src="images/animate3.jpg" alt="">
<img src="images/animate4.jpg" alt="">
</div>
<input type="button" id="btnSlideUp" value=" ">
<input type="button" id="btnSlideDown" value=" ">
<input type="button" id="btnSlideToggle" value=" ">
<div id="slide">
</div>
<input type="button" id="btnFadeIn" value=" ">
<input type="button" id="btnFadeOut" value=" ">
<input type="button" id="btnFadeToggle" value=" ">
<input type="button" id="btnFadeTo" value=" ">
<div id="fade">
</div>
<input type="button" id="btnAnimate" value=" ">
<div id="animate"></div>
</body>
</html>