1. 程式人生 > >潭州課堂25班:Ph201805201 WEB 之 Ajax第八課 (課堂筆記)

潭州課堂25班:Ph201805201 WEB 之 Ajax第八課 (課堂筆記)

筆記 this elements 當前 ajax each yellow ctype tag

js 《——》jq

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一</div>
    <div>二</div>
    <div>三</div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>

        // JQ --> JS
        var $div = $(‘div‘);            //JQ 對象
        var div0 = $(‘div‘)[0];         // JS 對象
        var div1 = $(‘div‘).get(1);     // JS 對象

        // js --> jq
        var div = document.getElementsByTagName(‘div‘);
        var $divs = $(div);
    </script>
</body>
</html>

  

this 特殊選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <!--<style>-->
        <!--div{-->
            <!--color: ;-->
        <!--}-->
    <!--</style>-->
<body>
    <div>一二三四</div>

    
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $(‘div‘).click(function () {
            var $div = $(this);
            $div.css(‘color‘,‘yellow‘)      // 特殊選擇器指的是當前元素
        })
    </script>
</body>
</html>

  

each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>1aa</li>
        <li>2bb</li>
        <li>3cc</li>
        <li>4dd</li>
    </ul>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>

        // JQ 裏的 each 方法
        // $.each([‘a‘,‘b‘,‘c‘],function(i,n){
        //     console.log(i+‘:‘+n);            //類似 for 循環
        // });

        var $ul = $(‘li‘);
        $.each($ul,function (i,li) {
            console.log($(li).text());         //  JQ 依次拿到 li 中的文字
            console.log(li.innerText);         //  JS 依次拿到 li 中的文字
        })

        $.each($ul,function () {
            console.log($(this).text());         //  JQ 依次拿到 li 中的文字
            console.log(this.innerText);         //  JS 依次拿到 li 中的文字
        })
        
    </script>
</body>
</html>

  

Ajax

潭州課堂25班:Ph201805201 WEB 之 Ajax第八課 (課堂筆記)