※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: [心得]从 js 到 jQuery 之四：属性与样式 时间: Sun Aug 10 04:09:23 2008 副标容我再强调一下 , 浏览器的真正战场, 不仅仅是 浏览器相容 , 也代表着javascript真正发挥作用的地方. 讲到这章真的是让笔者感到万般无奈 , 从以前作表单必填栏位采取 自订attr策略, 到设定各种css属性 , attribute 跟 css样式 , 一直都是笔者写纯js时期的痛 , 且听笔者慢慢道来. 为了撰文方便 , 底下简称 attribute 为 attr. ──────────────────────────────── ＠ css 之前有提到过 , 那什麽是attr ? 没错 , 迄今我们一直都还没介绍过 attr , 所以当然得重新介绍一番. 让我们用底下一个简单的img元素当例子 <img src="hi.jpg" width="100" height="200" alt="hello img" /> 这是一个 <img> tag , 其中含有四个attr , 分别是 src width height alt. 相信你已经了解属性对於 tag 的重要性 , 每个元素能用的属性都有所不同 , 比方说 <a> 的href , <img> <iframe> 会用的src等. ＠我怎麽知道有哪些tag可以用哪些attr? 当然这些都有明文规范 , 可参考w3school 介绍的 html reference. http://www.w3schools.com/tags/default.asp 点选tags进去後就会看到对应的必要(Required)跟选用(Optional)属性了. ＠现在我知道 attr跟css了 , 那我们要讨论什麽? 承本系列首篇「javascript的魔力」一文中所提到的 , javascript大部分 的时间都在异动元件的属性跟资料 , 而这些东西全部都取决於我们本章要讲 的attr跟 css style. 只要一个html 元素内容写的再多 , 只要一个style="display:none;" , 就可 以默默的躲在页面的某个隐藏的位置. 所以我们现在要来讨论的是 attr/css 的 setter & getter ＠什麽是 setter & getter? setter就是指设定资料的方法 , getter就是指取得资料的方式 , 这只是个简单的名词 , 在此做个解释. ＠ attr setter & getter 我们先从 attr的setter跟getter下手 , 这是有原因的 , 因为style 其实 也是个attr（想想attr的定义) , 後面会再提到另外独立提css的理由. 我们比较会常使用的attr , 不外乎是像是切换图片（改变img的src）, 或是把某个按钮设定 disabled.( 变成按不下去的灰色 .) 或是设定某个 text 只能输入10个字等 (maxlength) 或者是针对 style 这个attr中的 display设定 none 来隐藏元素, 传统js在大部分的状况下 , attr就是dom物件的成员 , 举个例子 imgNode.src='hi.gif'; //假设 imgNode是 <img>元素对应的物件 当然 , 根据javacript 对物件的定义 , 这段也可以改写成 imgNode["src"]='hi.gif'; 这两个表示法是相同的 . 当然这只针对於比较一般性的attr , 比方说当我们在写 class 这个 attr时 , 就得改用 imgNode.className 来做设定. 至於要取得资料 , 当然是就直接取 imgNode.src 的资料来用 . ＠听说传统 dom 有支援 setAttribute/getAttribute 的方法？ 没错 , 但是它的浏览器支援问题多多 , google "setattribute firefox" , 可以看到众多网路上的朋友们为这个问题伤神的痕迹. 主要的问题仍然是在於 className跟event 的绑定上 , 不是很适合透过 setAttribute / getAttribute . 另外还有 style 这个属性当然也有许多的麻烦 , 我们等到後面再谈. ＠那jQuery怎麽做？ setter $(imgNode).attr("src","hi.gif"); //注1 getter $(imgNode).attr("src") (e.g. alert($(imgNode).attr("src"));) 就这麽简单 , 中间内容他都帮你做掉了 , 让你完全不用针对js做出任何让步, 通常你只要记得html怎麽写 , attr就怎麽下 , 你不需要思考 class这个attr 到底是class还是className , 只要记得html是怎麽写就ok了. 以这例子来说. $(imgNode).attr("class","hello"); $(imgNode).attr("className","hello"); 对jQuery来讲是一样的 . （当然 以处理class而言 , jQuery另提供addClass跟removeClass 做增删的动作 , 优点是可方便叠加/移除 特定class.) 测试class attr 能在fx跟ie正常运作的简单实例於此 http://tonyq.org/jqtalk/jq4_ImgAttr.html 注1： 当$()传入dom元件,会自动转成该元件的jQuery物件 . ＠事件/css 也可以用attr setter/getter吗？ 理论上可以 , 但目前仍有部份相容性问题 , 经测试 attr("onclick", "alert('hi')") 就只能在fx上运作, css的部份测试过底下的叙述是可行的 , attr("style","border:1px solid red;position:absolute;left:50px;"); 但考虑到相容性问题 , 建议还是不要使用这种作法, 举例来讲：$("img").attr("style","opacity:0.5;"); 由於opacity是ie6不支援的属性, 在ie6底下就会有问题. ＠css setter/getter 这在传统 js coder来讲我个人觉得简直是恶梦... 看看这张表 , http://www.w3schools.com/htmldom/dom_obj_style.asp 为了设定一个 background-color , 你得了解他其实是得调用 node.style.backgroundColor 本来中间有 - 的属性几乎都改为骆驼式的写法 , -拿掉 後面的字首字大写, 当然你也可以选择 style.cssText , 就可以像是在写 attr style 一样, cssText的浏览器相容性问题我没深究 , （事实上我很少用这个属性）, 因为要自己写 style 的资讯实在是太麻烦也太累赘了 , 不仅要查表 , 有些功能还不见得支援都一致. （透明度 Opacity 就是一个例子 , 在ie6底下得透过filter实现 , fx底下则是 css属性就有支援 Opacity. 诸多类似的问题 , 实在是画面设计与程式设计师心中永远的痛. ＠ jQuery怎麽做? 他的写法很简单 , 我们都知道css是key-value成对的一组属性 , 所以设值可以写成类似这样 $("td").css("background-color","red").css("color","white"); 而取资料则是只给一个参数 (e.g. $("td").css("background") ); 一样 , 在这里又帮我们把思绪简化回 纯css领域的思考 , 再也不用去烦恼表怎麽查 , 资料怎麽取 , 甚至於他还会尽力帮我们达成浏览器相容. 以前面提到的opacity 为例 $("table").css("opacity","0.5"); 他就会自动帮我们处理在ie6底下跟fx底下的浏览器相容问题. 虽然不见得完全能够处理100%浏览器相容的问题 , 比方说我曾提过 需要用 bgiframe 解决的select z-index 问题 , 但是我完全能了 解他的确尽力了. ＝.＝a ＠其实总归一句 , 本章要介绍的就是 attr 跟css两个 jQuery function , 但是这两个function实在是有其历史意义 , 所以我特地花了些篇幅撰写. 而 jQuery所帮我们做的 , 在这一点上主要是帮我们简化在html->js css->js 这两件事情的过程中 , 能够让我们的思绪更加一致 , 而免於被打断的困扰. 减少不需要额外记忆跟负担的事情 , 对程式设计师来讲是一件很重要的事情 . 本章很显然写的是真的较为杂乱了些 , 希望各位读者能了解 , 很多问题是经年累月的经验所累积下来的 , 相信各位 js developer们 , 能够了解为什麽attr 跟 style的设定是如此地繁琐与充满着杂讯 . 而且 attr跟css setter 又几乎是必做不可的设定之一 , 如 show跟hide 这两个 css setter在jQuery也被做成独立函式 , 足见其意义与使用频率. 我倾向於将事情交给专家 , jQuery既然研究过跨平台议题 , 那我将问题交给他 , 让他去处理而仅在必要时注意细节 , 这也是我为什麽如此推崇 jQuery 这个稳定而简单的lib的原因. ＠体验时间 本周要介绍的是 thick box . http://jquery.com/demo/thickbox/ 他是用来在一个页面中 , 直接载入另一个页面的解法, 因为它是跨页的处理 , 自己写一个demo倒不如拿现成的 , 我直接用今年二月初在系上协助学弟妹做短期的java 课辅义工 , 当时所建立的网站来做sample . (网站失连中...) 站中几乎所有站内连结都是用thickbox效果做的 , 我也在原始码上加上注解 , 请看我注解标示的区域了解thickbox如何操作. 比较有趣的是在 thickbox你不需要去呼叫他,他是透过设定 一个class , 他会在onload时去针对设定为该class的元素做处理. 这也是plug-in实做时可以采用的一种方案. (btw , tab panel 纯粹是透过 fadeIn fadeOut效果做到的 , 这两个effects 也是jQuery内建的. head内的script都是 tab penl的效果而写的 , 可以不用理会.) --- 因为这个主题很简单 , 所以反而花了更多的时间整理资料 ,这是所谓的莫非定律吗？:P 让我们将目光继续放在下一篇吧 , 就算介绍的不见得很完善 , 尝试总是一件好事. 下一篇要讲的主题是 traversing , 网页元素之间的巡览 , 撰文还有很多可以改善的地方 , 还请各位版友多多批评/指教 .o(_ _)o --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 ※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:58) ※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:59)