使用jQuery实现各式各样的边框

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量6.3k 收藏 2
点赞数 1
分类专栏： jquery||js 文章标签： jquery class div dialog html function

介绍三种方法：
第一种：最原始的Html+CSS
这个其实很简单，有网页设计的朋友应该都晓得：设计的技巧在于CSS和DIV的使用。

<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>


 

这是原始的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>');
});

仔细观察代码，你就会发现它们都跑到了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>');

可以查看DEMO演示
本段资料来源：（http://wiki.jquery.org.cn）。
方法三：利用Jquery Corner Gallery：
使用方法很简单：首先所有的jquery project都需要最新的jquery.js,其次下载下载jquery.corner.js
只需要调用类似 $().corner("effect corners width")的方法就可以画出你需要的边框，其中effect可以是 round、bevel、dog等关于边框类型参考Jquery corner demo
width是宽度参数一px为单位。 如果你对$()方法的使用感到陌生的话，不必当心，其实跟CSS中元素调用类似：比如你需要所有id为class为round的标记的边框类型为圆角，那么调用方法就是：$("div.round").corner().如果需要为id为slant的元素置顶边框类型dog以及宽度4px，那么表达式就可以是：$("#slant").corner("dog 4px").很简单吧。好了来看一个具体的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="../lib/jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery.corner.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $('.corner1').corner("10px");
     $('.corner2').corner("tear 10px");    
        });
        
        </script>
        <title>Round conrners</title>
    <style type="text/css">
.corner1, .corner2 {
    background: #6FA;
    width: 23em;
    text-align: center;
    padding: 20px 2px;    
    margin: 1em 0.25em;
    color:red;
}

.corner1 h1,.corner2 h1 {
    font-size: 120%;
}
</style>
    </head>
    <body>
    <div class="corner1"><h1>round corner with 10px</h1></div>    
    <div class="corner2"><h1>Tear corner with 10px</h1></div>
    </body>
</html>

效果图：

关于jquery Api参考：http://www.k99k.com//jquery/api/jquery1.1_api_cn.xm
append() 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。$("p").append("<b>Hello</b>");

prepend()向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
$("p").prepend("<b>Hello</b>");
Wrap()把所有匹配的元素用其他元素的结构化标记包装起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包装完成之后再行添加。
文件:dialog.zip
大小:14KB
下载:下载
转帖
sean1203
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css块边框流动线条效果
09-22
用css实现边框流动光线效果.........................................................................................
jquery美丽的边框
08-23
登录和注册jquery,还是显示了密码的强度提示
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
热门推荐
smm的博客
04-25 1万+
使用纯CSS实现动态流光线条效果（拖尾透明）
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
小强的博客
07-27 263
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selected
【技术】做一个圆:周围4个扇形，有点击事件（html5+css3实现扇形）
chelflan's blog
12-08 1312
做一个圆:周围4个扇形，有点击事件效果图代码（vue写的）总结 效果图 代码（vue写的） <template> <div class="home"> <span class="front-sty-top">前面</span> <span class="front-sty-right"> 近中面</span> <span class="front-sty-bottom"
Jquery实现双边栏动态多选框
留住这时光的博客
10-22 658
Jquery实现双边栏动态多选框 标签（空格分隔）： 前端 官网 先引jquery再引其它的 &lt;html&gt; &lt;head&gt; &lt;link href="assets/css/bootstrap.css" rel="stylesheet" /&gt; &lt;!-- FontAwesome Styles--&gt; &lt;link href="a
超级好用的圆角插件jQuery Corner速成
feifei20081014的专栏
08-09 577
********************************导言***********************************     虽然圆角页面很好看，但一直以来都不太好实现，一方面是没有CSS3，二是都得通过美工切图切出来角。但这些麻烦事即将过去，就是因为它：jQuery Corner的出现！ *******************
html 点选div出现边框,jQuery框选和点击选中div块代码
weixin_29357243的博客
07-03 776
jQuery框选和点击选中div块代码，类似windows系统选择文件效果的鼠标拖动选中div块，还可以点击全选反选按钮进行选择。查看演示下载资源：21次 下载资源下载积分：10积分js代码 var initSelectBox = function(selector, selectCallback) {function clearBubb...
jQuery
扮猪吃老虎二号的博客
12-26 526
一、jQuery入门 jQuery是一个JavaScript脚本库，通过&lt;script&gt;在HTML头部引入即可。 两种引入方式： 通过CDN引入：&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt; 从 http://jquery.com/download/ 下载jQuery库，根据文件位置引入即可。 基本...
jquery实现的按鼠标滑过方向增加元素边框html页面源码
mazai5080的博客
05-03 787
大家好，今天给大家介绍一款，jquery实现的按鼠标滑过方向增加元素边框html页面源码（图1）。送给大家哦，获取方式在本文末尾。 图1 按鼠标经过的方向控制背景方块元素移动（图2） 图2 源码完整，需要的朋友可以下载学习（图3） 图3 本源码编码：10151，需要的朋友，点击下面的链接后，搜索10151，即可获取。 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8
使用jQuery实现动态添加小广告
10-19
下面小编就为大家带来一篇使用jQuery实现动态添加小广告。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery插件corner实现圆角边框的方法
10-24
主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery实现圆角边框
01-29
jquery实现圆角边框 圆角边框 jquery实现圆角边框 圆角边框
使用jquery实现放大镜效果
10-25
相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。那么接下来，我们将向大家介绍通过jQuery实现放大...
使用JQuery实现折叠面板demo
07-31
使用JQuery实现折叠面板demo
图片懒加载
m0_47999208的博客
04-18 208
的页面，这有两个属性src和data-src。页面滚动到图片的位置才会加载相应的图片。
Web前端开发之HTML_3
zx1026409886的博客
04-23 790
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 277
【代码】用html写一个旋转菜单。
用html画一个四叶草
liulang68的博客
04-20 964
以上是部分代码，需要请看主页加联系方式。
javaweb项目如何使用jquery实现登录
06-02
要使用 jQuery 实现登录功能，需要先在前端页面引入 jQuery 库文件。可以从 jQuery 官网（https://jquery.com/）下载最新版本的 jQuery 库文件，并将其引入到 HTML 页面中。例如： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值