Web前端开发知识点1
JavaWeb开发笔记1
@copyright 版权声明：本文为原创文章，未经允许不得转载。
一．2015/11/2
1.onfocus="this.blur();"
onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur();",blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了。
<input name="result" id="result" type="text" onfocus ="this.blur();" size="20" value=""/>
2.placeholder
placeholder属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
3.javascript中把字符串转换成时间格式
var today ="2015-11-2";//时间格式的一个字符串
today = new Date(today.replace(/-/g,"/"));
4.让文本框不能输入的几种方式
a.让input框不能获得焦点
① onfocus ="this.blur();"
② $('#id').focus(function(){$(this).blur();});
b.disabled="disabled" disabled属性规定应该禁用input元素，被禁用的input元素既不可用，也不可点击。
如果form里的表单标签被disabled掉了$("#formId").serialize()取不到值，disabled状态下是不能传值的，只能在取值的瞬间将他们disabled属性remove掉，取完后再还原：
//提交时将禁用的控件激活
$("#formId*:disabled").attr("disabled", false);
//提交后将激活的控件激活禁用
$("#formId*:disabled").attr("disabled", true);
c.readonly 规定输入字段为只读，只读字段是不能修改的。不过，用户仍然可以使用tab键切换到该字段，还可以选中或拷贝其文本。readonly不能用于select下拉选择框，因为无效。
二．2015/11/6
1.网页页面实现自动刷新的3种代码
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面。
2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20" url="http://www.hackhome.com">,其中20指隔20秒后跳转到http://www.hackhome.com页面。
3.页面自动刷新js版
<script>
function myrefresh() {
window.location.reload();
}
setTimeout("myrefresh()", 1000); //指定1秒刷新一次
</script>
三．2015/11/21
1.JQuery dataTable基础配置
先把它主页上写的特性翻译罗列如下：
可变长度分页；动态过滤；多列排序，带数据类型检测功能；列宽度的智能处理；从多种数据源获取数据（DOM，js Array, ajax file, server-side returning）；滚动配置属性；完整国际化支持； jquery UI ThemeRoller支持；经历了个2600多个单元测试，相当牢固；有为数不少的插件支持；免费的；状态保存能力；支持隐藏列；动态创建表格的能力；自动ajax数据加载；自定义DOM位置；单列过滤（这个与前面的过滤有区别么？）；多种分页器；无损的DOM交互；参与排序的列高亮；高级数据源配置；扩展的插件支持功能；可以用css完全配置表象；丰富的文档； 110多个例子；对Adobe AIR的完全支持。
注意：要被dataTable处理的table对象，必须有thead与tbody，而且，结构要规整（数据不一定要完整），这样才能正确处理。
Eg:
//点击查询按钮时触发
function showDataTable() {
var table = $("#table_id").dataTable({
"autoWidth" : true,
"info" : false,//控制是否显示表格左下角的信息
"lengthChange" : true,//是否允许用户改变表格每页显示的记录数
"ordering" : false, //是否允许Datatables开启排序
"paging" : true,//是否开启本地分页
"processing" : true,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
"searching" : false,//是否允许Datatables开启本地搜索
"serverSide" : true,
"bAutoWidth" : true,//自适应
"ajax" : {
'url' : "",//这个就是请求地址对应sAjaxSource
'type' : 'post',
'data' : function(d) {//请求参数
var value= $("#id").val();
d.value= value;
},
'dataType' : 'json',
'dataSrc' : "datas"//数据源节点key名称
},
"dom" : 't<"wrapper" ipl>',//定义DataTables的组件元素的显示和显示顺序
"destroy" : true,//销毁所有符合选择的table，并且用新的options重新创建表格
"lengthMenu" : [ 10, 20, 50, ],//定义在每页显示记录数的select中显示的选项
"pageLength" : 10,//改变初始的页面长度(每页显示的记录数)
"pagingType" : 'full_numbers', //分页样式 ，一共两种样式 另一种为two_button，是datatables默认
"search" : false,
"columnDefs" : [ {targets : '_all'} ],
"columns" : [ {"data" : "id"},//数据
.
.
.
{"data" : "data"}, ],
"language" : {
"emptyTable" : "没有数据!",
"info" : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"infoEmpty" : "",
"infoFiltered" : "(从 _MAX_ 条数据中检索)",
"processing" : "正在加载中......",
"lengthMenu" : "每页显示 _MENU_ 条记录",
"zeroRecords" : "没有数据!",
"paginate" : {
"first" : "首页",
"previous" : "前一页",
"next" : "后一页",
"last" : "末页"
}
}
});
}
2.JQuery dataTable列合计
//列合计
"footerCallback" : function(row, data, start, end, display) {
if(data.length>0)//如果表格有数据
{
var api = this.api();
var intVal = function(i) {
return typeof i === 'string' ? i.replace(/[\$,]/g,'') * 1 : typeof i === 'number' ? i: 0;
};
var total = [];
for (var i = 0; i <= 表格的列数; i++) {
var a=api.column(i).data().reduce(function(a,b) {return intVal(a)+ intVal(b);});
total[i] = a;
}
for (var i = 0; i <= 表格的列数; i++) { $(api.column(i).footer()).html(parseFloat
(total[i]+0.00).toFixed(2));//保留两位小数
}
}
}
备注：js ==与===区别（两个等号与三个等号）
1、对于string,number等基础类型，==和===是有区别的
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
2）同类型比较，直接进行“值”比较，两者结果一样
2、对于Array,Object等高级类型，==和===是没有区别的
进行“指针地址”比较
3、基础类型与高级类型，==和===是有区别的
1）对于==，将高级转化为基础类型，进行“值”比较
2）因为类型不同，===结果为false
四．2015/11/25
1.html页面打印
① 一种最简单的打印方式，直接打印整个html页面。
<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />
② 一种自定义打印方式：在html页面添加打印按钮，
<button type="button" onclick="printFun();" class="btn btn-primary"id="print">打印</button>
这里用了bootstrap的样式class="btn btn-primary"，如图，添加onclick属性，onclick="printFun();"，再实现javascript代码。
<script>
function printFun() {
artConfirm('确定打印吗？',function() {
var newstr=document.getElementById("print_Id").innerHTML;//获得要打印的div层
var oldHtml=document.getElementsByTagName(
'html')[0].innerHTML;//获得整个html页面
document.body.innerHTML = newstr;//要打印的层
window.print();//打印
document.write(oldHtml);//重写html页面
}, function() {});
}
</script>
或者这样写：
<script>
function printFun() {
artConfirm('确定打印吗？', function() {
var newstr = document.getElementById("print_Id").innerHTML;
var w = window.open('about:blank');//打开一个空白页
w.document.body.innerHTML = newstr;//要打印的层
w.print();//打印
w.close();//关闭打开的页面
}, function() {});
}
</script>
注意：此处的artConfirm是自己定义javascript的方法，用于实现一个美观的Confirm提示框。
<script>
function artConfirm(content, yes, no){
top.dialog({
id: 'confirm-dialog',
title: '确认提示框',
content: content,
okValue: '确定',
width: 225,
ok: function (here) {
return yes.call(this, here);
},
cancelValue: '取消',
cancel: function (here) {
this.close().remove();
return no && no.call(this, here);
}
}).showModal();
}
</script>
③ js调用iframe实现打印页面内容的方法。
<script>
function do_print(id_str){//id-str 打印区域的id
var el = document.getElementById(id_str);
var iframe = document.createElement('iframe');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
// 引入打印的专有CSS样式，根据实际修改
doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
</script>
五．2015/12/3
1.JQuery显示(隐藏)div
a.通过jquery的css方法，给元素设置style属性,将div隐藏（显示）
$("#div_id").css("display", "none");//将div隐藏
$("#div_id").css("display", "");//将div显示
//此处的""相当于inline（默认:此元素会被显示为内联元素，元素前后没有换行符）
b.通过show()、hide()函数
$("#div_id").hide();//隐藏div
$("#div_id").show();//显示div
注意：display:none和visibility:hidden都能把网页上某个元素隐藏起来，在视觉效果上没有区别，但是在一些DOM操作中两者有区别:
① display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
② visibility:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，即它仍然具有高度、宽度等属性，通俗来说就是看不见但摸得到。
2.mybatis <foreach>标签
在mybatis的mapper配置文件中，可以利用<foreach>标签实现sql条件的循环，可完成类似批量的sql。
mybatis接受的参数分为：（1）基本类型（2）对象（3）List（4）数组（5）Map
无论传哪种参数给mybatis，他都会将参数放在一个Map中：
① 如果传入基本类型：变量名作为key，变量值作为value。此时生成的map只有一个元素。
② 如果传入对象：对象的属性名作为key，属性值作为value，
③ 如果传入List："list"作为key，这个List是value（这类参数可以迭代，利用<foreach>标签实现循环）
④ 如果传入数组："array"作为key，数组作为value（同上）
⑤ 如果传入Map：键值不变。
<foreach>标签的用法：
六个参数：
collection：要循环的集合
index：循环索引
item：集合中的一个元素（item和collection，按foreach循环理解）
open：以什么开始
close：以什么结束
separator：循环内容之间以什么分隔
Example：
<update id="pubS" parameterType="Map">
UPDATE BMC_SUBPLATE SET PLSTATUS = '02' WHERE
<foreach collection="ids" item="plid" open="" close="" separator="OR">
PLID = #{plid}
</foreach>
</update>
六．2015/12/4
1.为选中的表格行添加背景颜色
//为选中的行添加背景颜色
$('tbody', '#table_id').on('click','tr',function() {
//没选中的行没有背景颜色
$('tbody tr', '#table_id').not(this).css("background-color", "");
//选中的行添加背景颜色
$(this).css("background-color", "#FBFC87");
});
效果如下图所示，选中的行背景颜色为黄色：
七．2015/12/7
1.datetimepicker
使用这个插件来悄悄地添加一个DateTimePicker，日期选择器或timepicker下拉到您的表单。例子如下：
$(selector).datetimepicker({
format: 'yyyy-mm-dd hh:ii',
pickerPosition: 'bottom-left',
viewSelect: 'day',
autoclose: true,
language: 'zh-CN',
startDate: new Date()
});
参考资料：http://www.bootcss.com/p/bootstrap-datetimepicker/
控件属性：
① format
String. 默认值: 'mm/dd/yyyy'
日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。
② weekStart
Integer. 默认值：0
一周从哪一天开始。0（星期日）到6（星期六）
③ startDate
Date. 默认值：开始时间
④ endDate
Date. 默认值：结束时间
⑤ daysOfWeekDisabled
String, Array. 默认值: '', []
⑥ autoclose
Boolean. 默认值：false
当选择一个日期之后是否立即关闭此日期时间选择器。
⑦ startView
Number, String. 默认值：2, 'month'
日期时间选择器打开之后首先显示的视图。 可接受的值：
0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
⑧ minView
Number, String. 默认值：0, 'hour'
日期时间选择器所能够提供的最精确的时间选择视图。
⑨ maxView
Number, String. 默认值：4, 'decade'
日期时间选择器最高能展示的选择范围视图。
⑩ todayBtn
Boolean, "linked". 默认值: false
如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
11 todayHighlight
Boolean. 默认值: false
如果为true, 高亮当前日期。
12 keyboardNavigation
Boolean. 默认值: true
是否允许通过方向键改变日期。
13 language
String. 默认值: 'en'
14 forceParse
Boolean. 默认值: true
当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
15 minuteStep
Number. 默认值: 5
此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。
16 pickerReferer : 不建议使用
String. 默认值: 'default' (other value available : 'input')
17 pickerPosition
String. 默认值: 'bottom-right' (还支持 : 'bottom-left')
此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。
18 viewSelect
Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')
19 showMeridian
Boolean. 默认值: false
20 initialDate
Date or String. 默认值: new Date()
八．2015/12/16
1.JQuery读取身份证信息
在网页添加ActiveX插件，
<OBJECT classid="clsid:10946843-7507-44FE-ACE8-2B3483D179B7"
id="CVR_IDCard_IE" name="CVR_IDCard_IE" width="0" height="0"></OBJECT>
<OBJECT clsid="{10946843-7507-44FE-ACE8-2B3483D179B7}"
id="CVR_IDCard_CHROME" name="CVR_IDCard_CHROME" width="0" height="0" type="application/x-itst-activex"></OBJECT>
JQuery代码如下：
$(selector).click(function() {
var CVR_IDCard = readIdCard();
var strReadResult = CVR_IDCard.ReadCard();
if(strReadResult=="0"){//读取到了信息
$("#manName").val(CVR_IDCard.Name);//姓名
$("#manCode").val(CVR_IDCard.CardNo);//身份证号码
$("#sex").val(CVR_IDCard.sex);//性别
var birthday = CVR_IDCard.Born.replace(/[^\d]/g,'-');
$("#birtDate").val(birthday.substr(0, birthday.length-1));//生日 形式如：2015-12-16
$("#addr").val(CVR_IDCard.Address);//地址
}
else{//没有读取到信息}
});
2.jGrowl消息弹出框
jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。
// Sample 1：提示后自动消失
$.jGrowl("Hello world!");
// Sample 2：需要用户手动关闭
$.jGrowl("Stick this!", { sticky: true });
// Sample 3：增加标题
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4：指定在10秒后自动消失
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5：消失后有回调事件
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
beforeClose: function(e,m) {
alert('About to close this notification!');
},
animateOpen: {
height: 'show'
}
});
参数选项：
| 名称 |
默认值 |
说明 |
| header |
空 |
标题 |
| sticky |
false |
如果设置这个选项的话,你必须手动关闭提示 |
| glue |
after |
消息队列的方向,默认是新消息在旧消息下边显示,可选值(after,before) |
| position |
top-right |
消息显示位置,top-left, top-right, bottom-left, bottom-right, center |
| theme |
default |
消息提示框 classname |
| corners |
10px |
圆角半径 |
| check |
1000 |
检查屏幕上已过期消息的频率 |
| life |
3000 |
设置sticky的提示框存在周期 |
| speed |
normal |
开关对话动画速度 可选值(slow,normal,fast) |
| easing |
swing |
|
| closer |
true |
是否显示一个关闭所有提示的按键 |
| closeTemplate |
× |
关闭按键的内容,样式 |
| closerTemplate |
<div>[ close all ]</div> |
全部关闭按键的内容,样式 |
| log |
function(e,m,o) {} |
提示前触发(全局)的回调函数,参数 提示的dom,消息内容,这个的选项 |
| beforeOpen |
function(e,m,o) {} |
消息被打开前触发的回调函数,参数同上 |
| open |
function(e,m,o) {} |
消息被打开后触发的回调函数,参数同上 |
| beforeClose |
function(e,m,o) {} |
消息被关闭前触发的回调函数,参数同上 |
| close |
function(e,m,o) {} |
消息被关闭后触发的回调函数,参数同上 |
| animateOpen |
{ opacity: 'show' } |
打开消息窗口的动画选项默认是:fadeOut |
| animateClose |
{ opacity: 'hide' } |
关闭消息窗口的动画选项默认是:fadeIn |
3.html页面table数据排序
对html页面中table表格数据进行指定排序，使用方式如下：
<table id="table_id" class="table dataTable display">
<thead>
<tr>
<th onclick="sortAble(this,'table_id', 0,'string')">账单号</th>
<th onclick="sortAble(this,'table_id', 1,'date')">时间</th>
<th onclick="sortAble(this,'table_id', 2,'float')">价格</th>
<th onclick="sortAble(this,'table_id', 3,'int')">数量</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
Javascript代码如下，可以单独写成一个js文件tableSortOrder.js：
// 排序 tableId: 表的id,iCol:第几列从0开始 ；dataType：iCol对应的列显示数据的数据类型，例如：日期就是date
function sortAble(th, tableId, iCol, dataType) {
var ascChar = "▲";
var descChar = "▼";
var table = document.getElementById(tableId);
// 排序标题加背景色
for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
var th = $(table.tHead.rows[0].cells[t]);
var thText = th.html().replace(ascChar, "").replace(descChar, "");
if (t == iCol) {
th.css("background-color", "#ccc");
} else {
th.css("background-color", "#d2d8de");
th.html(thText);
}
}
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
// 将得到的行放入数组，备用
for (var i = 0; i < colRows.length; i++) {
// 注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
// if ($(colRows[i]).attr("group") != undefined) {
aTrs.push(colRows[i]);
// }
}
// 判断上一次排列的列和现在需要排列的是否同一个。
var thCol = $(table.tHead.rows[0].cells[iCol]);
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
// 如果不是同一列，使用数组的sort方法，传进排序函数
aTrs.sort(compareEle(iCol, dataType));
}
var oFragment = document.createDocumentFragment();
for (var i = 0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
// 记录最后一次排序的列索引
table.sortCol = iCol;
// 给排序标题加“升序、降序” 小图标显示
var th = $(table.tHead.rows[0].cells[iCol]);
if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
th.html(th.html() + ascChar);
} else if (th.html().indexOf(ascChar) != -1) {
th.html(th.html().replace(ascChar, descChar));
} else if (th.html().indexOf(descChar) != -1) {
th.html(th.html().replace(descChar, ascChar));
}
// 重新整理分组
var subRows = $("#" + tableId + " tr[parent]");
for (var t = subRows.length - 1; t >= 0; t--) {
var parent = $("#" + tableId + " tr[group='"
+ $(subRows[t]).attr("parent") + "']");
parent.after($(subRows[t]));
}
}
// 将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch (dataType) {
case "int":
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
case "string":
default:
return sValue.toString();
}
}
// 排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function(oTR1, oTR2) {
var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()),
dataType);
var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()),
dataType);
if (vValue1 < vValue2) {
return -1;
} else {
return 1;
}
};
}
// 去掉html标签
function removeHtmlTag(html) {
return html.replace(/<[^>]+>/g, "");
}
九．2015/12/17
1.js关闭当前页面(窗口)
不同的浏览器兼容性是不一样的。对于不同的浏览器，可能需要进行分别处理。
function close_f() {
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) {// 火狐和谷歌浏览器
window.location.href="about:blank";
} else {
window.opener = null;
window.open("", "_self");
window.close();
}
}