Day10_JQuery&Ajax

全天目标

1.了解JQuery的基本概念
2.通過入門案例掌握JQuery的使用步驟
3.了解JQuery對象和JS對象差別與轉換
4.掌握JQuery的基本選擇器
5.掌握JQuery的屬性選擇器
6.掌握JQuery的常用DOM操作
7.了解JQuery周遊
8.了解JQuery綁定事件
9.了解JQuery事件切換
10.了解Ajax的概念
11.掌握Jquery實作Ajax的方式

今日内容

1.JQuery
    1.1.JQuery概述
    1.2.JQuery入門
    1.3.JQuery對象和JS對象差別與轉換
        1.3.1.JQuery對象和JS對象概念
        1.3.2.JQuery對象和JS對象差別
        1.3.3.JQuery對象和JS對象轉換
    1.4.JQuery的選擇器
        1.4.1.基本選擇器
        1.4.2.屬性選擇器
    1.5.常用DOM操作
    1.6.Jquery周遊
    1.7.事件綁定
    1.8.事件切換
2.Ajax
    2.1.Ajax概述
    2.2.異步和同步
    2.3.jquery方式
        2.3.1.$.ajax()方式
        2.3.2.$.get()方式
        2.3.3.$.post()方式

1.JQuery

1.1 JQuery概述

目标

1.了解Jquery是什麼。
2.了解Jquery能做什麼。

Jquery是什麼

jQuery是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript架構）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。

Jquery能做什麼

Jquery封裝了JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax互動。

小結

1.JQuery就是一個JS的架構，用于簡化JS的開發

1.2.JQuery入門

目标

1.通過入門案例掌握Jquery的使用步驟。

1.2.1.JQuery入門案例

步驟

1. 下載下傳JQuery
2. 導入JQuery的js檔案
3. 使用JQuery

下載下傳JQuery

下載下傳網址：https://code.jquery.com/jquery/

[外鍊圖檔轉存失敗(img-LvTcf03S-1567514752472)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery下載下傳_1.png)]

[外鍊圖檔轉存失敗(img-7muPv6wK-1567514752475)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery下載下傳_2.png)]

如果不能下載下傳，可以使用資料中事先下載下傳好的Jquery檔案。

Jquery的版本

1.x：相容ie678,使用最為廣泛的，官方隻做BUG維護，功能不再新增。是以一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)。
2.x：不相容ie678，很少有人使用，官方隻做BUG維護，功能不再新增。如果不考慮相容低版本的浏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)。
3.x：不相容ie678，隻支援最新的浏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支援這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）。

jquery-xxx.js 與 jquery-xxx.min.js差別

jquery-xxx.js：開發版本。給程式員看的，有良好的縮進和注釋，體積大一些。
jquery-xxx.min.js：生産版本。程式中使用，沒有縮進。體積小一些，程式加載更快。

案例

1.将資料中的Jquery檔案拷貝到項目的js目錄（注意這裡拷貝的是xxx.min.js）

2.建立一個頁面，名稱為“02-JQuery快速入門.html”，在頁面中引入Jquery檔案，并編寫代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入門</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>

<script>
    //使用JQuery擷取元素對象
    var div1 = $("#div1");
    alert(div1.html());
    var div2 = $("#div2");
    alert(div2.html());
</script>

</body>
</html>

3.浏覽器打開頁面。

小結

1.使用Jquery的步驟
	第1步：下載下傳JQuery的js檔案
	第2步：把JQuery的js檔案導入到目前項目中。
	第3步：在頁面引入JQuery的js檔案
	第4步：使用Jquery

1.3.JQuery對象和JS對象

目标

1.了解JQuery對象和JS對象的概念
2.了解JQuery對象和JS對象的特點和差別
3.掌握JQuery對象和JS對象的轉換

1.3.1.概念

目标

1.了解JQuery對象和JS對象的概念

概念

JQuery對象：使用JQuery的文法$()擷取到的頁面元素，稱之為JQuery對象。

JS對象：使用JS的文法擷取到的頁面元素，稱之為JS對象。

案例

1.建立一個頁面，名稱為03-JQuery對象和js對象的轉換.html，在js區域編寫代碼。

2.JS對象擷取

//1. 通過js方式來擷取名稱叫div的所有html元素對象
var divs = document.getElementsByTagName("div");
alert(divs);

3.浏覽器打開，檢視效果。

[外鍊圖檔轉存失敗(img-xbWbOWGG-1567514752476)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_1.png)]

4.JQuery對象

//2. 通過jq方式來擷取名稱叫div的所有html元素對象
var $divs = $("div");
alert($divs);

5.浏覽器打開，檢視效果。

[外鍊圖檔轉存失敗(img-nuDM6MRV-1567514752477)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_2.png)]

6.雖然擷取的對象不一樣，但是都可以當做數組來使用，都可以通過其length方法擷取長度。

//1. 通過js方式來擷取名稱叫div的所有html元素對象
var divs = document.getElementsByTagName("div");
alert(divs.length);//可以将其當做數組來使用

//2. 通過jq方式來擷取名稱叫div的所有html元素對象
var $divs = $("div");
alert($divs.length);//也可以當做數組使用

7.浏覽器打開，檢視效果。

[外鍊圖檔轉存失敗(img-mQq5YF1t-1567514752477)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_3.png)]

[外鍊圖檔轉存失敗(img-IiWHt13k-1567514752478)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_4.png)]

小結

1.使用JQuery中的文法$()擷取的頁面元素稱之為JQuery對象，使用JS原生文法擷取的頁面元素稱之為JS對象

1.3.2.JQuery對象和JS對象的差別

目标

1.了解JQuery對象和JS對象的特點和差別

案例

1.在03-JQuery對象和js對象的轉換.html的js區域編寫代碼。

2.操作JS對象

//對divs中所有的div 讓其标簽體内容變為"aaa"
for (var i = 0; i < divs.length; i++) {
	 divs[i].innerHTML = "aaa";
}

3.浏覽打開，檢視效果

[外鍊圖檔轉存失敗(img-lbn17hPG-1567514752479)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_5.png)]

4.操作JQuery對象

//對divs中所有的div 讓其标簽體内容變為"bbb"  使用jq方式
$divs.html("bbb");

5.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-BL3qbezY-1567514752480)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_6.png)]

6.我們會發現用jquery操作比用原生的js操作要友善很多，是以我們得出一個結論

JQuery對象在操作時，更加友善。
JQuery對象和js對象方法不通用的。

在03-JQuery對象和js對象的轉換.html的js區域編寫代碼。

浏覽器打開，檢視效果，發現不起作用。

[外鍊圖檔轉存失敗(img-P5maKhub-1567514752481)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_7.png)]

小結

1.JS對象隻能通過JS文法擷取，操作時相對來說比較複雜
2.JQuery對象隻能通過JQuery文法擷取，在操作上比JS對象要簡單很多

1.3.3.JQuery對象和JS對象的互相轉換

目标

1.掌握JQuery對象和JS對象的轉換

文法

JQuery對象轉化為JS對象： jq對象[索引] 或者 jq對象.get(索引)
JS對象轉化為JQuery對象：$(js對象)

案例

1.在03-JQuery對象和js對象的轉換.html的js本區域編寫代碼。

2.JS對象轉化為JQuery對象

for (var i = 0; i < divs.length; i++) {
	//divs[i].innerHTML = "aaa";
	$(divs[i]).html("ccc");
}

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-sY5jAQir-1567514752481)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_8.png)]

4.JQuery對象轉化為JS對象

//将第一個div的内容改為ddd,将第二個div的内容改為eee
$divs[0].innerHTML = "ddd";
$divs.get(1).innerHTML = "eee";

5.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-kKQZ6qfL-1567514752482)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\jquery對象和js對象的差別_9.png)]

小結

1.JQuery對象轉化為JS對象： jq對象[索引] 或者 jq對象.get(索引)
2.JS對象轉化為JQuery對象：$(js對象)

1.4.基本操作

目标

1.掌握Jquery的事件綁定的方式
2.了解Jquery的入口函數
4.掌握Jquery控制css樣式

1.4.1 事件綁定

案例

1.建立一個頁面，名稱為04-事件綁定.html，在js區域編寫代碼。

$("#b1").click(function(){
  alert("abc");
});

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-WvwuqIEq-1567514752483)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery綁定事件_1.png)]

當然，除了可以綁定click()點選事件之外，也可以綁定其他點選事件，比如submit()、blur()事件。

1.4.2 入口函數

JS的寫法

1.在頁面的js區域，編寫代碼

window.onload = function(){
	//1.擷取b1按鈕
	$("#b1").click(function(){
		 alert("abc");
	});
}

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-ppkCrSA9-1567514752484)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery入口函數.png)]

JQuery的寫法

1.在js中注釋掉其他代碼，編寫以下代碼

//jquery入口函數(dom文檔加載完成之後執行該函數中的代碼)
$(function () {
	//1.擷取b1按鈕
	$("#b1").click(function(){
		  alert("abc");
	});
});

2.浏覽打開，檢視效果

[外鍊圖檔轉存失敗(img-Vm9UhChc-1567514752485)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery入口函數.png)]

兩種入口函數的差別

window.onload和 ( f u n c t i o n ( ) ) 都能實現 d o m 文檔加載完成之後再執行函數代碼的操作，那 w i n d o w . o n l o a d 和 (function(){})都能實作dom文檔加載完成之後再執行函數代碼的操作，那window.onload和 (function())都能實作dom文檔加載完成之後再執行函數代碼的操作，那window.onload和(function(){})有什麼差別？主要有以下兩點差別：

window.onload 隻能定義一次,如果定義多次，後邊的會将前邊的覆寫掉
$(function)可以定義多次的

下面針對這兩個差別來一一進行講解。

window.onload 隻能定義一次,如果定義多次，後邊的會将前邊的覆寫掉

案例

1.在js中注釋掉其他代碼，編寫以下代碼
```
window.onload  = function fun1(){
	alert("abc");
}

window.onload  = function fun1(){
	alert("bcd");
}
           
```
2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-4DbBVt4v-1567514752485)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery入口函數_1.png)]

我們定義了兩個window.onload，但是用浏覽器打開的時候，發現隻彈出了bcd,并沒有彈出abc,說明後面的将前面的覆寫掉了。
$(function(){})可以定義多次的。

案例

1.在js中注釋掉其他代碼，編寫以下代碼
```
$(function(){
	alert(123);
});

$(function(){
	alert(234);
});
           
```
2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-lgEjrZKC-1567514752486)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery入口函數_2.png)]

[外鍊圖檔轉存失敗(img-QrUIYNip-1567514752487)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery入口函數_3.png)]

用浏覽器打開，檢視效果，發現123和234都彈出來了，是以呢$(function)是可以定義多次的。

1.4.3 樣式控制

JQuery要實作樣式控制，需要使用到其中的css()函數來進行實作，接下來通過一個案例來具體介紹一下。

案例

案例需求：給id為div1的div設定背景色

方式一

1.在js中注釋掉其他代碼，編寫以下代碼

$(function(){
   $("#div1").css("background-color","red");
});

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-Q3iNiSK5-1567514752489)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery樣式控制.png)]

方式二

1.在js中注釋掉其他代碼，編寫以下代碼

$(function(){
   $("#div1").css("backgroundColor","pink");
});

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-BK491a5F-1567514752489)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Jquery樣式控制_1.png)]

小結

1.JQuery綁定事件采用的是$("#b1").click(function(){})，當然除了click事件也可以綁定其他事件
2.JQuery的入口函數采用的$(function () {})來實作
3.JQuery的樣式控制$("#div1").css("","")來實作

1.5.JQuery選擇器

目标

1.了解什麼是選擇器及基本使用文法和作用
2.掌握基本選擇器
2.掌握屬性選擇器

1.5.1 選擇器概述

目标

1.了解什麼是選擇器及基本使用文法和作用

選擇器是什麼

Jquery中的選擇器，指的是用來擷取頁面元素的一種特殊文法，與CSS中的選擇器類似。

使用文法

作用

用來篩選擷取頁面标簽元素。

小結

1.JQuery的選擇器類似于CSS的選擇器,CSS的選擇器在篩選出标簽之後，可以來控制它們的樣式，而JQuery的選擇器是在篩選出标簽之後，可以來操作它們的方法、屬性等。
2.JQuery選擇器的使用文法為$("選擇器")
3.JQuery選擇器的作用就是用來篩選擷取頁面标簽元素

1.5.3 基本選擇器

目标

1.了解JQuery中基本選擇器的使用

分類

id選擇器
标簽選擇器（元素選擇器）
類選擇器
并集選擇器

準備工作

将資料中的選擇器目錄拷貝到項目中。用浏覽器打開01-基本選擇器.html，檢視頁面，每個按鈕上都有字，字就是點選按鈕實作的效果。

[外鍊圖檔轉存失敗(img-XGd8jce2-1567514752490)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\JQuery選擇器.png)]

id選擇器

文法：$("#id的屬性值") 獲得與指定id屬性值比對的元素

案例

1.在01-基本選擇器.html的js區域，給id為b1的按鈕綁定點選事件

2.在其中通過id選擇器篩選對應的标簽，并設定樣式

$("#b1").click(function () {
	$("#one").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-HF0UI7GN-1567514752491)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\基本選擇器_1.png)]

标簽選擇器（元素選擇器）

文法：文法： $(“html标簽名”) 獲得所有比對标簽名稱的元素

案例

1.在01-基本選擇器.html的js區域，給id為b2的按鈕綁定點選事件

2.在其中通過标簽選擇器篩選對應的标簽，并設定樣式

$("#b2").click(function () {
      $("div").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-k9wFasjH-1567514752492)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\基本選擇器_2.png)]

類選擇器

文法： $(".class的屬性值") 獲得與指定的class屬性值比對的元素

案例

1.在01-基本選擇器.html的js區域，給id為b3的按鈕綁定點選事件

2.在其中通過類選擇器篩選對應的标簽，并設定樣式

$("#b3").click(function () {
    $(".mini").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-MPeDLefh-1567514752493)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\基本選擇器_3.png)]

并集選擇器

文法：$(“選擇器1,選擇器2…”) 擷取多個選擇器選中的所有元素

案例

1.在01-基本選擇器.html的js區域，給id為b4的按鈕綁定點選事件

2.在其中通過并集選擇器篩選對應的标簽，并設定樣式

$("#b4").click(function () {
     $("span,#two").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-hE1lwZBG-1567514752493)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\基本選擇器_4.png)]

小結

1. 标簽選擇器（元素選擇器）
    * 文法： $("html标簽名") 獲得所有比對标簽名稱的元素
2. id選擇器 
    * 文法： $("#id的屬性值") 獲得與指定id屬性值比對的元素
3. 類選擇器
    * 文法： $(".class的屬性值") 獲得與指定的class屬性值比對的元素
4. 并集選擇器：
    * 文法： $("選擇器1,選擇器2....") 擷取多個選擇器選中的所有元素

1.5.4 屬性選擇器

目标

1.了解JQuery中屬性選擇器的使用

分類

屬性名稱選擇器
屬性選擇器
複合屬性選擇器

準備工作

浏覽器打開02-屬性選擇器.html，檢視頁面，每個按鈕上都有字，字就是點選按鈕實作的效果。

[外鍊圖檔轉存失敗(img-e6PDRJSK-1567514752494)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_1.png)]

屬性名稱選擇器

文法：$(“A[屬性名]”) 包含指定屬性的選擇器

案例

1.在02-屬性選擇器.html的js區域，給id為b1的按鈕綁定點選事件

2.在其中通過屬性名稱選擇器篩選對應的标簽，并設定樣式

$("#b1").click(function () {
	$("div[title]").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-pvZ1h6Hv-1567514752495)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_2.png)]

屬性選擇器

文法

$(“A[屬性名=‘值’]”) 指定屬性等于指定值的選擇器
$(“A[屬性名!=‘值’]”) 指定屬性不等于指定值的選擇器
$(“A[屬性名^=‘值’]”) 指定屬性以指定值開頭的選擇器
( " A [ 屬性名 ("A[屬性名 ("A[屬性名=‘值’]") 指定屬性以指定值結尾的選擇器
$(“A[屬性名*=‘值’]”) 指定屬性包含指定值的選擇器

案例1

1.在02-屬性選擇器.html的js區域，給id為b2的按鈕綁定點選事件

2.在其中通過屬性選擇器篩選對應的标簽，并設定樣式

$("#b2").click(function () {
	$("div[title='test']").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-quNMAsHC-1567514752496)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_3.png)]

案例2

1.在02-屬性選擇器.html的js區域，給id為b3的按鈕綁定點選事件

2.在其中通過屬性選擇器篩選對應的标簽，并設定樣式

$("#b3").click(function () {
		$("div[title!='test']").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-wufSP8lR-1567514752497)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_4.png)]

案例3

1.在02-屬性選擇器.html的js區域，給id為b4的按鈕綁定點選事件

2.在其中通過屬性選擇器篩選對應的标簽，并設定樣式

$("#b4").click(function () {
		$("div[title^='test']").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-bpAGLida-1567514752498)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_5.png)]

案例4

1.在02-屬性選擇器.html的js區域，給id為b5的按鈕綁定點選事件

2.在其中通過屬性選擇器篩選對應的标簽，并設定樣式

$("#b5").click(function () {
		$("div[title$='est']").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-ax8UWE1D-1567514752498)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_6.png)]

案例5

1.在02-屬性選擇器.html的js區域，給id為b6的按鈕綁定點選事件

2.在其中通過屬性選擇器篩選對應的标簽，并設定樣式

$("#b6").click(function () {
	$("div[title*='es']").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-iIa0yHv8-1567514752499)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_7.png)]

複合屬性選擇器

文法：$(“A[屬性名=‘值’][]…”) 包含多個屬性條件的選擇器

案例

1.在02-屬性選擇器.html的js區域，給id為b7的按鈕綁定點選事件

2.在其中通過屬性選擇器篩選對應的标簽，并設定樣式

$("#b7").click(function () {
		$("div[id][title*='es']").css("backgroundColor","pink");
});

3.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-msv0zgup-1567514752499)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\屬性選擇器_8.png)]

小結

1. 屬性名稱選擇器 
    * 文法： $("A[屬性名]") 包含指定屬性的選擇器
2. 屬性選擇器
    * 文法： $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
3. 複合屬性選擇器
    * 文法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器

1.6.常見DOM操作

目标

1.掌握Jquery操作元素内容的方式
2.掌握Jquery操作元素屬性的方式

1.6.1 操作元素内容

目标

1.掌握Jquery操作元素内容的三種方式

相關API

1. html(): 擷取/設定元素的标簽體内容  
2. text(): 擷取/設定元素的标簽體純文字内容
3. val()： 擷取/設定元素的value屬性值

案例

準備工作

将資料中的dom操作目錄拷貝到項目中，浏覽器打開01-html&text&val.html。

[外鍊圖檔轉存失敗(img-G9qP8Fb3-1567514752500)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容.png)]

val()操作

擷取輸入框的value屬性的值

1.在01-html&text&val.html頁面中編寫js代碼

// 擷取myinput 的value值
var value = $("#myinput").val();
alert(value);

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-tQzMxUEI-1567514752501)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容_1.png)]

設定輸入框的value屬性的值

1.在01-html&text&val.html頁面中注釋其他代碼，編寫js代碼

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-i7dRYn0I-1567514752501)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容_2.png)]

html()操作

擷取div的标簽體内容

1.在01-html&text&val.html頁面中注釋其他代碼，編寫js代碼

//擷取mydiv的标簽體内容
var html = $("#mydiv").html();
alert(html);

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-9x7yXkOj-1567514752502)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容_3.png)]

設定div的标簽體内容

1.在01-html&text&val.html頁面中注釋其他代碼，編寫js代碼

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-mUwOhnsJ-1567514752503)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容_4.png)]

text()操作

擷取div标簽的純文字内容

1.在01-html&text&val.html頁面中注釋其他代碼，編寫js代碼

// 擷取mydiv文本内容
var text = $("#mydiv").text();
alert(text);

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-qCy1BobN-1567514752504)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容_5.png)]

設定div标簽的純文字内容

1.在01-html&text&val.html頁面中注釋其他代碼，編寫js代碼

2.浏覽器打開，檢視效果

[外鍊圖檔轉存失敗(img-yqrHFdSj-1567514752505)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素内容_6.png)]

小結

1.html()擷取/設定元素的标簽體内容  
2.text()擷取/設定元素的标簽體純文字内容
3.val()擷取/設定元素的value屬性值

1.6.2 操作元素屬性

目标

1.掌握Jquery操作元素屬性的方式

Jquery操作元素屬性的方式分為兩種

通用屬性操作
對class屬性操作

1.6.2.1.通用屬性操作

目标

1.掌握Jquery操作通用屬性的操作

相關API

1. attr(): 擷取/設定元素的屬性
2. removeAttr():删除屬性
3. prop():擷取/設定元素的屬性
4. removeProp():删除屬性

案例

準備工作

浏覽器打開02-prop.html頁面，檢視頁面内容

[外鍊圖檔轉存失敗(img-OzO5s6Lm-1567514752506)(E:\資料\鄭州\工作\正式研發\大資料\可視化項目\JavaWeb\day10_jquery&ajax\筆記\images\Dom操作元素屬性.png)]

擷取節點的name屬性