摘要：設(shè)計(jì)的宗旨是，，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設(shè)計(jì)模式，優(yōu)化文檔操作事件處理動(dòng)畫設(shè)計(jì)和交互。

定時(shí)器:

? setInterval clearInterval

? setTimeout clearTimeout

顯示: img.style.display = "block"

隱藏: img.style.display = "none"

img 對(duì)象

? style屬性: style對(duì)象

獲得所有的行

? table.rows[]

修改行的顏色

? row.bgColor ="red"

? row.style.backgroundColor = "black"

? row.style.background = "red"

? "background-color:red"

? "background:red"

checked屬性

如何獲取所有復(fù)選框:

? document.getElementsByName get Elements By Name 數(shù)據(jù)庫里面

? JS中的數(shù)組: ["城市"]

? new Array()

? DOM樹操作:

? 創(chuàng)建節(jié)點(diǎn): document.createElement

? 創(chuàng)建文本節(jié)點(diǎn): document.createTextNode

? 添加節(jié)點(diǎn): appendChild

? select下拉列表

? multiple 允許多選

? ondblclick : 雙擊事件

? for循環(huán)遍歷,一邊遍歷一邊移除出現(xiàn)的問題

? 事件:

? 獲得焦點(diǎn)事件: onfocus

? 失去焦點(diǎn)事件: onblur

? 按鍵抬起事件: onkeyup

? 鼠標(biāo)移入: onmouseenter

? 鼠標(biāo)移出: onmouseout

? JS引入外部文件 : script

當(dāng)用戶打開界面，3秒鐘之后彈出廣告，這個(gè)廣告顯示5秒鐘，隱藏廣告

定時(shí)器: setTimeout

顯示和隱藏: style.display = "block/none"

什么JQuery:

jQuery是一個(gè)快速、簡潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

JQuery的作用:

? 1. 寫更少的代碼,做更多的事情: write Less ,Do more

2. 將我們頁面的JS代碼和HTML頁面代碼進(jìn)行分離

為什么學(xué)習(xí)JQuery:

? 提高我們的工作效率

JQ的入門

【JQ中根據(jù)ID查找元素】

全都是根據(jù)選擇器去找的
#ID{}
.類名{}
$("#ID的名稱")

【JQ和JS之間的轉(zhuǎn)換】

JQ對(duì)象,只能調(diào)用JQ的屬性和方法

JS對(duì)象 只能調(diào)用JS的屬性和方法

function changeJS(){
                var div = document.getElementById("div1");
//                div.innerHTML = "JS成功修改了內(nèi)容"
                //將JS對(duì)象轉(zhuǎn)成JQ對(duì)象
                $(div).html("轉(zhuǎn)成JQ對(duì)象來修改內(nèi)容")
            }
            
            $(function(){
                //給按鈕綁定事件
                $("#btn2").click(function(){
                    //找到div1
//                    $("#div1").html("JQ方式成功修改了內(nèi)容");
                    //將JQ對(duì)象轉(zhuǎn)成JS對(duì)象來調(diào)用
                    var $div = $("#div1");
//                    var jsDiv = $div.get(0);
                    var jsDiv = $div[0];
                    jsDiv.innerHTML="jq轉(zhuǎn)成JS對(duì)象成功";
                });
            });

JQ的開發(fā)步驟: (將我們頁面的JS代碼和HTML頁面代碼進(jìn)行分離)

1. 導(dǎo)入JQ相關(guān)的文件
2.  文檔加載完成事件: $(function)  : 頁面初始化的操作: 綁定事件, 啟動(dòng)頁面定時(shí)器
3. 確定相關(guān)操作的事件
4. 事件觸發(fā)函數(shù)
5. 函數(shù)里面再去操作相關(guān)的元素

顯示和隱藏 img.style.display

【JQ中的動(dòng)畫效果】

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定義動(dòng)畫

導(dǎo)入JQ的文件

編寫JQ的文檔加載事件

啟動(dòng)定時(shí)器 setTimeout("",3000);

編寫顯示廣告的函數(shù)

在顯示廣告里面再啟動(dòng)一個(gè)定時(shí)器

編寫隱藏廣告的函數(shù)

讓我們能夠更加精確找到我們要操作的元素

基本選擇器

ID選擇器 : #ID的名稱

類選擇器: 以 . 開頭 .類名

元素選擇器: 標(biāo)簽的名稱

通配符選擇器: *

選擇器,選擇器: 選擇器1,選擇器2

基本選擇器的案例

JQ中的層級(jí)選擇器

子元素選擇器: 選擇器1 > 選擇器2

后代選擇器: 選擇器1 兒孫

相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨著的一個(gè)弟弟

找出所有弟弟: 選擇器1~ 選擇器2 : 找出所有的弟弟

JQ中的基本過濾器

JQ中的屬性選擇器

        $(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中的表單過濾器

上午的內(nèi)容回顧:

什么是JQ: write less , do more: 寫更少的代碼,做更多的事

? javascript函數(shù)庫

1.11版本

定時(shí)器:

動(dòng)畫效果:

? show : 顯示

? hide : 隱藏

? slideDown:

? slideUp: 向上滑動(dòng)

? fadeIn

? fadeOut

JQ選擇器:

基本選擇器:

? ID選擇器: #ID的名字

? 類選擇器: .類名

? 元素選擇器: 標(biāo)簽名稱

? 通配符選擇器: *

? 選擇器分組: 選擇器1,選擇器2

層級(jí)選擇器:

? 后代選擇器: 選擇器1 兒孫

? 子元素選擇器: 選擇器1 > 兒子

? 相鄰兄弟選擇器: 選擇器1 + 選擇器2 找出緊挨著它的弟弟

? 所有弟弟選擇器: 選擇器1~選擇器2 找出所有弟弟

基本過濾器:

? 選擇器:first : 找出的是第一個(gè)

? :last

? :even 找出索引為偶數(shù)

? :odd 找出奇數(shù)索引

? :gt(index) : 大于索引

? :lt(index) 小于

? :eq(index) 等于

屬性選擇器:

? 選擇器[href] : 單個(gè)屬性

選擇器[href][title] : 多個(gè)屬性
選擇器[href][title="test"] : 多個(gè)屬性,包含值

表單過濾器:

? :input 找出所有輸入項(xiàng): input textarea select

? :text

? :password

表單對(duì)象屬性:

? 找出select中被選中的那一項(xiàng):

? option:selected

JQ的開發(fā)步驟:

1. 導(dǎo)入JQ相關(guān)的包
2. 文檔加載文成的事件:  頁面初始化:  綁定事件, 啟動(dòng)定時(shí)器
3.  確定事件
4. 實(shí)現(xiàn)事件索要觸發(fā)的函數(shù)
5. 函數(shù)里面再去操作我們要操作的元素

在我們的實(shí)際開發(fā)過程中,我們的表格如果所有的行都是一樣的話,很容易看花眼,所以我們需要讓我們的表格隔行換色

獲取所有行 table.rows

遍歷所有行

根據(jù)行號(hào)去修改每一行的背景顏色: bgColor

? style.backgroundColor = "red"

導(dǎo)入JQ的包

文檔加載完成函數(shù): 頁面初始化

獲得所有的行 : 元素選擇器

根據(jù)行號(hào)去修改顏色

    $(function(){
                //獲得所有的行 :   元素選擇器
                $("tbody > tr:even").css("background-color","#CCCCCC");
                //修改基數(shù)行
                $("tbody > tr:odd").css("background-color","#FFF38F");
//                $("tbody > tr").css("background-color","#FFF38F");
                
                
            });

? 在我們對(duì)表格處理的時(shí),有些情況下,我們需要對(duì)表格進(jìn)行批量處理,

? 在我們的注冊(cè)表單中,通常我們需要知道用戶的籍貫,需要一個(gè)給用選擇的項(xiàng),當(dāng)用戶選中了省份之后,列出省下面所有的城市

準(zhǔn)備工作 : 城市信息的數(shù)據(jù)

添加節(jié)點(diǎn) : appendChild (JS)

append : 添加子元素到末尾

appendTo : 給自己找一個(gè)爹,將自己添加到別人家里

prepend : 在子元素前面添加

after : 在自己的后面添加一個(gè)兄弟

遍歷的操作:

?

導(dǎo)入JQ的文件

文檔加載事件:頁面初始化

進(jìn)一步確定事件: change事件

函數(shù): 得到當(dāng)前選中省份

得到城市, 遍歷城市數(shù)據(jù)

將遍歷出來的城市添加到城市的select中

$(function(){
                $("#province").change(function(){
//                    alert(this.value);
                    //得到城市信息
                    var cities = provinces[this.value];
                    //清空城市select中的option
                    /*var $city = $("#city");
                    //將JQ對(duì)象轉(zhuǎn)成JS對(duì)象
                    var citySelect = $city.get(0)
                    citySelect.options.length = 0;*/
                    
                    $("#city").empty();  //采用JQ的方式清空
                    //遍歷城市數(shù)據(jù)
                    $(cities).each(function(i,n){
                        $("#city").append(""+n+"");
                    });
                });
            });

我們的商品通常包含已經(jīng)有了的, 還有沒有的,現(xiàn)在我們需要有一個(gè)頁面用于動(dòng)態(tài)編輯這些商品

1. 導(dǎo)入JQ的文件
2. 文檔加載函數(shù) :頁面初始化
3.確定事件 :　點(diǎn)擊事件　onclick
4. 事件觸發(fā)函數(shù)
1. 移動(dòng)被選中的那一項(xiàng)到右邊

定時(shí)器

動(dòng)畫效果: show hide slideDown slideUp fadeIn fadeOut animate

基本選擇器:

? ID選擇器: #ID名稱

? 類選擇器: .類名

? 元素選擇器: 元素/標(biāo)簽名稱

? 通配符選擇器: * 找出所有頁面元素 包含頁面上所有的標(biāo)簽

? 選擇器分組 : 選擇器1, 選擇器2 [選擇器1,選擇器2]

層級(jí)選擇器:

? 后代選擇器: 選擇器1 選擇器2 找出所有的后代,兒子孫子曾孫

? 子元素選擇器: 選擇器1 >選擇器2 找出所有兒子

? 相鄰兄弟選擇器: 選擇器1+選擇器2 : 找出緊挨著自己那個(gè)弟弟

? 兄弟選擇器 :　　　選擇器1~選擇器2 : 找出所有的弟弟

屬性選擇器:

? 選擇器[屬性名稱]

選擇器[屬性名稱][屬性名名]
選擇器[屬性名稱="屬性值"][屬性名稱="屬性值"][屬性名稱="屬性值"]

表單選擇器:

? :input 找出所有的輸入項(xiàng) : 不單單找出input textarea select

? :text 找出type類型為 text

? :password

基本過濾器:

? :even

? :odd

? :gt

? :lt

? :eq

? :first

? :last

表單對(duì)象屬性:

? :selected

? :checked

$(function)  : 文檔加載完成的事件
css()  :     修改css樣式
prop() :    修改屬性/ 獲取屬性
html() :    修改innerHTML

append :     給自己添加子節(jié)點(diǎn)
appendTo :  將自己添加到別人家,給自己找一個(gè)爹
prepend :   在自己最前面添加子節(jié)點(diǎn)
after    :   在自己后面添加一個(gè)兄弟
empty    :   清空所有子節(jié)點(diǎn)

$(cities).each(function(i,n){
      
})

$.each(arr,function(i,n){
  
});

了解, 熟悉, 熟練, 精通 

經(jīng)過一個(gè)項(xiàng)目,將所有學(xué)過串起來

在用戶提交表單的時(shí)候, 我們最好是能夠在用戶數(shù)據(jù)提交給服務(wù)器之前去做一次校驗(yàn),防止服務(wù)器壓力過大,并且需要給用戶一個(gè)友好提示

trigger

triggerHandler

is()

首先給必填項(xiàng),添加尾部添加一個(gè)小紅點(diǎn)

獲取用戶輸入的信息,做相應(yīng)的校驗(yàn)

事件: 獲得焦點(diǎn), 失去焦點(diǎn), 按鍵抬起

表單提交的事件