[jQuery] ドットインストール「jQuery入門」のまとめ

> * [#11 要素を追加してみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25211)

## エフェクトを使ってみよう

“`javascript
$(function() {
// hide, show
$(‘#box’).hide(800);
// fadeOut, fadeIn
$(‘#box’).fadeOut(800);
// toggle
$(‘#box’).toggle(800);
$(‘#box’).toggle(800);
$(‘#box’).toggle(800);
// Callback function
$(‘#box’).fadeOut(‘800’, function() {
alert(“gone!”);
});
});
“`

> * [#12 エフェクトを使ってみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25212)

## イベントを使ってみよう

“`javascript
$(function() {
// click
$(‘#box’).click(function(event) {
alert(“hi!”);
});
// mouseover, mouseout, mousemove
$(‘#box’)
.mouseover(function(event) {
$(this).css(‘background’, ‘blue’);
})
.mouseout(function(event) {
$(this).css(‘background’, ‘red’);
})
.mousemove(function(event) {
$(this).text(event.pageX);
});
});
“`

> * [#13 イベントを使ってみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25213)

## focus､blur､changeを使おう

“`javascript
$(function() {
// focus, blur
$(‘#name’)
.focus(function(event) {
$(this).css(‘background’, ‘red’);
})
.blur(function(event) {
$(this).css(‘background’, ‘white’);
});
// change
$(‘#members’).change(function(event) {
alert(‘Changed!’);
});
});
“`

> * [#14 focus､blur､changeを使おう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25214)

## onメソッドを使ってみよう

“`javascript
$(function() {
// on
// ドキュメントが読み込まれた段階で存在しない要素を操作する
$(‘button’).click(function(event) {
var p = $(‘

‘).text(‘vanish!’).addClass(‘vanish’);
$(this).before(p);
});
/* 以下は .vanish が存在しないのでうまく動かない
$(‘.vanish’).click(function(event) {
$(this).remove();
});
*/
$(‘body’).on(‘click’, ‘.vanish’, function(event) {
$(this).remove();
});
});
“`

> * [#15 onメソッドを使ってみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25215)

## loadメソッドを使ってみよう

Vagrant を利用。

* `ipconfig` … ipアドレスを調べる。
* `php -S ipアドレス:8000` … PHP の簡易サーバ

Mac は設定なしで利用可能。

* `ifconfig`
* `php -S ipアドレス:8000`

> * [Shorthand Methods | jQuery API Documentation](http://api.jquery.com/category/ajax/shorthand-methods/)

“`javascript
$(function() {
// load
$(‘button’).click(function(event) {
$(‘#result’).load(‘news/news.html’);
});
});
“`

> * [#17 loadメソッドを使ってみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25217)

## 非同期通信とはなにか？

“`javascript
$(function() {
// Ajax
// Asynchronous JavaScript + XML
// サーバと通信 + ページの書き換え
// 非同期: 処理が終わる前に次の処理に移る
// .load
$(‘button’).click(function(event) {
// load 終了後に別処理を行うには、Callback 関数を使う
$(‘#result’).load(‘news/news.html’, function() {
$(‘#message’).css(‘color’, ‘red’);
});
});
});
“`

> * [#18 非同期通信とはなにか？ | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25218)

## $.getを使ってみよう / JSONで値を返してみよう

“`javascript
$(function() {
// Ajax
// Asynchronous JavaScript + XML
// サーバと通信 + ページの書き換え
// 非同期: 処理が終わる前に次の処理に移る
// $.post
// $.get
$(‘#greet’).click(function(event) {
$.get(‘greet.php’, {
name: $(‘#name’).val()
}, function(data) {
$(‘#result’).html(data.message + ‘(‘ + data.length + ‘)’);
});
});
});
“`

“`php:greet.php
htmlspecialchars(“hi! ” . $_GET[‘name’], ENT_QUOTES, “utf-8”),
“length” => strlen($_GET[‘name’])
);
header(‘Content-Type: application/json; charset=utf-8’);
echo json_encode($rs);
“`

> * [#19 $.getを使ってみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25219)
> * [#20 JSONで値を返してみよう | jQuery入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_jquery_v2/25220)
[/markdown]