转载自网络
当我看到这些实现圆角边框的HTML源代码的时候,我发现这很适合用来写一篇jQuery教程–使用wrap()、prepend()、append() 函数。
这里是原先的HTML代码,我们将从这里开始:
<div class="dialog">
<div class="hd">
<div class="c"></div>
</div>
<div class="bd">
<div class="c">
<div class="s">
<main
content goes here >
</div>
</div>
</div>
<div class="ft">
<div class="c"></div>
</div>
</div>
现在我们怎么使用jQuery来精简这段代码呢?
首先,我们需要一个“钩子”,一个特殊的HTML元素,或者一个id,或者一个对象名–来告诉jQuery处理的目标。
现在我们改成了这个样子:
<div class=“roundbox”> <main content goes here > </div> 下一步,我们使用jQuery来将剩下的代码添加进去:
$(document).ready(function(){ $("div.roundbox") .wrap('<div
class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
});
其他Div标记去哪里了?
仔细观察代码,你就会发现它们都跑到了js代码里面,在wrap函数执行时它们将嵌套在“钩子Div”的内部。
细心的观众会发现我漏掉了部分代码。这是因为jQuery中的wrap()函数要求div标签必须严格对称嵌套才能工作。
具体的,我去掉了下面两个部分:
<div class="hd"><div class="c"></div></div>
<div class="ft"><div class="c"></div></div>
添加和预置一体化
下一步我们将会通过prepend和append函数将这两段代码添加进带有dialog对象名的div标记内部,并且使用“连锁”方法。
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
示例及代码
我已经在网上放置了一个演示页面供大家查看。建议你看一下页面的源代码,体会jQuery给页面代码带来的清爽和便捷。
这些代码来自 Schillmania的一篇文章,个人推荐大家下载包含点缀图片的zip打包,非常精美。
不使用图片的圆角边框
有很多方法可以实现圆角边框–有些方法甚至不需要图片。
在jQuery的网站上有一个用来制作无图圆角边框的插件。虽然不是适合所有人(或者说所有程序),但也值得学习。
看看它的漂亮代码吧(使用时):
$(document).bind("load", function(){
$("#box1").corner()
});
分享到:
相关推荐
JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通...第15课 - jQuery插件 - [精通JavaScript+jQuery]
<script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> <script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-timepicker-zh-CN.js"></script>
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 ...<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
<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-1.10.3.min.css" rel="stylesheet"> $( "#...
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版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js
jQuery入门级---经典课程,详细讲述了jQuery的编写,适合零基础初学者,更适合培训没学明白的学生
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入门汇总---无私奉献!希望对你有帮助
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-ui-1.9.2.custom.min.js
jquery-ui-1.7.3.custom 完整开发包
jQuery入门篇-主要介绍了jQuery的一些基本功能,和使用方法,马上会上传他的核心代码!
jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。
Jquery实现圆角边框效果的源码,Jquery实现圆角边框效果的源码
jquery-1.11.0 + jquery-UI-1.10.4
jquery-migrate-1.2.1.min.js 可以更好的帮助 jqury-jqprint 兼容性问题