WEB practise

js的clientHeight,scrollHeight,offsetHeight区别

Mar 28, 2017 | | Say something

本文由javacoder.cn整理,转载请注明出处 clientHeight:表示内容显示区域的高度,包含padding scrollHeight:将内容完全显示需要的高度, offsetHeight:clientHeight + 上线边距+ 横向滚动条高度 如下测试代码:

测试结果: offsetHeight: 110 test.html:12 clientHeight: 84 test.html:13 scrollHeight: 1134 图例:

spring mvc+freemarker+mybatis整合

Jul 29, 2015 | | Say something

demo 下载:freemarker.zip 最近的项目使用到这些框架,记录下来,方便今后快速搭建框架。也希望对正在查找这些资料的同学提供一些方便。 本文由博主javacoder.cn整理,转载请注明出处!!!!谢谢 一、本demo支持的功能有: 1)使用maven构建 2)让mybatis使用log4j日志框架输出生成的sql语句,便于调试问题, 3)事务的支持 4)中文的支持 5)使用h2内存数据库,便于快速启动。schema.sql是创建表脚本,init-data是数据初始化脚本 二、为了方便新手阅读本demo,简单介绍本demo的搭建过程 1)在pom.xml中添加相应的依赖 2)在web.xml 中添加contextConfigLocation,ContextLoaderListener,DispatcherServlet的声明 3)在web.xml中添加CharacterEncodingFilter处理编码,添加welcome-file-list处理首页信息,对于非静态文件需要添加一个对应的空白[list.do]文件来让tomcat高兴。 4)新增applicationContext.xml和springmvc-servlet.xml文件 ,并配置相应的内容 5)新增applicationContext-database.xml来配置相应的数据库信息 6)实现相应的java类。controller, service, dao 7)新增sqlmap-config文件和相应的mapper文件,mapper文件在src/main/resources/mapper目录下 三、测试过程 使用命令行编译: cd到该目录,执行”mvn clean package”, 将生成的war包放入tomcat的webapp目录。然后启动tomcat 使用eclipse集成开发环境编译 按照maven项目导入工程,执行”run as-> maven build->在Goals输入框中输入【package】->run”,也会生成war包。部署 请求路径为: http://localhost:8080/freemarker/

java web开发之mvc模式常用的view(视图)技术

Mar 13, 2015 | | Say something

mvc模式是web开发中常用的模式,使用该模式,能让逻辑和显示分离,那么在java web开发中,有哪些常用的view技术呢,以及各个技术的优缺点? 1、jsp 这个是最常用的视图技术吧,只要学过java web开发的同学都一定学过这门技术 优点:入门容易,基本每个java web开发者都学过 缺点:java 代码和 html标签混在同一个页面不便于后期维护。 2、jsp + jstl 使用jstl标签库代替jsp页面的java代码, 优点:页面的可维护性提高,代码更简洁 缺点:需要额外学习jstl标签库 3、jsp + jstl + 自定义tag标签 这种视图技术我认为是重用性最好的,通过自定义tag标签,可以将显示的很多功能封装到一个tag中,提高应用的模块化: 优点:模块化更高,代码重用更好,开发更高效,便于整个应用的主题风格的统一。 缺点:增加自定义tag标签的投入,页面比较生硬,不够灵活。 4、freemarker 5、Velocity 4和5都是使用别的模板技术,将值传给该模板,替换掉相应的变量,从而产生对应的html代码片段。 优点:便于产生简洁的html代码片段,比起jsp模板引擎更轻量级,更高效。更利于热部署。 缺点:需要学习新的技术 6、javaScript 我参与过一个项目,整个项目就一个html页面,通过ajax请求获得数据,然后生成相应的html代码片段,替换掉main div的内容来完成页面的切换。 优点: 1)便于前后端分离,能做出更漂亮的页面 2)前端生成完静态页面后就可以向客户进行演示,便于确认需求。 缺点: 1)整个系统就一个html页面,容易造成浏览器的内存泄露 2)对JavaScript的要求比较高

纯CSS实现输入提示框

Dec 9, 2014 | | Say something

提示框的实现由很多种方式,最常见的实现是使用一个小图片作为前面的小三角,其实提示框完全可以使用纯CSS实现。 实现原理: 当一个dom元素只有border有没有内容,而某些边透明的时候,奇迹就发生了 welcome to javacoder.cn

在这个示例中,我们将span元素的边颜色设置为”transparent rgba(0,0,0,1) transparent transparent”,三边透明,就可以显示为一个小三角型(只有将span设置为position:absolute才能摆脱行高,不然显示地结果并不是我们想要的),如果一个白色的小三角型叠在一个黑色的小三角形上面,让其有两个像素的偏移,那么一个小箭头就制作完毕了。 welcome to javacoder.cn

以java程序员的视角学习javascript的函数定义

Oct 8, 2014 | | Say something

javascript中只有对象(Object),没有类的概念。function关键字只是定义函数对象的一个变种形式。默认通过function关键字产生的对象会作为window对象的一个属性存在。当我们使用new 关键字作用于某个函数对象,将产生一个新的对象,可以将这个对象理解成一个新的范围,这样在这个新的范围内,this不再指向默认的window 对象,而是我们新产生的对象。 一个实例胜过千万句空话,让我们用事实说话。 实例1-类似java成员函数的实现:

输出为: [javacoder.cn]  B() 实例2-类似java的共有静态函数的实现

输出为: function Person(name) { this.name = name ; this.B = function() { console.log(this + ”  B()”); } //重写toString,便于标识 this.toString=function() { return “[” + this.name + “]”; } }   C() Function对象的toString()方法会将整个函数的定义输出。 实例3-类似java成员函数的另一种实现

输出结果为: [javacoder.cn]  D() 实例4-动态给对象添加函数,java没有的功能

输出为: [javacoder.cn] E() 实例5-类似java静态私有方法的实现。

输出为: [object […more]

速记JQuery的选择器

Sep 28, 2014 | | Say something

1、 #ID, .class Name 分别对应css的ID, 类, 标签 2、拥有某些属性或者某些子元素:   $(“p[a]”) : 选择那些含有a元素的p元素   $(“a[@href=^javacoder]”) href以javacoder开始的a元素 3、某一类元素,   $(“p:not(.special)”)  不含有 class=”special” 的所有p元素  $(“:checked”)  选中的checkbox  $(“:input”)     form的输入元素。  $(“p:lt(2)”)    前3个p元素

正确的使用JQuery实现事件回调函数绑定

Sep 28, 2014 | | Say something

本文测试所用的jquery版本是[jquery-1.11.1.js] jQuery提供了[bind,unbind], [live, die], [delegate, undelegate], [on, off] 方法对来实现事件回调函数的绑定,[bind,unbind], [live, die], [delegate, undelegate]各有所长,到了jQuery1.7,[on, off] 横空出世,一统江湖。他一个人可以完成其他三个函数对能完成的功能,所以我们爱他无商量。 先看看前三个函数对的局限性: 假设有如下的html片段,

我们需要给不含special class的每个<li>指定一个事件处理函数,将 <li>的内容输出到控制台,如果在页面呈现的时候有可能动态的添加新的项比如<li>Item #10</li> ,那么我们最好把事件处理函数绑定到<ul id=”list”> 元素上。为什么能绑定到<ul id=”list”> ?因为事件会bubble。元素的事件会一直向上传递直到根元素window。为什么要绑定到<ul id=”list”> ?因为直接绑定到<li>,当插入<li>Item #10</li>时不会处理它的click事件。 使用bind

可以看到使用这个方式很不好, 元素过滤和我们的逻辑混在一起了。 使用live 哈哈,这个方法在jquery 1.9版本就已经被移除了。 使用delegate

这个函数要求selector, eventType,callback都是必填的,对将事件绑定到自身很不友好。 现在看看使用on 绑定到#list

注意:on和delegate表示选择器的参数都是相对于$(“selector”)的子元素,且他们在on和delegate中的顺序相反。 绑定到#list li

可以看到这两种需求on 都能轻松胜任。 其实在1.7版本以后bind, delegate只是对on的一个封装,有可能今后后被删掉的,所以骚年,是时候和bind, delegate说分手的时候了。

Div+CSS布局笔记1

Sep 2, 2014 | | Say something

本html文档的dtd声明。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 编码说明: <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> 一、加载css样式的四种方式: 1)在html中加载CSS文件 <link href=”layout.css” rel=”stylesheet” type=”text/css” /> 2)在html的head中定义css样式 <style> h2 { color:#f00;} </style> 3)在html的元素标签内定义: <p style=”font-size:18px;”>内部样式</p> 4)在css文件中加载别的css文件 @import url(“/css/global.css”); 二、CSS的三种选择器: div {width:200px} /*元素选择器*/ #layout {width:200px} /*ID选择器*/ .classWidth {width:200px} /*class选择器*/ 三、div常用属性 div 布局: margin:border:padding content div { height:300px; width:400px; background:#ff0000; margin:auto; […more]