《JQuery 能幹點啥~》第5講 html() 與 text()的function參數

有童鞋 和我說,覺得我講的 有點慢啊~
那我就講完 今天的 再加點速度~ 如果 有啥意見 儘管提~~
我儘量改正 吼吼~~

-------------------------------------------開始講嘍-------------------------------------------

上回書說到了賦值,也說到了有參數的就是賦值!
這裏要說的是一種特殊的參數~~ 而這種參數不是用來賦值的,而是用來執行的~~ 他就是 fucntion參數

現在 我們來看一下 他的語法格式

  1. $(選擇器).html(function(index,html){
  2. //do something
  3. })
  4. $(選擇器). text (function(index,text){
  5. //do something
  6. })

從上面可以看出 這兩段 代碼裏 只是 html 與 text 部分 不一樣,其他的完全相同
關於 html 與 text 的區別 我就不重複說了 忘記的的童鞋 可以回去看看以往的幾個帖子

現在來說說 function 參數能幹什麼~
再說幹什麼之前,我來說下 function的兩個參數都代表什麼~

index :根據英文意思就能猜出來,是下標~而且是前面選擇器所匹配出來的元素的下標,依舊是從0 開始
第二個參數 html/text:爲對應下標的 html內容內容

現在,下表有了,對應的 html內容內容 內容有了,至於要幹什麼,只要寫在方法體裏就可以了,這裏 我也就不多說了

今天的實例 上節的 附件中有~ 有需要的可以去下載~~

---------------------------------------------------------------------------------------------------------------------------------------
今天沒什麼東西,所以,講一點 js的一些小特性啊~

以前講過一個 val 、html、 text 方法 無參數爲取值,有參數爲賦值的
今天再說一個 鏈式操作 ,那什麼是鏈式操作呢?
自己也曾經翻過 不少 帖子,基本上都是一句話,請看下面的例子就明白了
我覺得這種,知面不知本的學習方式很是不好!
只記現象,而不知道爲什麼會這樣,那麼給你換一個表象,難道你要再記一個?那一萬個呢~
所以 我自己總結了一下 鏈式操作 ,希望對大家有點幫助把~

既然 命名爲 鏈式,就說明 他某些方面和 鏈子 有共同之處~

首先,鏈子也是線,所以,有兩頭,(什麼 也可以有三頭的,擡槓的童鞋們 可以飄過)
其次,從一頭進入,另一頭出來(當然,你要先選定一個是頭,並且抓住它)

在JQ 中 鏈式操作 說的直白點 就是 一系列的操作,而這些操作就以一種,依次分佈在鏈子上!
鏈子的一頭 就是 JQ 選擇器所獲得的對象!!

整理下說明,就是 一個或多個對象,需要一次執行一系列的操作~

好了 概念 已經 說完了,看看 JQ 給我們提供了什麼便捷的寫法吧

看過 我原來 實例的童鞋,應該 記得我以前用過的 addClass 方法,這個是給 對象添加 樣式 的方法~
現在說一個 和 這兩個 應該也不陌生吧~ 一個是 鼠標滑入事件,一個是鼠標劃出事件
在JQ 中 他們被封裝爲 mouseover 和 mouseover ,去掉了on 寫起來 更簡單
現在 我們要給一個 tr 加上 這兩個事件! 根據原來的寫法,一定是 得到td加一個 滑入事件,再得到這個tr 再 加入一個劃出事件! 貌似獲得了 兩次 tr!
所以 這裏 嫌麻煩的同學 可以用鏈式操作,當然 你要是覺得這麼寫 也挺好,那就這麼寫~ 都一樣
原始寫法:

  1. $("tr").mouseover(function(){ $(this).addClass("over");})  
  2.  $("tr").mouseout(function(){ $(this).removeClass("over"); }) 

鏈式的寫法爲

  1. $("tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}) 

簡單了許多吧!而且從左至右 整體代碼的 可讀性 也高了很多~
首先 得到tr,鼠標進來,給自己加一個 over樣式,鼠標出去,移除自己的over樣式~
怎麼樣 ,學會了嗎~ 是不是 很容易

原文地址:《JQuery 能幹點啥~》第5講 html() 與 text()的function參數
http://bbs.coderli.com/forum.php?mod=viewthread&tid=294&fromuid=44

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章