IE:<param name="wmode" value="opaque" />
FF:<embed wmode="opaque" />
和flash透明一樣:
IE:<param name="wmode" value="transparnet" />
FF:<embed wmode="transparnet" />
ie6中的雙邊bug解決方法:display:inline
js獲取css中的float屬性:(ie中用cssFloat,FF中用styleFloat)
ie中取消選擇---onselectstart=return false
ff中取消選擇---css中定義:* {-moz-user-select:none}
下面例子比較ie和ff中document.getElementsByName()的區(qū)別:
<input type="radio" name="aa" />
<input type="radio" name="aa" />
<input type="radio" name="aa" />
<div name="aa"></div>
<div id="aa"></div>
<div id="aa"></div>
<script type="text/javascript">
<!--
window.onload=function(){
alert(document.getElementsByName("aa").length)
}
//-->
</script>----------ie中獲取的是id的obj(但包括name為radio checkbox等項(xiàng)),ff中獲取的只是name項(xiàng)
這中思想蠻不錯(cuò)的:
var w=100
low=true
if(low=true){
w--
}
if(w<=10){
w++
low=false
}
if(w>=100){
w--
low=true
}
if(low=false){
w++
}
js彈出鏈接文本內(nèi)容
<script language="javascript">
function altername(evt){
evt=evt?evt:window.event
if(document.all){
alert(evt.srcElement.innerHTML)
}
else{
alert(evt.target.innerHTML)
}
}
window.onload=function(){
var obj=document.getElementsByTagName("a")
for(i=0;i<obj.length;i++){
obj[i].onmouseover=altername
}
}
</script>
<a href="">baidu</a><br>
<a href="">google</a><br>
<a href="">blueidea</a><br>
<a href="">crsky</a>
//主要考察event.srcElement和evt.target
js用for in 遍歷整個(gè)數(shù)組:
for(i in aa){
document.write(i)
}
js用toLocaleString()獲取整個(gè)時(shí)間:
例子:
var qq=new Date()
qq.toLocaleString()
//或者寫法如下:
var qq=new Date()
var nian=qq.getFulllYear()
var yue=qq.getMonths()
var ri=qq.getDate()
var xingqi=qq.getDay()
var hour=qq.getHours()
var minute=qq.getMinutes()
var second=qq.getSeconds()
var millisecond=qq.getMilliseconds()
數(shù)組的定義 :
一維:
方案1:
var aa=new Array()
aa[0]=""
aa[1]=""
aa[3]=""
方案2:
var aa=new Array("","","")
方案3:
aa=["","",""]
二維:
var aa=["0","1","2"]
aa[0][0]=""
aa[0][1]=""
aa[1][0]=""
aa[1][1]=""
aa[2][0]=""
aa[2][1]=""
asp中定義數(shù)組:
dim aa(3)
aa(0)=""
aa(1)=""
aa(2)=""
IE:attachEvent
例如在body中單擊的時(shí)候彈出”你好“,我們可以這么做
首先定義一個(gè)函數(shù):
function alert_hello(){
alert("你好")
}
綁定:
document.body.attachEvent("onclick",alert_hello)
需要注意的是:
1:在綁定的時(shí)候一定不能這樣寫:alert_hello()
2:最好在外部定義alert_hello這個(gè)函數(shù)
如果在內(nèi)部定義則:document.body.attachEvent("onclick",function(){"alert('hello')"})
FF:addEventListener
同樣實(shí)現(xiàn)在IE中的效果的時(shí)候這樣做即可:
定義:
function alert_hello(){
alert("你好")
}
綁定:
document.body.addEventListener("click",alert_hello,false)
以下為一個(gè)對(duì)象綁定:(ff和ie中都需要:div必須寫在前面,如果是ie,這個(gè)時(shí)候把div放在后面的話,可以在聲明語言的時(shí)候加入defer)
<div id="xx">hello</div>
<script language="javascript">
function aa(){
alert("hello")
}
document.getElementById("xx").addEventListener("click",aa,false)
</script>
IE和FF中的區(qū)別:
1:如果要執(zhí)行的函數(shù)不止一個(gè),例如:
document.body.attachEvent("onclick",aa1)
document.body.attachEvent("onclick",aa2)
document.body.attachEvent("onclick",aa3)
即:body要同時(shí)綁定aa1,aa2,aa3這個(gè)三個(gè)函數(shù),
這個(gè)時(shí)候,IE和FF中的解釋循序是不一樣的,
ie:aa1,aa2,aa3
ff:aa3,aa2,aa1
2:在ie中是要寫全時(shí)間名:例如,onclick,而ff中只要寫click即可。。。
3:ie中綁定的時(shí)候比ff少一個(gè)參數(shù),區(qū)別如下代碼:
<style type="text/css">
#aa {
width:500px;
height:500px;
background:red;
}
#qq {
width:200px;
height:200px;
background:black;
}
</style>
<div id="aa">d
<div id="qq" >d</div>
</div>
<script language="javascript">
function al(){
alert("hello")
}
document.getElementById("aa").addEventListener("click",al,true)
//試試false和true的區(qū)別
</script>
HTML頁面標(biāo)準(zhǔn)排版:
body.style.padding---頁面中body的padding(例如在body的style中寫:padding:20px)
body.style.border---頁面中body的border(例如在body的style中寫:border:20px)
body.clientLeft---頁面中body的(左)border寬度
body.clientTop---頁面中body的(上)border寬度
body.clientWidth---頁面中body的寬度
body.offsetWidth---頁面中body的寬度+邊框長度(即body.clientWidth+邊框長度)
body.scrollWidth---頁面中body出現(xiàn)滾動(dòng)條時(shí)候的實(shí)際長度,當(dāng)沒有滾動(dòng)條的時(shí)候body.scollWidth和body.clientWidth是相等的
(IE和FF中兩者是相反的概念)
body.clientHeight //同上
body.offsetHeight //同上
body.scrollHeight //同上
div.style.border---div中的border(有兩個(gè)參數(shù):width,height)
div.style.padding---div中padding的值
div.style.left---div距離頁面左邊的距離(這個(gè)參數(shù)有三個(gè)類似的寫法:具體如下:(先要明白.style.left返回的值是一個(gè)字符串,如果沒有,返回空串)
1:div.style.posLeft---就是將left的值轉(zhuǎn)化為數(shù)值類型,而且是浮點(diǎn)型
2: div.style.pixelLeft---是數(shù)值,是將left的值(如果是空串則賦為0)轉(zhuǎn)化為像素值
注意;parseInt(posLeft)==pixelLeft
3: div.offsetLeft---返回對(duì)象距離窗口左邊的距離(帶邊框+padding)
ff中是沒有1,2兩個(gè)參數(shù)的,要應(yīng)用的話一般統(tǒng)一用offsetLeft
offsetLeft通常用于取值,而left則應(yīng)用于賦值計(jì)算
例如:先通過offsetLeft取到div距離頁面的距離x,然后在通過div.style.left=x+10+"px"將div往右移動(dòng)10個(gè)PX,而在實(shí)際應(yīng)用的時(shí)候一定要加上"px"(因?yàn)閘eft的返回值為字符串)
)
div.style.Top //同div.style.Left用法相同
div.offsetLeft//同div.offsetTop用法相同
注意:div.style.left是div距離頁面左邊的距離(不附帶padding)
div.offsetLeft是div距離頁面左邊的距離(附帶padding)
div.clientTop---返回div(上)border的高度
div.clientLeft---返回div(左)border的寬度
div.clientWidth---返回div寬度(包括padding,不包括border和滾動(dòng)條的寬度)
div.clientHeight---返回div高度(包括padding,不包括border和滾動(dòng)條的高度度)
div.scrollWidth---返回div中實(shí)際的高度(帶滾動(dòng)的高度)
div.scrollHeight---返回div中實(shí)際的高度(帶滾動(dòng)的高度)
---詳細(xì)分析見:
http://images13.51.com/18/a/f8/40/sarten/1192242772_0.70754000.jpg
IE:setCapture和releseCapture
FF:captureEvents和releaseEvents
setCapture主要是為某個(gè)對(duì)象或頁面綁定一個(gè)事件,這個(gè)時(shí)間的主要目的就是為了能夠在整個(gè)窗口下都可以起做用:比如下面的代碼:
<script type="text/javascript" defer>
document.getElementById("xx").setCapture()
</script>
<div id="xx">hello</div>
這樣就可以在頁面中任何部位單擊一次就可以彈出hello。。。
ff下和ie下的理解不一樣,可以這樣理解:(用上例子講解)
ie是對(duì)某個(gè)特定對(duì)象xx進(jìn)行全屏捕捉,當(dāng)設(shè)定setCapture時(shí)候,就可以在全屏捕捉到xx。。。單擊的時(shí)候也會(huì)執(zhí)行xx設(shè)定的單擊執(zhí)行的事件(函數(shù))。。。可以全屏獲取鼠標(biāo)的位置
而ff中只是window.captureEvents...作用域是對(duì)整個(gè)頁面(只是可以全屏獲取鼠標(biāo)的位置)
creatElement(為頁面創(chuàng)建對(duì)象)
appendChild(為頁面應(yīng)用某個(gè)創(chuàng)建的對(duì)象)
例子1:在頁面中創(chuàng)建一個(gè)table要求有一個(gè)單元格,一行,一個(gè)table文字
<script language="javascript" defer>
var tb=document.createElement("table")
var tbd=document.createElement("tbody")
var tr=document.createElement("tr")
var td=document.createElement("td")
var txt=document.createTextNode("table")
td.appendChild(txt)
tr.appendChild(td)
tbd.appendChild(tr)
tb.appendChild(tbd)
document.body.appendChild(tb)//對(duì)應(yīng)下面兩行
</script>
<div id="tt"></div>//在指定的div中應(yīng)用:document.getElementById("tt").appendChild(tb)
例子2:創(chuàng)建一個(gè)input對(duì)象radio,默認(rèn)選中
<script type="text/javascript" defer>
var pt=document.createElement("input")
pt.type="radio"http://寫在對(duì)象創(chuàng)建之后
document.body.appendChild(pt)
pt.checked="checked"http://pt.setAttribute("checked",true)
</script>
text/radio/checkbox/file/hidden/submit/button/reset的創(chuàng)建都是和上例差不多,
需要注意的是:必須將.type寫在緊跟對(duì)象創(chuàng)建之后,然后應(yīng)用,在之后設(shè)置屬性(也可以用setAttibute)
例子3:創(chuàng)建一個(gè)select對(duì)象
<script lanuguage="javascript" defer>
var se=document.createElement("select")
se.options[0]=new Option("123","123")
se.options[1]=new Option("456","456")
se.options[2]=new Option("789","789")
document.body.appendChild(se)
se.setAttribute("id","cre_se")
se.onchange=function(){
alert(se.options[document.getElementById('cre_se').selectedIndex].value)
}
</script>
createPopup:創(chuàng)建一個(gè)提示框(也相對(duì)于一個(gè)頁面,當(dāng)popup失去焦點(diǎn)的時(shí)候---popup消失)
<script type="text/javascript" defer>
var pp=window.createPopup()
pp.document.body.style.background="#efefef"
pp.document.body.style.border="1px solid black"
pp.document.body.innerHTML="this is a popup"
pp.show(10,20,250,20,document.getElementById("popup_div"))
</script>
<div id="popup_div" style="width:500px;height:50px;position:absolote;top:50px;left:50px;background:red"></div>
ff下的添加收藏夾:
window.sidebar.addpanel("百度","http://www.baidu.com","")
ie下的添加收藏夾
window.external.addfavorite("http://www.baidu.com","百度")
滾動(dòng)到頁面指定位置:scrollIntoView()
例子:
<a href="#" id="xx">內(nèi)容</a><br>
<a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br><a href="#">內(nèi)容</a><br>
<a href="javascript:document.getElementById('xx').scrollIntoView()">內(nèi)容</a><br>
相當(dāng)于:
<a name="top">top</a>
<a href="#top">go_top</a>
createTextRange()//ie專有
例子1:(主要說明:textrange.text和textrange.htmltext的區(qū)別)
<script language="javascript" defer>
function test()
{
var rng=document.body.createTextRange()
alert(rng.text)
}
function test1()
{
var rng=document.body.createTextRange()
alert(rng.htmlText)
}
</script>
<input type="button" value="text">
<input type="button" value="htmlText">
//如果為某個(gè)對(duì)象創(chuàng)建textrange的話,,,text和htmlText是沒有區(qū)別的
如果是為整個(gè)body創(chuàng)建的話是有區(qū)別的(text表示文本內(nèi)容,htmlText把整個(gè)頁面代碼輸出)
例子2:獲取指定文本框中的選中的文字:只響應(yīng)第一個(gè)文本框
<script language="javascript" defer>
function test()
{
var o = document.getElementById("inp1").createTextRange()//改為inp2的話就不響應(yīng)了
var r = document.selection.createRange()//為選中的文字創(chuàng)建一個(gè)虛禮空間存起來(也是一個(gè)對(duì)象)
if(o.inRange(r)){//在已經(jīng)創(chuàng)建的textrange中查找range對(duì)象(createtextRange.inRange(createRange))
alert(r.text)//彈出createRange的文本createRange.text
}
}
</script>
<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="1234567890">
<input type="button" value="確定">
例子3:點(diǎn)擊復(fù)制功能:
<script language="javascript">
function copyContent(obj){
obj.select()
var cont=obj.createTextRange()
cont.execCommand("copy")
//或者這樣寫:
//obj.select()
//obj.document.execCommad("copy")
}
</script>
<input type="text" value="what you want to copy !" >
iframe允許背景顏色為透明:
<iframe src="xx.html" allowtransparency="true">
//xx.html中必須這樣寫:<body bgColor="transparent">
ie:window.eval("ID")//用來獲取頁面中id的對(duì)象,相當(dāng)于document.getElementById("id")
ff:window.eval("alert('xx')","javascript")//執(zhí)行js代碼,也可以執(zhí)行asp代碼
ie:window.execScript("alert('xx')","javascript")//執(zhí)行js代碼,也可以執(zhí)行asp代碼
文本框不自動(dòng)提示:
<input type="text" autocomplete="off">
隱藏按鈕點(diǎn)擊時(shí)的虛線:
<input type="button" hidefocus="hidefocus" value="按鈕">
<input type="button" onfocus="this.blur()" value="按鈕">
腳本永不提示出錯(cuò):
<script language="javascript">
window.onerror=function(){
return false
}
</script>
事件對(duì)象返回值:
srcElement.returnVlaue="false/true"
通過id獲取某個(gè)對(duì)象:
通用:document.getElementById("idname")
ie:window.eval("idname")
通過name獲取對(duì)象
document.getElementsByName("name")
通過tagname獲取對(duì)象
document.getElementsByTagName("tagname")
通過事件獲取對(duì)象:
window.event.srcElement//是一個(gè)對(duì)象
window.event.srcElement.tagName//獲取到的對(duì)象的標(biāo)簽名
父標(biāo)簽:
obj.parentNode()(dom)
obj.parentElement(dhtml)
子對(duì)象:
obj.childNodes()
鼠標(biāo)位置:
1:絕對(duì)的body位置:
ie:event.clientX event.clientY
ff:event.clientX event.clientY
2:相對(duì)的body位置:
ie:event.x event.y
ff:event.pageX event.pageY
3:絕對(duì)的鼠標(biāo)body中停留的位置:
ie:event.offsetX event.offsetY
ff:event.layerX event.layerY
4:整個(gè)頁面絕對(duì)位置:
screen.x screen.y
例子:動(dòng)態(tài)獲取鼠標(biāo)在頁面中的坐標(biāo)位置
<script language="javascript">
function movemouse(evt){
evt=evt?evt:window.event
var x=evt.clientX
var y=evt.clientY
document.getElementById("con").innerHTML="x: "+x+"y: "+y
document.getElementById("con").style.left=x+"px"
document.getElementById("con").style.top=y+"px"
}
document.onmousemove=movemouse
</script>
<div id="con" style="position:absolute;height:20px;width:100px;"></div>
類似:動(dòng)態(tài)時(shí)間
<script language="javascript">
function aa(){
var date=new Date()
document.body.innerHTML=date.toLocaleString()
setTimeout("aa()",1000)
}
window.onload=aa
</script>
雙擊滾屏代碼:
<script language="javascript">
scrollTo(0,0)
var st
function scroll_start(){
var x=document.body.scrollTop
window.scroll(0,++x)
st=setTimeout("scroll_start()",10)//不能寫出var st=...
if(x!=document.body.scrollTop){
stop_scroll()
}
}
function stop_scroll(){
clearTimeout(st)
}
document.onmousedown=stop_scroll
document.ondblclick=scroll_start
</script>
事件按鍵
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
頁面中鼠標(biāo)操作:
oncontextmenu//右鍵
onselectstart//選中
oncopy//復(fù)制
onpaste//粘貼
oncut//剪切
ondragstart//拖動(dòng)
窗體圖片
document.images[索引]
窗體元素
document.窗體.elements[索引]
瀏覽器名稱
document.navigator.appName
document.navigator.plugins
轉(zhuǎn)向制定頁面:
window.navigate("")
window.location.href=""
符合標(biāo)準(zhǔn)的去除鏈接虛線兩種方式:
1:通過links(窗體鏈接)
<script type="text/javascript">
function aa(){
for(i=0;i<document.links.length;i++){
document.links[i].onfocus=function(){
this.blur()
}
}
}
window.onload=aa
</script>
2:通過鏈接a對(duì)象
<script language="javascript">
aa=function(){
var obj=document.getElementsByTagName("a")
for(i=0;i<obj.length;i++){
obj[i].onfocus=function qq(){
this.blur()
}
}
}
window.onload=aa
</script>
文本值改變的時(shí)候:
<input type="text" onpropertychange="alert('值改變了')">
窗口的父對(duì)象:
window.opener
框架的父對(duì)象:
window.parent
給文本增加鏈接:
<script language="javascript" defer>
var text="百度"
text=text.link("http://www.baidu.com")
document.write(text)
</script>
////////////////////////////實(shí)例:
<script language="javascript" defer>
var pic="<img src=''>"
pic=pic.link("http://www.baidu.com")
document.write(pic)
</script>
獲取css樣式表
document.stylesheets[索引].rules[索引]//獲取第幾個(gè)<style type="text/css"></style>里的第幾個(gè)樣式
document.stylesheets[索引].rules[索引].selectorText//獲取css樣式名稱
document.stylesheets[索引].rules[索引].style.cssText//獲取css樣式內(nèi)容
例子:
<style>
body {color:red}
p {color:blue}
</style>
<style>
span {color:red}
table {color:blue}
</style>
<body >
頁面z坐標(biāo)(z-index)://對(duì)象的z-index坐標(biāo)必須在absolute情況下才能起作用
例子:
<style type="text/css">
#pagea {
width:200px;
height:200px;
position:absolute;
left:100px;
top:100px;
background:red
}
#pageb {
width:200px;
height:200px;
position:absolute;
left:200px;
top:200px;
background:black;
}
</style>
<script type="text/javascript">
var firstIndex=1
function zIndexChange(obj){
document.getElementById(obj).style.zIndex=firstIndex
firstIndex++
}
</script>
<div id="pagea" >頁面a</div>
<div id="pageb" >頁面b</div>
按住鼠標(biāo)左鍵N秒執(zhí)行:
<script language="javascript">
var timerAl
function al(){
alert("您按住鼠標(biāo)2秒沒動(dòng)!請(qǐng)放松,謝謝!")
}
document.onmousedown=function(){
timerAl=setTimeout("al()",2000)//此處一定不能加var ,加了表示每次執(zhí)行的時(shí)候都從新聲明
}
document.onmouseup=function(){
clearTimeout(timerAl)
}
</script>
本地實(shí)現(xiàn)圖片現(xiàn)實(shí):
<script language="javascript">
function getError(){
imgdiv.innerHTML=''
alert("格式錯(cuò)誤或者不存在這個(gè)文件")
}
function checkSize(obj){
var w=obj.clientWidth
var h=obj.clientHeight
if(w>164){
obj.width=164
obj.heigth=164/w*h
}
}
function showImg(filesrc){
imgdiv.innerHTML="<img id='tu' src='file:///"+filesrc+"' onerror='getError()' onload='checkSize(this)'>"
}
</script>
<input type="file" size=25 onchange="showImg(this.value)"><br><br><br><br>
<div id="imgdiv" align="center"></div>
表格的相關(guān)操作:
1:左右移動(dòng)表格行:(表格外)
<script language="javascript">
function tb1doTr(obj){
var tr=document.createElement("<tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb2doTr(this)'></tr>")
var td1=document.createElement("<td align='center'></td>")
var td2=document.createElement("<td align='center'></td>")
var text1=document.createTextNode(obj.cells[0].innerHTML)
var text2=document.createTextNode(obj.cells[1].innerHTML)
td1.appendChild(text1)
td2.appendChild(text2)
tr.appendChild(td1)
tr.appendChild(td2)
document.getElementById("tb2_tbody").appendChild(tr)
document.getElementById("tb1").deleteRow(obj.rowIndex)
}
function tb2doTr(o){
tr=document.getElementById("tb1").insertRow()
tr.bgColor="#efefef"
tr.onmouseover=function(){this.bgColor="#efef00"}
tr.onmouseout=function(){this.bgColor="#efefef"}
tr.onclick=function(){tb1doTr(this)}
for(i=0;i<o.cells.length;i++){
var td=tr.insertCell()
td.innerHTML=o.cells[i].innerHTML
}
document.getElementById("tb2").deleteRow(o.rowIndex)
}
</script>
<table cellpadding="0" cellspacing="0" border="1" width="300" id="tb1" style="float:left;text-align:center">
<tr>
<td bgcolor="#efefef" align="center">行</td>
<td bgcolor="#efefef" align="center">值</td>
</tr>
<script type="text/javascript">
for(i=1;i<=20;i++){
document.write("<tr bgColor='#efefef' onmouseover=this.bgColor='#efef00' onmouseout=this.bgColor='#efefef' onclick='tb1doTr(this)'><td align='center'>第"+i+"行</td><td align='center'>第"+i+"行的值</td></tr>")
}
</script>
</table>
<table cellpadding="0" cellspacing="0" border="1" width="300" id="tb2" style="text-align:center">
<tbody id="tb2_tbody">
<tr>
<td bgcolor="#efefef" align="center">行</td>
<td bgcolor="#efefef" align="center">值</td>
</tr>
</tbody>
</table>
2:移動(dòng)表格行的位置(表格內(nèi))
單擊文字保存圖片:
<iframe height="0" width="0" src="偷拍的.jpg" id="saveImage"></iframe>
<a href="###" >Click Me</a>
//這里千萬不能寫出:document.getElementById('saveImage')
單元格顏色漸退:
<script type="text/javascript">
var m=60
function changeColor(){
var obj=document.getElementById("tb1")
obj.bgColor="rgb(100%,"+m+"%,100%)"
m+=5
var st=setTimeout("changeColor()",10)
if(m>100){
clearTimeout(st)
m=60
obj.bgColor="#efefef"
}
}
</script>
<table cellpadding=0 cellspacing=0 width=100 border=0>
<tr><td bgcolor="#efefef" onmouseout="changeColor()" id="tb1"> </td></tr>
</table>
常識(shí):
<a href="#"></a>
<a href="html.exe"></a>
<a href="mailto:icyzhl@163.com?cc=icyzhl@126.com&subject='你好'&body='你好啊'"></a>
<a href="#ffff"></a>
<a name="ffff"></a>
<a href="javascript:alert('你好')"></a>
<a href="####"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(null)"></a>
<a href="javascript:;"></a>
<a href="#" ></a>
<span style="cursor:hand"></span>
a:link {font-size:12px;color:red;text-decoration:none;font-style:italic}
a:link {font-size:14px;color:red;font-weight:normal;text-decoration:underline;font-style:normal}
a:link {font-size:12px;font-family:華文行楷;font-weight:bolder;color:red;text-decoration:overline}
style="writing-mode:tb-rl"
style="writing-mode:lr-tb"
<form>
<select onchange="document.body.style.background=this.options[this.selectedIndex].value">
<option value=url(1.jpg)>背景1
<option value=url(2.jpg)>背景2
<option value=url(3.jpg)>背景3
</select></form>
調(diào)用css
favicon
<link href="" rel="shortcut icon">
<link href="" rel="bookmark">
<link href="css文件地址" rel="stylesheet">
<style type="text/css">
在此寫css
</style>
<span style="css樣式內(nèi)容"></span>
<style style="text/css">
@import url("")
</style>
text-decoration:none
text-decoration:overline
text-decoration:underline
text-underline-position:above/below(IE專有屬性)
text-decoration:line-through
text-transform:uppercase/lowercase/capitalize
font-size:大小
font-family:字體
font-style:normal/italic
font-weight:normal/bold/bolder/lighter
line-height:120%
writing-mode:tb-rl/lr-tb
text-indent:?px
綜合 font:樣式 變形 加粗 字號(hào)/行高 字體
example----font:italic bold 12px/120% 華文行楷
定義 調(diào)用
.css1 {} class=css1
#css2 {} id=css2
table {} 說明table 中的所有屬性
table#css1 {} table中的所有css1都有這個(gè)屬性 id=css1
table.css1 {} table中的所有css1都有這個(gè)屬性 class=css1
body,table,input {} table和body和input都有這個(gè)屬性
table #css1 table中其他標(biāo)簽擁有的屬性 <table>...<span id=css1
table .css1 table中其他標(biāo)簽擁有的屬性 <table>...<span class=css1
image:
vaspace hspace width heigth dynsrc src lowsrc alt
form :
input type="text/password/radio/checkbox/sunmit/file/hidden/botton"
select option
textarea
font:
i b u strike < > & " ® ©
在網(wǎng)頁中加入html代碼只要在代碼前后加入:<xmp>和</xmp>就可以了
size color
basefont color:red;... base href="" base target="_top"
table td tr:
align=center/right/left leftmargin topmargin cursor oncontextmenu
ondragstart oncopy oncut onpaste onselectstart bgcolor background
width heigth id cellpadding cellspacing border
bgsound:
loop=-1/infinite balance volume autostart
marquee:
direction:up/down/left/right
align:center/right/left/right
behavior:scroll slide alternate
vspace hspace height width bgcolor
scrolldelay scrollamount
<span title="你好">你好</span>
<span onmouseout="window.status=''" style="cursor:hand"></span>
favicon.icon <link href="" rel="shortcut icon">
oncontextmenu="return false"
ondraystart="return false"
onselectstart="return false"
oncopy="return false"
onpaste="return false"
oncut="return false"
<meta name="description" content="內(nèi)容"
<meta name="keywords" conternt="內(nèi)容"
<meta name="author" content="張虹亮"
<meta http-equiv="page-enter" content="revealtrans(duration='3';transition='23')"
<meta http-equiv="page-exit" content="revealtrans(duration='3';transition='23')"
<meta http-equiv="content-type" content="text/html;charset=gb2312"
取消表單按下時(shí)的虛線
<input type=radio hidefocus=true name=sex>你好
<input type=radio name=sex onfocus="this.blur()">你不好
加入收藏:
<form>
<input type="submit" ></form>
a的全寫:anchor
<base target="_top">防止點(diǎn)擊鏈接時(shí)新窗口都是在頂部打開
<p><br>比<br><p>多一行
如何讓網(wǎng)頁中的廣告自動(dòng)關(guān)閉:
---在網(wǎng)頁廣告條的網(wǎng)頁head和/head中加入:
<script language="javascript">
function close(){
setTimeout("self.close()",5000)
}//本網(wǎng)頁自動(dòng)在5秒鐘關(guān)閉
</script>
或者:
function close(){
self.close()
}
setinterval("close()",5000)
</script>
frameset frame iframe:
border bordercolor src name rows cols framespacing frameborder
flash透明:
<param name="wmode" value="transparent">
半透明的表格:
<table cellpadding=0 cellspacing=0 width=200 height=100><tr><td style="background-color:red;filter:alpha(opacity=20)"> </td></tr></table>
陰影表格:
<div style="filter:shadow(color=red,direction=120);width=200;padding-right:10;padding-bottom:10">
<table cellpadding=0 cellspacing=0 width=200 height=100 bgcolor=red><tr><td> </td></tr></table></div>
特色的表單:
<form>
<input type="button" value="空的" disabled>
<input type="text" value="520" readonly>
<input type="text" size=30 style="border-top:1px dashed red;border-bottom:1px dashed black;border-right:1px dashed blue;border-left:1px dashed orange;"
</form>
<embed src="" width height>
<bgsound src="" loop=-1/infinite autostart=false/true>
<param name="wmode" value="transparent">
背景更換效果
<style type="text/css">
.css1 {background-image:url("1.jpg")}
.css2 {background-image:url("2.jpg")}
</style>
<table><tr><td onmouseout="this.className='css1'" >sage</td></tr></table>
關(guān)閉網(wǎng)頁
<script language="javascript">
function closewindow(){
window.opener=null
window.close()
}
</script>
調(diào)用:<form><input type="button" ></form>
鼠標(biāo)指向時(shí)變背景顏色的表格
<table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20><tr><td onmouseout="this.bgColor='#333333'" bgcolor="#ffffff"></td></tr></table>
細(xì)線表格1:
<table cellpading=0 cellspacing=1 bgcolor=red width=100 height=20><tr><td bgcolor="#fffff"></td></tr></table>
細(xì)線表格2:
<table border=1 bordercolor="#000000" width=100 height=20><tr bordercolor="#ffffff"><td></td></tr></table>
細(xì)線表格3:
<input type="text" size=12 readonly="readonly">
<input type="text" size=12 disabled="disabled">
凹下的立體表格:
<table width="100" border="1" cellspacing="1" cellpadding="0" bgcolor=red>
<tr><td bgcolor="#ff3333"> </td><td bgcolor="#ff3333"> </td></tr>
<tr><td bgcolor="#ff3333"> </td><td bgcolor="#ff3333"> </td></tr>
<tr><td bgcolor="#ff3333"> </td><td bgcolor="#ff3333"> </td></tr>
</table>
凸出的立體表格:
<table width="100" border="1" cellspacing="0" cellpadding="0" bordercolorlight=#333333 bordercolordark=#efefef>
<tr><td bgcolor="#FF0000"> </td><td bgcolor="#FF0000"> </td></tr>
<tr><td bgcolor="#FF0000"> </td><td bgcolor="#FF0000"> </td></tr>
<tr><td bgcolor="#FF0000""> </td><td bgcolor="#FF0000"> </td></tr>
</table>
有間距的表格:
<table width="100" border="1" cellspacing="5" cellpadding="0" bgcolor=gray>
<tr><td bgcolor="#999999"> </td></tr>
</table>
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)
<input style="ime-mode:disabled"> 關(guān)閉中文輸入法
防止別人frame你的網(wǎng)頁:
<script language="javascript">
if(top.location!=self.location){
top.location=self.location
}
</script>
1. oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵
<table border oncontextmenu=return(false)><td>no</table> 可用于Table
2. <body onselectstart="return false"> 取消選取、防止復(fù)制
3. onpaste="return false" 不準(zhǔn)粘貼
4. oncopy="return false;" oncut="return false;" 防止復(fù)制
5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)
6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)
7. <input style="ime-mode:disabled"> 關(guān)閉輸入法
8. 永遠(yuǎn)都會(huì)帶著框架
<script language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁
// --></script>
9. 防止被人frame
<SCRIPT LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
10. 網(wǎng)頁將不能被另存為
<noscript><iframe src=*.html></iframe></noscript>
11. <input type=button value=查看網(wǎng)頁源代碼
>
12.刪除時(shí)確認(rèn)
<a href='javascript:if(confirm("確實(shí)要?jiǎng)h除嗎?"))location="boos.asp?&areyou=刪除&page=1"'>刪除</a>
<a href="return confirm("確認(rèn)刪除嗎?")"
13. 取得控件的絕對(duì)位置
//Javascript
<script language="Javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>
//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--></script>
14. 光標(biāo)是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">
15. 判斷上一頁的來源
javascript:document.referrer
16. 最小化、最大化、關(guān)閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" VALUE="Close"></OBJECT>
<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=關(guān)閉 onclick=hh3.Click()>
本例適用于IE
17.屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!"); //可以換成ALT CTRL
}
document.onkeydown=look;
</script>
18. 網(wǎng)頁不會(huì)被緩存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">
19.怎樣讓表單沒有凹凸感?
<input type=text style="border:1 solid #000000">
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea>
20.<div><span>&<layer>的區(qū)別?
<div>(division)用來定義大段的頁面元素,會(huì)產(chǎn)生轉(zhuǎn)行
<span>用來定義同一行內(nèi)的元素,跟<div>的唯一區(qū)別是不產(chǎn)生轉(zhuǎn)行
<layer>是ns的標(biāo)記,ie不支持,相當(dāng)于<div>
21.讓彈出窗口總是在最后面:
<body onblur="this.focus();">
22.不要滾動(dòng)條?
讓豎條沒有:
<body style='overflow:scroll;overflow-y:hidden'>
</body>
讓橫條沒有:
<body style='overflow:scroll;overflow-x:hidden'>
</body>
兩個(gè)都去掉?更簡單了
<body scroll="no">
</body>
23.怎樣去掉圖片鏈接點(diǎn)擊后,圖片周圍的虛線?
<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>
24.電子郵件處理提交表單
<form name="form1" method="post" action="mailt****@***.com" enctype="text/plain">
<input type=submit>
</form>
25.在打開的子窗口刷新父窗口的代碼里如何寫?
window.opener.location.reload()
26.如何設(shè)定打開頁面的大小
<body >
打開頁面的位置<body >
27.在頁面中如何加入不是滿鋪的背景圖片,拉動(dòng)頁面時(shí)背景圖不動(dòng)
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
28. 檢查一段字符串是否全由數(shù)字組成
<script language="Javascript"><!--
function checkNum(str){return str.match(\/D\)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
29. 獲得一個(gè)窗口的大小
document.body.clientWidth; document.body.clientHeight
30. 怎么判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");
31.TEXTAREA自適應(yīng)文字行數(shù)的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
32. 日期減去天數(shù)等于第二個(gè)日期
<script language=Javascript>
function cc(dd,dadd)
{
//可以加上錯(cuò)誤處理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>
33. 選擇了哪一個(gè)Radio
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" >
</BODY></HTML>
34.腳本永不出錯(cuò)
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// -->
</SCRIPT>
35.ENTER鍵可以讓光標(biāo)移到下一個(gè)輸入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
window.event.returnvalue="false"
window.event事件可以返回值,,,
window.event.srcElement.returnValue=""
例子:<body ontextmenu="window.event.returnvalue='false'">//禁止鼠標(biāo)右鍵
判斷上一頁的來源:javascript:document.referrer;
讓網(wǎng)頁不被別人 iframe:
<script>
if(top.location!=self.location){
top.location=self.location
}
</script>
讓頁面打開最大化:
<script>
window.resizeTo(screen.width,screen.height)
window.moveTo(0,0)
//相關(guān)函數(shù):window.moveTo,window.moveBy,window.resizeTo,window.resizeTo
</script>
javascipt相關(guān)對(duì)象:
math.max(x,y)
math.min(x,y)
math.ceil(x)
math.floor(x)
math.sqrt(x)
math.round(x,y)
math.random()
var qq=new Date()
qq.getYear()
qq.getFullYear()
qq.getMonth()
qq.getDay()
qq.getDate()
qq.getHours()
qq.getMinutes()
qq.getSeconds()
qq.getMilliSeconds()
qq.getTime()
string.link()
string.fontsize()
string.fontcolor()
string.bold()
string.sup()/上標(biāo)
string.sub()/下標(biāo)
string.toUpperCase()
string.toLowerCase()
string.Indexof()
string.charAt()
string.charCodeAt()
string.substr()
string.substring()
string.fromCharCode()
string.search()
鏈接a的全寫:anchor
在html和xml中相關(guān)字符引用:
' '
& &
" "
< <
> >
如果要在html網(wǎng)頁中加入html標(biāo)簽代碼(大量),加<xmp></xmp>
iframe控制父窗口:window.parent.
父窗口控制子頁面:window.子頁面名稱
用js保護(hù)網(wǎng)頁中郵箱:
<script>
name="icyzhl"
witch="163"
document.write("<a href='mailto:"+icyzhl+"@"+witch+".com+"'>")
docuemnt.write("</a>")
</script>
marquee標(biāo)記用法:
vspace;
hspace;
direction:up/left/right/down;
behavior:slide/scroll/alternate;
bgcolor;
scrolldelay;
scrollamount;
bgsound:infinite/loop=-1 autostart src
符合標(biāo)準(zhǔn)的打開新窗口
<script>
var anchors=document.getElementsByTagName("a")
for(i=0;i<anchors.length;i++){
obj=anchors[i]
if(obj.getAttribute("href") && obj.getAttribute("rel")=="external"){
obj.target="_blank"
}
}
</script>
textarea自動(dòng)高度
<textarea style="overflow-y:visible">
sdagdsg文字內(nèi)容
</textarea>
隱藏表單按下的虛線;
<input type="radio" hidefocus="hidefocus">
<input type="radio" onfocus="this.blur()">
只讀文本:
<input type="text" value="xagd" disabled="disabled">
<input type="text" value="xagd" readonly="readonly">
文本值發(fā)生改變:
<input type="text" onpropertychange="alert('xx')">
不能為中文:
<input type="text" style="ime-mode:disabled">
收藏夾個(gè)性圖標(biāo):
<link rel="ShortCut Icon" href="favicon.ico"http:////favorite
以上div+css技巧和javascript技巧如果大家有什么意見可以聯(lián)系我本人哈.
QQ:499375381