內容回顧
-
jQuery的書寫步驟
- 引入JQ的包（xxx.js）
- 書寫JQ代碼
$(function(){ JQ代碼 })
-
JS與JQ的相互轉換
- 將JS轉換成JQ對象
$(js對象) - 將JQ對象轉換成JS對象
JQ對象.get(0)/JQ對象[0]
- 將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表示數組元素 });
今日重點：
- Jquery查找和事件處理
- Bootstrap引入（4個文件，1個設置）
- Bootstrap的容器（.container）
- Bootstrap的柵格系統
01- 案例五：使用JQ完成下拉列表左右選擇：需求和頁面設計
下拉列表顯示多個選項：<select multiple="multiple">
02- 案例五：使用JQ完成下拉列表左右選擇：傳統方式代碼實現
- 綁定監聽事件 onclick
document.getElementById("addRight").onclick = function(){} - 獲得左側選中的選項并添加到右側
for(var i = selectLeft.options.length - 1;i>=0;i--){
// 判斷該元素是否被選中
if(selectLeft.options[i].selected == true){
//添加到右側
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
- 全部選中則for循環當中不需要判斷是否選中
// 遍歷左側列表中的所有的option元素.
for(var i = selectLeft.options.length - 1;i>=0;i--){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
03- 案例五：使用JQ完成下拉列表左右選擇：JQ方式實現
- JQ中強大的選擇器
// 添加左側選中的元素到右側
$("#addRight").click(function(){
// 獲得左側被選中的option元素:
$("#selectLeft option:selected").appendTo("#selectRight");
});
- 應用到的選擇器：
ID選擇器：#selectLeft
后代選擇器：#selectLeft option
表單對象屬性選擇器：：selected選擇被選中的標簽 - 應用到的文檔操作：
JQ對象.appendTo(“”)，追加到某個標簽當中
$("#selectRight").dblclick(function(){
//選中當前標簽中被選中的option標簽
$("option:selected",this).appendTo("#selectLeft");
});
04- 案例五：使用JQ完成下拉列表左右選擇：JQ的事件切換
$(document).ready(function(){….})功能類似與$(function(){…..});
- 事件切換函數
toggle()點擊時切換函數(1.9版本 .toggle() 方法刪除)
hover()鼠標懸停的切換
05- 案例一：使用JQ完成表單校驗：需求和JQ的查找及事件處理
- JQ查找
find();
parent(); - JQ事件處理
trigger這個函數也會導致瀏覽器同名的默認行為的執行
triggerHandler- 第一，他不會觸發瀏覽器默認事件。
- 第二，只觸發jQuery自定義的事件處理函數。
06- 案例一：使用JQ完成表單校驗：步驟分析
- 給所有的輸入框添加blur事件
- 根據不同輸入校驗不同內容
- 內容錯誤不能提交
07- 案例一：使用JQ完成表單校驗：準備工作
JQ函數：
find(選擇器) 查找匹配的元素
parent() 獲得父元素
is(選擇器) 判斷是否為某個元素
trigger()/triggerHandler() 事件處理
08- 案例一：使用JQ完成表單校驗：代碼實現
- 步驟一：為必填項添加一個 *.
$("form input.required").each(function(){} - 步驟二：獲得所有的輸入項,為輸入項添加一個blur事件.
$("form input").blur(function(){} - 確定點擊的輸入項是誰?
if($(this).is("#username")){} - 為表單添加一個submit事件.
$("form").submit(function(){
// 執行表單中blur事件.
$("form :input").trigger("blur");
// 獲得錯誤信息的長度.
var errorLength = $(".onError").length;
if(errorLength > 0){
return false;
}
});
09- 案例二：使用BootStrap實現一個響應式頁面：需求及BootStrap的概述
- 什么是BootStrap
前端框架，基于HTML,CSS,JavaScript實現 - BootStrap作用
設計一套頁面能夠通用在不同的設備上,在手機,pad上,電腦上都可以瀏覽這個網頁,而不影響正常顯示.（響應式頁面） - 什么是響應式？
設計一個頁面，能夠適應在不同的尺寸的設備上還能夠顯示
10- 案例二：使用BootStrap實現一個響應式頁面：BootStrap的準備工作
- 導入BootStrap目錄（3個）
CSS目錄
fonts目錄
js目錄 - HTML中引入BootStrap的樣式與JS代碼（4個文件，1個設置）
<!—應用于移動的：根據設備寬度，調整顯示縮放比例initial-scale取值1-5 --> <meta name="viewport" content="width=device-width, initial-scale=1"> 視口 <!-- 引入BootStrap的CSS --> <link rel="stylesheet" href="../css/bootstrap.min.css" /> <link rel="stylesheet" href="../css/bootstrap-theme.min.css" /> <!-- 引入JS--> <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
11- 案例二：使用BootStrap實現一個響應式頁面：BootStrap的全局CSS的容器和柵格
- 布局容器
class="container"
class="container-fluid" - 柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統
總共分為12列
使用.row樣式定義柵格的行.
定義列：.col-lg-n.col-md-n.col-sm-n.col-xs-n - 柵格流程：
- 定義容器
.container - 定義行
.row - 定義模塊 （計算每一個模塊占用的列數，總共12列）
- 實現響應式布局，設置
定義列：.col-lg-n超大屏幕.col-md-n中型
.col-sm-n小型屏幕（平板）.col-xs-n超小型（手機）
- 定義容器
12- 案例二：使用BootStrap實現一個響應式頁面：BootStrap的柵格的案例
今日總結：
==JQ的事件切換==
JQ.hover(function1,function2)鼠標移入移出執行不同的操作
了解toggle(function1,function2)點擊隱藏和顯示 1.9版本后刪除==JQ的查找和事件處理==
jQuery查找
JQ.find(選擇器)選擇匹配的元素
JQ.parent()獲得元素的父元素
JQ.is(選擇器)表示判斷元素是否相等
jQuery事件處理
on("click",fun())綁定事件到jQuery對象中的元素
bind("事件",fun())可綁定多個事件到jQuery對象
trigger("事件",fun())綁定事件會觸發瀏覽器默認事件
triggerHandler("事件",fun())綁定事件不會觸發瀏覽器默認事件BootStrap 概述
是一個前端的框架，能夠實現響應式頁面設計引入BootStrap （4個文件，1個設置）
兩個CSS，兩個JS
<meta name="viewport" content="width=device-width, initial-scale=1">
bootstrap.min.css
bootstrap-theme.min.css
jquery-1.11.3.min.js
bootstrap.min.js-
全局CSS樣式
通過設置全局 CSS 樣式；基本的 HTML 元素均可以通過 class 設置樣式并得到增強效果；還有先進的柵格系統。- 柵格系統
- 排版
- 表格
- 表單
- 按鈕
- 圖片
- ...
-
實現柵格系統布局
- 定義容器
<div class=”container”> - 在容器中實現行
<div class=”row” > - 在每一行中劃分列 總共分為12列
col-lg-n大分辨率
col-md-n中型分辨率（PC）
col-sm-n小型分辨率（平板）
col-xs-n超小型（手機）
- 定義容器
JS與jQuery總結
-
JS與JQ程序的入口
一般JS是通過事件觸發函數/window.onload()$(function(){ })事件總結:
onload頁面加載
onclick點擊
ondblclick雙擊
onsubmit表單提交 ，接受返回值
onchange下拉列表改變
onmouseover鼠標移入
onmouseout鼠標移出
onmousemove鼠標移動
onfocus獲得焦點
onblur失去焦點 操作CSS樣式
JQ：JQ.css(,)/JQ.addClass(“”)/JQ.removeClass()
JS:JS.style.樣式屬性 = “”；操作標簽的內容
JQ:JQ.html(“”)
JS:JS.innerHTML = “”;操作標簽的屬性
JQ：JQ.prop(“屬性名稱”，“屬性值”)；
JS：JS.屬性名 = 屬性值-
操作DOM（CRUD）
查找元素
JQ：選擇器（基本選擇器5個，層級選擇器4，屬性選擇器，內容過濾選擇器）
JS：document.getElementById()/document.getElementsByName()/….byTagName()創建元素
JQ：JQ.append(“標簽元素”)
JS：document.createElemant(“”)/document.createTextNode(“”)刪除元素
JQ：選擇器.remove()刪除選中的元素
JS：父元素.removeChild(子元素)添加元素
JQ：append()/appendTo()/insertBefore()
JS:appendChild(子元素) 事件綁定
JS：
一種在標簽中定義事件監聽屬性
JS.onxx = function(){}
JQ:
JQ.事件$(“div”).click(function(){});
JQ.bind(事件名稱,function(){})循環遍歷
JS：for循環
JQ：$.each(數組,function…)/$(數組).each(function…..)JS與JQ的切換
js轉換成JQ：$(JS對象)
JQ轉換成JS：$(“”).get(0)/$(“”)[0]顯示與隱藏
JS: 直接操作CSS.style.display = “none”/”block”
JQ: 使用函數show()/hide() slideDown()/sideUp() fadeIn()/fadeOut()
