jQuery的介紹

學習目標

• 能夠知道jQuery的作用及優點

1. jQuery的定義

jQuery是對JavaScript的封裝，它是免費、開源的JavaScript函數庫，jQuery 極大地簡化了 JavaScript 編程。

2. jQuery的作用

jQuery和JavaScript它們的作用一樣，都是負責網頁行為操作，增加網頁和用戶的交互效果的，只不過jQuery簡化了JavaScript編程，jQuery實現交互效果更簡單。

3. jQuery的優點

• jQuery兼容了現在主流的瀏覽器，增加了程序員的開發效率。
• jQuery簡化了 JavaScript 編程，代碼編寫更加簡單。

4. 小結

• jQuery是一個免費、開源的JavaScript函數庫
• jQuery的作用和JavaScript一樣，都是負責網頁和用戶的交互效果。
• jQuery的優點就是兼容主流瀏覽器，代碼編寫更加簡單。

jQuery的用法

學習目標

• 能夠知道jQuery的引入方式
• 能夠說出兩種jQuery入口函數的寫法

1. jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

2. jQuery的入口函數

我們知道使用js獲取標簽元素，需要頁面加載完成以后再獲取，我們通過給onload事件屬性設置了一個函數來獲取標簽元素，而jquery提供了ready函數來解決這個問題，保證獲取標簽元素沒有問題，它的速度比原生的 window.onload 更快。

入口函數示例代碼:

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('div01');
        alert('原生就是獲取的div：' + oDiv);
    };
    $(document).ready(function(){
        var $div=$('#div01');
        alert('jquery獲取的div：' + $div);
    });
</script>

<div id="div01">這是一個div</div>

入口函數的簡寫示例代碼:

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('div01');
        alert('原生就是獲取的div：' + oDiv);
    };

    /*
    $(document).ready(function(){
        var $div=$('#div01');
        alert('jquery獲取的div：' + $div);
    });
    */

    // 上面ready的寫法可以簡寫成下面的形式：
    $(function(){
        var $div=$('#div01');
        alert('jquery獲取的div：' + $div);
    }); 
</script>

<div id="div01">這是一個div</div>

3. 小結

• 引入jQuery
• 獲取標簽元素需要在入口函數來完成，它的速度比原生的 window.onload 更快
• jQuery入口函數有兩種寫法:
• // 完整寫法 $(document).ready(function(){ ... }); // 簡化寫法 $(function(){ ... });

jQuery選擇器

學習目標

• 能夠使用jQuery選擇器獲取標簽元素

1. jQuery選擇器的介紹

jquery選擇器就是快速選擇標簽元素，獲取標簽的，選擇規則和css樣式一樣。

2. jQuery選擇器的種類

1. 標簽選擇器
2. 類選擇器
3. id選擇器
4. 層級選擇器
5. 屬性選擇器

示例代碼:

$('#myId') //選擇id為myId的標簽
$('.myClass') // 選擇class為myClass的標簽
$('li') //選擇所有的li標簽
$('#ul1 li span') //選擇id為ul1標簽下的所有li標簽下的span標簽
$('input[name=first]') // 選擇name屬性等于first的input標簽

說明:
可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。

$(function(){
    result=$("div").length;
    alert(result);
});

3. 小結

• jQuery選擇器就是選擇標簽的
• 標簽選擇器是根據標簽名來選擇標簽
• 類選擇器是根據類名來選擇標簽
• id選擇器是根據id來選擇標簽
• 層級選擇器是根據層級關系來選擇標簽
• 屬性選擇器是根據屬性名來選擇標簽

選擇集過濾

學習目標

• 能夠使用選擇器進行標簽過濾

1. 選擇集過濾的介紹

選擇集過濾就是在選擇標簽的集合里面過濾自己需要的標簽

2. 選擇集過濾的操作

• has(選擇器名稱)方法，表示選取包含指定選擇器的標簽
• eq(索引)方法，表示選取指定索引的標簽

has方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div=$("div").has("#mytext");
        //  設置樣式
        $div.css({"background":"red"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

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

eq方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div=$("div").has("#mytext");
        //  設置樣式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div=$("div").eq(1);
        //  設置樣式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

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

3. 小結

• 選擇集過濾可以使用has方法和eq方法來完成
• jquery給標簽設置樣式使用css方法

選擇集轉移

學習目標

• 能夠說出2種選擇集轉移方法

1. 選擇集轉移介紹

選擇集轉移就是以選擇的標簽為參照，然后獲取轉移后的標簽

2. 選擇集轉移操作

• $('#box').prev(); 表示選擇id是box元素的上一個的同級元素
• $('#box').prevAll(); 表示選擇id是box元素的上面所有的同級元素
• $('#box').next(); 表示選擇id是box元素的下一個的同級元素
• $('#box').nextAll(); 表示選擇id是box元素的下面所有的同級元素
• $('#box').parent(); 表示選擇id是box元素的父元素
• $('#box').children(); 表示選擇id是box元素的所有子元素
• $('#box').siblings(); 表示選擇id是box元素的其它同級元素
• $('#box').find('.myClass'); 表示選擇id是box元素的class等于myClass的元素

選擇集轉移的示例代碼:

<script>
    $(function(){
        var $div=$('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

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

3. 小結

• prev() 表示獲取上一個同級元素
• prevAll() 表示獲取上面所有同級元素
• next() 表示獲取下一個同級元素
• nextAll() 表示獲取下面所有同級元素
• parent() 表示獲取父元素
• children() 表示獲取所有的子元素
• siblings() 表示獲取其它同級元素
• find("選擇器名稱") 表示獲取指定選擇器的元素

獲取和設置元素內容

學習目標

• 能夠知道獲取和設置元素內容的操作

1. html方法的使用

jquery中的html方法可以獲取和設置標簽的html內容

示例代碼:

<script>
    $(function(){

        var $div=$("#div1");
        //  獲取標簽的html內容
        var result=$div.html();
        alert(result);
        //  設置標簽的html內容，之前的內容會清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html內容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>

<div id="div1">
    <p>hello</p>
</div>

說明:

給指定標簽追加html內容使用append方法

2. 小結

• 獲取和設置元素的內容使用: html方法
• 給指定元素追加html內容使用: append方法

獲取和設置元素屬性

學習目標

• 能夠知道獲取和設置元素屬性的操作

1. prop方法的使用

之前使用css方法可以給標簽設置樣式屬性，那么設置標簽的其它屬性可以使用prop方法了。

示例代碼:

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a=$("#link01");
        var $input=$('#input01')

        // 獲取元素屬性
        var sId=$a.prop("id");
        alert(sId);

        // 設置元素屬性
        $a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});

        //  獲取value屬性
        // var sValue=$input.prop("value");
        // alert(sValue);

        // 獲取value屬性使用val()方法的簡寫方式
        var sValue=$input.val();
        alert(sValue);
        // 設置value值
        $input.val("222222");
    })
</script>

<a id="link01">這是一個鏈接</a>
<input type="text" id="input01" value="111111">

說明: 獲取value屬性和設置value屬性還可以通過val方法來完成。

2. 小結

• 獲取和設置元素屬性的操作可以通過prop方法來完成
• 獲取和設置元素的value屬性可以通過val方法來完成，更加簡單和方便

jQuery事件

學習目標

• 能夠說出兩個常用的jQuery事件

1. 常用事件

• click() 鼠標單擊
• blur() 元素失去焦點
• focus() 元素獲得焦點
• mouseover() 鼠標進入（進入子元素也觸發）
• mouseout() 鼠標離開（離開子元素也觸發）
• ready() DOM加載完成

示例代碼:

<script>
    $(function(){
        var $li=$('.list li');
        var $button=$('#button1')
        var $text=$("#text1");
        var $div=$("#div1")

        //  鼠標點擊
        $li.click(function(){             
            // this指的是當前發生事件的對象，但是它是一個原生js對象
            // this.style.background='red';

            // $(this) 指的是當前發生事件的jquery對象
            $(this).css({'background':'gold'});
            // 獲取jquery對象的索引值,通過index() 方法
            alert($(this).index());
        });

        //  一般和按鈕配合使用
        $button.click(function(){
            alert($text.val());
        });

        //  獲取焦點
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  失去焦點
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  鼠標進入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  鼠標離開
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="點擊">
</div>

說明:

• this指的是當前發生事件的對象，但是它是一個原生js對象
• $(this) 指的是當前發生事件的jquery對象

2. 小結

jQuery常用事件:

• click() 鼠標單擊
• blur() 元素失去焦點
• focus() 元素獲得焦點
• mouseover() 鼠標進入（進入子元素也觸發）
• mouseout() 鼠標離開（離開子元素也觸發）
• ready() DOM加載完成

事件代理

學習目標

• 能夠知道事件代理的使用方式

1. 事件代理介紹

事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上，通過判斷事件來源，執行相應的子元素的操作，事件代理首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

事件冒泡代碼:

 <script>
    $(function(){

        var $div1=$('#div1');
        var $div2=$('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>

說明:

當點擊子元素div，它的點擊事件會向它父元素傳遞，也會觸發了父元素的點擊事件，這就是事件冒泡。

2. 事件代理的使用

一般綁定事件的寫法:

$(function(){
    $ali=$('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

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

事件代理的寫法

$(function(){
    $list=$('#list');
    // 父元素ul 來代理 子元素li的點擊事件
    $list.delegate('li', 'click', function() {
        // $(this)表示當前點擊的子元素對象
        $(this).css({background:'red'});
    });
})

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

delegate方法參數說明:

delegate(childSelector,event,function)

• childSelector: 子元素的選擇器
• event: 事件名稱，比如: 'click'
• function: 當事件觸發執行的函數

3. 小結

• 事件代理就是使用父元素來代理子元素的事件，好處是減少事件的綁定次數，提高性能。
• 使用場景當多個相同的子元素綁定同一個事件，可以使用事件代理。
• 事件代理使用是使用delegate方法來完成

JavaScript對象

學習目標

• 能夠知道JavaScript對象有兩種創建方式

1. JavaScript對象的介紹

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數等都可以認為是對象，此外，JavaScript 允許自定義對象，對象可以擁有屬性和方法。

2. JavaScript創建對象操作

創建自定義javascript對象有兩種方式:

• 通過頂級Object類型來實例化一個對象
• 通過對象字面量創建一個對象

Object類創建對象的示例代碼:

<script>
    var person=new Object();

    // 添加屬性：
    person.name='tom';
    person.age='25';

    // 添加方法：
    person.sayName=function(){
        alert(this.name);
    }

    // 調用屬性和方法：
    alert(person.age);
    person.sayName();
</script>

對象字面量創建對象的示例代碼:

<script>
    var person2={
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 調用屬性和方法：
    alert(person2.age);
    person2.sayName();
</script>

說明:

調用屬性和方法的操作都是通過點語法的方式來完成，對象的創建推薦使用字面量方式，因為更加簡單。

3. 小結

創建自定義javascript對象有兩種方式:

• Object
• 字面量

json

學習目標

• 能夠知道json的格式

1. json的介紹

json是 JavaScript Object Notation 的首字母縮寫，翻譯過來就是javascript對象表示法，這里說的json就是類似于javascript對象的字符串，它同時是一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。

2. json的格式

json有兩種格式：

1. 對象格式
2. 數組格式

對象格式:

對象格式的json數據，使用一對大括號({})，大括號里面放入key:value形式的鍵值對，多個鍵值對使用逗號分隔。

對象格式的json數據:

{
    "name":"tom",
    "age":18
}

格式說明:

json中的(key)屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數據錯誤。

數組格式:

數組格式的json數據，使用一對中括號([])，中括號里面的數據使用逗號分隔。

數組格式的json數據:

["tom",18,"programmer"]

實際開發的json格式比較復雜,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}

3. json數據轉換成JavaScript對象

json本質上是字符串，如果在js中操作json數據，可以將json字符串轉化為JavaScript對象。

示例代碼:

var sJson='{"name":"tom","age":18}';
var oPerson=JSON.parse(sJson);

// 操作屬性
alert(oPerson.name);
alert(oPerson.age);

4. 小結

• json就是一個javascript對象表示法，json本質上是一個字符串。
• json有兩種格式：1. 對象格式, 2. 數組格式

ajax

學習目標

• 能夠知道ajax的作用

1. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術，它可以讓 javascript 發送異步的 http 請求，與后臺通信進行數據的獲取，ajax 最大的優點是實現局部刷新，ajax可以發送http請求，當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。

這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

2. ajax的使用

jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執行ajax請求。

示例代碼:

<script>
    $.ajax({
    // 1.url 請求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 請求方式，默認是'GET'，常用的還有'POST'
    type:'GET',
    // 3.dataType 設置返回的數據格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 設置發送給服務器的數據, 沒有參數不需要設置

    // 5.success 設置請求成功后的回調函數
    success:function (response) {
        console.log(response);    
    },
    // 6.error 設置請求失敗后的回調函數
    error:function () {
        alert("請求失敗,請稍后再試!");
    },
    // 7.async 設置是否異步，默認值是'true'，表示異步，一般不用寫
    async:true
});
</script>

ajax方法的參數說明:

1. url 請求地址
2. type 請求方式，默認是'GET'，常用的還有'POST'
3. dataType 設置返回的數據格式，常用的是'json'格式
4. data 設置發送給服務器的數據，沒有參數不需要設置
5. success 設置請求成功后的回調函數
6. error 設置請求失敗后的回調函數
7. async 設置是否異步，默認值是'true'，表示異步，一般不用寫
8. 同步和異步說明同步是一個ajax請求完成另外一個才可以請求，需要等待上一個ajax請求完成，好比線程同步。異步是多個ajax同時請求，不需要等待其它ajax請求完成， 好比線程異步。

ajax的簡寫方式:

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

ajax簡寫方式的示例代碼:

 <script>
    $(function(){
        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("網絡異常");
        });

        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("網絡異常");
        }); 
    });


</script>

$.get和$.post方法的參數說明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

1. url 請求地址
2. data 設置發送給服務器的數據，沒有參數不需要設置
3. success 設置請求成功后的回調函數data 請求的結果數據status 請求的狀態信息, 比如: "success"xhr 底層發送http請求XMLHttpRequest對象
4. dataType 設置返回的數據格式"xml""html""text""json"
5. error 表示錯誤異常處理func 錯誤異常回調函數

3. 小結

• ajax 是發送http請求獲取后臺服務器數據的技術
• ajax的簡寫方式可以使用$.get和$.post方法來完成