CSS-JQUERY筆記

本文轉載自查看原文 2014-03-31 20:21 10546 JQuery

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://stackoverflow.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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML,CSS,JS,jQuery,Vue 筆記 JQuery：JQuery 中的CSS()方法 JMETER CSS JQUERY EXTRACTOR jquery動態調用css jquery更換css背景 jQuery設置樣式css jquery中的屬性和css jQuery 的attr（）與css（）的區別 jquery ui的css設計 JQuery對Style和css設置

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

CSS-JQUERY筆記

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的情況

數組元素批處理 $.map(array,function(n){n})

ID樣式優先 class樣式

拖拽改變順序

音頻/視頻（不需要任何插件）