Javascript知識總結
1.創建並追加元素
document.createElement("li"); obj.appendChild(obj);
//獲得元素第一個div下的li元素數組
obj.getElementsByTagName("div")[0].getElementsByTagName("li");
2.爲元素添加css樣式及相應的屬性
obj.className = "cssName";//爲元素添加class樣式
obj.src/href/target = "_blank...";//爲元素添加屬性(不建議)
obj.style.property = new style;//添加具體屬性
//爲元素賦值文本
obj.innerHtml = "";obj.innerText = "";
4.文檔加載完成之後執行函數
window.onload = function(){}
window.onscroll = function(){ }
5.獲得頁面可視區域高度
var clientHeight = document.documentElement.clientHeight;
6.設置並取消定時器
var timer = null;
timer = setInterval(function(){/*每30毫秒執行一次此函數*/},30);
clearInterval(timer);
7.獲得滾動條距離頂部的距離
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
8.在6中的定時器的function中執行以下語句,頁面即可不斷滾動
document.documentElement.scrollTop =
document.body.scrollTop = osTop + xxx;//xxx的值即爲每次滾動的距離
9.tab選項卡實現原理
var oDiv = document.getElementById("divLoginWindow");//選項卡和相應內容卡的父級div
var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");//選項卡
var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");//內容卡
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;//爲選項卡設置index屬性
oLi[i].onclick = function () {
show(this.index);//爲選項卡設置點擊事件
}
}
function show(a) {
index = a;
for (var j = 0; j < oLi.length; j++) {//將所有的選項卡和內容卡的樣式置爲空
oLi[j].className = "";
aCon[j].className = "";
// aCon[j].style.opacity = 0;
aCon[j].style.display = "none";
}
aCon[index].style.display = "block";//相應內容卡顯示出來
oLi[index].className = "cur"; //爲選中的行增加顯示(相應)的樣式
}
10.Javascript的Math()函數
Math.floor(x);//返回小於或等於x的最大整數,x爲number類型的數字
Math.ceil(x);//返回大於或等於x的最小整數(取整函數)
Math.round(x);//返回與x最接近的整數(四捨五入)JQuery知識總結
1.JQuery元素選擇器
$("#id")//根據元素的id來選擇元素
$(".class")//選擇所有樣式爲class的元素
$("p.intro")//選取所有 class="intro" 的 <p> 元素
$("p")//選取所有的p元素
$(this)//當前的html元素
2.爲元素添加屬性
$("#id").attr({"":"","":""});//爲元素添加屬性
$("#id").css({"":"","":""});//爲元素添加class樣式
$("#id").val();//爲元素取值或賦值
$("#id").html();//爲元素添加html樣式
// 獲取元素屬性
$(this).attr('屬性名');
3.添加或移除css樣式
$("#target").addClass("newClass");//添加樣式
$("#target").removeClass("oldClass");//移除樣式
$("#target").toggleClass("newClass");//如果存在則移除,如果不存在則添加
hasClass("className");// 判斷是否已經存在CSS
3.刷新當前頁面及打開新頁面
window.location.reload();
window.open(link);//打開新頁面,link爲地址,會被瀏覽器攔截
location.href = "Default.aspx";//打開新頁面
4.爲元素添加點擊事件
$("#id").click(function(){});
5.爲元素綁定鍵盤事件
$("#id").bind('keypress',function(event){
if(event.keyCode == "13"){
//如果是回車,則執行此處代碼
}
});
6.Jquery懸浮事件
$("#id").bind({
mouseenter:function(e){},
mouseleave:function(e){}
});
7.爲動態添加的元素綁定事件
$("#id").live('click',function(){});
8.隱藏顯示元素
$("#id").css("display","none");$("#id").css("display","block");
$("#id").hide();$("#id").show();
9.滾動條滾動事件
$(window).scroll(function(){});
10.獲得服務器控件的客戶端ID
$('#<%=targetId.ClientID%>').focus();
11.刪除被選元素及其子元素
$('#obj').remover();
$("p").remove(".italic");//刪除 class="italic" 的所有 <p> 元素：
12.刪除被選元素的子元素
$('#obj').empty();
13.頁面加載剛完成則聚集焦點
$("#id").focus();
$("#editAgencyName").select();//聚焦且選中頁面內容
14.遍歷<pre name="code" class="javascript">//遍歷對象
$.each(obj,function(n,value) {
alert(n+' '+value.name);
});
//遍歷數組
$.each(anArray,function(n,value) { }); +value+"</td></tr>"; tbody += trs; });
web前端設計
1.font-family:'Hiragino Sans GB';
font:14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
color:#8c8c8c;
2.box-shadow:rgba(0,0,0,.27) 0 1px 3px,#DCDCDC 0 1px 0,#DDD 0 -1px 0;
box-shadow:0px 2px 4px rgba(0,0,0,0.1);(此顏色較淺)
3.灰色背景:background:#efefef;#f7f7f7;
iframe問題:
<iframe onLoad="iFrameHeight()" id="iframepage" src="tesx.jsp"
scrolling="no" frameborder="0"></iframe>
<script>
function iFrameHeight() {//解決iframe自適應高度的問題
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>
自定義上傳input=file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定義input type="file" 的樣式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='瀏覽...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上傳" />
</form>
</div>
</body>
</html>
