黑馬程式員---jQuery入門

一：jQuery的引入方式和入口函數：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入口函數</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        //先将dou=cument轉換成jQuery ，然後調用ready方法，方法裡面是function函數。

        $(document).ready(function(){
            var $div = $('#div01');
            alert('jquery擷取的div' + $div);
        })
        
        //最簡潔的寫法：
        //符号裡面直接寫function函數。
        $(function(){
            var $div = $('#div01');
            alert('jquery擷取的div' + $div);
        })
    </script>

</head>
<body>
    <div id="div01">我是盒子一</div>
</body>
</html>

二：jQuery的選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇器</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
        // 1:标簽選擇器，選擇所有的div标簽
        $div = $("div");
        console.log($div.length);

        // 2:類選擇器
        $oDiv = $(".div1");
        console.log($oDiv.length);

        // 3:id選擇器
        $oDiv2 = $("#div2");
        console.log($oDiv2.length);

        // 4:層級選擇器
        $Op = $(".div3 p");
        console.log($Op.length);

        // 5:屬性選擇器,特殊，都不用加雙引号。
        $oText = $("input[name=first]");
        console.log($oText.length);

    });
    </script>
</head>
<body>
    <div>我是div盒子1</div>
    <div class="div1">我是div盒子2</div>
    <div id = "div2">我是div盒子3</div>
    <div class="div3">我是<p>div</p>盒子4</div>
    <div>我是div盒子5</div>

    <input type="text" name="first">
    <input type="rodio" name="secound">
    <input type="text" name="thrid">
</body>
</html>

三：選擇集過濾：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇集過濾</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            var $div = $("div")

            console.log($div.length)
            //使用has選擇第一個标簽
            var $div1 = $div.has("#mytext")

            console.log($div1.length)
            //使用eq選擇第二個标簽,注意下标一是第二個
            var $div2 = $div.eq(1)
            $div2.css({'background-color':'red'})
        })
    </script>
    
</head>
<body>
    <div>
        這是第一個div
        <input type="text" id="mytext">
    </div>

    <div>
        這是第二個div
        <input type="text">
        <input type="button">
    </div>
</body>
</html>

四：選擇集轉移；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇集轉移</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //選出目标的div
            var $div = $("#div01");

            //選擇上一個元素
            $div.prev().css({'color':'blue'});
            //選擇下一個元素
            $div.next().css({'color':'red'});

            //選擇前面所有元素
            $div.prevAll().css({'color':"green"});

            //選擇後面所有元素
            $div.nextAll().css({'color':'black'});

            //選擇父類元素
            // $div.parent().css({'background-color':'red'});

            //選擇同級元素
            $div.siblings().css({'color':'red'});

            //選擇所有的孩子
            $div.children().css({'color': 'blue'})

            //選擇子類元素的某一個
            $div.find('.sp02').css({'font-size':'50px'});

        })
    </script>
</head>
<body>

    <h2>這是第一個h2标簽</h2>
    <p >這是第一個段落</p>
    <div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
    <h2>這是第二個h2标簽</h2>
    <p>這是第二個段落</p>

</body>
</html>

五：擷取和設定元素内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇集轉移</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //選出目标的div
            var $div = $("#div01");

            //選擇上一個元素
            $div.prev().css({'color':'blue'});
            //選擇下一個元素
            $div.next().css({'color':'red'});

            //選擇前面所有元素
            $div.prevAll().css({'color':"green"});

            //選擇後面所有元素
            $div.nextAll().css({'color':'black'});

            //選擇父類元素
            // $div.parent().css({'background-color':'red'});

            //選擇同級元素
            $div.siblings().css({'color':'red'});

            //選擇所有的孩子
            $div.children().css({'color': 'blue'})

            //選擇子類元素的某一個
            $div.find('.sp02').css({'font-size':'50px'});

        })
    </script>
</head>
<body>

    <h2>這是第一個h2标簽</h2>
    <p >這是第一個段落</p>
    <div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
    <h2>這是第二個h2标簽</h2>
    <p>這是第二個段落</p>

</body>
</html>

六：擷取和設定元素屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>擷取設定元素屬性</title>
    <style>
        #link01{
            color:red;
            font-size: 30px;
        }
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){

            
            //1：擷取除css之外的屬性
            $link = $("#link01");
            console.log($link.prop("id"));
            $input = $("#input01");
            console.log($input.prop("type"));
            console.log($input.prop("id"));
            console.log($input.prop("value"));
            //2:擷取value的特殊：
            console.log($input.val());

            //3:擷取css屬性
            console.log($link.css("color"));
            console.log($link.css("font-size"));

            //4:設定标簽的屬性
            $link.prop({"href": "http://www.baidu.com"});

            //5:設定标簽的值
            $link.val("連結");
            console.log($link.prop("value"));

            //6：修改标簽的元素
            $link.val("這是個連結");
            console.log($link.prop("value"));




        })
    </script>
</head>
<body>
    <a id="link01">這是一個連結</a>
    <input type="text" id="input01" value="111111">
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery的事件</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){

            //1：擷取所有标簽的對象
            var $list = $(".list");
            var $li = $(".list li");
            var $text = $("#text1");
            var $button = $("#button1");
            
            //2:給li設定點選事件，點選後變成紅色,沒有被點選的設定成黑色。
            //注意siblings是個函數，必須寫括号。

            $li.click(function(){
                $(this).css({"color":"red"});
                $(this).siblings().css({"color":"black"});
            });


            //3：讓text擷取焦點時是藍色，失去焦點時是紅色。
            $text.click(function(){
                $(this).css({"background":"blue"});
            });

            $text.blur(function(){
                $(this).css({"background":"red"});
            });
            //4:設定點選按鈕，滑鼠經過按鈕變成黃色，滑鼠離開變成白色
            $button.mouseup(function(){
                $(this).css({"color":"yellow"});
            })

            $button.mouseover(function(){
                $(this).css({"color":"white"});
            })

        });
    </script>
</head>

<body>
    <ul class="list">
        <li>清單文字</li>
        <li>清單文字</li>
        <li>清單文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="點選">
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>擷取和設定元素屬性</title>
    <style>
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            //1:擷取對象
            var $a = $("#link01");
            var $oInput = $("#input01");
            //2:擷取屬性
            console.log($a.prop("id"));
            console.log($oInput.prop("type"));
            console.log($oInput.prop("value"));
            //3：擷取值的簡寫
            console.log($oInput.val());

            //4:重寫屬性/增加屬性
            $a.prop({"href":"http://www.baidu.com","title":"這是去百度的網址"})
            console.log($a.prop("href"));
            $oInput.prop({"value":"2222222222"});
            console.log($oInput.prop("value"))
        });
    </script>
</head>
<body>
    <a id="link01">這是一個連結</a>
    <input type="text" id="input01" value="111111">
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <!-- 為啥要用事件代理技術？？ -->
    <!-- 事件代理技術：如果采用之前的選擇list下所有li标簽的形式，如果增加li的代碼在點選事件後面 -->
    <!-- 那麼新加入的将不會改變樣式。 -->
    <!-- 事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),
    把事件加到父級上，通過判斷事件來源，執行相應的子元素的操作，事件代理首先可以極大減少事件綁定次數，
    提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。 -->

    
    <script>
        $(function(){
            $list = $("#list");
            $list.delegate("li","click",function(){
                $(this).css({"color":"red"});
                $(this).siblings().css({"color":"black"});
            })
        });
    </script>
</head>

<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

黑馬程式員---jQuery入門

繼續閱讀

2010年終總結--技術篇

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

jquery_126_demo