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