12 エフェクトを使ってみよう
自动消失，1）可以调速度；2）可以调效果；3）可以调消失重现消失重现；4）也可以消失后跳出警告等效果
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
</head>
<body>
<p>jQueryの練習</p>
<div id="box" style="width:100px;height:100px;background:red;"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
// hide, show
// fadeOut, fadeIn
// toggle
//$('#box').hide(800);
//$('#box').fadeOut(800);
//$('#box').toggle(800);
$('#box').fadeOut(800, function() {
alert("gone!");
});
});
</script>
</body>
</html>
13 イベントを使ってみよう
鼠标1）点击；2）放在上面；3）移开等出现不同效果。还可以去官方网站看查（Event Properties）
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
</head>
<body>
<p>jQueryの練習</p>
<div id="box" style="width:100px;height:100px;background:red;"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
// click
// mouseover, mouseout, mousemove
$('#box').click(function() {
alert("hi!");
});
$('#box')
.mouseover(function() {
$(this).css('background', 'green');
})
.mouseout(function() {
$(this).css('background', 'red');
})
.mousemove(function(e) {
$(this).text(e.pageX);
});
});
</script>
</body>
</html>
14 focus､blur､changeを使おう
1）点击进去；2）点击出来；3）选择不同event会出现不同效果
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
</head>
<body>
<p>jQueryの練習</p>
<input type="text" id="name">
<select id="members" name="members">
<option>taguchi</option>
<option>fkoji</option>
<option>dotinstall</option>
</select>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
// focus, blur
// change
$('#name')
.focus(function() {
$(this).css('background', 'red');
})
.blur(function() {
$(this).css('background', 'white');
});
$('#members').change(function() {
alert('changed!');
});
});
</script>
</body>
</html>
15 onメソッドを使ってみよう
1)点击按钮，会出现一行字；2)点击出现的字，字会消失。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
</head>
<body>
<p>jQueryの練習</p>
<button>Add!</button>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$('button').click(function() {
var p = $('<p>').text('vanish!').addClass('vanish');
$(this).before(p);
});
/*
$('.vanish').click(function() {
$(this).remove();
});
*/
$('body').on('click', '.vanish', function() {
$(this).remove();
});
});
</script>
</body>
</html>
jQuery
index.html
<body>
<p>jQueryの練習</p>
<ul id="main">
<li>0</li>
<li class="item">1</li>
<li class="item">2</li>
<li>
3
<ul id="sub">
<li>3-0</li>
<li>3-1</li>
<li class="item">3-2</li>
<li class="item">3-3</li>
<li>3-4</li>
</ul>
</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
// セレクタ.メソッド
// フィルタ
// :eq()
// :gt(), :lt()
// :even, :odd
// :contains()
// :first, :last
//$("#sub > li:eq(2)").css('color', 'red');
//$("#sub > li:gt(1)").css('color', 'red');
//$("#sub > li:odd").css('color', 'red');
//$("#sub > li:contains('4')").css('color', 'red');
// セレクタ.メソッド
// メソッドを使ったDOM要素の指定
// parent(), children()
// next(), prev()
// siblings() - 兄弟要素
//$("#sub").children().css('color', 'red');
//$("#sub > li:eq(2)").prev().css('color', 'red');
$("#sub > li:eq(2)").siblings().css('color', 'red');
});
</script>
</body>