《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

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