|
這套教程在我博客以及CSDN論壇里發(fā)布后，個人感覺挺受大家歡迎的，對次我很開心，雖然有些懷疑是否原創(chuàng)的聲音，但我想本來就是自己寫的也不去管了。
在實戰(zhàn)篇上發(fā)布后很多朋友建議用真正的“實戰(zhàn)”例子。 好吧，我盡量用我自己的項目中的例子來講解，但如果開篇說的那樣，我自己也是剛剛開始學(xué)JQuery，所以自己項目中的例子也許是很簡單的。
有些朋友希望我講解一些有關(guān)JavaScript,CSS方面的知識,說實話我本沒有準(zhǔn)備在本套教程里討論與此有關(guān)的知識, 但挺多朋友們提出建議,那我準(zhǔn)備粗略討論一下,一帶而過.,權(quán)當(dāng)起個拋磚引玉的作用.
JavaScript方面 最基礎(chǔ)的核心功能 如運算符(+-*/等) 控制流程語句(if,for,while等) 等等我就不說了. 這是最最基本的知識.
BOM知識 BOM Browser Object Model 瀏覽器對象模型. window對象是BOM最重要的對象. 我們可以簡單的把一個IE窗口理解為一個window對象. window.location window.history window.screen window.document 這個是我們最常用的
事件 其實挺簡單的,但要記住事件的驅(qū)動有兩模式, "冒泡"與"捕獲" 冒泡: 激活順序是事件從它(事件)觸發(fā)點開始向上層逐級冒泡(觸活)直至document(上面所說的window.document)為止. 捕獲: 激活順序與冒泡相反,事伯從第一層(document)逐級向下直止找到最終的事件激活目標(biāo). 上面兩個概念看過去是麻煩,我們只要記住一般都用"冒泡"就可以了.
DOM DOM Document Object Model 文檔對象模型. 我非常喜歡這個功能(模型), 因為她實現(xiàn)了WEB界面的千變?nèi)f化.(個人想法) window.document 就是DOM要操作的對象, DOM把document內(nèi)的節(jié)點 (<head><title><body><form><table><div> 等等)分析成為一棵文檔結(jié)構(gòu)樹.然后我們就可以對這棵樹進行增加,修改,刪除. 對這棵樹里各節(jié)點的各種屬性同樣進行增加,修改,刪除. 比如綁定CSS的class屬性. 通過這些操作,一個HTML的展顯就完全在我們控制當(dāng)中. 我們可以動態(tài)的增加節(jié)點(比如<tr>,<div>等),也可以在運 行中控制節(jié)點是否可見(display:none)等等.. CSS方面 CSS Cascading Style Sheet 層疊樣式表單 如果說HTML是骨架和肉體,JavaScript是思想與行為的話,那CSS就是衣服. 定義CSS 三種 節(jié)點名 {各種樣式屬性} 如: p{} 作用范圍:所有p節(jié)點, body{} 整個body節(jié)點, table{} 各所table節(jié)點 #節(jié)點ID名 {各種樣式屬性} 如: #myID{} 作用范圍 ID為"newNode"的節(jié)點.(只要ID為"newNode"就符合要求) .樣式名 {各種樣式屬性} 如: .newStyle{} 作用范圍 所有元素(節(jié)點)的class屬性包含了該樣式名("newStyle")的節(jié)點.
總結(jié): 以上是我對JS以及CSS的一些理解,更多知識還是有待自己進一步學(xué)習(xí). JavaScript推薦書籍.<<JavaScript高級程序設(shè)計>> <<ppk談JavaScript>>. <<JavaScript高級程序設(shè)計>> 這本要注意,因為很多學(xué)習(xí)JavaScript的書都叫這個名字,因為我看的是電子版,沒有有關(guān)作者的信息,所以就把目錄結(jié)構(gòu)說一下,以方面我們在選擇時有個考慮. 目錄結(jié)構(gòu) 第一章:JavaScript 是什么 第二章 ECMAScript基礎(chǔ) 第三章 對象基礎(chǔ),第四章 繼承. CSS的書我真的沒怎么看過,都是從網(wǎng)上找的資料.
好,現(xiàn)在進入我們今天的正題. 今天我從我自己的網(wǎng)站(http://www.)里拿了一個實例與大家一起分析.在此申明一下, 不討論代碼寫的好不好,只討論如何實現(xiàn),代碼優(yōu)化是一件很漫長的事情.呵. 該實例的功能是我網(wǎng)站右上方排序方式的自適應(yīng)顯示是如何實現(xiàn)的. 記住今天說的是選擇排序方式時的自適應(yīng)顯示,而不是排序. 目前我網(wǎng)站上對搜索出的淘寶商品的顯示有三種排序方式,每種排序方式里又有一個可選的子排序. 我現(xiàn)在的討論的功能是當(dāng)一個主排序方式被選擇,那么對應(yīng)的可選子排序就會顯示出來提供給用戶選擇,其它的兩個不顯示. 呵,很簡單吧. 但我們今天是用JQuery來實現(xiàn). 效果如下:
三種方式的界面上的排版在這兒不多說,我把三種排序單選框以及對應(yīng)的可選子排序復(fù)選框的ID在這兒說明一下.
方式一 單選框為 cbType1CreditDesc 復(fù)選框為 cbType1PriceAsc 復(fù)選框后的標(biāo)簽 labType1PriceAsc 方式二 單選框為 cbType2PriceAsc 復(fù)選框為 cbType2CreditDesc 復(fù)選框后的標(biāo)簽 labType2CreditDesc
方式三 單選框為 cbType3PriceDesc 復(fù)選框為 cbType3CreditDesc 復(fù)選框后的標(biāo)簽 labType3CreditDesc
JS代碼 //當(dāng)網(wǎng)頁被完全LOAD后所執(zhí)行函數(shù) load; $(document).ready(function(){
function load(){ var controlShow = function(){
} //當(dāng)方式一的賣家信用從高至低被選擇后進行的操作 }); //當(dāng)方式二的商品價格從低至高被選擇后的操作 }); //當(dāng)方式3的商品價格從高至代被選擇后的操作 }); }
藍(lán)色代碼的分析 因為三小段代碼的功能結(jié)構(gòu)是一樣的,所以我只拿第一小段的代碼來分析說明 $("#cbType1CreditDesc").click(function(){ });
該段的代碼有一個新的知識點, JQuery的事件綁定 $().click(執(zhí)行函數(shù)) 在每一個匹配元素的click事件中綁定一個處理函數(shù)。
$("#cbType1CreditDesc") 該代碼是選擇ID為cbType1CreditDesc的元素(DOM里稱為節(jié)點),最后結(jié)果是方式一的單選框. 那上面整段代碼的意思是, 為ID為cbType1CreditDesc元素的click事件綁定一個函數(shù)function(){controlShow();} 這是是JQuery對click事件綁定的二種方法中的一種,另一種的實現(xiàn)為 $("#cbType1CreditDesc").bind('click',function(){
} 第一種是以函數(shù)的方式現(xiàn)實click事件,另一種是以參數(shù)的方式來綁定 相關(guān)知識, 解除事件綁定 $("#cbType1CreditDesc").bind('click'); 這樣我們就解除了id為cbType1CreditDesc元素的click事件的綁定了.
桔紅色代碼的分析 同樣是因為三小段代碼的功能結(jié)構(gòu)是一樣的,所以只拿第一小段代碼來分析 if ($("#cbType1CreditDesc").attr("checked") == true) { 該段的代碼有二個新的知識點, JQuery的元素屬性. $().attr("屬性名") 取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined 。 $().css("樣式屬性","屬性值") 在所有匹配的元素中，設(shè)置一個樣式屬性的值
那第一小段代碼的意思就是 當(dāng)ID為cbType1CreditDesc的元素的屬性checked 為true(也就是說被選定了)時 為ID為cbType1PriceAsc的元素設(shè)置名為display樣式屬性的值為"inline-block"(顯示),如果該元素未被選擇則設(shè)置該元素的display樣式屬性的值為"none"(不顯示)
好,今天就到這兒吧.
|
|
|
