分类“你问我答”的存档

«上一页 | 共 9 页: « 1 [2] 3 4 5 6 7 » ... 末页 | 下一页»

你问我答(33)——jQeury实现限定上限的多选表单

2009年03月20日 星期五

jQeury在网页开发中非常有用，我们以前也说过几次，今天遇到一位读者的问题：

“老师好，请教一个js的问题！最近在做一个20选10的投票系统，客户要求每次投票的选项不能超过10个，超过10个就不能投票。（即小于或等于10），请问如何用js来检测每次投票的选项不能超过10个啊？谢谢！”

这里我就用jQeury来解决一下这位读者的问题，为了代码简单，我做一个共有5个备选选项，最多允许选择2项的例子。

首先写出HTML

1
2
3
4
5
6
7

    <div id="optionDiv">
        <input id="Checkbox1" type="checkbox" /> <label for="Checkbox1">选项A</label><br />
        <input id="Checkbox2" type="checkbox" /> <label for="Checkbox2">选项B</label><br />
        <input id="Checkbox3" type="checkbox" /> <label for="Checkbox3">选项C</label><br />
        <input id="Checkbox4" type="checkbox" /> <label for="Checkbox4">选项D</label><br />
        <input id="Checkbox5" type="checkbox" /> <label for="Checkbox5">选项E</label><br />
    </div>

HTML很简单，不再解释，接下来看一下jQuery的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
        $(pageLoaded);
 
        function pageLoaded() {
            $("#optionDiv input:checkbox").click(checkboxClicked);
        }
 
        function checkboxClicked() { 
           if ($("#optionDiv input:checkbox:checked").length > 2)
                      $(this).attr("checked", false);
        }
</script>

点击这里看一下效果演示。下面简单解释一下原理，上面代码中：

第1行的作用是引入jQeury库文件，第2~13行的作用就是实现5个选项中限制最多选两项的代码。

第3行中，“$”是一个jquey定义的函数，它的作用是定义在整个页面装载到浏览器以后，执行括号中指定的函数，也就是下面定义的pageLoaded函数。

第5~7行就定义了这个pageLoaded函数，函数执行的代码就是第8行中的内容，即首先选中id为optionDIV中所有checkbox元素，并为每一个选中的checkbox元素设定被鼠标单击时的行为，即执行括号中的函数，也就是checkboxClicked函数。

第9~12行就定义了checkboxClicked函数，其功能也很简单，但某个checkbox被单击以后，判断一下一共有多少个checkbox被选中了，如果这个数量大于2，那么就把当前点击的这个checkbox的checked属性，设置为false，这样这次点击就被取消了。

说明：

如果读者对上面代码还有不清楚的地方，请看看我们的视频教程：http://learning.artech.cn/category/javscript-jquery ，里面对Javascript和jQuery作了比较详细的讲解。

从上面代码中可以看到，Javascript不同传统的静态高级语言的一个地方是，它可以非常方便地把函数作为参数传递，这一点很灵活，上面的代码也可以写成下面的样子，效果完全相同。

1
2
3
4
5
6

        $(function() {
            $("#optionDiv input:checkbox").click(function() {
                if ($("#optionDiv input:checkbox:checked").length > 2)
                      $(this).attr("checked", false);
            });
        });

发表在你问我答 | 温谦 | 15 条评论 »

你问我答(32)——自学是艰苦的

2008年11月25日 星期二

今天打算写的内容算是老生常谈的话题，但是这个问题被问到的次数实在太多了，因此还是多说几句吧。这个问题非常简单：

“你们的《精通Javascript+jQuery》这本书和教程，针对一点程序基础都没有的人，适合吗？”

简短的回答：

对于Web开发而言，在这本书中，我们尽可能把核心的道理通过简单的、易于理解的小例子和说明，进行讲解；然后再反复使用一些重要的特性，并组成综合性的案例。这样，对于没有编写过程序的读者，也能够尽可能的理解。因此，即使您没有相关基础，只要能够塌下心来，按部就班地学习、实践，一定会有非常大的进步。

1：如果您对自己的定位是“设计师”，那么把这本书的内容掌握好，道理基本理解，足可以帮您做出很多非常好的效果了，重点掌握jQeury的应用即可；

2：如果您对自己的定位是“开发人员”，那么一定要把核心的原理掌握透彻，要把综合的比较复杂的案例也吃透才可以，不但如此，希望真正掌握编程的奥妙，还有更多必须掌握的基础，一本书中的案例是无法让您真正理解软件开发的全貌的。当您写过5000行代码的时候，就会有一点心得了，写过50000行代码的时候，就会是一位比较成熟的软件开发人员了。

扩展的回答：

实际上任何工作都是很综合的，编程也是一样，不是单打一的技术就够了。这也就是为什么自学比较艰难，因为如果上大学的时候，有老师安排进度，同学讨论，很多问题自然而然就都过来了，一个学习计算机相关专业的大学本科毕业生，如果是认真一点的，大学期间两三万行代码的经验应该是有的，那么他再继续学习其他的东西就很容易了。

而如果要靠自学，就没有了这样一个按部就班的机会，所以会更困难一些。但是完全可以把自己学习其他专业的经验移植过来。根据我的经验，在判断一个东西你是否能学会的时候，应该考虑三点：

1：相关的基础知识如何？ ——–>你的起点

2：自己的接受能力如何？ ———>你进步的速度

3：对自己的毅力和坚持力有信心吗？ ———->你的加速度，态度决定一切

“基础”和“接受能力”，二者是不同的，就好像通常成年人具备的知识肯定比小孩多，但是面对新的技术、比如摆弄电脑之类的，则往往好比不上小孩，这就是因为小孩的接受能力要更强。古话说“人过三十不学艺”，也是因为接受能力下降了。当然除了年龄之外，还有很多因素会影响一个人的接受力。

相关的基础，是大家通常意识得到的问题，比如你是上过什么学，学的什么专业等等；而接受能力则是大家可能未必注意到的问题。其实也很简单，你如果在学习其他东西的时候，如果都比周围的人都要快，那就说明你的学习能力、接受能力强一些。对于毅力、坚持力，则更是绝大多数人都不具备，而只有牛人（或者说是成功人士）才具备的素质。

如果你是一个绝对有毅力的人，无论什么基础，什么能力，学什么都难不倒你。但是遗憾的是，大多数普通人的毅力都不会太好，所以我们重点讨论前两点。可以大致分为4类：

1：有基础知识，又有强的接受能力的人；

2：没有基础知识，但是接受能力强的人；

3：有基础知识，但是接受能力不强的人；

4：没有基础知识，又没有接受能力的人。

这样区分的目的，主要是为了帮助自己找到定位，寻找适合自己的学习方法。如果我是老师，希望我的学生都是第一类，其次是第二类，希望不是第四类。

最后具体说说学习编程的问题。世界上的工作有很多种，每一类工作都以自己的一套基础知识和思想方法，你要想做这个工作，就必须把相关的基础和思想方法理解并掌握扎实。这个并没有捷径可走。

实际上计算机发明60多年来，它的原理和基本思想方法，并没有变化，即所谓“冯.诺依曼（学计算机不可不知的神）”体系结构。无论你要用什么语言编程，都是在“冯.诺依曼”这个地盘里打转而已。而现在大学计算机系和课程也都是围绕这个体系讲解。看起来是很抽象、枯燥，甚至和实际很遥远的东西，但是这些东西都是很非常非常有用的，因此，最重要的一点就是，重视基础。没有基础虽然可以做出一些花拳绣腿的东西，但是要想真正做好，那么该读的书就一定要读懂，该理解的道理就一定要理解透彻，该做的苦力就一定要做到。

发表在你问我答 | 温谦 | 35 条评论 »

你问我答(31)——行内元素与块级元素

2008年10月26日 星期日

这个问题不少读者问起，以前都是比较简单的答复了一下。由于问的人比较多，今天专门来谈一谈这个问题。

问题起因：

我们在书中举过非常简单的使用a元素制作网页菜单的例子，本质上就是给a元素设置高度、宽度，以及边框等属性。例如下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
  <head>
  <style>
  a{
    width:200px;
    line-height:40px;
    border:1px solid red;
    background-color:#CCC;
    text-decoration:none;
    text-align:center;
  }
  </style>
  </head>
<body>
  <a href="#">链接文字</a>
</body>
</html>

显然，我们希望将上面的超级链接设置为200像素宽，40像素高，红色边框，灰色背景，取消下划线。

那么在浏览器中到底是什么效果呢？下面左图是在IE 6 中的效果，右图是在Firefox中的效果。


blcok-inline.gif

可以看到，在IE 6 中的效果，正是我们希望的效果，而在Firefox中，效果并不是我们希望的，宽度宽度都不正确。这是什么原因呢？

释疑

这里的原因在于，根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

那么链接 a 元素，在默认情况下是什么元素呢？答案是“行内元素”，因此像上面代码中那样，对a元素设置高度、宽度等属性，是无效的，这也就说明了在Firefox中，显示成图中的样子的原因了。

那么在IE6中，为什么等到了我们希望的效果呢？答案是IE在默认情况下，并没有遵守CSS的规范，它对a元素也同样设置了高度、宽度等属性。因此这里应该说Firefox是符合规定的，而IE在默认下，并不是规范的解释方法。

这里需要说明的是，如果我们给网页加上 DOCTYPE 指令，对HTML文档的类型加以限定，那么在IE中也会对他按照标准的CSS规范来解释这个代码。

例如，将上面代码中的第一行，改为：

1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

这时在IE中看到的效果，就会与Firefox中相同了，说明当使用了DOCTYPE指令之后，IE会按照标准的方式解释上面的代码，从而得到与Firefox中相同的效果。

那么如果希望在标准的方式下，在Friefox和IE浏览器中，都能使a元素获得我们希望的效果，该怎么办呢？

解决方法

方法很简单，只需要使用display属性，强制把a元素由inline元素改为block-level即可，方法是，在a元素的CSS样式中增加一条：

1

display:block;

这时在IE、Firefox中就都可以得到我们想要的效果了，可以随意设置高度宽度等各种几何属性了。

总结与提高

通过display属性，可以方便地改变一种元素的类型，因此如果读者理解这一点，就会知道实际上div元素和span元素，只需要通过display属性，就可以相互转换了。

因此，无论一个网页时有什么样的HTML标记来构成的，比如div、ul、li、p等等，他们本质上都是一些盒子而已，在浏览器的眼中，一个网页就是一大堆盒子，你的任务就是把这些盒子按照你的要求放在合适的位置。至于这个盒子是ul、li、p还是div，都无所谓的。

比如p标记，完全可以理解为有了一些预设属性值的div。比如，你把网页上的p标记，换成div，然后对这个div设置一些CSS属性，就可以和p完全一样了。这就好像，小学我们学习加法和减法，后来才知道，加法和减法本质是一样的，1-1 就等于 1 + (-1) ，同样，乘法和除法也是一样的。

真正把原理理解透彻了之后，在设计的时候，才可能做到天马行空一样的自由。

=======华丽的分割线========================

2008年10月29日补充：

鹤庭逸 和 anyliv 两位对这篇文章的总结和提高部分，提出了一些意见，我觉得很有益处。

在这篇文章中，我们谈的实际上是“浏览器眼中”网页，而不是“访问者眼中”的网页。这个区别就好像，一个“排字工人眼中”的小说，和“读者眼中”的小说，是完全不同的，前者只管格式，根本不管内容，而后者关注的是小说的内容。

同样，对于网页来说，作为设计师，在定义网页结构和内容的时候，关注的是网页的结构和内容，在排版的时候，关注的浏览器如何显示这个页面。

我们说，p标记和div标记，实际上都是盒子，是强调了问题的一个方面。而从另一个方面——结构和内容的方面来说，当然是完全不同的，不应该、也没有必要代替的。

希望以上补充可以使这篇文章更全面一些。

再次感谢 鹤庭逸 和 anyliv ！

发表在你问我答 | 温谦 | 24 条评论 »

你问我答(30)——上大学，学什么？

2008年10月15日 星期三

昨天收到samsang201同学的一个问题，我觉得可能比较具有代表性，不妨在这里和大家交流交流，他说道：

我是一个大三的学生，离毕业也不远了，总感觉计算机方面什么都没学到，也怕以后出去找不到工作，上个暑假好好的学了一下CSS，现在只要不是很复杂的页面，磕磕碰碰的也能做出来，但是不能很完美，从上次老师给的那个网站上我觉得PHP还是很有发展空间的，于是想学PHP来作为网页的后台开发语言。

现在自己正在看javascrpt，论坛里有个版主说学PHP要先学习CSS和javascrpt，所以呢我也在一步一步的学。这个学期还要忙着考各种证，时间也不是很多，我也越来越迷茫，到底要学什么技术对以后比较好？

好像现在的开发语言还是java在第一，然后是C，PHP还是需要得很少的，我现在都不知道自己以后的目标了，感觉前途很渺茫。

温老师是过来人，在这里就想请问老师指点一下，我这种情况走什么方面比较好？是专心的学习网站前台制作，还是学习后台语言，如果是后台语言要学习什么语言比较好就业。

谢谢温老师。

我想说如下几点:

1：首先我们不得不承认，人和人之间的差异是非常大的，所以对自己不要要求太高，天下的牛人太多了，对自己要求太高，反而影响心态，让自己处于着急状态，未必效果就会很好。所以对自己的要求，比现在稍有提高即可，最重要的是，你能否每天都有所进步，人生几十年，实际都是一秒钟一秒钟积累起来的，把当下这一秒钟做好，就不用担心未来。

2：你也谈到了很多具体的技术问题，实际上是这样，要回答这些问题，最关键的是你没有告诉我，你目前有什么基础，比如上的什么专业？什么样的大学？对什么感兴趣？虽然上什么大学对一个人的成功，不是决定性的，但是就我的感觉来说，其实影响还是蛮大的，这一点也不是能回避的。

3：说到一些具体问题，比如学Java还是PHP这种问题，其实这并不是很重要的，就像麦当劳和肯德基，哪个更好吃呢？个人可能有所偏好，但是如果真有一个明确答案，另一家早就倒闭了。

4：那么什么是关键的呢？关键的是要问一问自己，真的把《数据结构》、《算法分析》学明白了吗？如果再多列举一些，比如说《汇编语言》、《离散数学》、《数据库原理》、《操作系统》？如果这些课程您都真正学明白了，那么PHP还是Java无非就是选择一个工具。对于一个书法家，就是用一根木棍，写出来的照样价值连城，对于我们普通人，就算给你最好的毛笔，你写出的也一文不值。所以一定认识到，你是工具的主人，没有你的头脑，这些工具都是没有意义的东西。

4：所以归根到底，我的观点就是，一定要把计算机软硬件的道理真正搞明白，这才是上大学应该做的事情，否则上了4年大学，就是浪费了4年。

5：就像我前面说的，必须承认人和人之间的差距，如果感觉确实做不到把这些底层的原理真正学明白了，也没有关系，社会对人的需求层次很多，退而求其次，也一样没有问题，学一些实用的技术，就业也同样没有问题的。

6：如果确实对web开发感兴趣，大致是这样，前台的开发就是三样东西 HTML-CSS-Javascript ，这个掌握起来其实没有多难，然后后台其实本质也都是一样的，PHP、ASP、ASP.net等等都没有他大区别，还是上面的例子，麦当劳和肯德基之间的差别，没有本质的差别。至于哪个好找工作，我觉得关键在于你用的怎么样了，真的用好了，会哪个一年挣20万都没有问题。最近百度把华为的李一男请去作CTO，我相信一直搞通信的李一男一定不会对PHP或者Java有什么经验，但是这会成为他做CTO的障碍吗？

7：踏踏实实学就是了，不必担心ASP、PHP哪个会死掉，如果ASP死掉了，BillGates比你先跳楼，呵呵。

8：先保证把正课学好；如果还有使不完的力气，再考虑学些其它的东西；如果还有时间实在过得无聊，再去考那些没有用的证书。找工作，那些面试的人，会首先看你的成绩单的，然后看看你做过些什么，至于那些证书，谁都知道是怎么回事，不会当真的。

9：看了我上面写的，我觉得我也没有真正回答你的问题，因为我也不知道，不过我希望上面写的东西，对你有所帮助。如果你觉得有兴趣，告诉我你的专业、学校、成绩如何、兴趣在哪里，我可以给你一些具体的建议。

10：从你的文字可以看出，至少你的态度是很积极的，这就是你最大的优势，实际上，真正努力的人并不很多，因此只要肯努力的人都会获得成功的，即使没有大成功，也能有小成功。

发表在你问我答 | 温谦 | 99 条评论 »

你问我答(29)——用好代码视图的辅助功能

2008年04月15日 星期二

今天继续上次的话题，软件出现的目的就是为了提高用户的工作效率。Dreawmeaver和Expression Web同样是这样，它们的目的就是为了提高用户制作网页的效率。

Dreamweaver和Expression Web软件的功能不仅仅体现在可视化的操作上，而且在代码视图上对用户的帮助也是很大的。总体来说，代码编辑器能够提供的帮助，包括代码染色、快速选择、内容提示、错误提示、代码折叠这几大类。

下面我们就来介绍一下在代码视图中编写网页时，辅助软件能给我们提供哪些帮助。以下讲解以Expression Web为例，在Dreamweaver中基本大同小异。

代码染色

Expression Web和Dreamweaver都支持代码染色。可以看到根据代码中每个单词的不同成分，会用不同的颜色显示，这样可以帮助用户在繁多的代码中辨识需要寻找的位置。

image27.png

快速选择代码

一个页面可能会很长，几百甚至几千行，这是如果需要找到某一个特地功能位置，就很麻烦。一个方便的方法是利用代码上端的“快速标记选择器”栏进行选择。在“快速标记选择器”栏会逐级列出从body元素当当前选中元素的层次关系，因此对于快速定位代码有非常大的帮助。

image28.png

代码提示（智能感知）

1：在代码视图中，在需要输入属性名称的地方，会自动出现一个下拉框，列出属性名称，这时可以使用键盘的上下键选择，这时列出的属性是按字母书序排列的，如果要选择比较靠后的属性，则可以先输入一个属性的第一个字母，比如“color”的第一个字母是“c”，这时下拉框中就会跳到字母“c”开头的属性了。选中需要的属性以后，按回车键，这个属性就是输入到代码中了，这样既可以避免拼写错误，又可以提高输入的效率，是非常方便的功能。

image29.png

2：不但如此，在输入一个属性名称以后，输入冒号以后，如果属性值是颜色，那么也会出现可供选择的颜色名称列表，如果希望自定义颜色，选择最上面的“选取颜色”项，就会出现颜色选择面板。类似地，如果需要输入文件地址，也会出现选择对话框，这对于输入代码也非常有用。

image30.png

3：而且，如果一个属性的属性值需要输入多个参数，在输入时除了提供备选值之外，还会给出参数含义的提示，这样也给设计师提供了很好的备忘录。

image31.png

错误提示

不但如此，即使上面的措施都没有避免输入了错误的属性名称或属性值，软件还会给出提示。例如图中把“color”属性名拼写错为“colorr”，那么在它的下面会出现红色波浪线，如果希望知道错误原因，把鼠标指针放到单词上面，就会给出错误原因的提示。图中间，把属性值bold输入为boold，也会出现提示。因此只要在代码中看到有错误提示的地方，都应该修改正确。

image32.png

代码折叠

一个页面可能会很长，几百甚至几千行，这是如果需要找到某一个特地功能位置，就很很麻烦。这是可以使用“代码折叠”功能，把暂时无关的代码“折叠”（隐藏起来）起来，这样就可以方便地寻找和编辑需要补编辑的地方。

在Dreamawaver CS3种提供了代码折叠功能，但是目前版本的Expression Web没有提供代码折叠。

通过上面的介绍，可以发现如果用户可以非常熟练地使用代码视图的辅助功能，就可以大大提高编写的效率。也许您已经对它们非常熟悉了，如果您还有什么好的经验，欢迎留言讨论，供大家借鉴。

发表在你问我答 | 温谦 | 4 条评论 »

«上一页 | 共 9 页: « 1 [2] 3 4 5 6 7 » ... 末页 | 下一页»