CSS-JQUERY笔记

Ready

$(document).ready(function(){

})

Input_div_span

Input-长度限制

<input maxLength="2">

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

<link rel="Stylesheet" href="test.css"/>

<script type="text/javascript" src="../jquery/jquery-2.0.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

//radioClicked

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

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

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

}); //radioClicked end

});

</script>

</head>

<body><ul>

<li><span class="radio unselected wh24 dInlineBlock"></span><span class="dInlineBlock pRelativeBottom5">全¨天¨¬</span></li>

<li><span class="radio unselected wh24 dInlineBlock"></span><span class="dInlineBlock pRelativeBottom5">自定义段</span></li>

<li><span class="radio unselected wh24 dInlineBlock"></span><span class="dInlineBlock pRelativeBottom5">特殊时段</span></li>

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

<script type="text/javascript" src="../jquery/jquery-2.0.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

//radioClicked

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

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

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

}); //radioClicked end

});

</script>

</head>

<body>

<div class="radio unselected wh24 dInlineBlock">

</div>

</body>

禁止选择文本

IE,Chrome

<body onselectstart=”return false”>

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对象不能判断

<td class="col1 td1">cell1</td>

事件

原始方式:

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>

<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

<script src="../lib/jquery-2.0.2.min.js"></script>

<title>TestPage</title>

<script type="text/javascript">

$(document).ready(function(){

bindEvents();

bindEvents();

});

function bindEvents(){

console.log("bindEvents
is called");

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

alert("btnTest
is clicked");

});

}

</script>

</head>

<body>

<input type="button" id="btnTest" value="测试"/>

</body>

</html>

on和 off 绑定和解除

<script type="text/javascript">

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>

<div id="testDiv">测试</div>

</body>

Click once:

Console:

testDiv has been clicked

bind again:

bindClicks();

console:

testDiv has been clicked

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>

<img id="bgImg"
src="src/assets/images/bg6.jpg"/>

<div
class="mainLog"></div>

<div
class="sysTitle"></div>

<div class="buttonContainer"
id="dvButtonContainer">

<div class="menuButton"
id="btnOD">OD分析</div>

</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 id="dvBackGround">

</div>

CSS

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

JS

$("#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>

<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

<title>Insert
title here</title>

<style type="text/css">

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

</style>

</head>

<body>

<div style=" height:100px; width:150px; border:solid 1px rgb(0,0,0)">

<div id="dvCenter">年</div>

</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 才是真实

全屏/下悬浮  -全屏

<html
xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

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

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

#up{ background:#00ff00;}

</style>

<script
type="text/javascript">

function setHeight() {

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

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

}

</script>

</head>

<body
onload="setHeight()">

<div
id="whole">

<div
id="up"></div>

<div
id="down"></div>

</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 class="dvMain">

<div class="dvML dvML-HS">

<div id="dvMap"></div>

<div id="dvStat"></div><!--地址面板-->

</div>

<div class="dvMR dvMR-WT">

</div>

</div>

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

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

HTML

3个控制按钮

<div id="gridRegion"
class="gridRegionHide"><!--表格-->

<div
class="liteBlue h20"><span class="closeIcon"
id="spanCloseGrid"></span><span class="maxIcon"
id="spanMaxGrid"></span><span class="minIcon"
id="spanMinGrid"></span></div>

</div>

JS

$("#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+2*3

(2)列宽= 字数*fontsize+(字数-1)*2

2

有几列?每列宽多少,固定列宽?Table宽多少,固定列宽?

(1)5列

(2)td1  2*14+2*1=30px;  max-width:30px;

td2  4*14+2*3=62px;   max-width:62px;

td3  100px      
….

td4  6*14+5*2=94px;

td5  15*14+2*14=14*17=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>

<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

<link href="css/edit.css"
rel="StyleSheet">

<title>编辑</title>

</head>

<body>

<table id="tbInfo"
cellspacing=0 cellpadding=0>

<tr><td class="col1">姓名</td><td class="col2"><input type="text"></td><td class="col3" rowspan=5></td><td class="col4">所属小区</td><td class="col5"><input type="text"></td></tr>

<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"><input type="text"></td><td class="col4">单元及门牌号</td><td class="col5"><input type="text"></td></tr>

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

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

<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

结构

<select class="Info"
data="Gender" id="selGender"><option
value="1">男</option><option value="0">女</option></select>

取值:

$(“selGender”).val();

Table CRUD

效果:

效果项

描述

列头和内容分离

列头可排序

滚动条

Td固定宽

整体布局:

<div><table
id=”tbHead”></table></div>

<div><table id=”tbData”></table><div>

步骤

大项

序号

描述

列头和表数据

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;8*8;

span降,position:absolute;8*8;

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>

<meta http-equiv="X-UA-Compatible"
content="IE=10">

<style type="text/css">

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

<div id="dvHead">

<table id="tbHead"
cellspacing="0" cellpadding="0">

<tr><td class="td1 colHead">序号</td><td class="td2 colHead">姓名</td><td class="td3 colHead">性别</td></tr>

</table>

</div>

<div id="dvData">

<table id="tbData"
cellspacing="0" cellpadding="0">

<tr><td class="td1">1</td><td class="td2">上杉谦信321312312312312</td><td class="td3">男</td></tr>

<tr><td class="td1">2</td><td class="td2">武田信玄</td><td class="td3">男</td></tr>

<tr><td class="td1">3</td><td class="td2">织田信长</td><td class="td3">男</td></tr>

<tr><td class="td1">4</td><td class="td2">立花道雪</td><td class="td3">男</td></tr>

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

<td class="col3"><div
class="pRelative"><div id="dvName"
class="dvFilter OperUI"></div><span  data="Name" class="spanClear
OperUI"
title="清空条件"></span></div></td>

.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内容不可选

<body onselectstart="return
false;"
>

间色方案

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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="../lib/jquery-2.0.2.min.js"></script>

<title>TestPage</title>

<script type="text/javascript">

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

<input type="button" id="btnTest1" value="getXls"/>

<input type="button" id="btnTest2" value="getHtml"/>

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="../lib/jquery-2.0.2.min.js"></script>

<title>TestPage</title>

<script type="text/javascript">

$(document).ready(function(){

bindEvents();

});

function bindEvents(){

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

//提示保存窗体

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

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

});

}

</script>

</head>

<body>

<input type="button" id="btnTest1" value="getXls"/>

<a id="aDownLoad" style="display:none"></a>

</body>

</html>

 

用iframe实现

 

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

//提示保存窗体

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

});

<iframe id="frmDownLoad" style="display:none"></iframe>

用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();

});

}

<input type="button" id="btnTest1" value="getXls"/>

<form id="frmDownload" style="display:none"></form>


 

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找一类祖先元素

<ul
class="level-1">

<li
class="item-i">I</li>

<li class="item-ii">II

<ul class="level-2">

<li
class="item-a">A</li>

<li class="item-b">B

<ul class="level-3">

<li
class="item-1">1</li>

<li
class="item-2">2</li>

<li class="item-3">3</li>

</ul>

</li>

<li
class="item-c">C</li>

</ul>

</li>

<li
class="item-iii">III</li>

</ul>

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

效果:

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

parentsUtil查找多个祖先

<ul
class="level-1">

<li
class="item-i">I</li>

<li class="item-ii">II

<ul class="level-2">

<li
class="item-a">A</li>

<li class="item-b">B

<ul class="level-3">

<li
class="item-1">1</li>

<li
class="item-2">2</li>

<li
class="item-3">3</li>

</ul>

</li>

<li
class="item-c">C</li>

</ul>

</li>

<li
class="item-iii">III</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:元素的内联属性

譬如:

<span class='mPager-spFL mPager-lPage'
style=”width:25px” data=1>

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>

<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {

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

});

</script>

</head>

<body
style="font-size:62.5%;">

<ul id="sortable">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

</ul>

拖动项 drag

<!DOCTYPE html>

<html>

<head>

<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<style type="text/css">

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

</style>

<script>

$(document).ready(function() {

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

});

</script>

</head>

<body
style="font-size:62.5%;">

<div id="draggable">Drag
me</div>

</body>

</html>

页面间交互

主页面-iframe-子页面

引用项:simplemodal

<script src="../lib/jquery.simplemodal.1.4.4.min.js"></script>

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;

}

<div class="testScroll">.................................</div>

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 id="divRange">

<div class="divItem"
style="background-color:#ff0000" id="div1"></div>

<div class="divItem"
style="background-color:#00ff00" id="div2"></div>

<div class="divItem"
style="background-color:#0000ff" id="div3"></div>

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

meta

X-UA-Compatible (控制文档模式(document mode))

浏览器 IE meta 设置文档模式(document mode)

onMouseDrag等事件,IE,  文档模式是IE9/IE8才显示。

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9">

备注:meta 不需要结束标记

iframe X-UA-Compatible和 parentPage Mode

浏览器规则:

 Any frames  would run in the same X-UA-Compatible  as their parent page

解决思路:

让iframe中的mode同 parent Page或者 让 parent Page 同步 iframe的mode.

X-UA-Compatible的所有取值

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.

Here are your options:

  • "IE=edge"
  • "IE=10"
  • "IE=EmulateIE10"
  • "IE=9"
  • "IE=EmulateIE9
  • "IE=8"
  • "IE=EmulateIE8"
  • "IE=7"
  • "IE=EmulateIE7"
  • "IE=5"

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

Content-type设置(设置网页的编码)

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

备注:frame中的content-type独立于parent Page

控制浏览器模式(browser mode)

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>

<html lang="en">

<head>

<meta charset="utf-8"
/>

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

<link rel="stylesheet"
href="html5reset.css" type="text/css" />

<link rel="stylesheet"
href="html5semanticmarkup.css" type="text/css" />

<!--[if lt IE 9]>

<script src="html5.js"></script>

<![endif]-->

</head>

<body>

<header>

<hgroup>

<h1>Page
Header</h1>

<h2>Page
Sub Heading</h2>

</hgroup>

</header>

<nav>

<ul>

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

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

<article>

<header>

<h1>Article
Heading</h1>

<time datetime="2010-05-05"
pubdate>May 5th, 2010</time>

</header>

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

<section>

<header>

<h1>Section
Heading</h1>

</header>

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

<footer>

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

euismod</p>

</footer>

</section>

<section>

<header>

<h1>Section
Heading</h1>

</header>

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

<figure>

<img src="item-1.png"
alt="Club">

<img src="item-2.png"
alt="Heart">

<img src="item-3.png"
alt="Spade">

<img src="item-4.png"
alt="Diamond">

<figcaption>FigCaption:
Club, Heart, Spade and

Diamond</figcaption>

</figure>

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

<footer>

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

est.</p>

</footer>

</section>

<footer>

Article Footer

</footer>

</article>

<aside>

<header>

<h1>Siderbar
Heading</h1>

</header>

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

</aside>

<footer>

Page Footer

</footer>

</body>

</html>

音频

兼容性:

IE9 及以上版本

支持的格式

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

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<audio controls>

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

</audio>

</body>

</html>


浏览器兼容

IE iframe jquery Page

背景:

主页面 html:

<div id="dvMod" class="dNone"><iframe
class='engisFr' src='engiInd.html'></iframe></div><!--弹出窗体-->

//---

主页面脚本

//显示engis页面

showEngis:function(){

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

},

engiInd.html

<script src="../lib/jquery-2.0.2.min.js"></script>

</head>

<body>

<div id="dvBody">

<div id="dvTb"></div>

</div>

问题:

报错:

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

)使用jquery-1.8.3.min.js

<script src="../lib/jquery-1.8.3.min.js"></script>

</head>

<body>

<div id="dvBody">

<div id="dvTb"></div>

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

上一篇:nyoj 517 最小公倍数 【java睑板】


下一篇:网站前端优化 -saveForSelf