摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。

定時器:

? setInterval clearInterval

? setTimeout clearTimeout

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

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

img 對象

? style屬性: style對象

獲得所有的行

? table.rows[]

修改行的顏色

? row.bgColor ="red"

? row.style.backgroundColor = "black"

? row.style.background = "red"

? "background-color:red"

? "background:red"

checked屬性

如何獲取所有復選框:

? document.getElementsByName get Elements By Name 數據庫里面

? JS中的數組: ["城市"]

? new Array()

? DOM樹操作:

? 創建節點: document.createElement

? 創建文本節點: document.createTextNode

? 添加節點: appendChild

? select下拉列表

? multiple 允許多選

? ondblclick : 雙擊事件

? for循環遍歷,一邊遍歷一邊移除出現的問題

? 事件:

? 獲得焦點事件: onfocus

? 失去焦點事件: onblur

? 按鍵抬起事件: onkeyup

? 鼠標移入: onmouseenter

? 鼠標移出: onmouseout

? JS引入外部文件 : script

當用戶打開界面，3秒鐘之后彈出廣告，這個廣告顯示5秒鐘，隱藏廣告

定時器: 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的入門

【JQ中根據ID查找元素】

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

【JQ和JS之間的轉換】

JQ對象,只能調用JQ的屬性和方法

JS對象 只能調用JS的屬性和方法

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中的動畫效果】

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

導入JQ的文件

編寫JQ的文檔加載事件

啟動定時器 setTimeout("",3000);

編寫顯示廣告的函數

在顯示廣告里面再啟動一個定時器

編寫隱藏廣告的函數

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

基本選擇器

ID選擇器 : #ID的名稱

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

元素選擇器: 標簽的名稱

通配符選擇器: *

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

基本選擇器的案例

JQ中的層級選擇器

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

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

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

找出所有弟弟: 選擇器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中的表單過濾器

上午的內容回顧:

什么是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] : 單個屬性

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

表單過濾器:

? :input 找出所有輸入項: input textarea select

? :text

? :password

表單對象屬性:

? 找出select中被選中的那一項:

? option:selected

JQ的開發步驟:

1. 導入JQ相關的包
2. 文檔加載文成的事件:  頁面初始化:  綁定事件, 啟動定時器
3.  確定事件
4. 實現事件索要觸發的函數
5. 函數里面再去操作我們要操作的元素

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

獲取所有行 table.rows

遍歷所有行

根據行號去修改每一行的背景顏色: bgColor

? style.backgroundColor = "red"

導入JQ的包

文檔加載完成函數: 頁面初始化

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

根據行號去修改顏色

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

? 在我們對表格處理的時,有些情況下,我們需要對表格進行批量處理,

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

準備工作 : 城市信息的數據

添加節點 : appendChild (JS)

append : 添加子元素到末尾

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

prepend : 在子元素前面添加

after : 在自己的后面添加一個兄弟

遍歷的操作:

?

導入JQ的文件

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

進一步確定事件: change事件

函數: 得到當前選中省份

得到城市, 遍歷城市數據

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

$(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(""+n+"");
                    });
                });
            });

我們的商品通常包含已經有了的, 還有沒有的,現在我們需要有一個頁面用于動態編輯這些商品

1. 導入JQ的文件
2. 文檔加載函數 :頁面初始化
3.確定事件 :　點擊事件　onclick
4. 事件觸發函數
1. 移動被選中的那一項到右邊

定時器

動畫效果: show hide slideDown slideUp fadeIn fadeOut animate

基本選擇器:

? ID選擇器: #ID名稱

? 類選擇器: .類名

? 元素選擇器: 元素/標簽名稱

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

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

層級選擇器:

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

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

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

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

屬性選擇器:

? 選擇器[屬性名稱]

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

表單選擇器:

? :input 找出所有的輸入項 : 不單單找出input textarea select

? :text 找出type類型為 text

? :password

基本過濾器:

? :even

? :odd

? :gt

? :lt

? :eq

? :first

? :last

表單對象屬性:

? :selected

? :checked

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

append :     給自己添加子節點
appendTo :  將自己添加到別人家,給自己找一個爹
prepend :   在自己最前面添加子節點
after    :   在自己后面添加一個兄弟
empty    :   清空所有子節點

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

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

了解, 熟悉, 熟練, 精通 

經過一個項目,將所有學過串起來

在用戶提交表單的時候, 我們最好是能夠在用戶數據提交給服務器之前去做一次校驗,防止服務器壓力過大,并且需要給用戶一個友好提示

trigger

triggerHandler

is()

首先給必填項,添加尾部添加一個小紅點

獲取用戶輸入的信息,做相應的校驗

事件: 獲得焦點, 失去焦點, 按鍵抬起

表單提交的事件