Web前端
我是干勾鱼
最重要的,追随自己的心。
展开
-
利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局
其实table和div这两种布局方式是互为优劣的。但是目前来说div越来越成为一种主流设计方式,其布局效果灵活、样式新颖的特点也越来越受到青睐。而且这里我们所讲的,如果你想使用拖拽的方式轻松实现页面布局,那非div不可。原创 2015-05-26 15:04:53 · 9318 阅读 · 24 评论 -
jquery的show()函数不会将某个div下面的style为“display:none”的a标签子元素也显示出来
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/52884038 本文出自【我是干勾鱼的博客】众所周知,jquery的show()函数用于显示隐藏元素,比如某个div。如果div下面还有一个子元素div,这个显示同样能把子元素也显示出来。但是要知道,如果某个div下还有一个a标签子元素也处于隐藏状态,使用show()函数显示原创 2016-10-21 15:53:05 · 7116 阅读 · 0 评论 -
jquery绑定事件的方法on中获取当前所在元素及子元素的方式
有时我们要使用jquery中的绑定事件的方法on,来中获取当前所在元素,以及子元素的方式,可以参考:$(document).on('mouseover', '#item', function() { $(this).find(".back").animate({width:"300px"});});获取当前所在元素:$(this)获取当前所在元素的子元素的方式:$(t原创 2016-10-20 18:01:35 · 8888 阅读 · 0 评论 -
html的“object HTMLDivElement”与jquery“object Object”相互之间的转换方式
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/52875537 本文出自【我是干勾鱼的博客】当需要将html的“object HTMLDivElement”与jquery“object Object”相互之间进行转换时,可以如下进行:var obj = document.createElement("div"); //h原创 2016-10-20 18:16:51 · 9197 阅读 · 2 评论 -
div缩小时,里面的英文不会溢出功能的实现
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53405632 本文出自【我是干勾鱼的博客】有时候我们经常需要将英文文字放在div中,当时当div缩小时,如果英文文字很多会溢出div。注意这里我们为什么会说“英文”呢?因为如果是中文的话会自动的被限制在div中。这里举各例子。代码如下:<!DOCTYPE html><ht原创 2016-11-30 12:02:46 · 1454 阅读 · 0 评论 -
点击按钮之后右侧弹出导航,再点击右侧导航隐藏回去的实现
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自【我是干勾鱼的博客】实现了一个点击按钮之后右侧弹出导航,再点击右侧导航隐藏回去的小功能,用到了jquery,直接放在html里就能实现,代码如下:<!DOCTYPE html><html><head><script type="text/javas原创 2016-11-30 15:19:04 · 10009 阅读 · 0 评论 -
常用的jquery在线引用地址
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408731 本文出自【我是干勾鱼的博客】有一些常用的jquery的在线引用地址,大家可以参考:jQuery:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></sc原创 2016-11-30 15:29:07 · 5044 阅读 · 0 评论 -
css的position定位属性中值absolute与值fixed二者的区别
我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed。都是绝对定位,二者有一致性,也有不同点。那么二者的区别是什么呢?那就是position的fixed值定位的元素会固定在原来的位置不变,不管你如何拖动滚动条,元素都不会改变位置,这从fixed这个英文单词的意思也可以看出,“固定的,不变的,固执的”。而absolute正好相反,拖动滚动条时元素会随着原创 2016-11-30 16:46:23 · 3060 阅读 · 0 评论 -
推荐一本前端学习的好书-《2天驾驭DIV+CSS》
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53410299 本文出自【我是干勾鱼的博客】一位前端开发的同事推荐了一本不错的书——《2天驾驭DIV+CSS》,讲解div和css从入门的精通的基础知识,推荐给大家。网上也有这本书的电子版,可以看。原创 2016-11-30 16:57:16 · 1657 阅读 · 0 评论 -
使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了。这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用jquery,又得使用函数,有点太简单粗暴了,今天介绍一种更为方便而且优雅的方法,那就是使用CSS3的“transition”属性。在w3school上对“transition”属性有详细的解释,原创 2016-11-28 11:23:40 · 26789 阅读 · 0 评论 -
使用属性position:fixed的时候如何才能让div居中
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53994537 本文出自【我是干勾鱼的博客】有的时候我们会需要让一个div使用position:fixed属性,当然什么时候使用这个属性可以参考我的一篇文章《css的position定位属性中值absolute与值fixed二者的区别》。这个时候有一个棘手的问题是如何在这个时原创 2017-01-03 15:32:41 · 46596 阅读 · 6 评论 -
使用jquery在前台页面验证邮箱输入是否正确
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53893591 本文出自【我是干勾鱼的博客】使用jquery在前台页面验证邮箱输入是否正确,代码如下:<!DOCTYPE html><html><head><script type="text/javascript" src="http://code.jquery.com原创 2016-12-27 11:05:39 · 9009 阅读 · 0 评论 -
使用jquery在前台页面验证url网址输入是否正确
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53894224 本文出自【我是干勾鱼的博客】使用jQuery在前台页面验证url网址输入是否正确,代码如下:<!DOCTYPE html><html><head><script type="text/javascript" src="http://code.jquery.原创 2016-12-27 11:49:47 · 9247 阅读 · 0 评论 -
谷歌chrome浏览器下font-size属性值小于12px时无效问题的解决办法
如果单单是想要设置页面的font-size属性值小于12px,貌似是一个很简单、很正常、对于有这个需求的开发者理所当然的事情。在chrome浏览器下,当设置font-size属性值小于12px时是无效的,当然网上很多地方也有解决办法,那就是使用“-webkit-text-size-adjust”。有的时候即使设置了这个属性在chrome里仍然有问题,网上也有一些论坛讨论作参考。不过,退一万原创 2016-12-29 11:48:40 · 9676 阅读 · 0 评论 -
百度前端技术体系——百度EFE(Excellent FrontEnd)技术体系
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53927843 本文出自【我是干勾鱼的博客】之前在文章《推荐一个不错的纯 Javascript图表库——ECharts》中简单介绍了“ECharts”,其实“ECharts”是隶属于百度EFE(Excellent FrontEnd)技术体系的一款产品。EFE官网介绍如下:原创 2016-12-29 15:14:52 · 2112 阅读 · 0 评论 -
jquery方法mouseenter与mouseover的区别
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/52883549 本文出自【我是干勾鱼的博客】mouseover()方法相信大家都用过,当鼠标的指针位于元素上方时,会发生 mouseover事件,比如:$("div").mouseover(function(){ $("div").css("background-colo原创 2016-10-21 15:20:41 · 1655 阅读 · 0 评论 -
jquery中的动画效果方法animate()及其回调函数的使用
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/52883286 本文出自【我是干勾鱼的博客】有时候我们会使用一些动态效果,比如将div动态边长、缩短之类的,这需要使用jquery中的animate()方法,比如:<html><head><script type="text/javascript" src="/jquer原创 2016-10-21 15:00:32 · 27958 阅读 · 2 评论 -
java生成json时产生栈溢出错误问题的解决
环境:java + hibernate +html本来,java中使用json事件很正常的事,但小心有的地方有点“坎儿”。比如,在java中建立了json对象想传到前台去:List commentsList = commentMng.findByArticleId(articleid);JSONArray jsonMembers = new JSONArray(comments原创 2016-09-07 17:37:23 · 13849 阅读 · 2 评论 -
实现拖拽上传文件的一款小控件——dropzone
dropzone就是这样一款小控件,实现拖拽上传。它不依赖与其它像jquery等JS库,而且支持多方面的定制。原创 2014-09-30 16:21:44 · 6728 阅读 · 0 评论 -
小解CSDN论坛首页面的布局方式
CSDN论坛的首页面如下:当然每个区域都是div。开始我以为都是通过相对位置作出的布局,但无论如何也看不出右侧宽度是怎么定义出来的。后来发现原来出发点就是错的。这个布局很巧妙,body先加了一个左侧的padding,即:padding-left: 220px这样,页面中所有元素都挤到右侧去了。正常的话左导航也会挤过去,但是左导航使用绝对定位,加了一个:position: fixed;left:0p原创 2015-09-11 16:24:48 · 1814 阅读 · 0 评论 -
使用frame做布局框架时子页面action型超链接自动增加前缀的问题
能看出本来超链接为add.do,现在增加了content前缀,变为content/add.do。这有什么用呢?可以通过这种方式为当前页面下所有action链接增加默认前缀,做控制器层面的分类。原创 2015-09-16 17:23:50 · 2043 阅读 · 0 评论 -
不同情况下request.getContextPath()值的区别
经常使用request.getContextPath(),但对它的具体作用有时还是不太明白。其实它的作用是获取当前的系统路径。比如,如果使用Tomcat作为服务器部署项目,一般将项目部署到webapps下(当然,也有可能是wtpwebapps,详细可见我的另一篇《Tomcat6中web项目部署路径webapps和wtpwebapps的区别》)。这时有两种情况:如果将项目WebRoot中的内容直接拷原创 2015-10-09 13:07:31 · 4662 阅读 · 0 评论 -
JQuery的函数“$(function() {})”的含义及与“$(document).ready(function(){})”的区别
常能在页面中看到如下语句:<script type="text/javascript"> $(function(){ $("#titleDiv").load("content.do?type=list"); });</script>那么$(function() {})是什么意思呢?这其实是一个jQuery函数,是当文档载入完成的时候执行的,也就是说文档载入完成后,执行:$("#titleD原创 2016-01-12 15:52:10 · 15052 阅读 · 0 评论 -
JS中出现“$(...).dropdown is not a function”错误的解决
使用bootstrap展示一个导航,众所周知使用bootstrap一般是需要加入jquery的,在我的js中出现了一个错误:$(...).dropdown is not a function如图所示:开始怎么也没发现错误,后来发现网上有出现这个问题的解释:说的很明确了,是jquery的js与bootstrap的js的顺序问题,jquery的js应该在前面。我的js开始顺序为:<script type原创 2016-01-29 16:52:45 · 9347 阅读 · 2 评论 -
使用Firefox轻松调试JS
Firefox调试JS的功能真的很不错,推荐一下!在页面上点击右键,再点击“查看元素”,如图:就会弹出Firefox的开发者界面,点击“调试器”,如图:这里能看到:1.跟踪按钮。用户跟踪调试时点击下一步用,有普通下一步的,有深入导函数里的,还有跳出函数的。2.加入断点。左键点击一下就能加入断点,非常简单。3.显示变量值。这里可以显示每一步的变量值,同时如果出现错误在这里也会提示“exception”原创 2016-01-29 17:31:01 · 37950 阅读 · 0 评论 -
推荐一个不错的bootstrap学习网站
给大家推荐一个不错的bootstrap学习网站,菜鸟教程,如图:在网页上能够看到里面有简介,CSS,布局组建,bootstrap插件以及其他,东西不少,介绍的也很详细,对于bootstrap学习是个非常不错的帮助,推荐给大家!原创 2016-02-01 13:41:34 · 2109 阅读 · 0 评论 -
jquery的淡入淡出效果
jquery中使用fadeOut() 实现淡出效果,隐藏一个元素;使用fadeIn()实现淡入效果,现实一个元素:<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $原创 2016-02-01 14:04:53 · 1492 阅读 · 2 评论 -
使用JavaScript获取textare输入值的问题
我们知道,向textarea中输入的值是位于<textarea>与:</textarea>之间的。对于html界面上的一个textarea:<textarea id="test" style="width: 1024px; height: 140px;"></textarea>如果在textarea中输入了内容之后,就要使用JavaScript获取输入值,要这样:var content = docu原创 2016-03-08 15:04:13 · 7206 阅读 · 2 评论 -
jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
jQuery中animate()的方法可以去w3school查看,这里主要说一下:$("body").animate({"scrollTop":top})不被Firefox支持问题的解决。其实是使用body的:$("body").animate({"scrollTop":top})只被chrome支持,而不被Firefox支持。而使用html的:$("html").animate({"scrollT原创 2016-03-10 14:54:59 · 28612 阅读 · 10 评论 -
使用jquery设置HTML中<select>标签的值
在html中有一个标签:<select id='test'> <option value='music'>音乐</option> <option value='book'>书籍</option> <option value='life'>生活</option></select>如果想用jquery设置标签的值,比如说设置“书籍”被选中,需要这样:$('#test').val原创 2016-04-05 17:51:27 · 3825 阅读 · 0 评论 -
Gravatar——能让你的留言自动钻出头像的小工具
对于很多网站、博客的留言,我有两个疑问:博客留言都会让留言者留下邮箱,而且是必填的;为什么有的留言能自动钻出留言者的头像(明显能看出是个人头像),有的留言却不行呢后来知道了,原来是要使用Gravatar呀!Gavatar的缩写是“Globally Recognized Avatar”,是“全球通用头像”的意思。如果你在Gravatar的服务器上放置了自己的头像,那么在任何只要是支持Gravat原创 2016-04-15 14:25:21 · 1278 阅读 · 0 评论 -
如何改变谷歌浏览器chrome的页面检查工具的位置
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/62426887 本文出自【我是干勾鱼的博客】新版谷歌浏览器chrome的页面检查工具的位置的位置默认是在右侧的,如图:如果想将其放到页面的底部,该如何做呢?页面检查工具的右上角有一个三个点的按钮,点击按钮再选择页面下方位置就可以了,如图:原创 2017-03-16 16:45:02 · 16375 阅读 · 2 评论