※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: [心得] js 到 jQuery 之二：无所遁形之 selector 时间: Fri Aug 8 02:52:24 2008 上一篇不含开头简介就爆了一百多字, 这篇得更精简用词才行. 会想学 js的有两种人 , 一种是希望看完之後自己会写会改的 , 另一种则是希望来找些语法copy and paste的 , 基本上体验部份是为後者设计的 , 而文章内文主要是写给前者看的, 我写的很口语 , 希望你们以「跟程式语言聊天」的心情来看这些文字. jquery呢？ 我会说它是对两者都适合的, 他可以简单到一行就能完成 , 也能让人很方便的去写去改. 希望你们看完这几萹文章不会被误导 , 不是所有事情都能一行被完成 , 但是它能让你在思考上保持「简单」. ──────────────────────────────── ＠前情摘要 我们正说到 js 大部分的时间都用来异动网页上成员的属性 , 比方说换个背景颜色 , 换成消失或显示 , 甚至移动位置 , 嗯 , 这听起来不错 , 当你正坐下来开始想思考这到底是怎麽做的 , 你或许会想到 , 我什麽时候要作这件事情？ ＠行为的起点 ─ 事件 这是个好问题 , 在这里我们不妨先假设一个简单的情境 , 当你按下名为芝麻开门的按钮(button)时 , 你希望某个图片就突然消失. 虽然事件不是我们本章的主角 , 不过在这里姑且当只误闯 丛林的小白兔 , 先来看这个简单的例子吧.：） http://tonyq.org/jqtalk/jq2_dooropen.html 对於 onclick 事件 , 相信你们不会全然陌生 , 我特地选择使用纯js撰写 , 以保持你们可能较为熟悉的面貌 . 在这个事件里面 , 我们很清楚到人事物是事件最重要的三元素, 由使用者去点击按钮, 而发动事件 , 接着对img做属性的异动. 以这个例子 , 我们是针对 #imgDoor 作 { display:none; }跟 {display:;} 的切换 ＠目标是那个元素？ 不管是这次的例子中的imgDoor或者是之前体验的table跟各span , 这些都是我们事件要异动的对象, 通常我们最简单也最常见的方法就是 将目标物件加上一个id , 然後采用document.getElementById , 这字串长度共23个字 , 有大写有小写 , 还很容易跟document.getElementsByName弄错 , 而且对html来说 , id要唯一的 , 设定id会造成思考上得负担, 虽然纯js也有提供 document.gtElementsByTagName 的方法, 但是总是需要花时间去学习 , 而且一样有程式码太长的问题. ＠为元素披上外衣的CSS 让我们先把镜头拉远 , 讲到这个要做出漂亮html就不能忘记的网页夥伴, 我们会很惊讶地发现 , 他也一样有不晓得要针对那个网页元件上色的问题 . 我们可能会采用 <div style="background:red"></div>, 我们称之为 inline style(行内样式） 的方式写 , 为各元素上色 , 但是这跟之前 id 问题一样 , 逐一设定过於繁琐 , 让它失去弹性. 於是 css 就改采用 <style type="text/css"></style> 的标签样式 , 甚至是连结到外部的 <link rel="stylesheet" href="xxx.css" /> . 而它之所以能独立 , 仰赖的就是 selector . ＠认识css三种充满威力的selector 1. id selector , 我们用 「#」这个字元开头 ,紧接着它的id , 称之为id selector . 透过这个selector 所设定的样式会影响到该id的元素 (这个selector 指向应该是独一无二的, 因为同一页面不该有同样id元素.) /*将<div id="hello"></div> 的背景改为红色的写法*/ #hello{ background:red; } 2.tag selector 你是否常常想要改变所有超连结<a>的颜色 ？ 选他就对了 当你不打任何符号,直接打上网页标签（tag）的名称, 就是采用tag selector方案. /*将网页上所有div的文字颜色变成绿色*/ div{ color:green; } 3.class selector 这个是最常见也最具扩充性的一个selector , 要使用这个你必须要在元素上先加上 class="xxx" , 再透过 「.」开头的字串「.xxx」指定这个元素 , 他跟id selector最大的差异是它的class可以有一个以上, 且class不限定只能用在一个元素上 . <div class="wordtitle">wordtitle1</div> <div class="wordbody">word1</div> <div class="wordtitle">wordtitle2</div> <div class="wordbody">word2</div> /*将wordtitle的文字加上底线 , wordbody的字设为绿色*/ .wordtitle{ text-decoration:underline; } .wordbody{ color:green; } ＠等等，我们不是在讲 javascript吗？ 没错 , 但这里的selector的确跟我们主题的selector有关, 更之前的文章中提到 , 传统id取得元素的方案程式码过长, 且需要花费时间学习 , 相信各位网页设计师可能会跟我以前一样 , 会用下列这样的工具来加速开发 function e(strId){return document.getElementById(strId)}; function eS(strId,show){ e(strId).style.display=show}; 之後只要呼叫 e("nodename") 就可以取得dom物件 , 这大概是只有id selector 的需求下最简单直接的方案. 但是我们除了id selector以外其实还有很多隐性需求 , 比方说我终於受够充斥整个页面几百个该死的表格了 , 我现在想把整个页面的讨厌表格给移除 , 我想要tag selector !! jQuery就很贴心的提供了这样的方案: 你看 , 就像这样 $("table").remove(); /*这不是开玩笑 , 所有的表格就这样从页面中移除了.*/ 好吧 , 我知道一定有人会质疑 , 所以还是程式码会说话. http://tonyq.org/jqtalk/jq2_tableremove.html ＠劫後余生记 嗯 , 我们终於成功的讨伐 table 大魔王了 , 但是table在页面上少说也有5～6个 , 也不完全是巢状关系 , 为什麽一行就清掉了呢？ 理由是 jquery 预设取回来的资料是以阵列处理的jQuery context , 而你透过 jQuery context所作的任何事件（像是他提供给你的remove) ， 都会影响到 jQuery context中所有成员 . ＠remove实在太酷了 , 但总不能一直移除东西吧 , 那他提供哪些方法呢？ 请见 jquery Document （我们之後会再针对常用的方法做介绍） 虽然我个人是觉得这这介面很有改善空间 , 但是对基本的查询来说够用了. 网址： http://docs.jquery.com/Core 他把它的方法分成了几大类 jQuery Core , Selectors , Attributes , Traversing ,Manipulation CSS , Events , Effects , Ajax , Utilities , jQuery UI 原则上主要特效都集中在 jQuery UI ,而其他的几乎都是基本操作方法 . core是基本的回圈取资料 , 以及提供plug-in扩充介面 , plug-in 这比较进阶 , 如果有余力会写一篇如何做自己的jquery plug-in. 我们刚刚用的remove 则是 Manipulation 区的, 这区主要都在讲怎麽新增元素移除元素 , 甚至拿一个元素包在自己外面 , 或者把自己拿去加在别人里面诸如此类 . 基本上attributes css events selectors core manipulation 都非常常用 . 比方说$("table").hide() 跟 style.display='none'的效果是一样的. $("table").show() 则就是对应的显示. remove跟hide的差异是 , 前者是show不回来的 .(从dom被移除了.) ＠等等 , 既然 selector 取的是网页元素 , 那他是dom元素吗? 你或许会想知道 $("table").style.display='none' 的结果. 答案会是 style is undefined , 因为$("table")是个 jquery Context , 他只能处理他提供给你的方法 , 那你如果比较习惯 js 的作法 , 不想查jquery 文件 ,有没有搞头？ 有！ 你可以透过 $("table")[0] 取得「第一个表格」的html dom物件 , 也就是 $("table")[0].style.display='none'会是可行的 . 如果你想对所有里面的元素做存取, 你也可以这麽做 . var jqTable=$("table"); for(var i =0; i <jqTable.length ;++i){ jqTable[i].style.display='none'; } 就纯粹把它当个阵列来看. ＠超级赛亚 dom 基本上我常戏称 jquery context是超级赛亚 dom , dom能做的事情他都能做 , 更能做它做不到的事情. 而且他还可以帮你考虑跨平台的状况 , 以後会介绍 . （糟 好像挖了不少洞给自己跳...） ＠虽然我只介绍了 tag selector , 我相信聪明如读者您 , 一定也能猜到 id selector 跟 class selector 的写法 . （如果有正妹的可以留电话我们私下教学 >////< （被女友拖去打）） 就跟css selector一样 , 其实他还有支援一些css 3 selector才有的东西, 比方说 "table:first" 可以取得第一个表格之类的 , 以及我目前还没有提到的attr selector , （以「[xxxx]」搜寻, 回传网页元件中含有xxxx属性者 , 可看小弟之前写的jquery Tooltip范例. http://0rz.tw/804x5 ） 主要是因为这些东西要逐一介绍都可以写上五千字了, 我的目的只是做入门介绍 , 就不这麽「复杂」了.（浅笑） ＠selector 只有这样吗？ 好像没什麽差？ 当然以目前讲的这些东西 , 要取得目标物好像还差些什麽 , 我们总是常常会有这样的状况 , 比方说在特定table的 td 的里面的div, （这样由父结构到子结构的关系 , 有个 xml的 专有名词xpath 可描述） 我们也是可以混着用 , 如 $("#tableid td div") , 就表示搜寻 id叫 tableid 的元素里面的 td tag里面的 div tag. 当然 除了父,子关系外 , 还有 「或」 的关系. 比方说 $("#testid1,#testid2") 中间用逗号隔开表示都可以, 也就是这样会取得 id=testid1 跟 id=testid2的物件. ＠写到这里 , 这章应该是上看两千字 , 主题不小 , 可能有点失焦 , 如果读者有看不懂的 , 请尽管推文或回文 , 小弟将尽心解释 , 看反应决定是不是要加一点介绍 , selector 是我当初对jQuery最惊艳的一点, 他把我从思考如何去写更多不重复id的泥沼中给挖出来了 , 以及让我在思考问题时能更加纯粹 , 更能专注於我所该解决的问题. 当然jQuery并不是唯一钻研此道的 js lib , 诸如prototype.js , yui等 , 也都各有其优点 , 各位可选择自己较为熟悉的 js lib 去运用 , 小弟只是独钟 jQuery的简单. ＠体验时间 各位观众 , 今天我们要介绍的是 drag and drop . 你还认为元素可以让你在网页上拖来拖去很炫吗？ (draggable) 这早就已经过时了 , 现在更流行的是拖过来还要放到别的地方去.（droppable) 至於更有趣的 sortable , 就让我卖个关子 , 留着当以後想不到要写什麽范例的压箱宝. http://tonyq.org/jqtalk/jq2_dragFrog.html -- 就这样 , have a nice time ~ 下一章要介绍的是 认识可怕的事件丛林 -- 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 --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 ※ 编辑: TonyQ 来自: 220.132.59.247 (08/09 03:10) ※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:56) ※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:57)