- 浏览: 101439 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
lord_is_layuping:
额,还是没解决,已经在我的maven配置(d:\tools\m ...
maven执行报错resolution will not be reattempted until the update interval of nexus h -
107x:
不错,3Q
maven执行报错resolution will not be reattempted until the update interval of nexus h -
黑色_幽默:
写的很详细,设计模式是门学问啊~顶一个
JAVA设计模式示例代码
转载自网络
这个让我们轻松的纪念日已经到来–我恨我在计算机前已经花了48个小时,我希望能够有另外一个jQuery来结束我的噩梦,并且让我上网更快。
当我一边“在用Jquery方法编写”和一边“进行复杂的文件上传”,我已经筋疲力尽。然而这两种操作的代码是一种较浅的,它只不过是你才刚刚开始解决的一些简单问题。
所以下来我开始介绍:
尽管我在我的网站用所有的CSS样式表去进行表格设计(也许这要花费两年半的时间或者更多),我已经用了很多我能找到的在这方面的信息。回到2004年5月(古代史)A list a part有一篇《关于创建阴影的伟大教程(洋葱皮投影)》可以应用到任何图片,无论尺寸多大.
那片文章的应经不能再评论了,但还是有些人希望能够再出篇教程.
问题
一些css工程师用一些”不相干”的标记,就是为了使背景图片能够应用到每一个元素上.例如:
这里是A list a part用到的代码:
所有这些divs充当一个给图片添加投影效果的”钩子”.这不见得好,我们可以把源代码精简成这样:
按着这个思路…
目标
在这里,我要想你展示如何用jQuery轻而易举的将多于的标记从你的源代码中剔除.运用这个方法,让你的代码更加干净(更重要的是)将使以后变换布局容易的多.
解
这里,看看jQuery是如何击退这个问题的.
图片就可以保持这样了:
仔细看看
$(document).ready() 是jQuery版的window.onload()
$(“img.dropshadow”) 告诉jQuery找到带有class=“dropshadow”的图片,如果你想用一个id你可以这样: $(“img#dropshadow”)wrap() (wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis. )
最后的结果
傻乎乎的图片,但是和original Onion Skinned Drop Shadows用的是一样的.
jQuery和其它解决方法的比较
jQuery的网站上有一个到Ajaxian网站的链接,那里有用另外一个javascrip库创建的Onion Skin Drop Shadow ,我相信他的代码复杂程度和代码量现在看来自不待言.我宁愿使用jQuery.(怎么?你猜到了..)
平心而论,没有一个库是对于每一个工作或每一段代码都是合适的.本教程不是为了证明jQuery是一切javascrip类库中的老大. 试试Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.如果你找到了一个你用起来比较顺手的,那就去用它吧.
jQuery对于我来说只是一个工具.我只是希望这个教程能够提供给你更多使用它的方法.
有关jQuery的工具
jQuery用难以置信的简单来操作DOM. 你应该花些时间看看jQuery能用来做什么,用下append(), prepend(), before(), after(), html(), and remove().
来自jQuery Docs
wrap(String html)
把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包装完成之后再行添加。
示例:
HTML
结果
这个让我们轻松的纪念日已经到来–我恨我在计算机前已经花了48个小时,我希望能够有另外一个jQuery来结束我的噩梦,并且让我上网更快。
当我一边“在用Jquery方法编写”和一边“进行复杂的文件上传”,我已经筋疲力尽。然而这两种操作的代码是一种较浅的,它只不过是你才刚刚开始解决的一些简单问题。
所以下来我开始介绍:
尽管我在我的网站用所有的CSS样式表去进行表格设计(也许这要花费两年半的时间或者更多),我已经用了很多我能找到的在这方面的信息。回到2004年5月(古代史)A list a part有一篇《关于创建阴影的伟大教程(洋葱皮投影)》可以应用到任何图片,无论尺寸多大.
那片文章的应经不能再评论了,但还是有些人希望能够再出篇教程.
问题
一些css工程师用一些”不相干”的标记,就是为了使背景图片能够应用到每一个元素上.例如:
这里是A list a part用到的代码:
<div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <img src="object.gif" alt="The object casting a shadow" /> </div> </div> </div>
所有这些divs充当一个给图片添加投影效果的”钩子”.这不见得好,我们可以把源代码精简成这样:
<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />
按着这个思路…
目标
在这里,我要想你展示如何用jQuery轻而易举的将多于的标记从你的源代码中剔除.运用这个方法,让你的代码更加干净(更重要的是)将使以后变换布局容易的多.
解
这里,看看jQuery是如何击退这个问题的.
$(document).ready(function(){ $("img.dropshadow") .wrap("<div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div>"); });
图片就可以保持这样了:
<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />
仔细看看
$(document).ready() 是jQuery版的window.onload()
$(“img.dropshadow”) 告诉jQuery找到带有class=“dropshadow”的图片,如果你想用一个id你可以这样: $(“img#dropshadow”)wrap() (wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis. )
最后的结果
傻乎乎的图片,但是和original Onion Skinned Drop Shadows用的是一样的.
<!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"> <head> <title>Onion Skin DropShadwo with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> .wrap0, .wrap1, .wrap2, .wrap3 { display:inline-table; /* \*/display:block;/**/ } .wrap0 { float:left; background:url(shadow.gif) right bottom no-repeat; } .wrap1 { background:url(shadow180.gif) no-repeat; } .wrap2 { background:url(corner_bl.gif) -18px 100% no-repeat; } .wrap3 { padding:10px 14px 14px 10px; background:url(corner_tr.gif) 100% -18px no-repeat; } body { background: #fff;} </style> <script src="jquery.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("img.dropshadow") .wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div></div>"); }); </script> </head> <body> <h1>Onion Skinned - With jQuery</h1> <p>First, the old-school, multiple divs hard coded into the html as seen on the <a href="http:/ /www.ploughdeep.com/onionskin/360.html">orignial article</a>:</p> <div class="wrap0"> <div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <img src="ball.jpg" alt="The object casting a shadow" /> </div> </div> </div> </div> <p style="clear:both;">And now, the jQuery method, which uses javascript to wrap the image at runtime:</p> <img src="ball.jpg" class = "dropshadow" alt="The object casting a shadow" /> <p>View the source of this page and you'll see the huge difference in markup!</p> </body> </html>
jQuery和其它解决方法的比较
jQuery的网站上有一个到Ajaxian网站的链接,那里有用另外一个javascrip库创建的Onion Skin Drop Shadow ,我相信他的代码复杂程度和代码量现在看来自不待言.我宁愿使用jQuery.(怎么?你猜到了..)
平心而论,没有一个库是对于每一个工作或每一段代码都是合适的.本教程不是为了证明jQuery是一切javascrip类库中的老大. 试试Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.如果你找到了一个你用起来比较顺手的,那就去用它吧.
jQuery对于我来说只是一个工具.我只是希望这个教程能够提供给你更多使用它的方法.
有关jQuery的工具
jQuery用难以置信的简单来操作DOM. 你应该花些时间看看jQuery能用来做什么,用下append(), prepend(), before(), after(), html(), and remove().
来自jQuery Docs
wrap(String html)
把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包装完成之后再行添加。
示例:
$("p").wrap("<div class='wrap'></div>");
HTML
<p>Test Paragraph.</p>
结果
<div class='wrap'><p>Test Paragraph.</p></div>
发表评论
-
jQuery入门教程-15 Days of jQuery(Day 15) --- 拖拽效果和选择器
2013-03-15 16:06 926转载自网络 原文 当 ... -
jQuery入门教程-15 Days of jQuery(Day 14) --- Javascript 工具提示
2013-03-14 22:43 621转载自网络 Cody Lindley ,Thickbox的作者 ... -
jQuery入门教程-15 Days of jQuery(Day 13) --- jQuery 表格
2013-03-14 22:43 538转载自网络 一位叫Klaus的朋友编写了一个小插件, 用jQu ... -
jQuery入门教程-15 Days of jQuery(Day 12) --- jQuery Lightbox (插件)
2013-03-14 22:42 986转载自网络 Cody Lindley ... -
jQuery入门教程-15 Days of jQuery(Day 11) --- 使用不苛刻的javascript代码实现多文件上传
2013-03-14 22:42 840转载自网络 好几个月以前,当我在追逐互联网上AJAX热潮的时候 ... -
jQuery入门教程-15 Days of jQuery(Day 10) --- 使用jQuery Javascript 库实现“即点即改”的AJAX化
2013-03-14 22:42 1006转载自网络 以前我在Quirksmode网站见过这种代码,后来 ... -
jQuery入门教程-15 Days of jQuery(Day 9) --- 快速和略显粗劣的AJAX视频教程
2013-03-13 12:11 813转载自网络 今天我的想法有点改变。近段时间以来我一直考虑注册一 ... -
jQuery入门教程-15 Days of jQuery(Day 8) --- 使用Javascript(jQuery)实现圆角边框
2013-03-13 12:11 741转载自网络 当我看到这 ... -
jQuery入门教程-15 Days of jQuery(Day 6) --- 更安全的Contact Forms,不带CAPTCHA
2013-03-13 12:11 807转载自网络 这次的教程内容贴近我擅长的技术方向:安全的cont ... -
jQuery入门教程-15 Days of jQuery(Day 7) --- 样式表切换
2013-03-13 12:11 781转载自网络 我第一次看到样式表切换器是在A List Apar ... -
jQuery入门教程-15 Days of jQuery(Day 4)---安全邮件列表
2013-03-12 22:28 781转载自网络 规则提到 ... -
jQuery入门教程-15 Days of jQuery(Day 3)-巧妙的伪装链接
2013-03-12 22:05 965转载自网络 今天的教程是草草完成的.我想把一些东西放在这1 ... -
jQuery入门教程-15 Days of jQuery(Day 2)-很容易的制作双色表格
2013-03-12 22:03 773转载自网络 这节本身没有太多的价值,重点在它提供的这个例子上。 ... -
jQuery入门教程-15 Days of jQuery(Day 1)-比window.onload更快一些的载入
2013-03-12 22:01 953转载自网络 window.onload()是传统javascr ... -
jQuery入门教程-15 Days of jQuery(Day 0)-JQuery - What, Why, When, Where, Who
2013-03-12 21:58 889转载自网络 what jQuery是 ... -
jQuery.validate的optional方法
2012-05-31 17:30 9364jQuery.validate的optional(elemen ... -
jQuery之ajax请求总结
2012-05-23 16:33 1572jQuery的ajax请求方式有好 ...
相关推荐
jquery插件jquery-ui-1.8.18.custom.min.js
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
jquery插件jquery-ui-1.8.2.custom.min.js
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-ui-1.8.18.custom
最新版jquery-1.6.4-vsdoc.js jQuery的VS智能提示插。压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后...
jQuery入门级---经典课程,详细讲述了jQuery的编写,适合零基础初学者,更适合培训没学明白的学生
jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js
jQuery入门汇总---无私奉献!希望对你有帮助
jquery-ui-1.7.3.custom JQUERY UI
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery-ui-1.9.2.custom.min.js
jquery-ui-1.7.3.custom 完整开发包