CSS-JQUERY笔记

2023-08-16 15:17:28

Ready

$(document).ready(function(){

})

Input_div_span

Input-长度限制

Input-仅允许输入数值

//绑定时刻输入textBox

function bindInputKeyPress() {

$(".textbox").on("keypress", function (event) {

var keynum;

if (window.event) { keynum = event.keyCode; } //IE

else if (e.which) { keynum = event.which; } // Netscape/Firefox/Opera

var numcheck = /\d/;

return numcheck.test(String.fromCharCode(keynum));//仅允许输入数字

});

} });

}

文本超出-省略号

Overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap

样式圆角

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

按钮radio实现

路子：

（1）div 圆角

（2）图片

àCSS

*{ margin:0xp; padding:0px;}

ul li{ list-style:none;}

.unselected{ background: url("../img/widgets/radio/default.png"); cursor:pointer; }

.unselected:hover{ background: url("../img/widgets/radio/focus.png");}

.selected{background: url("../img/widgets/radio/chosen.png"); cursor:pointer; }

.selected:hover{background: url("../img/widgets/radio/chosen-focus.png");}

.dInlineBlock{ display:inline-block;}

.wh24{ height:24px; width:24px;}

.vAlignTop{ vertical-align:top;}

.pRelativeBottom5{ position:relative; bottom:5px;}

àHTML

$(document).ready(function () {

//radioClicked

$(".radio").on("click", function () {

$(".radio").removeClass("selected").addClass("unselected"); //移除其它

$(this).addClass("selected");

}); //radioClicked end

});

</script>

</head>

</ul>

</body>

按钮：Div实现图片，4种样式

à4种状态：未选中,未选中悬浮, 选中,选中悬浮

à关键

--1.使用 inline-block div ,background 代替图片

--2. unselected:hover{} 和 selected:hover{} 用伪类处理两种图片

--3. 点击,if(hasClass){ removeClass.addClass}

àCSS

.unselected{ background: url("../img/widgets/radio/default.png"); cursor:pointer; }

.unselected:hover{ background: url("../img/widgets/radio/focus.png");}

.selected{background: url("../img/widgets/radio/chosen.png"); cursor:pointer; }

.selected:hover{background: url("../img/widgets/radio/chosen-focus.png");}

.dInlineBlock{ display:inline-block;}

.wh24{ height:24px; width:24px;}

àHTML，JS

$(document).ready(function () {

//radioClicked

$(".radio").on("click", function () {

$(".radio").removeClass("selected").addClass("unselected"); //移除其它

$(this).addClass("selected");

}); //radioClicked end

});

</script>

</head>

<body>

</div>

</body>

禁止选择文本

IE,Chrome

FF:

*{-moz-user-select:none;}

文本框只读

$("#tbInfo input").attr("disabled","disabled");

$("#tbInfo input").removeAttr("disabled");

//只读并且不可选中

$("#tbInfo input").attr("readonly","true");

//只读但可以选中

span margin-left控制缩进

margin对span有效

表单项批量读/写

js对象->表单项

var tempAr=["Num","InnerNum","Name","Address","Active","IsActivated","InstallDate"];

for(var
i=0;i<=tempAr.length-1;i++){

$("#inp"+tempAr[i]).val(pageInfo.editObj[tempAr[i]]);

}

表单项->js对象

var tempAr=["Num","InnerNum","Name","Address","Active","IsActivated","InstallDate"];

var tempShop={Num:"",InnerNum:"",Name:"",Address:"",Active:"",IsActivate:"",InstallDate:""};

for(var
i=0;i<=tempAr.length-1;i++){

tempShop[tempAr[i]]=$("#inp"+tempAr[i]).val();

}

Select Option 下拉框

只读

$("#tbInfo
select").attr("disabled","disabled");

$("#tbInfo
select"). removeAttr ("disabled");

DOM操作

createElement 和 AppendChild

var img=$("<img
src='images/divBar.png'/>")

$(this).append(img)

DOM操作创建添加

$(“字符串”)

append()

DOM操作删除

remove()

DOM操作清空子元素

empty()

DOM操作设置元素innerHTML

设置所有p的内容

$("p").html("Hello <b>world</b>!");

判断2个dom元素相等

结论：DOM元素可以判断相等。

Jquery对象不能判断

事件

原始方式：

domElement.on(“click”,function(){

});

on的多次绑定特性

说明：会多次绑定

<!DOCTYPE html
PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>TestPage</title>

$(document).ready(function(){

bindEvents();

});

function bindEvents(){

console.log("bindEvents
is called");

$("#btnTest").on("click",function(e){

alert("btnTest
is clicked");

});

}

</script>

</head>

<body>

</body>

</html>

on和 off 绑定和解除

function
bindClicks(){

$("#testDiv").on("click",function(){

console.log("testDiv
has been clicked");

});

}

function
removeBind(){

$("#testDiv").off("click");

console.log("testDiv.off('click')
has been executed");

}

$(document).ready(function(){

bindClicks();

});

</script>

</head>

<body>

</body>

Click once:

Console:

testDiv has been clicked

bind again:

bindClicks();

console:

testDiv has been clicked

off clicks

removeBind();

console(click div):

nothing….

冒泡和捕获

$(document).on(“click”,function(e){

var
trigerId=e.target.id;

if(targeteId==”dvGISBox”){

…handle
code

return
false;//阻止事件向下传播

}

Else if(targeteId=””){

}

});

动态元素的绑定

动态元素：从document中删除，然后又添加到document中。

流程：

bindUIEvents();//有spanKey的处理代码

$(“.spanKey”).remove();

$(“#dvTest”).html(“<span
class=’.spanKey’>测试span</span>”);

此时，.spanKey click就不能再次触发。

原因：元素的绑定先于元素添加

解决方式：绑定动态元素父元素的click事件，再通过$(e.target)鉴别是哪个子元素出发。

JSON

JSON和字符串转换

1.JSON转 string

var string=JSON.stringify(JSONObj);

2.string
转JSON

var
json=JSON.parse(string)

JSON校验网站

说明：ShopMis返回2852条记录的JSON,在前端解析有问题，靠它查明

http://www.bejson.com/go.php?u=http://www.bejson.com/index.php

布局

布局图片-桌布-界面

HTML:

<body>

</div>

CSS:

body{ height:100%; width:100%;overflow:
hidden;}/*背景图覆盖body
100%*/

#bgImg{ height:100%; width:100%;
position:absolute; margin:0px; padding:0px;}

.buttonContainer{ height:80%;width:80%;
position:absolute; left:10%;top:100px;background:url("../src/assets/images/bg1_trans2.png");background-size:cover;box-shadow:5px
5px 5px rgba(0,0,0,.6);}

.mainLog{ position:absolute;
left:150px; width:422px; height:96px;
background:url("../src/assets/images/logo_main_top.png")}

.sysTitle{ position:absolute;
left:550px; width:300px; height:96px;
background:url("../src/assets/images/gisTitle.png")}

.menuButton{ width:179px; height:48px;
position:absolute; top:50px; left:450px; background-color:rgb(0, 54, 112);
color:White; font-size:26px; font-family: 微软雅黑; font-weight:bold; cursor:pointer; text-align:center;
line-height:48px;}

.menuButton:hover{box-shadow:5px 5px 5px
rgba(0,0,0,.6);color:Yellow; position:absolute; top:45px; left:445px;}

#dvFrameOD{ width:100%; height:100%;
position:absolute; left:0px; top:0px; z-index:3;background-color:
rgba(255,255,255,1); border: 1px solid #FFFFFF; box-shadow: 5px 5px 5px
rgba(0,0,0,0.3);}

#dvFrameOD iframe{ frameborder:0;
scrolling:no; height:100%; width:100%;}

效果：

布局图片按宽度拉升/完全覆盖

HTML

</div>

CSS

#dvBackGround{position:absolute;top:54px;
width:100%; height:100%;
background:url("../src/assets/images/GISIndex/rest.png");}

$("#dvBackGround").css("backgroundSize",
document.documentElement.clientWidth + "px");//按宽度拉伸背景

完全覆盖：cover

布局 div居中

方法1：设置position

Css:

#dvPanel{ position:absolute; top:80px;
width:785px; height:458px;
background:url("../src/assets/images/GISIndex/panal.png");}

Js:

$("#dvPanel").offset({ left:
(document.documentElement.clientWidth - 768) / 2 });//panel居中

例2：

<html>

<head>

<title>Insert
title here</title>

#dvCenter{line-height:100px; text-align:center;}

</style>

</head>

<body>

</div>

</body>

</html>

效果：

方法2：margin auto

布局文本竖直居中

line-height:容器高度

布局获取元素的坐标,宽高

取

$(“divContent”).offset().top

$(“divContent”).height()

设置：

$(“divContent”).offset({top:100})

$(“divContent”).height(200)

布局 offset设置位置(仅对可见元素有效)

$("#dvToolBarSlider").show();

$("#dvToolBarSlider").offset({
left: (parseInt($(this).offset().left) + 4), top: (parseInt($(this).height()) +
5) }); //位置

备注：必须先show再 offset, 否则位置出现意外值

布局使用margin的情况

布局 IE
padding

实际width=width+
padding-left +padding-right

实际height=height+padding-top+padding-bottom

设置：width,height往小里算，加上padding 才是真实

全屏/下悬浮 -全屏

<head>

#whole{ height:800px; border:1px solid
#000000; overflow:hidden;}

#down{height:100%; background:#0000ff;
overflow:scroll;}

#up{ background:#00ff00;}

</style>

function setHeight() {

document.getElementById("whole").style.height
= document.documentElement.clientHeight + "px";

document.getElementById("up").style.height =
document.documentElement.clientHeight + "px";

}

</script>

</head>

</div>

</body>

</html>

下悬浮-弹出切换

CSS

/*grid 列宽,其余部分在js/dgrid/css/dgrid*/

.gridRegionMin{z-index:2; overflow:hidden;
background:#ffffff;position:relative;height:250px;}/*表格*/

.gridRegionMin #grid{height:230px;}/*下anchor 关键*/

.gridRegionFull{z-index:3;
overflow:hidden;position:absolute;width:1300px; height:500px;
background:#ffffff;top:50px;left:50px;}/*表格弹出显示*/

.gridRegionFull #grid{ height:480px;}/*全显示*/

.gridRegionHide{display:none;}

display 属性

inline-table和inline-block

结论：元素位置意料外：

1.核对宽高

2.尝试display其它属性

时间代价：1h

评价：值

背景：

</div>

</div>

.dvML-HS {display: inline-block;}

.dvML-HS {display: inline-table;}

HTML

3个控制按钮

</div>

$("#spanMaxGrid").on("click",
function () {//maxGrid

$("#gridRegion").removeClass("gridRegionMin").removeClass("gridRegionHide").addClass("gridRegionFull");

dojo.byId("rightPanel").style.height
= document.documentElement.clientHeight + "px";

map.resize();

});

$("#spanMinGrid").on("click", function () {//minGrid

$("#gridRegion").removeClass("gridRegionFull").removeClass("gridRegionHide").addClass("gridRegionMin");

dojo.byId("rightPanel").style.height =
document.documentElement.clientHeight-250 + "px";

map.resize();

});

$("#spanCloseGrid").on("click", function () {//close
grid

clearRoutes();

dojo.byId("rightPanel").style.height =
document.documentElement.clientHeight + "px";

map.resize();

$("#gridRegion").removeClass("gridRegionFull").removeClass("gridRegionMin").addClass("gridRegionHide");

window.grid.set('store', new dojo.store.Memory({ data: [] }));

});

Table

Table Excel

效果：

http://localhost/webLab/edit.html

字数*（fontsize+2）-2

步骤

步骤	描述
1	字号是多少? (1) tr行高= fontsize+23 (2)列宽= 字数fontsize+(字数-1)*2
2	有几列？每列宽多少,固定列宽？Table宽多少,固定列宽？ (1)5列 (2)td1 214+21=30px; max-width:30px; td2 414+23=62px; max-width:62px; td3 100px …. td4 614+52=94px; td5 1514+214=1417=238px; (3)Table宽 {table-layout:fixed; width:100%} //table宽=列宽之和* (4)dvData宽 30+62+100+94+238=524px; { width:524px; } (5)如果需要滚动条：将dvData的overflow：scroll
4	td不换行，超过文本隐藏？ td{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}
5	表格边界如何设置？ Td:border-top: Border-left Table:border-right; Border-bottom; 最后：table的基本样式别忘，内联。 Cellpadding=0;cellspacing=0;

举例

<!DOCTYPE html
PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<tr><td class="col1">曾用名</td><td class="col2"><input type="text"></td><td class="col4">单元及门牌号</td><td class="col5"><input type="text"></td></tr>

<tr><td class="col1">籍贯</td><td class="col2" colspan=2><input type="text"></td><td class="col4">户籍所在地</td><td class="col5"><input type="text"></td></tr>

<tr><td class="col1">民族</td><td class="col2" colspan=2><input type="text"></td><td class="col4">现居住地址</td><td class="col5"><input type="text"></td></tr>

<tr><td class="col1">教育程度</td><td class="col2" colspan=2><input type="text"></td><td class="col4">与户主关系</td><td class="col5"><input type="text"></td></tr>

</table>

</body>

</html>

css

*{margin:0px;padding:0px;font-size:14px;font-family:Microsoft Yahei;}

#tbInfo{

table-layout:fixed;width:582px;

border-collapse:collapsed;border-right:1px solid #000;border-bottom:1px solid #000;

}

tr{line-height:20px;}

td{

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

border-left:1px solid #000;border-top:1px solid #000;

text-align:center;

}

td input{

width:100%;

border:none;

text-align:center;

}

.col1{width:62px;max-width:62px;}

.col2{width:78px;max-width:78px;}

.col3{width:100px;width:100px;}

.col4{width:94px;max-width:94px;}

.colS5{width:238px;max-width:238px;}

双滚动条table

效果：

结构：

CSS：

/*dvRegion*/

#dvRegion{

display:inline-block;

overflow:hidden;

}

/*dvHead*/

#dvHead{overflow:hidden;}

.dvTH-WF{width:939px;}

/*表头*/

#tbHead{

height:20px;

width:100%;

table-layout:fixed;

}

.col1S{width:40px;}/*序号*/

.col2S{width:130px;}/*名称*/

.col2F{width:200px;}

.col3S{width:130px;}/*地址*/

.col3F{width:200px;}

.col4F{width:90px;}/*活跃商户*/

.col5F{width:80px;}/*编号*/

.col6F{width:100px;}/*内部编号*/

.col7F{width:90px;}/*设备状态*/

.col8F{width:136px;}/*收单安装日期*/

.col9F{width:113px;}/*储值卡安装日期*/

.col10F{width:113px;}/*储联卡安装日期*/

.col11S{width:74px;}/*操作*/

/********************/

/*数据*/

#dvData{

overflow:scroll;

}

.dvData-WF{width:956px;}

.dvData-HS{height:420px;}

#tbData{

width:100%;

table-layout:fixed;

}

表头联动事件：

$("#dvData").on("scroll",function(e){

var
left=e.target.scrollLeft;

$("#dvHead").scrollLeft(left);

console.log("scroll
is trigger");

return false;

});

Table组件

序号	类别
1	日期框 (f) jquery-ui-datePicker
2	正数框（身高）(f)
3	身份证号框 (f)
4	下拉框(select) (民族、血型、性别、婚姻状况、教育程度、省、市、县、区、)
5	电话框 (f)

select

结构

取值:

$(“selGender”).val();

Table CRUD

效果：

效果项	描述
列头和内容分离
列头可排序
滚动条
Td固定宽

整体布局：

步骤

大项	序号	描述
列头和表数据	1	(1)字体是多少？定行高。从格子包含的字数，定列宽。 (2)有哪些列，每列宽多少，得td1,td2,…tdn的样式 { width:; max-width:; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } (3)得出table的宽度tbWidth
	2	(1)Table 3个基本样式。 (border-collapse,cellspacing,cellpadding html内) (2)Table-layout:fixed; width: tbWdith；
	3	(1)列头生成函数。 td样式指向1 dvHead.html(); (2)数据生成函数。 td样式指向1 dvData.html();
排序	1.界面	(1)tbHead中的每个td中,div,positionRelative; (2)div内放span标题; span升,position:absolute;88; span降,position:absolute;88;
	2.排序方法编写
编辑功能	1.编辑窗体
	2.保存和取消
删除功能	1.获取要删除行
	2.从table中删除行
	3.从array中删除
添加功能	1.添加窗体
	2.添加到dataArray
搜索功能

Table 3个基本样式

border-collapse:collapse

cellspacing=”0”
写在html标签里
//td间距为0

cellpadding=”0” 写在html标签里 //td内边距为0

Table 表头和数据错开

<html>

<head>

*{margin:0px; padding:0px;}

#dvHead{

width:800px;

}

#dvData{

width:815px;

overflow:scroll;

}

#tbHead,#tbData{

table-layout:fixed;

border-collapse:collapsed;

}

#tbHead{

border-right:1px
solid #000;

}

#tbData{

border-right:1px
solid #000;

border-bottom:1px
solid #000;

}

.colHead{

font-weight:bold;

}

td{

border-top:1px
solid #000;

border-left:1px
solid #000;

text-align:center;

}

.td1{

width:50px;

max-width:50px;

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

}

.td2{

width:100px;

max-width:100px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.td3{

width:75px;

max-width:75px;

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

}

</style>

</head>

<body>

</table>

</div>

</table>

</div>

</body>

</html>

按字符串列排序

/*obj.colName:列名,obj.sortMethod:0
升序,1 降序

* 按字符串值排序

function sortColumn(obj){

var
colName=obj.colName;

var
type=obj.sortMethod;

var
sortFun=null;

if(type==0){

sortFun=function(a,b){

return eval("a."+colName).localeCompare(eval("b."+colName));

};

}

else{

sortFun=function(a,b){

return eval("b."+colName).localeCompare(eval("a."+colName));

};

}

var
beforeStr="";

for(var
i=0;i<=residentData.length-1;i++){

//beforeStr+=residentData[i].Name;

beforeStr+=eval("residentData["+i.toString()+"]."+colName);

}

residentData.sort(sortFun);

var
afterStr="";

for(var
i=0;i<=residentData.length-1;i++){

afterStr+=eval("residentData["+i.toString()+"]."+colName);

}

console.log("排序前:"+beforeStr+"\n排序后:"+afterStr);

$("dvDataArea").empty();

drawTable(residentData);

}

Td内部固定span

.spanClear{background:url("../img/pwd_sprite.png") no-repeat 0px
-286px rgba(0,0,0,0);display:inline-block;width:13px;height:13px;

cursor:pointer;

position:absolute;bottom:3px;

}

.pRelative{position:relative;}

其它

table内容不可选

间色方案

1.蓝白间色

.oddRow {rgb(180,205,230);}

.evenRow{rgb(230,230,230)}

Table 获取row 的序号

//获取row在table中的序号

this.getRowIndex=function(rowDom){

var
rows=$(rowDom).prevUntil("table");

return
rows.length;

};

table.rows[i]

Table获取row的某个td

tr.cells[i];

td取文本

td.innerText

cellspacing,cellpadding注意

只能在html中设置，在css中设置无效

rowspan ,colspan

只能在html中设置，在css中设置无效

Table性能

性能对比

结论：html方法，要将渲染时间控制在30ms以内。

实现方式：分页.

详细：在2800行时，html的执行方法是20ms，但渲染效时间是2800ms。

行数100时，htmlStr渲染时间是30ms

背景：从缩略表，切换到完整表。

11个字段，2800条数据

数据量	处理方式	时间
2800条	removeClass.addClass	2800ms
2800条	shortTbStr； longTbStr； shift: $(“#tbDiv”).html(Str)	1300ms
1000条	shift: $(“#tbDiv”).html(Str)	100ms
500条	shift: $(“#tbDiv”).html(Str)	90ms
300条	shift: $(“#tbDiv”).html(Str)	60ms
200条		50ms
100条		30ms

滚动条

scrollLeft

$("#dvResult").scrollTop(300);

$("#dvResult").scrollLeft(100);

相对滚动值

尺寸-位置

尺寸：

$(“selector”).width(20)

$(“selector”).height(20)

width() 覆盖 addClass的影响

$textDiv.width(0);

$textDiv.addClass("shortMode");

.shortMode{

width:60px;

text-overflow:ellipsis;

}

$testDiv[0].style.width的取值：是0，不是60；

原因：

width 产生 inline属性，优先于class属性

解决方法：

$textDiv.removeAttr("style");

$textDiv.addClass("shortMode");

或者

$textDiv.css("style",””);

$textDiv.addClass("shortMode")

求width, 从text font-size

$tempDiv.width($.trim($tempDiv.prop("innerHTML")).length*$tempDiv.css("font-size").match(/\d+/g)[0]);

top，left：

元素离父元素的距离

$(“selector”).css(“top”,”100px”);

$(“selector”).css(“left”,”100px”)

offsetLeft和offsetTop

offsetLeft:元素离窗体左侧的距离

$nextOne.prop("offsetLeft")

position.left | position.top

元素相对于父元素的位置

$(e.target).position().left

Jquery Ajax

$.ajax({

type:"post",

contentType:"application/x-www-form-urlencoded",

url:"./testServlet",

processData:false,//是否将data转成
key/value

cache:false,

data:data,

success:function(rData){

console.log("get
Data finished,data is:"+rData);

error:function(url,status,exption){

console.log("fail
to get Response");

}

});

dataType参数

作用：预期服务器返回的数据类型。

可用值：text/xml/html/script/json/jsonp

详细参见：Jquery
1.7 chm

Ajax请求文件总结

结论：Servlet返回文件，被放到Ajax的回调函数中，不会显示另存文件。

语句	回调函数中的data	是否提示另存为	当前窗体页是否改变
$.get("../Export/test.xls");	0M8R4KgxGuE...	否	否
$.get("edit.html");	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv	否	否

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>TestPage</title>

$(document).ready(function(){

bindEvents();

});

function bindEvents(){

$("#btnTest1").on("click",function(){

$.get("../Export/test.xls",function(rData){

console.log("responseData is:"+rData);

});

$("#btnTest2").on("click",function(){

$.get("edit.html",function(rData){

console.log("responseData is:"+rData);

});

}

</script>

</head>

<body>

</body>

</html>

下载文件 (弹出保存文件提示)

序号	概要	具体
1	用anchor实现 (静态)	在页面放一个隐藏的<a>, a的href指向下载文件，并触发click事件
2	用iframe实现 (静态)	在页面放一个隐藏的<iframe>, iframe的src指向下载文件
3	用form实现 (静态)	Form的action 指向下载文件，from.submit()
4	用form实现 (动态,推荐)	Form.submit()之后，浏览器接收文件流，显示另存为

用anchor实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>TestPage</title>

$(document).ready(function(){

bindEvents();

});

function bindEvents(){

$("#btnTest1").on("click",function(){

//提示保存窗体

$("#aDownLoad")[0].href="../Export/test.xls";

$("#aDownLoad")[0].click();

});

}

</script>

</head>

<body>

</body>

</html>

用iframe实现

$("#btnTest1").on("click",function(){

//提示保存窗体

$("#frmDownLoad")[0].src="../Export/test.xls";

});

用form实现

说明：form action action执向url。

form.submit(),取得文件流。

form.remove()删除。

function bindEvents(){

$("#btnTest1").on("click",function(){

$(document.body).append('<form id="frmDownload" method="post" action="../Export/test.xls" class="dNone" ></form>');

$("#frmDownload")[0].submit();

$("#frmDownload").remove();

});

}

用form实现（文件流）

说明：form action
action执向servlet。

将postData放在input的value中。

else if($(e.target)[0].id=="inpExport"){

$(document.body).append('<form
id="frmDownload" method="post"
action="../resiCrud?para" class="dNone" ><input
id="inpPostData" name="postData"
type="text"></form>');

var
postData={cmd:5,data:null};

$("#inpPostData").val(JSON.stringify(postData));

$("#frmDownload")[0].submit();

$("#frmDownload").remove();

}

例2

var $tempForm=$("<form
method='post' action='../ShopCudes?2'></form>");

$(document.body).append($tempForm);

$tempForm[0].submit();

$tempForm.remove();

服务端防止乱码

if(queryStr.equals("0")){

request.setCharacterEncoding("UTF-8");//防止汉字乱码

String
postData=request.getParameter("postData");

System.out.println("postData:"+postData);

Condition cond=new
Gson().fromJson(postData,Condition.class);

Jquery辅助方法

$.type() 获取7种类型

返回值:字符串

console.log($.type(true));

console.log($.type(3.1415));

console.log($.type("hello
world"));

console.log($.type([1,2,3]));

console.log($.type({}));

console.log($.type(function(){
alert("hello wold")}));

console.log($.type(new Date()));

Boolean, number,string, array,object,
function,date

备注：自定义类型 object

$.trim() 字符串

Console.log($.trim(“ |hello
world| ”))

|hello world|

判断 $.isFunction

$.isArray

$.isEmptyObject

$.isEmptyObject({})

$.isNumeric

数组元素批处理
$.map(array,function(n){n})

返回值：新数组

描述：操作array中的每个元素，返回新数组

Jquery-选择

查找 $(“sel”).find(“”)

选择第i个元素

<table>

<tr><td>Header
1</td></tr>

<tr><td>Value
1</td></tr>

<tr><td>Value
2</td></tr>

</table>

$("tr:eq(1)")

[<tr><td>Header
1</td></tr>]

parent()获取父元素

$(e.target).parent()

parents找一类祖先元素

<li class="item-ii">II

<li class="item-b">B

</ul>

</li>

</ul>

</li>

</ul>

$("li.item-a").parents(".level-1");

效果：

Array: [0] HTMLElement <ul
class="level-1">

parentsUtil查找多个祖先

<li class="item-ii">II

<li class="item-b">B

</ul>

</li>

</ul>

</li>

</ul>

代码：

$(“.item-a”).parentsUtil(“level-1”)

效果:

Array:[0]
htmlElement <ul class="level-2">

[1] htmlElement <li
class="item-ii">

所有兄弟

$('li#tmpCarrot').silblings().

之前兄弟

prevAll(exp)

prevUtil

之后兄弟

nextAll([expr])

孩子

.children()

备注：只选到孩子节点，不选孙。

属性选择

选择 class=”oneItem”
且 data=2的元素

$(".oneItem[data=2]").addClass("selectedRow");

后代选择

方式

$(".dvAdRe-R2 .selectedRow")

备注：所有子孙

举例2：

$("#disTb .mTable-selectedRow
.dis-Col8");

Jquery-显隐

军规

css(“display”,”none”)

css(“display”,””)

备注：不要使用 hide和 show, 它是动画方法，性能低。它们是异步

Jquery-遍历

$().each(function(I,item){})

Jquery插入

$(“”).after(string/JQObj)

描述:在元素后添加兄弟元素

$(“#pItem”).after(“<b>Hello</b>”)

var $text=$(“#textInfo”);

$(“#pItem”).after($text)

$(“”).before(string/JQObj)

描述:在元素前添加兄弟元素

类比.after();

Jquery删除

1.$().remove();

描述:$(“#div1”).remove();

document.getElementById(“div1”) 是 null

Jquery连写

解释：对一个jquery对象连续调用各种不同的方法

原来：

$('#dvResult').html('');

$('#dvResult'). addClass('dNone');

连写：

$('#dvResult').html('').addClass('dNone');

优点：

减少代码行数

prop和attr

attr：元素的内联属性

譬如：

removeAttr(“class”), removeAttr(“style”), removeAttr(“data”)都生效

prop:元素的属性（通过ele.能够访问到的）

prop(“innerHTML”)

prop(“offsetLeft”)//离容器左侧的距离

.css样式控制

原来：

$("#dvTip").css("left",obj.x+"px").css("top",obj.y+"px");

改写：

$("#dvTip").html(obj.text).css({"left":obj.x+"px","top":obj.y+"px"});

background-position

图片右下角：0,0

向上：y++

向左：x++

ID样式优先 class样式

实验1

#dvMap{

display:inline-block;

}

.dNone{

display:none;

}

<div id=”dvMap” class=”dNone”>测试div</div>

结果：div显示

实验2

#dvMap{

display:none;

}

.dNone{

display:inline-block;

}

<div id=”dvMap” class=”dNone”>测试div</div>

结果：div隐藏

结论：可变项写在id样式中

Jquery-UI

2个引用项

datepicker

备注：参考jquery UI Reference

项	方法
设置语言为中文	引入中文包(第二个) <script src="lib/jquery-ui-1.10.3/gxk/jquery.ui.datepicker-zh-TW.js"></script>
下拉选择年、月	（1）显示 $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); （2）宽度控制 .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{width:45% !important;}
年范围	$( ".selector" ).datepicker({ yearRange: "2002:2012" }); //到今年 var thisYear=(new Date()).getFullYear().toString(); $("#inpBirthDate").datepicker({ yearRange:"1900:"+thisYear });
日期范围	maxDate:new Date(),
获取日期	var currentDate = $( ".selector" ).datepicker( "getDate" );
清空日期	(1)backspace清空日期 $("#inpBirthDate").on("keyup",function(e){ if(e.keyCode == 8 \|\| e.keyCode == 46){ $.datepicker._clearDate(this); } });

dialog

html

<div id="dialog" title="图层管理">I'm in a
dialog</div>

创建

$("#dialog").dialog();

显示

$("#dialog").dialog("open");

隐藏

$("#dialog").dialog("close");

判断是否显示

$("#dialog").dialog("isOpen");

样式控制：jquery.ui.dialog.css

//弹出对话框

$("#dialog").dialog(

{closeText:"隐藏",

width:110,

minWidth:110,

maxWidth:120,

resizable:false,

position:[318,100],//position

title:"图层管理"

}

);

slider

/*slder

属性:

max:从最小到最大,滑动几次

orientation:vertical/horizonal, 朝向

Events:

slide:function(event,ui){

} //用户滑动slider 触发，ui.value获取当前值

方法:

1.slider("value")

$("#slider").slider("value");
//获取value

$("#slider").slider("value",10);//设置slidervalue

$(document).ready(function() {

$("#slider").slider(

{max:10,

orientation:"horizonal",

slide:
function(event, ui) {

console.log("slide
is triggered,value is:"+ui.value);

}

});//10个等级

$("#vSlider").slider({max:10,orientation:"vertical"});//10个等级

});

拖动排序项 sortable()

<head>

$(document).ready(function() {

$("#sortable").sortable();

});

</script>

</head>

</ul>

拖动项 drag

<!DOCTYPE html>

<html>

<head>

#draggable { width: 100px; height: 70px;
background: silver; }

</style>

$(document).ready(function() {

$("#draggable").draggable();

});

</script>

</head>

</body>

</html>

页面间交互

主页面-iframe-子页面

引用项：simplemodal

if($(e.target).hasClass("dvAdd")){

$("#dvFrame").modal({

overlayCss:{backgroundColor:"rgb(64,64,64)"}

});

$("#dvFrame").removeClass("dNone");

$("#frmAddEdit").attr("src","edit.html?type=0");

}

css-html基础

盒模型

W3C盒模型

IE盒模型

滚动条

1.div滚动条

设置水平滚动值

//所有滚动到最右侧

$(".testScroll").each(function(i,item){

item.scrollLeft=item.scrollLeftMax;

});

获取滚动比率

//滚动条, 控制透明度

$(".testScroll").on("scroll",function(e){

console.log("scroll
is triggered,e.target.scrollLeft:"+e.target.scrollLeft);

var
rate=(e.target.scrollLeft/e.target.scrollLeftMax).toFixed(2);

});

2.window滚动

window.scrollTo();

颜色

rgb 透明度

background-color:rgb(255,255,255,0.6)

间色

边框

frame 消除边框

/*summaryFrame*/

#sumaryFrame{ width:100%; height:100%;
border:none;}

强制生效css

font-size:10px !important;

备注:不会被其它font-size:设置覆盖

css文件引用图片

说明：css中引用图片是相对于css文件的位置.

html:

link
href=”css/index.css”

css

.dvMain{background:url(../img/background.png)}

js 引用文件

是相对于父页面的位置

控件

滚动条

备注：使用jquery-UI的scroll比较好

1.html实现

路子:div 里面设置

背景:用于控制图层透明度

.testScroll{

overflow:scroll;

display:inline-block;

width:70px;

height:16px;/*scroll的最小高度*/

font-size:100px;

}

2.获取比率

拖拽移动元素

/*路子:1.绑定目标(divItem)的mouseDown

* 2.绑定活动区域divRange的moumove和mouseUp

$("#divItem").on("mousedown",function(e){

console.log("mousedown
triggered");

if(e.button!=0){

return false;

}

gMovable=true;

});

$("#divRange").on("mouseup",function(e){

console.log("document.mouseup
triggered");

gMovable=false;

return false;

});

$("#divRange").on("mousemove",function(e){

console.log("mousemove
triggered");

if(gMovable){

$("#testDiv").css("left",e.clientX+"px");

$("#testDiv").css("top",e.clientY+"px");

return false;

}

});

拖拽改变顺序

效果:

一个框中放3个div,mouseDown div,拖拽放到另一个div上,则改变div顺序

结构:

html:

</div>

路子:

对divRange绑定mouseDown事件,如果target.HasClass(“divItem”)

记录divItem,存入gItem.记录divItem.outerHTML,存入gItemString

对divRange绑定mouseUp事件，

如果鼠标不在divRange范围内，return false;

根据位置获取targetItem，和after or before.

如果targetItem==gItem，return false;

移除gItem

targetItem.before或者targetItem.after(gItemString);

js:

$("#divRange").on("mousedown",function(e){//记录movingItem

console.log("mousedown
triggered,id:"+e.target.id);

if(e.button!=0){

return false;

}

gMovable=true;

gItemString=e.target.outerHTML; //记录被删元素的htmlString

gItem=$(e.target);

return false;

});

$("#divRange").on("mouseup",function(e){

console.log("document.mouseup
triggered");

if(!gMovable){return false;}

gMovable=false;

var
deltaInfo={deltaX:e.clientX-$(this).offset().left,deltaY:e.clientY-$(this).offset().top};

//deltarInfo:鼠标松开位置,相对于图层控件的坐标.

//如果松开位置超出图层控件

if(deltaInfo.deltaX<=0||deltaInfo.deltaY<=0||deltaInfo.deltaX>=$(this).width()||deltaInfo.deltaY>=$(this).height()){

return false;

}

var
newLocInfo=getItemByPoint(deltaInfo); //获取location

if(newLocInfo.neighbor[0]==gItem[0]){return false;}

gItem.remove();

if(newLocInfo.loc==0){newLocInfo.neighbor.before(gItemString);}

else{newLocInfo.neighbor.after(gItemString);}

return false;

});

}

var gItem=null;//要被移动的item

var gItemString="";

var gTargetItem=null;//要移到哪个Item的前面

css:

/*测试div*/

#divRange{

width:25px;

height:75px;

display:inline-block;

overflow:hidden;

position:absolute;

top:50px;

left:50px;

}

.divItem{

position:relative;/*默认位置是static,设置left,top无效*/

width:25px;

height:25px;

display:block;

background-color:rgb(0,0,255);

}

鼠标提示

效果：

html：

div id="dvTip" class="dNone"></div>

js：

$(".operUI").on("mouseover",function(e){

//显示td信息

if(e.target.tagName.toUpperCase()=="TD"){

var
tempObj={x:e.clientX,y:e.clientY,text:e.target.innerHTML};

shopMisUtil.tipTool.show(tempObj);

return false;

}

});

$(".operUI").on("mouseout",function(e){

if(e.target.tagName.toUpperCase()=="TD"){

shopMisUtil.tipTool.hide();

}

});

/*全局方法，类

* */

var shopMisUtil={

//提示工具

tipTool:{

show:function(obj){

$("#dvTip").html(obj.text);

$("#dvTip").css("left",obj.x+"px").css("top",obj.y+"px");

$("#dvTip").removeClass("dNone");

hide:function(){

$("#dvTip").addClass("dNone");

clear:function(){

$("#dvTip").html("");

}

};

Jquery插件

msgBox

msgbox

//--------------

$.msgbox("请选择O点线路。", {

buttons
: [ {

type
: "cancel",

value
: "确定"

}
]

});

msgBox2

原因：上msgBox好像要收费

http://jquerymsgbox.ibrahimkalyoncu.com/

blockUI

//官网：http://www.malsup.com/jquery/block/#overview

$.blockUI({message:"从百度获取地址中..."});//blockUI

$.blockUI();

Blocking
with a custom message:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

Blocking
with custom style:

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

To
unblock the page:

$.unblockUI();

If
you want to use the default settings and have the UI blocked for all ajax
requests, it's as easy as this:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

simpleModal 利器

项	值
引用js	jquery.simplemodal.1.4.4.min.js
工程	http://www.ericmmartin.com/projects/simplemodal/
模态显示div	`$("#sample").modal()`
点击模态外任意点关闭	`$("#sample").modal({overlayClose:true})`
设置背景颜色	`$("#sample").modal(overlayCss:{backgroundColor:"#fff"})`
显示html字符串	`$.modal("<div><h1>SimpleModal</h1></div>");`
关闭按钮图片	图片地址： http://simplemodal.googlecode.com/svn/tags/1.3/test/img/x.png 在css文件添加 /关闭图标/ #simplemodal-container a.modalCloseImg{ background:url(../img/x.png)no-repeat; /* adjust url as required / width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer*; }
关闭	`$.modal.close();`
使用frame的情况关闭modal	`top.closeModal();123`
修复removeExpression不能使用	未压缩版code Line239,替换 // $.support.boxModel is undefined if checked earlier //browser.ieQuirks = browser.msie && !$.support.boxModel; browser.ieQuirks = browser.msie && (document.compatMode === "BackCompat"); 备注：来源 `http://*.com/questions/12046242/simple-modal-jquery-1-8-0-and-ie9`

HTML5 基础

差异清单

序号	项	之前	现在	效果
1	<!Doctype>	<!DOCTYPE html .....>	<!DOCTYPE html>	适用所有doctype
2	Meta-编码类型	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta charset="utf-8″ />	简化
3	<Frame/>、<FrameSet/>等标签停用
4

语义化标记

音频/视频（不需要任何插件）

画布

数据存储

拖放

可编辑

Form表单增强

HTML5 实例

nav,footer,header,aside无div布局

<!doctype html>

<head>

<title>HTML5
Semantic Markup Demo: Cross Browser</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Page
Header</h1>

<h2>Page
Sub Heading</h2>

</hgroup>

</header>

<nav>

<ul>

<li><a href="#">Projects</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Profile</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h1>Article
Heading</h1>

</header>

<p>Lorem ipsum
dolor sit amet, consectetur adipiscing elit.</p>

<h1>Section
Heading</h1>

</header>

<p>Ut sapien
enim, porttitor id feugiat non, ultrices non odio.</p>

<p>Section
Footer: Pellentesque volutpat, leo nec auctor

euismod</p>

</footer>

</section>

<h1>Section
Heading</h1>

</header>

<p>Lorem ipsum
dolor sit amet, consectetur adipiscing elit.</p>

<figcaption>FigCaption:
Club, Heart, Spade and

Diamond</figcaption>

</figure>

<p>Ut sapien
enim, porttitor id feugiat non, ultrices non odio</p>

<p>Section
Footer: Pellentesque volutpat, leo nec auctor
euismod

est.</p>

</footer>

</section>

Article Footer

</footer>

</article>

<aside>

<h1>Siderbar
Heading</h1>

</header>

<p>Ut sapien
enim, porttitor id feugiat non, ultrices non odio.</p>

</aside>

Page Footer

</footer>

</body>

</html>

音频

兼容性：

IE9 及以上版本

支持的格式

音频:
ogg
(ogg, oga), mp3, wav, AAC

<!doctype html>

<html>

<head>

</head>

<body>

<sourcesrc="../aud/Yamato.mp3"/>

</audio>

</body>

</html>

浏览器兼容

IE iframe jquery Page

背景：

主页面 html:

//---

主页面脚本

//显示engis页面

showEngis:function(){

$.modal($(".engisFr"));

engiInd.html

</head>

<body>

</div>

问题：

报错：

解决方式：在子页面(engiInd.html

)使用jquery-1.8.3.min.js

</head>

<body>

</div>

尽管:

但程序能正常运行

视频

支持的格式：

视频:
ogg
(ogv), H.264 (mp4)

<video width="480" height="360"
controls preload="none"

poster="videoframe.jpg">

<sourcesrc="../vid/t13-2-16_x264.mp4"type="video/mp4"/>

</video>

X-UA-Compatible值	说明
IE=5	让浏览器使用Quirks mode来显示，实际上是使用Internet Explorer 7 的 Quirks 模式来显示内容，这个模式和IE5非常相似。
IE=edge	这个设置是让IE使用当前的最高版本进行文档的解析，官方文档指明，edge模式仅适用在测试环境，不建议在生产环境中使用
IE=7	使用标准IE7来处理
IE=EmulateIE7	模拟IE7来处理，遵循 <!DOCTYPE> 指令，如果文档有当前有一个合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），对于大部分网站来说，这是首选的兼容性模式
IE=8	标准IE8
IE=EmulateIE8	模拟IE8，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明
IE=9	标准IE9
IE=EmulateIE9	模拟IE9，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明
chrome=1	强制使用Chrome，需要IE下Chrome插件支持
IE=EmulateIE10	模拟IE10
IE=10	标准IE10，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明

码农公寓

Ready

Input_div_span

Input-长度限制

Input-仅允许输入数值

文本 超出-省略号

样式 圆角

按钮radio实现

按钮：Div实现图片，4种样式

禁止选择文本

文本框只读

span margin-left控制缩进

表单项批量读/写

Select Option 下拉框

只读

DOM操作

createElement 和 AppendChild

DOM操作 创建 添加

DOM操作 删除

DOM操作 清空子元素

DOM操作 设置元素innerHTML

判断2个dom元素相等

事件

原始方式：

on的多次绑定特性

on和 off 绑定和解除

冒泡和捕获

动态元素的绑定

JSON

JSON和字符串转换

JSON校验网站

布局

布局 图片-桌布-界面

布局 图片按宽度拉升/完全覆盖

布局 div居中

布局 文本 竖直居中

布局 获取元素的坐标,宽高

布局 offset设置 位置(仅对可见元素有效)

布局 使用margin的情况

布局 IE padding

全屏/下悬浮 -全屏

下悬浮-弹出切换

display 属性

Table

Table Excel

双滚动条table

Table组件

Table CRUD

Table 3个基本样式

Table 表头和数据错开

按字符串列排序

Td内部固定span

其它

Table性能

性能对比

滚动条

scrollLeft

尺寸-位置

尺寸：

width() 覆盖 addClass的影响

求width, 从text font-size

top，left：

offsetLeft和offsetTop

position.left | position.top

Jquery Ajax

dataType参数

Ajax请求文件总结

下载文件 (弹出保存文件提示)

Jquery辅助方法

$.type() 获取7种类型

$.trim() 字符串

判断 $.isFunction

$.isArray

$.isEmptyObject

$.isNumeric

数组 元素批处理 $.map(array,function(n){n})

Jquery-选择

查找 $(“sel”).find(“”)

选择第i个元素

parent()获取父元素

文本超出-省略号

样式圆角

DOM操作创建添加

DOM操作删除

DOM操作清空子元素

DOM操作设置元素innerHTML

布局图片-桌布-界面

布局图片按宽度拉升/完全覆盖

布局文本竖直居中

布局获取元素的坐标,宽高

布局 offset设置位置(仅对可见元素有效)

布局使用margin的情况

布局 IE
padding

数组元素批处理
$.map(array,function(n){n})

ID样式优先 class样式

拖拽改变顺序

音频/视频（不需要任何插件）