您当前的位置:首页 > 网络编程 > Js脚本 > 正文

《15天jQuery入门教程》第五天:让jQuery生成HTML代码

【字体大小: 2009-04-21 11:29 来源:译言 作者:ShiaoHoo 

  周末的烈士纪念日即将结束 - 我已经离开电脑长达48个小时,现在我想再发布一个在线jQuery入门教程。

  我非常想写关于“以jQuery的方式在在同一页面无刷新编辑内容”和“多文件上传的魔力”的文章(译者注:其实就是利用AJAX技术的话题),但是关于这两个主题的代码有一些难度,现在开始我还是应该还是做一些相对简单的教程。

  让我们开始吧!

  在CSS的帮助下,我们的网站已经从用表格布局的困境中解脱出来(到现在也快两年多了),我想现在可以找到关于这个主题的所有信息。

  追溯到2004年的五月(远古时代)的A List Apart (译者注:网站名),其中有一篇题为 great tutorial on creating drop shadows (Onion Skinned Drop Shadows) (译者注:《关于创建阴影效果的教程(洋葱皮阴影效果)》),针对任意大小图片处理的文章。

  这篇文章当时的评论可能已经无法获得,但他们中的一些和作者在教程的一开始就产生了强烈的共鸣。  

Editor’s(译者注:应该是个人名或者编辑吧) 注:教程中所展示的技术不是为所有人准备的。这种设计方法只针对没有语义和结构化值的nesting DIV元素(译者注:structural value和nesting div指什么不大清楚)。如果这些问题困扰着您(或者处于某种原因它们可能会困扰您),这不是为你而准备的教程。

  问题

  一些CSS技术需要“多余的”标记,因为目前每个元素只能作用一个背景图片。

  例如:

  下面是A List Apart教程中用的html代码:  

  1. <div class="wrap1"><div class="wrap2"><div class="wrap3"><img src="object.gif" alt="The object casting a shadow"/></div></div></div> 

 

  所有这些div元素作为背景图片的钩子,从而实现了阴影效果。

  但如果我们能将源代码缩减成下面这样不是更好吗:  

  1. <img src="object.gif" class="dropshadow" alt="The object casting a shadow" /> 

  为了实现这个目标,我们开始...

  目标

  我将为你展示运用jQuery从html源代码中移除多余标记是多么简单的事情,使用这种方法能让你的代码更干净简洁(更重要的是)将使得未来改变布局更加易于实现。

  解决方案

  下面介绍jQuery将如何解决这个问题。  

 

  1. $(document).ready(function(){$("img.dropshadow").wrap("<div class='wrap1'><div class='wrap2'>" +"<div class='wrap3'></div></div></div>");}); 

  图片将被应用这样的风格:  

  1. <img src="object.gif" class="dropshadow" alt="The object casting a shadow" /> 

  更进一步分析

  $(document).ready()是jQuery里面和window.onload()类似的功能函数。

  $("img.dropshadow")告诉jQuery找出从所有img元素中筛选类名为dropshadow的元素,如果你希望用id号来代替,那么代码将变成这样$("img#dropshadow")。

  wrap()告诉jQuery使用DOM(文件对象模型)创建挂号内的html代码包围类名为dropshadow的img元素。

  最终的结果

  html中仅仅是img元素,但其效果和原版的洋葱皮阴影效果完全相同:

  jQuery Drop Shadow Example(jQuery阴影效果演示)

  比较jQuery方案和其他方案

  从jQuery站点我们可以找到一个到Ajaxian站点的链接,这是又一个javascript库,用于实现洋葱皮阴影效果。我认为其大量的代码和代码的复杂性可以说明一切,个人来说,我更喜欢jQuery的简单。(你已经猜到了,是吧,呵呵?)

  公平点说,没有一个库能够完美的实现每一项工作,这个教程也并非用以说明jQuery是真正万能的javascript库。

  试试Prototype,Scriptaculous,YUI,Rico,Behaviour,Moo.fx以及很多其他的库。你会找到适合于自己的,然后决定用他。

  jQuery是对我来讲是一个很好的工具,我希望这篇教程向你展示了其更加有用的方面。

  相关的jQuery工具

  jQuery允许你及其方便地通过客户端浏览器来生成html代码。

  你应该花点时间看看在jQuery中如何使用 append(), prepend(), before(), after(), html(), remove()等方法

  Meatier Tutorials On the Way

  因为一些困难,今天我只提及了一两点内容。但这也不错,因为即使概念很简单,这些在你的设计和编程过程中很多情况下都能用到,很实用。

  除此之外,不考虑阅读教程的人很多是初学者的问题,发布这篇教程的时候,我正在佛罗里达州的阳光海滩上,脚上还沾满了沙子。

  不过请放心,在《15天jQuery入门》即将结束的时候,你将看到一些更高级的应用教程,范例和代码。

    顶一下
    (6)
    66.7%
    踩一下
    (3)
    33.3%
    【责任编辑:绝口不提】 标签: jQuery入门教程
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: