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>
