jQueryのイベントの使い方2
clickイベント
簡単な使い方
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickイベント1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() { //readyイベントの登録
$('<button>Click Me!</button>').appendTo('body').click(function() {
//ボタンの中にClick Me!と表示させクリックされた後ようこそjQuery 1.11.3の世界へ！とダイアログの中に表示させる。その際、appendToでボタンをbody要素内に表示
alert('ようそこjQuery 1.11.3の世界へ！');
});
});
</script>
</body>
</html>
進んだ使い方
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickイベント2-ツリービュー</title>
<style type="text/css">
.plus { list-style-image: url('img/plus.gif'); }
.minus { list-style-image: url('img/minus.gif'); }
.pointer { cursor: pointer; }
.default { cursor: default; list-style-image: none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() { //readyイベントの登録
$('li:not(:has(ul))') //ul要素の子要素(li)を含んだもの(下位メニューが入れ子になってるli要素)を除外
.removeClass() //CSSクラスの削除
.addClass('default'); //CSSクラス【default】の追加
$('li:has(ul)').click(function() { //下位メニューが入れ子になっているli要素を検索
//クリック時のイベント登録
if ($(this).children() //カレント(現在の要素セット)のul要素の子要素(li)を検索
.is(':hidden')) { //子要素(li)が不可視か？
$(this).removeClass() //カレントのli要素からCSSクラスを削除
.addClass('minus') //カレントのli要素にCSSクラス【minus】を追加
.children() //カレントのul要素の子要素(li)を検索
.show(); //親要素(ul)を可視にする
}
else { //カレントのli要素の親要素(ul)が可視状態
$(this).removeClass() //カレントのli要素からCSSクラスを削除
.addClass('plus') //カレントのli要素からCSSクラス【plus】を追加
.children() //カレントの要素の親要素(ul)を検索
.hide(); //子要素を不可視にする
}
})
$('li:has(ul)') //下位メニューが入れ子になっているli要素を検索
.removeClass() //下位メニューが入れ子になっているli要素からCSSクラスを削除
.addClass('pointer') //li要素にCSSクラス【pointer】を追加
.click(); //li要素をクリックした状態にする
});
</script>
</head>
<body>
<ul>
<li>jQuery</li>
<li>Selectors
<ul>
<li>Basics</li>
<li>Hierarchy</li>
<li>Basic Filters</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</body>
</html>
使ってる画像(各自DL)
