jQuery勉強　ノート

#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>
```