jQuery入門です!
ドットインストール続きます。とりあえずの目標は完了数1000!今現在905!今回は、ひな形
基本となるひな形
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> // $(document).ready(function() { // // }); $(function() { }); </script>
$(document).ready(function() {};
は$(function() {});
で置換えられる。
基礎
用語
- セレクタ: 処理対象となるDOM要素を指定する記法
- メソッド: 処理
- メソッドチェーン: メソッドをつなげて書くこと
セレクタ
- `>`: 直下の要素
- ` `: それ以下の要素
- `,`: 複数の要素
- `+`: 隣接する要素
フィルタ
- `:eq()`
- `:gt(), :lt()`
- `:even, :odd`
- `:contains()`
- `:first, :last`
メソッドを利用したDOM要素の指定
- `parent(), children()`
- `next(), prev()`
- `sibling()`
属性セレクタ
- `=`: 同じ
- `!=`: 同じではない
- `*=`: 含まれる
- `^=`: ではじまる
- `$=`: で終わる
addClass, removeClass
- classを作成して、`addClass('指定したクラス名')`をすることでクラスを追加できる。
attr
- `$('a').attr('href')`でattributeを取得できる。
data
- `data-sitename="google"`などとDOM要素に追加しておくと、`$('a').data('sitename')`のように取得できる。
要素の追加 before,after,insertBefore,insertAfter,prepend,append,prependTo,appendTo
$(function() { var li = $('
イベント
$('#box').click(function() { alert("hi!"); }); $('#box') .mouseover(function() { $(this).css('background', 'green'); }) .mouseout(function() { $(this).css('background', 'red'); }) .mousemove(function(e) { // e: イベントオブジェクト $(this).text(e.pageX); });
focus、blue、change
input要素に対して。
$('#name') .focus(function() { $(this).css('background','red'); }) .blur(function() { $(this).css('background','white'); }); $('#members').change(function() { alert('changed!'); });
Ajax
Ajax = Asynchronous JavaScript + XML
load
load
: サーバから情報を持ってきて表示する。
<script> $(function() { $('button').click(function() { $('#result').load('more.html'); }); }); </script>
コールバック関数
#resultのところにmore.htmlの内容を差し込むことができます。
$(function() { $('button').click(function() { $('#result').load('more.html', function() { $('#message').css('color','red'); }); }); });
Ajaxは非同期なので、いつ読み込まれるかわからない。このように第二引数にfunction(コールバック関数)を持ってくると、処理の終了を待って次の処理を実行することができる。
$(function() { $('#greet').click(function() { $.get('greet.php',{ name: $('#name').val() }, function(data) { $('#result').html(data.message + '(' + data.length + ')'); }); }); });
greetから複数の値を取得している例です。messageとlengthはgreet.phpで連想配列のJSONとして返却されています。