今日任務 使用JQuery完成頁面定時彈出廣告 定時器: setInterval clearInterval setTimeout clearTimeout 顯示: img.style.display = "block" 隱藏: img.style.display = "none" img ...
今日任務
使用JQuery完成頁面定時彈出廣告
定時器:
setInterval clearInterval
setTimeout clearTimeout
顯示: img.style.display = "block"
隱藏: img.style.display = "none"
img 對象
style屬性: style對象
使用JQuery完成表格的隔行換色
獲得所有的行
table.rows[]
修改行的顏色
row.bgColor ="red"
row.style.backgroundColor = "black"
row.style.background = "red"
"background-color:red"
"background:red"
使用JQuery完成覆選框的全選效果
checked屬性
如何獲取所有覆選框:
document.getElementsByName get Elements By Name 資料庫裡面
使用JQuery完成省市聯動效果
JS中的數組: ["城市"]
new Array()
DOM樹操作:
創建節點: document.createElement
創建文本節點: document.createTextNode
添加節點: appendChild
使用JQuery完成下列列表左右選擇
select下拉列表
multiple 允許多選
ondblclick : 雙擊事件
for迴圈遍歷,一邊遍歷一邊移除出現的問題
使用JQuery完成表單的校驗(擴展)
事件:
獲得焦點事件: onfocus
失去焦點事件: onblur
按鍵抬起事件: onkeyup
滑鼠移入: onmouseenter
滑鼠移出: onmouseout
JS引入外部文件 : script
今日目標：
掌握JQuery的基本使用
掌握JQuery的基本選擇器,層次選擇器
會使用JQuery完成DOM的基本操作
1. 使用JQuery完成頁面定時彈出廣告
1.1 需求分析：
當用戶打開界面，3秒鐘之後彈出廣告，這個廣告顯示5秒鐘，隱藏廣告
1.2 技術分析
定時器: setTimeout
顯示和隱藏: style.display = "block/none"
什麼JQuery:
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（*或JavaScript框架*）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 寫更少的代碼,做更多的事情: write Less ,Do more
2. 將我們頁面的JS代碼和HTML頁面代碼進行分離
為什麼學習JQuery:
提高我們的工作效率
JQ的入門
```html
<script>
//js文檔載入完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文檔載入完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 簡寫成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最簡單的寫法
*/
$(function(){
alert("$(function(){");
});
</script>
```
【JQ中根據ID查找元素】
```html
全都是根據選擇器去找的
#ID{}
.類名{}
$("#ID的名稱")
```
【JQ和JS之間的轉換】
- JQ對象,只能調用JQ的屬性和方法
- JS對象 只能調用JS的屬性和方法
```html
function changeJS(){
var div = document.getElementById("div1");
// div.innerHTML = "JS成功修改了內容"
//將JS對象轉成JQ對象
$(div).html("轉成JQ對象來修改內容")
}
$(function(){
//給按鈕綁定事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("JQ方式成功修改了內容");
//將JQ對象轉成JS對象來調用
var $div = $("#div1");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq轉成JS對象成功";
});
});
```
JQ的開發步驟: (將我們頁面的JS代碼和HTML頁面代碼進行分離)
1. 導入JQ相關的文件
2. 文檔載入完成事件: $(function) : 頁面初始化的操作: 綁定事件, 啟動頁面定時器
3. 確定相關操作的事件
4. 事件觸發函數
5. 函數裡面再去操作相關的元素
顯示和隱藏 img.style.display
【JQ中的動畫效果】
```javascript
show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定義動畫
```
1.3 步驟分析：
1. 導入JQ的文件
2. 編寫JQ的文檔載入事件
3. 啟動定時器 setTimeout("",3000);
4. 編寫顯示廣告的函數
5. 在顯示廣告裡面再啟動一個定時器
6. 編寫隱藏廣告的函數
1.4 代碼實現
```html
<script>
//顯示廣告
function showAd(){
$("#img1").slideDown(2000);
setTimeout("hideAd()",3000);
}
//隱藏廣告
function hideAd(){
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAd()",3000);
});
</script>
```
JQuery中的選擇器
讓我們能夠更加精確找到我們要操作的元素
基本選擇器
- ID選擇器 : #ID的名稱
- 類選擇器: 以 . 開頭 .類名
- 元素選擇器: 標簽的名稱
- 通配符選擇器: *
- 選擇器,選擇器: 選擇器1,選擇器2
基本選擇器的案例
```javascript
<!--
- ID選擇器 : #ID的名稱
- 類選擇器: 以 . 開頭 .類名
- 元素選擇器: 標簽的名稱
- 通配符選擇器: *
- 選擇器,選擇器: 選擇器1,選擇器2
-->
<script>
//文檔載入事件,頁面初始化的操作
$(function(){
//初始化操作: 給按鈕綁定事件
$("#btn1").click(function(){
$("#two").css("background-color","palegreen");
});
//找出mini類的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("*").css("background-color","palegreen");
});
/*選擇器分組*/
//找出mini類 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","palegreen");
});
});
</script>
```
JQ中的層級選擇器
- 子元素選擇器: 選擇器1 > 選擇器2
- 後代選擇器: 選擇器1 兒孫
- 相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨著的一個弟弟
- 找出所有弟弟: 選擇器1~ 選擇器2 : 找出所有的弟弟
```html
<script>
//文檔載入事件,頁面初始化的操作
$(function(){
//初始化操作: 給按鈕綁定事件
//找出body下麵的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下麵的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
```
JQ中的基本過濾器
```html
<script>
$(function(){
/<script>
//文檔載入事件,頁面初始化的操作
$(function(){
//初始化操作: 給按鈕綁定事件
//過濾出所有div中第一個元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//過濾出所有div中偶數位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>
```
JQ中的屬性選擇器
```html
$(function(){
//找到有name屬性的input
$("#btn1").click(function(){
$("input[name]").attr("checked",true);
});
$("#btn2").click(function(){
$("input[name='accept']").attr("checked",true);
});
$("#btn3").click(function(){
$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
});
});
```
JQ中的表單過濾器
```html
<script>
//1.文檔載入事件
$(function(){
$(":text").css("background-color","pink");
});
</script>
```
上午的內容回顧:
什麼是JQ: write less , do more: 寫更少的代碼,做更多的事
javascript函數庫
1.11版本
定時器:
動畫效果:
show : 顯示
hide : 隱藏
slideDown:
slideUp: 向上滑動
fadeIn
fadeOut
JQ選擇器:
基本選擇器:
ID選擇器: #ID的名字
類選擇器: .類名
元素選擇器: 標簽名稱
通配符選擇器: *
選擇器分組: 選擇器1,選擇器2
層級選擇器:
後代選擇器: 選擇器1 兒孫
子元素選擇器: 選擇器1 > 兒子
相鄰兄弟選擇器: 選擇器1 + 選擇器2 找出緊挨著它的弟弟
所有弟弟選擇器: 選擇器1~選擇器2 找出所有弟弟
基本過濾器:
選擇器:first : 找出的是第一個
:last
:even 找出索引為偶數
:odd 找出奇數索引
:gt(index) : 大於索引
:lt(index) 小於
:eq(index) 等於
屬性選擇器:
選擇器[href] : 單個屬性
```html
選擇器[href][title] : 多個屬性
選擇器[href][title='test'] : 多個屬性,包含值
```
表單過濾器:
:input 找出所有輸入項: input textarea select
:text
:password
表單對象屬性:
找出select中被選中的那一項:
option:selected
JQ的開發步驟:
1. 導入JQ相關的包
2. 文檔載入文成的事件: 頁面初始化: 綁定事件, 啟動定時器
3. 確定事件
4. 實現事件索要觸發的函數
5. 函數裡面再去操作我們要操作的元素
使用JQ完成表格的隔行換色
需求分析:
在我們的實際開發過程中,我們的表格如果所有的行都是一樣的話,很容易看花眼,所以我們需要讓我們的表格隔行換色
技術分析:
獲取所有行 table.rows
遍歷所有行
根據行號去修改每一行的背景顏色: bgColor
style.backgroundColor = "red"
步驟分析:
1. 導入JQ的包
2. 文檔載入完成函數: 頁面初始化
3. 獲得所有的行 : 元素選擇器
4. 根據行號去修改顏色
代碼實現:
```html
$(function(){
//獲得所有的行 : 元素選擇器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基數行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
```
使用JQuery完成表單的全選全不選功能
需求分析
在我們對錶格處理的時,有些情況下,我們需要對錶格進行批量處理,
技術分析:
代碼實現:
使用JQ完成省市聯動效果
需求分析:
在我們的註冊表單中,通常我們需要知道用戶的籍貫,需要一個給用選擇的項,當用戶選中了省份之後,列出省下麵所有的城市
技術分析:
1. 準備工作 : 城市信息的數據
2. 添加節點 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 給自己找一個爹,將自己添加到別人家裡
3. prepend : 在子元素前面添加
4. after : 在自己的後面添加一個兄弟
3. 遍歷的操作:
步驟分析:
1. 導入JQ的文件
2. 文檔載入事件:頁面初始化
3. 進一步確定事件: change事件
4. 函數: 得到當前選中省份
5. 得到城市, 遍歷城市數據
6. 將遍歷出來的城市添加到城市的select中
代碼實現:
```javascript
$(function(){
$("#province").change(function(){
// alert(this.value);
//得到城市信息
var cities = provinces[this.value];
//清空城市select中的option
/*var $city = $("#city");
//將JQ對象轉成JS對象
var citySelect = $city.get(0)
citySelect.options.length = 0;*/
$("#city").empty(); //採用JQ的方式清空
//遍歷城市數據
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});
```
使用JQ完成下拉列表左右選擇
需求分析
我們的商品通常包含已經有了的, 還有沒有的,現在我們需要有一個頁面用於動態編輯這些商品
技術分析
步驟分析
1. 導入JQ的文件
2. 文檔載入函數 :頁面初始化
3.確定事件 : 點擊事件 onclick
4. 事件觸發函數
1. 移動被選中的那一項到右邊
代碼實現
```javascript
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被選中的那一項
//將被選中項添加到右邊
$("#rightSelect").append($("#leftSelect option:selected"));
});
//將左邊所有商品移動到右邊
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
```
今天內容總結:
定時器
動畫效果: show hide slideDown slideUp fadeIn fadeOut animate
基本選擇器:
ID選擇器: #ID名稱
類選擇器: .類名
元素選擇器: 元素/標簽名稱
通配符選擇器: * 找出所有頁面元素 包含頁面上所有的標簽
選擇器分組 : 選擇器1, 選擇器2 [選擇器1,選擇器2]
層級選擇器:
後代選擇器: 選擇器1 選擇器2 找出所有的後代,兒子孫子曾孫
子元素選擇器: 選擇器1 >選擇器2 找出所有兒子
相鄰兄弟選擇器: 選擇器1+選擇器2 : 找出緊挨著自己那個弟弟
兄弟選擇器 : 選擇器1~選擇器2 : 找出所有的弟弟
屬性選擇器:
選擇器[屬性名稱]
```html
選擇器[屬性名稱][屬性名名]
選擇器[屬性名稱='屬性值'][屬性名稱='屬性值'][屬性名稱='屬性值']
```
表單選擇器:
:input 找出所有的輸入項 : 不單單找出input textarea select
:text 找出type類型為 text
:password
基本過濾器:
:even
:odd
:gt
:lt
:eq
:first
:last
表單對象屬性:
:selected
:checked
```html
$(function) : 文檔載入完成的事件
css() : 修改css樣式
prop() : 修改屬性/ 獲取屬性
html() : 修改innerHTML
append : 給自己添加子節點
appendTo : 將自己添加到別人家,給自己找一個爹
prepend : 在自己最前面添加子節點
after : 在自己後面添加一個兄弟
empty : 清空所有子節點
$(cities).each(function(i,n){
})
$.each(arr,function(i,n){
});
瞭解, 熟悉, 熟練, 精通
經過一個項目,將所有學過串起來
```
使用JQ完成表單的校驗(擴展)
需求分析
在用戶提交表單的時候, 我們最好是能夠在用戶數據提交給伺服器之前去做一次校驗,防止伺服器壓力過大,並且需要給用戶一個友好提示
技術分析
- trigger
- triggerHandler
- is()
步驟分析
1. 首先給必填項,添加尾部添加一個小紅點
2. 獲取用戶輸入的信息,做相應的校驗
3. 事件: 獲得焦點, 失去焦點, 按鍵抬起
4. 表單提交的事件
代碼實現
