內容回顧
-
JS開發步驟
- 確定事件（onclick鼠標點擊事件，onsubmit表單的提交事件，onload頁面加載完成事件）
- 定義函數實現功能
- 獲取標簽的控制權, 修改標簽樣式和屬性
-
BOM(Broswer Object Model,瀏覽器對象模型)
- window: 瀏覽器中的窗口
特點：API調用不需要書寫window
三個框：警告框alert(), 確認框confirm(), 對話框prompt()
五個函數：
setInterval(“函數調用”,ms)周期性的計時器
setTimeout(“函數調用”,ms)一次性的計時器
對應上面兩個函數的清除函數
clearInterval(ID)
clearTimeout(ID)
open()打開新的窗口訪問地址 - location: 瀏覽器的地址欄
屬性：href 改變瀏覽器地址欄的值
location.href = "URL" - history: 瀏覽器歷史記錄
- screen: 瀏覽器顯示的屏幕
- navigator: 瀏覽器的信息
- window: 瀏覽器中的窗口
JS常用事件
== onclick 點擊事件 ==
==ondblclick雙擊事件==
==onload 頁面加載==
==onsubmit 表單提交事件==
==onchange 下拉列表改變==
==onfocus 獲得焦點==
==onblur 失去焦點==-
JS的DOM模型
DOM：Document Object Model：文檔對象模型.
將一個HTML的文檔加載到內存形成一個樹形結構,從而操作樹形結構就可以改變HTML的樣子.
==document對象：表示文檔在內存中的樹狀圖==
==Element 對象：表示所有的標簽==
==Attribute對象：標簽中的所有的屬性==
常用的API:- 獲得元素
document.getElementById()通過ID獲得標簽
document.getElementsByName()通過name屬性獲得一組標簽
document.getElementsByTagName()通過標簽名稱獲得一組標簽 - 創建元素
document.createElement(名字)
document.createTextNode(文字) - 添加元素
父標簽.appendChild(子標簽)
element.insertBefore(新標簽,之前的標簽)某個標簽前添加新標簽 - 刪除元素
父標簽.removeChild(子標簽)
- 獲得元素
-
內置對象
數組定義
var arr = new Array(length)
var arr = [];
arr = [1,2,3,”aaaa”];
==特點：js數組長度可變并且類型不固定==
String 類似Java全局函數
parseInt("")將字符串轉換成整數
parseFloat("")將字符串轉換成數字
eval("JS代碼");執行JS代碼
今日重點
- jQuery的作用:對于JS的封裝，實現動態效果
- ==jQuery對象與JS對象相互轉換==
- ==jQuery的選擇器==
- ==jQuery對文檔的操作==
- ==jQuery對元素的循環遍歷==
要求：
01- 案例一：使用JQ定時彈出廣告：需求和JQ的概述
- 什么是jQuery？
是JS的框架，集成封裝了JS的功能模塊，快速的實現網頁的交互 - 怎么查詢Jquery的文檔？
jQuery1.11.0_20140330.chm
02- 案例一：使用JQ定時彈出廣告：JQ的入門及JS對象和JQ對象的轉換
-
怎么使用jQuery?
- 引入jQuery的包（后綴名.js）
<script src="../../js/jquery-1.11.3.min.js"></script> - 使用JQ對象
表示當頁面加載完成之后執行代碼：
$(function(){ JQ語句 })
功能類似
window.onload=function(){ }
- 引入jQuery的包（后綴名.js）
-
JS對象與JQ對象相互轉換
- JS對象轉換成JQ對象
// JS對象 var ele = document.getElementById(id); // JQuery對象 $(ele); - JQ對象轉換成js對象
$() 獲得的對象都是JQ對象
使用$()[0]或者$().get(0)轉換成js對象
- JS對象轉換成JQ對象
03- 案例一：使用JQ定時彈出廣告：JQ的效果函數的概述
- JQ中三種顯示隱藏的方法：
-
show()顯示/hide()隱藏 -
slideDown()向下滑動/slideUp()向上滑動 -
fadeIn()淡入/fadeOut()淡出
-
- 使用有四種方式（都類似）：
Jq對象.fadeOut();Jq對象.fadeOut(“slow”); // slow,normal,fastJq對象.fadeOut(毫秒值); // 1000Jq對象.fadeOut(毫秒值,function(){});
04- 案例一：使用JQ定時彈出廣告：代碼實現
- 創建一個HTML的頁面.
- 在頁面中創建一個廣告部分的DIV,并且設置DIV是隱藏的.
- 設置定時操作,5秒鐘執行一個顯示的方法.
setInterval()或者setTimeout()設置定時
執行完成后清除clearInterval()或者clearTimeout()
顯示：show()/slideDown()/fadeIn() - 再設置一個定時,5秒鐘執行一個隱藏的方法.
setInterval()或者setTimeout()設置定時
執行完成后清除clearInterval()或者clearTimeout()
顯示：hide()/slideUp()/fadeOut()
05- 案例一：使用JQ定時彈出廣告：總結：JQ的選擇器-基本選擇器
JQ強大的選擇器提供操作便利（類比CSS當中的選擇器去記憶）
- 基本選擇器
- id選擇器: 用法:$("#id")
- 類選擇器: 用法:$(".class")
- 元素選擇器: 用法:$("div")
- 通配符選擇器: 用法:$("*")
- 并列選擇器: 用法:$("選擇器名稱, 選擇器名稱")
06-案例一：使用JQ定時彈出廣告：總結：JQ的選擇器-層級選擇器
- 層級選擇器
- 后代選擇器：使用空格" " 所有后代包含孫子及以下的元素
$("body div")選中body中所有的div標簽 - 子元素選擇器：使用">" 第一層的元素（兒子）
$("body > div")選中body中直接包含的div - 下一個元素: 使用"+" 下一個同輩元素
$("#three + div")選中ID為three的標簽的后一個div - 兄弟元素:使用"~" 后面所有的同輩元素
$("#two ~ div")選中ID為two的后面所有同一級的DIV
- 后代選擇器：使用空格" " 所有后代包含孫子及以下的元素
07-案例一：使用JQ定時彈出廣告：總結：JQ的選擇器基本過濾及內容選擇器
- 基本過濾選擇器
- ：first 選中第一個
- ：last選中最后一個
- ：not（選擇器） 取反
- ：eq(index) 選中下標等于某個
- ：gt(index)選中下標大于某個
- ：lt(index)選中下標小于某個
- ：even選中所有偶數個（下標從0開始）
- ：odd選中所有奇數個（下標從0開始）
- 內容過濾選擇器
-
$("div:contains('1')")選中div中內容含有1的div標簽
-
08-案例一：使用JQ定時彈出廣告：總結：JQ的選擇器-屬性選擇器
- 屬性選擇器
-
[attribute]包含某個屬性 -
[attribute=value]包含某個屬性且值等于value -
[attribute!=value]包含某個屬性且值不等于value -
[attribute^=value]包含某個屬性且值以value開始 -
[attribute$=value]包含某個屬性且值以value結束的 -
[attribute*=value]包含某個屬性且值中包含value這個字符 -
[attrSel1][attrSel2][attrSelN]復合屬性選擇器，需要同時滿足多個條件時使用
-
09-案例一：使用JQ定時彈出廣告：總結：JQ的選擇器-表單及表單屬性選擇器
- 表單選擇器
-
:input包含所有表單元素 :text:password:radio:checkbox:submit:image:reset:button:file:hidden
-
$(":text")表示選中表單type=“text”的所有input表單標簽
- 表單屬性選擇器
:enabled:disabled:checked:selected
10-案例二：使用JQ完成表格的隔行換色：需求、分析及代碼實現
- 挑選選擇器：
$(“tr :odd”)/ $(“tr :even”) - 改變標簽的樣式
改變某一個樣式：
JQ對象.css(樣式屬性，樣式值)
改變多個樣式組成的class
JQ對象.addClass(Class名稱)
移除某個class樣式
JQ對象.removeClass(Class名稱)
11-案例三：使用JQ完成復選框的全選和全不選：需求和分析
- 添加屬性
attr()/prop()- 使用方法一：$(“”).prop(“src”);
- 使用方法二：$(“”).prop(“src”,”test.jpg”);
- 使用方法三：$(“”).prop({src:”test.jpg”,width:”100”});
- 刪除屬性
removeAttr(屬性名)/removeProp(屬性名) - 設置標簽體
html() - 設置文本:
text() - 獲得value屬性值:
val()
12-案例三：使用JQ完成復選框的全選和全不選：代碼實現
// 簡化：
$("#selectAll").click(function(){
// this表示當前被選中的對象（也就是全選按鈕）
$(":checkbox[name='ids']").prop("checked",this.checked);
});
13-案例三：使用JQ完成省市聯動的效果：需求和JQuery的文檔操作
- 添加元素
-
append();---在某個元素后添加內容. -
appendTo();---將某個元素添加到另一個元素后. -
remove();---將某個元素移除.
-
14-案例三：使用JQ完成省市聯動的效果：JQ的元素遍歷
遍歷元素
// 遍歷的方式一：
$.each(objects,function(i,n){
});
// 遍歷的方式二:
$(“”).each(function(i,n){
});
注意：i表示下標，n表示對應下標的對象
15-案例三：使用JQ完成省市聯動的效果：代碼實現
var cities = [
["杭州市","紹興市","溫州市","義烏市","嘉興市"],
["南京市","蘇州市","揚州市","無錫市"],
["武漢市","襄陽市","荊州市","宜昌市","恩施"],
["石家莊市","唐山市","保定市","邢臺市","廊坊市"],
["長春市","吉林市","四平市","延邊市"]
];
var $city = $("#city");
// 獲得代表省份的下拉列表:
$("#province").change(function(){
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍歷并且判斷:
$.each(cities,function(i,n){
// 判斷:
if(i == val){
$(n).each(function(j,m){
// alert(j+" "+m);
$city.append("<option>"+m+"</option>");
});
}
});
});
今日總結
-
什么是jQuery, 它有什么作用？怎么使用?
jQuery是一個JS的框架，封裝了JS的操作（加強版的JS）
優勢：它提供了快速查詢DOM文檔中元素的能力，大大強化了JS中獲取頁面元素的方式。
作用：實現漂亮的頁面動態效果, jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，比如淡入淡出、元素移除等動態特效。- 引入JQ的包（xxx.js）
- 書寫JQ代碼
$(function(){ JQ代碼 })
-
==JS與JQ的相互轉換==
- 將JS轉換成JQ對象
$(js對象) - 將JQ對象轉換成JS對象
JQ對象.get(0)/JQ對象[0]
JQ對象調用API返回的永遠是JQ對象
- 將JS轉換成JQ對象
-
==JQ選擇器==
- ==基本選擇器==
- ID選擇器
$(“#ID”) - CLASS選擇器
$(“.class”) - 元素選擇器
$(“元素名稱”) - 通配符選擇器
$(“*”) - 并列選擇器
$(“selector1,selector2……”)
- ID選擇器
- ==層級選擇器==
- 兄弟選擇器
$(“selector + selector”)選擇同輩的下一個元素 - 選擇同輩中往后所有的元素：
$(“selector ~ selector”) - 子元素選擇器：
$(父選擇器 > 子選擇器) - 后代選擇器：
$(父選擇器 子選擇器)
- 兄弟選擇器
- 基本過濾選擇器
-
：first選擇第一個 -
：last選擇最后一個 -
：eq(index)選擇下標為index的元素 -
：odd/:even注意：下標從0開始
-
- 屬性選擇器
$(“input[屬性名=’屬性值’]”) - 表單選擇器(了解)
：input
:text/:password/:radio/:checkbox……
- ==基本選擇器==
JQ對文檔的操作(DOM的crud)
JQ.append()追加元素
JQ.appendTo(父元素)將元素追加到父元素
JQ.remove()刪除元素-
元素循環遍歷
// 方式一 $.each(數組,function(i,n){ i表示下標 n表示數組元素 }); // 方式二 $(數組).each(function(i,n){ i表示下標 n表示數組元素 });
image.png
