javascript是一種基於瀏覽器在客戶端運行的腳本語言
什麼是腳本語言：
腳本語言本身不提供任何功能，它的所有基礎功能都是系統提供給它的。大多數情況，直接解析，無需編譯，有些語言小部分需要編譯
javascript 的四種聲明方式
1、<ahref="javascript:alert('hello world!')">第一個javascript</a>
2、點擊事件
<divοnclick="alert('你好世界')">容器</div>
3、寫在任意位置
<scriptlanguage="javascript">
alert('彈框');
</script>
4、文件源方式
<script src="文件源.js"></script>
javascript當中的執行符：1、分號 2、回車
javascript的註釋：
//單行註釋
/*
多行註釋
*/
變量聲明
1、var 開始
2、不能有敏感關鍵詞
javascript當中的數據類型有
整形
var i=123
alert(typeof(i)) //測試類型
var i=077 //八進制
var i=0x21 //十六進制
字符串（直接加雙引號或單引號）
雙引號和單引號無區別：都不能解析變量，都能解析特殊字符\n,\r,\t等
var t="字符串";
字符串拼接符：+
布爾
var bo=true;
varbo=false;
對象
var d=newDate(); //獲得的時間爲客戶端時間
alert(d.getFullYear);
空對象
var d=null;
alert(typeof(d));
當使用一個未聲明的變量的時候，它的數據類型爲undefined類型
NaN非數字類型
但是js是面向對象的，也可以說js只有一種數據類型，就是對象類型
var str='12345';
var tt=new String('1231');
自動類型轉換
字符串'0'在php中爲假，在js中爲真
var t=0;
if(t){
alert('真');
}else{
alert('假');
}
強制類型轉換
var t=1.999;
alert(parseInt(t)); //強制轉整
parseFloat //強制浮點轉換
運算符
+ — * / %
++ —— =
+= —= /= *= %=
== === != !==
instanceof
&& || !
三元運算符 ? :
New 創建對象實例
void 執行表達式而忽略結果 //加在超鏈接中，不使用css就能做到超鏈接點擊不變色
<ahref="javascript:void(0)"></a>
typeof 類型檢測
length 檢測長度
var g = newArray(1,2,3);
alert(g.length);
delete 刪除new創建的對象
. 快速存取對象屬性或方法
， 按順序讀取左右兩邊的數據
[] 數組存取
this 返回當前對象的引用
流程控制
if(){
}else if(){ //js中的else if是帶空格的
}
=========================
switch(){
case 1:
break;
case 2:
break;
default:
}
==============================
var i=0;
document.write('<tablewidth="800" border="0">');
while(i<100){
if(i%10==0){
document.write('<tr>');
}
document.write('<td>'+i+'</td>');
i++;
if(i%10==0){
document.write('</tr>');
}
}
document.write('</table>');
=============================
do{
}while();
============================
for(i=0;i++;i<1000){
}
函數
形參不能有默認值
function demo(n,m){
alert(123);
}
demo();
==================
function demo(){
return 123;
}
var d = demo();
alert(d);
變量作用域
函數體外聲明(存在關鍵字var纔是初始化變量)的變量就是全局變量，函數體內聲明的變量就是局部變量
全局變量在函數體內和函數體外都有效
局部變量只在函數體內有效
========================
var t=10; //全局變量
function demo(){
alert(t);
}
demo(); //輸出10
========================
var t=10; //全局變量
function demo(){
var t=5; //局部變量
alert(t);
}
demo(); //輸出5
alert(t); //輸出10
=========================
var t=10;
function demo(){
t=20; //僅僅是賦值而不是初始化變量
alert(t);
}
demo(); //輸出20
alert(t); //輸出20
變量函數 ---------------->>匿名函數 ----------------->>回調函數
function demo(n,m){
alert(n+m);
}
//demo(5,6);
var t=demo; //不加引號
alert(t); //輸出demo的函數結構
t(2,3); //變量函數
=====================
var t=function demo(n,m){
alert(n+m)
}
t(5,4); //變量函數
===================== 匿名函數
var t=function(n,m){
alert(n+m)
}
t(5,4); //匿名函數
================== 回調函數
function ys(n,m,func){
return n+m+func(n,m);
}
var g=ys(5,6,function(n,m){
return n*m;
});
alert(g); //輸出41
可變長度參數列表
function demo(){
var t=arguments;
var total=0;
for(i=0;i<t.length;i++){
total+=t[i];
}
alert(total);
}
demo(1,2,3,4,5,6,7,8,9);
默認參數寫法
function demo(n,m){
if(typeof(n)=='undefined'){
n=5;
}
if(typeof(m)=='undefined'){
m=6;
}
alert(m+n);
}
demo();
內部函數
js中的內部函數不需要寫在調用處的上面
不可以在外部使用內部函數
function nb(n,m){
return n*m+test(n,m);
function test(n,m){
return n+m;
}
}
var t=nb(5,6);
alert(t);
面向對象
js裏面沒有類，只有對象；
js和php的對比：
PHP 對象 類
JS 對象實例 對象
聲明對象的三種方式：
1、實例化一個新的對象實例，向對象實例當中追加成員屬性和成員方法
var person =new Object();
person.name= '姓名';
person.sex ='男';
pereon.age =18;
person.say =function(){
alert('我叫'+person.name+'我的性別'+this.sex+'年齡'+this.age);
}
person.say(); //調用
2、聲明一個對象，實例化
functionperson(name,sex,age){
this.name =name;
this.sex =sex;
this.age =age;
this.say =function(){
alert('我叫'+this.name+'我的性別'+this.sex+'年齡'+this.age);
}
}
var p = newperson('姓名','性別','年齡');
3、JSON(js輕量級數據交換對象)方式 js快速聲明對象【重點】
var person ={name:'姓名',sex:'性別',age:18,say:function(){
alert('我叫'+this.name+'年齡'+this.age+'性別'+this.sex);
}}
person.say();
遍歷對象
for(臨時變量 in 對象){
}
for(a in person){
document.write(a+''+person[a]+'<br />');
}
with //對一段代碼使用默認的對象
with(person){
say();
say();
}
數組聲明
沒有數組類型，只有數組對象
1、快速聲明
var arr=['值1','值2'];
alert(arr);
alert(typeof(arr)) //object
delete arr[1]; //刪除值2
for(a in arr){ //數組的遍歷
document.write(a+''+arr[a]+'<br />');
}
2、標準聲明
var b = new Array();
BOM1
js知識點的組成:
BOM browser object model 瀏覽器對象模型
地址欄 狀態欄 收藏夾 滾動條 頁面組合在一起
DOM document object model 文檔對象模型
DOM是BOM的一個部分，很多效果都是在文檔裏面顯示的
document,form ,image
js效果原理：
在某事件源上面產生了某個事件觸發了事件處理程序。在事件處理程序當中找對象，改屬性
元素：
頁面當中可見和不可見標籤(<tag>)，都可以叫做元素
元素之間是有層次結構的
元素可以轉爲對象：
元素可以理解爲HTML裏面的標籤，若想改變它，需要把元素轉爲對象
===========================
<div id="a">
</div>
<script>
var a =window.document.getElementById('a');//window當前窗體下的文檔窗體
alert(a); //輸出object
a.style.backgroundColor='pink';
a.innerHTML = '內部html文檔';
</script>
============================
所有對象以window開始，可有可無
dom的執行順序是從上到下執行
常用的DOM對象屬性
------------------Object.target
<a href="http://www.baidu.com" target="_blank"id="a">百度</a>
<script>
var d =window.document.getElementById('a');
alert(d.target); //彈出target屬性
d.target ="_self";
</script>
------Object.innerHTML 包含內部HTML標籤的文檔
------Object.innerText 不包含內部標籤的文字【與火狐不兼容，火狐下叫 textContent】
解決方法
if(typeof(a.textContent)=='undefined'){
alert(a.innerHTML);
}else{
alert(a.textContent);
}
如何獲取對象中的屬性
使用for....in語句
for(a in objectTest){
window.document.write(a+' '+b[a]+'<br/>');
}
------Object.style 樣式（Object數據類型）
var a =window.document.getElementById('sl').style;
for(b in a){
window.document.write(b+''+a[b]+'<br />');
}
-------Object.style.backgroundColor
--------Object. //表單
<form name="fname">
<input type="text"name="tname" value="表單文字" />
</form>
var h=window.document.fname.tname;
h.value='';
-------Object.className //樣式名(class的名字)
<button οnclick="show()"></button>
事件源 -------在什麼地方發生的事件 如：button標籤
事件 --------在什麼情況下發生的事件 如：onclick
事件處理程序 ----事件的處理 如：show()
任何元素都可以作爲事件源，一個事件源上可以有多個事件
事件
mouseover 鼠標懸停
<div οnmοuseοver="show()"></div>
mouseout 鼠標離開
mousemove
keypress
keyup 釋放某個按鍵時
onblur 失去焦點
光標在某處，然後離開則失去焦點
常用事件
onblur：（使用在表單元素中，當元素失去焦點的時候執行）
onchange：（使用在表單元素中，當某些東西改變時執行）
onclick：（鼠標點擊一個元素時執行）
ondblclick：（鼠標雙擊一個元素時執行）
onfocus：（使用在表單元素中，當元素獲得焦點時執行）
onkeydown： （按下某個按鍵時執行）
onkeypress：（按下和釋放某個按鍵時執行）
onkeyup：（釋放某個按鍵時執行）
onmousedown：（按下鼠標按鍵時執行）
onmousemove：（鼠標光標在元素上移動時執行）
onmouseout：（鼠標光標移開元素時執行）
onmouseover：（鼠標光標移到元素上時執行）
onmouseup：（當釋放鼠標按鍵時執行）
onreset：（用在表單元素中，當表單重置時執行）
onselect：（用在表單元素中，當元素被選擇時執行）
onsubmit：（用在表單元素中，當表單提交時執行）
onload：（在body標籤中使用，載入頁面的時候執行）
onunload：（用在body標籤中，當關閉頁面時執行）
事件中this的使用
========= 使用this前 ==========
<inputtype="text" οnclick="show()" value="請輸入用戶名" id="i"/>
<script>
function show(){
var b =window.document.getElementById('i');
b.value='';
}
</script>
=========== 使用this時 ==========
<inputtype="text" οnclick="show(this)" value="請輸入用戶名" />
<script>
function show(obj){
obj.value='';
}
</script>
三種事件處理程序的聲明方法
1、將事件處理函數名寫在事件內
<divοnclick="show()">事件</div>
function show(){
alert('事件處理');
}
變種：超鏈接內直接寫彈出
<ahref="javascript:alert('')"
2、通過匿名函數處理
vard=document.getElementById('a');
d.onclick = function(){
alert('事件處理');
}
3、for某個id，時機是，在onclick事件時觸發
<scriptfor="abc" event="onclick">
alert('事件處理');
</script>
禁掉鼠標右鍵，或是使用右鍵彈出某個窗口
必須要對這個事件return false;
<body οncοntextmenu= "return show()">
<script>
functionshow(){
alert('點擊右鍵彈出');
returnfalse;
}
</script>
</body>
禁止複製
<bodyonselectstart="return false">
</body>
常用事件加載，卸載
<bodyοnlοad="alert('你好，世界')"> //進入頁面時輸出
</body>
<bodyοnunlοad="alert(正在退出)"> //關閉頁面時輸出
</body>
關於彈窗
alert()方法時window對象下面的方法
window.alert();
關閉窗口方法
window.close();
禁用超鏈接
<ahref="www.baidu.com" οnclick="return false">百度</a>
確認消息框 comfirm()
<a href="www.baidu.com" οnclick="return confirm('你確定刪除/訪問百度?')">百度</a>
實際確定返回true，取消返回false
moveBy移動元素窗體,指定窗口在原有位置移動
<button οnclick="st()"></button>
function st(){
window.moveBy(200,200);
}
moveTo 移動窗口，直接移動到指定位置
打印
<buttonοnclick="window.print()"></button>
prompt
彈出窗口取得用戶輸入值，賦值給str
var str =window.prompt('輸入數值','測試');
alert(str); //將取得的值彈出
//創建img標籤賦值給對象
var img = document.createElement('img')
彈出新窗口
open
<script>
//location是否顯示地址欄，toolbar是否顯示工具欄
window.open('close.html','aaa','location=no','toolbar=yes');
</script>
調整窗口大小
<buttonοnclick="window.resizeBy(100,100)">調整窗口</button> //每次點擊調整一次
resizeTo //直接調整爲對應大小
滾動窗口
scrollBy
<buttonοnclick="scrollBy(0,20)">滾動</button> //每點擊一次滾動一次
scrollTo //直接移動至，可以作爲錨點
window對象的方法
setTimeout() 定時執行,在2秒後，將背景顏色變爲orange
varone=setTimeout(function(){
window.document.bgColor='orange';
},2000);
clearTimeout() 清除週期性執行
clearTimeout(one)
跳轉
location
window.location.href="http://www.baidu.com";
setInterval(函數，時間) 週期性執行
============每個一秒改變數字==============
<divid="d"style="width:100%;font-size:20;color:red;text-align:center">
0
</div>
<script>
i=0;
setInterval(function(){
var d =window.document.getElementById('d');
d.innerHTML = i;
i++;
},1000)
</script>
clearInterval 清除週期性計時器
==========鼠標放上時開始計時，離開時取消計時
<div id="d" οnmοuseοver="start()"οnmοuseοut="stop()"
style="width:100%;font-size:20;color:red;text-align:center">0</div>
<script>
var i=0;
var jsp=null;
function start(){
jsq=setInterval(function(){
vard = window.document.getElementById('d');
d.innerHTML= i;
i++;
},1000)
}
function stop(){
clearInterval(jsq);
}
</script>
雙擊後頁面自動滾動,單擊後停止滾動效果
<bodyοndblclick="start()" οnclick="stop()">
<script>
var s=null;
function start(){
s=setInterval(function(){
window.scrollBy(0,20);
},100);
}
function stop(){
clearInterval(s);
}
</script>
點擊後，容器逐漸向上隱藏
<div id="one"style="width:400px;height:800px;background-color:red"οnclick="show()"></div>
<script>
function show(){
setInterval(function(){
//找對象
vara = $('one');
height= parseInt(a.style.height);
height-= 20;
//解決瀏覽器兼容
if(height<=10){
a.style.display = 'none';
}else{
a.style.height = height;
}
},50);
}
function $(id){
return window.document.getElementById(id);
}
</script>
飄動框效果
自動獲得瀏覽器寬高
body.clientHeight body.clientWidth
===============piaodong.html=============
<div id="img"
style="width:309px;height:350px;position:absolute;top:0;left:0"
οnmοuseοut="start()"οnmοuseοver="stop()"><img src="11.jpg"/></div>
<script>
var ts = 5;
var ls = 5;
var jsq = null;
//週期性執行
function start(){
//進行週期執行方法，並賦值給jsq，在關閉計時直接clearIntval(jsq)
jsq =setInterval(function(){
//找到對象img，將元素中img id的div轉爲js當中的對象
var img =window.document.getElementById('img');
//由於top有單位，所以強制取整
var _top = parseInt(img.style.top);
var _left =parseInt(img.style.left);
//把得到的t和l分別各加5個像素，由於超過頁面的寬或者高後需要變成減去5個像素，所以說單獨的將其5這個單位賦值給變量，待會l或和t如果超過頁面寬高，則ls或ts*-1 即完成了 當前高-5的操作
//document.body.clientWidth是獲得當前客戶端當中body體的寬
//document.body.clientHeight是獲得高
//因此body寬減圖片的寬，即得到圖片最寬能移動到的位置
if(_top>=(document.body.clientHeight-350)||_top<0){
//當達到限定位置的時候將其反轉
ts = ts*-1;
}
if(_left>=(document.body.clientWidth-309)||_left<0){
ls = ls*-1;
}
_top +=ts;
_left +=ls;
//把新的top和left位置重新賦給新對象
img.style.top =_top+'px';
img.style.left =_left+'px';
},20);
}
//執行開始飄動
start();
function stop(){
clearIntval(jsq);
}
</script>
關閉父窗體時，子窗體也跟着關閉(當在父窗體中調用open方法時,引用子窗體)
parent.html child.html
通過closed屬性判斷子窗體是否關閉，若未關閉，這關閉（當子窗體關閉時，closed 值爲true）
==============parent.html=======
<bodyοnunlοad="c()">
<script>
var w =window.open('child.html','aa');//打開新頁面的同時，將其作爲對象賦值給w
functionc(){
if(!w.closed){
w.close();
}
}
</script>
在子窗體中引用父窗體對象window.opener
=================child.html========
<body>
<buttonοnclick="red()">紅</button>
<buttonοnclick="green()">綠</button>
<buttonοnclick="blue()">藍</button>
這是子窗體
<script>
var o = window.opener.document;
function red(){
o.bgColor= 'red';
}
function green(){
o.bgColor= 'green';
}
function blue(){
o.bgColor= 'blue';
}
</script>
</body>
瀏覽器下方滾動文字
window.defaultStatus
===================defaultStatus.html========
<script>
//在裏面做一個循環，讓循環數小於j值，來產生空格這個字符串
var j = 0;
var ds = 1;
setInterval(function(){
var str = '滾動文字';
j = j+ds;
if(j>=200||j<0){
ds= ds*-1;
}
var t = '';
for(i=0;i<=j;i++){
t= t+' ';
}
str = t+str;
window.defaultStatus = str;
},100);
</script>
window.location對象
location.html
屬性：href 跳轉
window.location.href='http://www.baidu.com';可以使用setTimeout() 定時跳轉
方法： replace() 頁面替換
window.location.replace('http://127.0.0.1/bbs');
reload() 頁面重載
//使用重載顯示時鐘
<script>
var d=new Date();
document.write(d);
setTimeout(function(){
window.location.reload();
},1000);
</script>
window.history
window.history.back() //後退方法，後退到表單時，能記住提交時的表單值
window.history.forward() //前進方法
window.history.go(2) //前進2頁
window.history.go(-2) //後退2頁
BOM3
屏幕對象
分辨率
document.write(screen.availHeight+'<br />'); //實際像素高
document.write(screen.availWidth+'<br/>'); //實際像素寬
document.write(screen.colorDepth+'<br/>'); //顏色深度
document.write(screen.height+'<br/>'); //高
document.write(screen.width+'<br/>'); //寬
瀏覽器
document.write(navigator.appCodeName+'<br/>');
document.write(navigator.appVersion+'<br/>');
document.write(navigator.appName+'<br/>');
document.write(navigator.platform+'<br/>');
document.write(navigator.userAgent+'<br/>');
=============判斷瀏覽器版本方法============
var str=navigator.appVersion;
//split(';',str);
var arr=str.split(';');
if(arr[1]==' MSIE 7.0'){
alert('你的瀏覽器版本過低，可能會泄漏你的用戶隱私');
}
其他對象
=====加入收藏夾======
<ahref="javascript:window.external.AddFavorite('http://www.baidu.com','百度')">把本站加入收藏</a>
設爲首頁
this.style.behavior=’url(#default#homepage)’;
this.setHomePage(’http://www.indexseo.cn/’);"
複製代碼 剪切板對象
window.clipboardData.setData('text',d.innerHTML);
選中的文檔
document.selection.createRange()
vard=document.selection.createRange();
alert(d.text);
框架對象
7種方法找對象
通過名稱找到對應的 document.frames[‘main’]
通過名稱對象 document.frames.main.document
通過item document.frames.item(2)
通過item("")document.frame.item(“q”)
直接通過名稱window.top.main
通過frames數組的個數 window.top.frame[2]
通過top數組 window.top[‘main’];
得到當前窗體的父框架對象
window.parent.frames;
得到當前窗體父框架的父框架對象
window.parent.parent.frames;
得到最上級父框架對象
window.top.frames;
事件對象
把事件來源元素轉爲對象
=========srcElement.html========
<div οnmοuseοver="show()">事件來源元素window.event.srcElement</div>
function show(){
var t = window.event.srcElement;
t.style.background= 'gray';
}
獲得鍵盤碼
==========keyCode.html========
事件:onkeydown
對象：event.keyCode
<bodyοnkeydοwn="haha()">
<script>
function haha(){
if(event.keyCode==27){
window.close(); //按esc鍵關閉瀏覽器
}
}
</script>
</body>
瀏覽器彈出的連接地址是絕對地址
img.src
========2個函數實現截取瀏覽器中url的文件名========
function parseImg(str){
var arr=str.split('/');
return arr.pop();
}
function parseImg(str){
varpos=str.lastIndexOf('/')+1;
return str.substr(pos);
}
取消事件的層級關係
==========具有層級關係，同時彈出=======
<body οnclick="alert('1')">
<imgsrc="" οnclick="alert('2')" />
</body>
=========使用cancelBubble取消層級關係=====
<body οnclick="alert('1')">
<imgsrc="1.jpg" οnclick="show()" />
<script>
functionshow(){
event.cancelBubble= true;
alert('取消層級關係後');
}
</script>
</body>
事件返回值屬性
window.event.returnValue = false;
oncontextmenu = "show()"
onbeforeunload //在頁面關閉前或刷新後執行的事件
οnbefοreunlοad="window.event.returnValue='請小心'"
<body οncοntextmenu="show()"onselectstart="show()"
οnbefοreunlοad="window.event.returnValue='請小心'">
<script>
function show(){
return window.event.returnValue=false;
}
</script>
</body>
取得鼠標座標
event.clientX,event.clientY
<bodyοnmοusemοve="show()">
<script>
function show(){
window.status ='x:'+window.event.clientX+';y:'+window.event.clientY;
}
</script>
</body>
=========鼠標後面跟一張圖片===========
<body οnmοusemοve="show()">
<img src="22.jpg" id="img" />
<script>
function show(){
var x =event.clientX;
var y =event.clientY;
var img =document.getElementById('img');
img.style.position ='absolute';
img.style.left = x;
img.style.top = y;
}
</script>
</body>
ctrl、alt快捷鍵
window.event.ctrlKey
window.event.altKey
window.event.shiftKey
Dom1
window.document.all
=====通過document.all遍歷所有標籤=========
//注意className的訪問方法，既可以以下標形式也可以以對象屬性形式訪問，如
//document.all[i].className或document.all[i].type
for(i=0;i<document.all.length;i++)
{
document.write(document.all[i]['className']);
}
=====獲得頁面所有標籤對象==========
<script>
var t=window.document.all;
for(a in t){
alert(t[a].tagName);
}
</script>
document獲取元素的既有方法
getElementById //按id查找
getElementsByTagName //按標籤名查找
var t=document.getElementsByTagName('div')
t[0].innerHTML = '通過這個方法改變標籤的內容';
通過name來查找 getElementsByName
var t = document.getElementsByName('username');
如何自定義以下方法
通過class來查找
通過屬性來查找$(input['type=text'])
自定義$()函數，進行四種方式查找
#id，
.className,，
input[username]， //表單標籤的name
input[type=text]
================================================
<script>
var t = $('.y');
alert(t[0].innerHTML);
function $(who){
var flag = who.substr(0,1);
var name = who.substr(1);
//通過name來查找標籤的方法的正則
var regexName = /(\w+?)\[(\w+?)\]/;
//通過type來查找標籤的方法的正則
var regexType = /(\w+?)\[(\w+?)=(\w+?)\]/;
//存儲正則匹配內容的變量
var preArr = null;
if(flag == '#'){
returndocument.getElementById(name);
}else if(flag == '.'){
vararr = new Array();
varall = document.all;
vari = 0;
for(ain all){
if(all[a].className == name){
arr[i]= all[a];
i++;
}
}
returnarr;
}
//regexName
if(preArr = regexName.exec(who)){
vartag = preArr[1];
varname = preArr[2];
//獲取此類標籤對象
varobj = document.getElementsByTagName(tag);
vararr = [];
vari = 0;
//遍歷標籤對象，尋找name對應需求name的標籤對象
for(ain obj){
if(obj[a].name == name){
arr[i]= obj[a];
i++;
}
}
returnarr;
}
//regexType
if(preArr = regexType.exec(who)){
vartag = preArr[1];
vartype = preArr[2];
varvalue = preArr[3];
varall = document.all;
vararr = [];
vari = 0;
for(ain all){
if(all[a][type]==value){
arr[i]= all[a];
i++;
}
}
returnarr;
}else{
returndocument.geElementByTagName(who);
}
}
</script>
================================================
forms對象
document.forms
images
links
getAttribute獲得屬性值
文檔流
跟document.write有關
document.write如果直接在頁面當中使用的話，追加內容至文檔中；
如果document.write在函數裏面使用，因爲函數是一個新的容器，所以它會關閉當前窗體，開啓一個新的文檔進行寫入。url不會發生變化，文檔內容發生變化
document.close() 關閉文檔流,在兩次write之間關閉，則兩次write都是重寫而不是追加
function go(){
document.write('第一次函數體內寫入');
document.close();
document.write('第二次函數體內寫入');
}
創建元素
var img = document.createElement('img');
img.src='1.jpg';
img.title='圖片';
//分配子元素
document.body.appendChild(img); //像body中分配img子對象
//刪除元素
document.body.removeChild()
創建元素時也可以給元素指定事件
div.οnclick=function(){
var d=document.getElementById('lsjr');
document.body.removeChild(d);
}
QQ空間瀏覽圖片效果
在指定事件源上面產生一個事件，觸發一個事件處理程序，在事件處理程序當中找對象該屬性
點擊圖片，在上面創建一個元素，DIV100%，height：100%，背景是黑色透明
Dom2
多選文件上傳框,點擊增加或刪除
<button οnclick="add()">增加</button>
<button οnclick="del()">刪除</button>
<div id="f">
<inputtype="file" name="f[]" />
</div>
<script>
function add(){
var d = document.getElementById('f');
var input =document.createElement('input');
input.type='file';
input.name='f[]';
d.appendChild(input);
}
function del(){
var d = document.getElementById('f');
var input = document.getElementsByTagName('input');
d.removeChild(input[input.length-1]);
}
</script>
document其他屬性
document.title
document.bgColor
for(a in document){
document.write(a+''+document[a]+'<br />');
}
回頂部效果
<div οnclick="gotop()" id="img"style="width:140px;height:140px;
position:fixed;right:2%;bottom:10%">
<imgsrc="zero.jpg" />
</div>
<script>
function gotop(){
window.scrollTo(0,0);
}
</script>
打開頁面廣告圖片自動滾出效果
scrollup.html
<div id="one"style="width:140px;height:140px;position:fixed;
right:5px;bottom:-140px">
<imgsrc="zero.jpg" />
</div>
<script>
var jsq = null;
function t(){
jsq =setInterval(function(){
var t = document.getElementById('one');
var y = parseInt(t.style.bottom);
y++;
if(y>0){
clearInterval(jsq);
}
t.style.bottom= y+'px';
},50);
}
t();
</script>
文檔樹
parentElement() 訪問父元素
parentNode() 訪問父節點
childNodes() 訪問子節點;可以得到一個節點的所有子節點的數組
firstChild() 進入節點的第一個子節點
lastChild() 最後一個子節點
nextSibling() 進入下一個節點
previousSibling() 找到節點的前一個節點
var p =t.parentNode.parentNode.lastChild.lastChild;
alert(p.innerHTML);
多選框的全選/全不選/反選
checkbox的選中狀態是根據元素的.checked決定的.checked=true則選中
<input type="checkbox" name="f[]"value="1" />多選框<br />
<input type="checkbox" name="f[]"value="1" />多選框<br />
<input type="checkbox"οnclick="show(this.checked)" />
<button οnclick="qx()">全選</button>
<button οnclick="qbx()">全不選</button>
<button οnclick="fx()">反選</button>
<script>
function qx(){
var chk =document.getElementsByName('f[]');
for(i=0;i<chk.length;i++){
chk[i].checked=true;
}
}
function qbx(){
var chk =document.getElementsByName('f[]');
for(i=0;i<chk.length;i++){
chk[i].checked= false;
}
}
function fx(){
var chk = document.getElementsByName('f[]');
for(i=0;i<chk.length;i++){
if(chk[i].checked){
chk[i].checked = false;
}else{
chk[i].checked = true;
}
}
}
function show(set){
var chk =document.getElementsByName('f[]');
for(i=0;i<chk.length;i++){
chk[i].checked= set;
}
}
</script>
js實現滑動選項卡
<html>
<head>
<style>
#nav{
width:200px;
height:70px;
border:1px solid #ccc;
}
#nav li{
float:left;
width:63px;
height:70px;
line-height:70px;
text-align:center;
}
.bg{
background:gray;
}
#content .dis{
display:none;
}
</style>
</head>
<body>
<script>
functionshow(index,obj){
var div = obj.parentNode.parentNode;
var nav = obj.parentNode.childNodes;
var content = div.lastChild.childNodes;
for(i=0;i<nav.length;i++){
if(index== i){
nav[i].className = 'bg';
}else{
nav[i].className = '';
}
}
for(i=0;i<content.length;i++){
if(index== i){
content[i].className = '';
}else{
content[i].className = 'dis';
}
}
}
</script>
<div id="nav">
<liclass="bg" οnmοuseοver="show(0,this)">標籤一</li>
<liοnmοuseοver="show(1,this)">標籤二</li>
<liοnmοuseοver="show(2,this)">標籤三</li>
</div>
<div id="content">
<div>
<li>標籤一內容一</li>
<li>標籤二內容一</li>
<li>標籤三內容一</li>
</div>
<divclass="dis">
<li>標籤一內容二</li>
<li>標籤二內容二</li>
<li>標籤三內容二</li>
</div>
<divclass="dis">
<li>標籤一內容三</li>
<li>標籤二內容三</li>
<li>標籤三內容三</li>
</div>
</div>
</body>
</html>
form對象
屬性action method
方法focus()得到焦點 submit()提交 reset()重置
=======配合submit()實現button提交===========
<form action="http://www.baidu.com"method="post">
<inputtype="text" name="username" value="t" />
<inputtype="text" name="g" />
<buttonοnclick="su()">提交</button>
<buttonοnclick="back()">返回焦點</button>
</form>
<script>
function su(){
var frm =document.forms(0);
frm.submit();
}
function back(){
var frm =document.forms(0);
frm.username.focus();
}
</script>
禁止提交
<input type="submit" value="提交" οnclick="return false" />
js自定義提交按鈕--驗證和檢測
<input type="submit" value="提交" οnclick="return check()" />
function check(){
var frm = document.ta;
var str = '';
var flag=true;
if(frm.username.value.length<6){
frm.username.focus(); //哪個地方有錯，哪個地方獲得焦點
str = '用戶名過短\n';
flag =false;
}
if(frm.username.value.length>15){
str = '用戶名過長\n';
flag =false;
}
if(frm.password.value!=frm.repassword.value){
frm.password.focus();
str+='兩次密碼不一致\n';
flag =false;
}
//驗證郵箱正則
var regex =/\w+@([a-zA-Z0-9]+\.){1,3}(com|cn|net)/;
if(!regex.exec(frm.email.value)){
str+='郵箱格式不正確';
flag =false;
}
if(flag){
return true;
}else{
alert(str);
returnfalse;
}
}
===========失去焦點即驗證該處合法性=============
<input type="text" name="username"οnblur="checkUser()" />
<div id="r"></div>
function checkUser(){
document.forms[0].username.focus();
vard=document.getElementById('r');
d.innerHTML='用戶名錯誤';
}
selectedIndex
根據不同的option選項顯示不同的圖片
<select οnchange="show(this.selectedIndex,this)">
<optionvalue="ren_h_1.gif">上</option>
<optionvalue="ren_q_1.gif">下</option>
<optionvalue="ren_l_1.gif">左</option>
<optionvalue="ren_r_1.gif">右</option>
</select>
<img src="images/ren_q_1.gif" id="s" />
function show(index,obj){
var img =document.getElementById('s');
img.src ='images/'+obj.options[index].value;
}
==========實現qq中添加好友效果=========
//左側移到右側即在左側將標籤刪除
<select id="one" size="10">
<optionvalue="bj">北京</option>
<optionvalue="sh">上海</option>
<optionvalue="tj">天津</option>
</select>
<button οnclick="yidong()">右移</button>
<select id="two" size="10">
</select>
<script>
function yidong(){
var one=document.getElementById('one');
var two=document.getElementById('two');
var op=one.options[one.selectedIndex];
two.add(newOption(op.text,op.value));
one.removeChild(op);
}
</script>
微博發表新聞效果
<html>
<head>
</head>
<body>
<divid="news">慶祝哥分手兩週年，哥打算開始把妹了，不論學生同事全下手 </div>
<formaction="http://www.baidu.com">
<textarea name="weibo" id="wei"cols="60" rows="10" οnclick="gaibian()"οnblur="news()" οnkeyup="gaibian()"></textarea>
<button οnclick="sub()">發表</button>
</form>
<script>
var total=140;
function sub(){
ys=sz();
if(ys<0){
setInterval(function(){
varweibo=document.getElementById('wei');
if(weibo.style.background=='red'){
weibo.style.background='#ffffff';
}else{
weibo.style.background='red';
}
},300);
}else{
document.forms[0].submit();
}
}
function gaibian(){
vard=document.getElementById('news');
ys=sz();
if(ys>0){
d.innerHTML='你還可以輸入'+ys+'個字';
}else{
d.innerHTML='<fontcolor="red">你超出了'+(-ys)+'個字</font>';
}
}
function news(){
vard=document.getElementById('news');
d.innerHTML='兩年了，哥單了兩年身了，哥要變身了。';
}
function sz(){
varweibo=document.getElementById('wei');
varys=total-weibo.innerHTML.length;
return ys;
}
</script>
</body>
</html>
Ajax
javascript中的一個對象
6個屬性和6個方法
作用：
通過javascript來向服務器提交數據，或者通過js來接收服務器上面返回的數據
無刷新的向服務器端發送和請求數據
客戶端有向服務器的請求，直接交給ajax，客戶端不需要等待數據的處理，不需要跳轉，可以繼續執行操作。服務器處理完成即返回給ajax，ajax顯示給用戶
方法
abort() 停止當前請求
getAllResponseHeaders() 把HTTP請求的所有響應作爲鍵/值對返回
getAllResponseHeader() 返回指定首部串值
open()
send()
發送數據使用對象.open打開，用send發送，對post和get都有效，但如下方法post會失效，缺少setRequestHeader('Content-Type','application/x-www-form-urlencoded');
發送數據
======get傳參方法===========
var ajax = new XMLHttpRequest;
//alert(ajax); 彈出對象類型，說明支持ajax
ajax.open('get','fopen.php?username=somebody'); //建立握手
ajax.send(null); //發送請求
=======post傳參方法==========
var ajax = new XMLHttpRequest;
ajax.open('post','fopen.php');
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send('username=somebody&password=pwd');
接收數據
onreadystatechange
readyState 請求的狀態
5個狀態碼，0,1,2,3,4 4代表完成
狀態 描述
0 請求未初始化（在調用 open() 之前）
1 請求已提出（調用 send() 之前）
2 請求已發送（這裏通常可以從響應得到內容頭部）
3 請求處理中（響應中通常有部分數據可用，但是服務器還沒有完成響應）
4 請求已完成（可以訪問服務器響應並使用它）
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
alert(ajax.responseText);
}else{
alert('顯示進度條');
}
}
responseText
responseXML
status 服務器HTTP狀態碼
statusText HTTP狀態碼的相應文本
ajax發送數據，接收頁面不存在處理方法
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){ //狀態碼
alert(ajax.responseText);
}
}else{
alert('顯示進度條');
}
}
HTTP常用狀態碼
1XX 接收成功，需要繼續處理
2XX 成功
200 執行成功
3XX 轉發，重定向
4XX 請求錯誤
401 當前請求需要驗證用戶
403 服務器已理解請求，拒絕執行
404 頁面未找到
5XX 服務器內部錯誤
503 臨時服務器維護或者過載，服務器當前無法處理請求
ajax實現數據庫查詢
==============form.html================
<formaction="mysql.php" method="post">
<inputtype="text" name="username" οnblur="check()"/>
<divid="tips"></div>
</form>
<script>
functioncheck(){
var ajax = new XMLHttpRequest;
var v = document.forms[0].username.value;
ajax.open('get','mysql.php?username='+v);
ajax.send(null);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
//如果執行成功
if(ajax.status==200){
tips(ajax.responseText);
}
}
}
}
functiontips(data){
document.getElementById('tips').innerHTML=data;
}
=============mysql.php===================
try{
$dbh = newPDO('mysql:host=localhost;dbname=mybbs','root','123456');
$dbh->query('set names utf8');
$stmt = $dbh->prepare('select * frombbs_user where username=?');
$stmt->bindParam(1,$username);
//iconv編碼轉換
//@param1 源編碼
//@param2 目標編碼
$username =iconv('gbk','utf-8',$_GET['username']);
$stmt->execute();
if($stmt->rowCount()){
echo'<font color="red">用戶名已存在,不可以註冊</font>';
}else{
echo'<font color="green">可以註冊</font>';
}
}catch(PDOException$e){
echo '數據庫連接失敗:'.$e->getMessage();
exit;
}
ajax庫
//微軟系列ie7及以下版本支持的ajax對象
'Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP','Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
//新建一個空對象，新建空對象後，向空對象裏面追加屬性和方法，即完成對這個對象的功能定義，使用時，直接調用裏面的方法來用即可
var aj=newObject();
//創建ajax對象的一個成員方法
aj.create=function(){
if(window.XMLHttpRequest){
varajax=new XMLHttpRequest;
returnajax;
}else{
vararr=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//ajax聲明成空，避免下面再聲明一次
varajax=null;
//i=0獲得數組的長度，進行循環
for(i=0;i<arr.length;i++){
//償試try...catch..如果遇到錯誤，自動拋出
try{
//由於微軟系列的名字是在數組裏面，需要實例化的是ActiveXObject('Microsoft.XMLHTTP')
ajax=newActiveXObject(arr[i]);
returnajax;
}catch(e){
ajax=false;
}
}
}
}
//得到ajax對象
aj.request=aj.create();
//get方法
aj.get=function(url,func){
aj.request.open('get',url);
aj.request.send(null);
//接收數據，讓回調函數func來處理返回的數據
aj.handler(func);
}
//post方法
aj.post=function(url,data,func){
aj.request.open('post',url);
aj.request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
aj.request.send(data);
aj.handler(func);
}
aj.handler=function(func){
aj.request.onreadystatechange=function(){
if(aj.request.readyState==4){
if(aj.request.status==200){
//回調函數func
func(aj.request.responseText);
}
}
}
}
ajax註冊
============reg.html=============
<head>
<scriptsrc="ajax.js"></script>
</head>
<body>
<divid="ts"></div>
<divid="content">
</div>
<formname="frm">
<input type="text"name="username" />
<input type="password" name="password"/>
<button οnclick="reg()">註冊</button>
</form>
<script>
function reg(){
varusername=document.frm.username.value;
varpassword=document.frm.password.value; aj.post('reg.php','username='+username+'&password='+password,function(data){
var ts=document.getElementById('ts');
ts.innerHTML=data;
//再次得到內容，把用戶發表的內容放到content裏面去
var username=document.frm.username.value;
var password=document.frm.password.value;
varcontent=document.getElementById('content');
content.innerHTML+='用戶名:'+username+'密碼：'+password+'<br />';
});
}
</script>
</body>
============reg.php=================
try{
$pdo=newPdo('mysql:host=localhost;dbname=44demo','root','liwenkaihaha');
$pdo->query('set names utf8');
$stmt=$pdo->prepare('insert into44demo_user(username,password,createtime,createip) values(?,?,?,?)');
$stmt->bindParam(1,$username,PDO::PARAM_STR);
$stmt->bindParam(2,$password,PDO::PARAM_STR);
$stmt->bindParam(3,$time,PDO::PARAM_INT);
$stmt->bindParam(4,$ip,PDO::PARAM_INT);
$username=$_POST['username'];
$password=$_POST['password'];
$time=time();
$ip=ip2long($_SERVER['REMOTE_ADDR']);
$stmt->execute();
if($stmt->rowCount()){
echo'註冊成功';
}else{
echo'註冊失敗';
}
}catch(PDOException$e){
echo $e->getMessage();
}
JSON
javascript對象快速聲明
PHP輕量級數據處理對象
json_encode() //把數組變成json字符串，使用json時用utf8字符集編碼
json_decode() //把json字符串變成php對象，傳入第二個參數爲true變爲php數組
================json.php=================
$arr =array('username'=>'管理員','password'=>'abc','createtime'=>123123124);
echojson_encode($arr);
=================cljson.html==================
<head>
<scriptsrc="ajax.js"></script>
</head>
<body>
<divid="a"></div>
<divid="b"></div>
<divid="c"></div>
<script>
aj.get('json.php',function(data){
//將php轉換出的json變爲標準js的json格式,php的格式鍵名帶引號
varobj = eval('('+data+')');
document.getElementById('a').innerHTML=obj.username;
document.getElementById('b').innerHTML=obj.password;
document.getElementById('c').innerHTML=obj.createtime;
})
</script>
</body>
ajax跨域(面試必考)
注意：
Javascript嚴格區分大小寫，函數，變量，關鍵詞均區分大小寫
javascript中追加數組元素必須傳入下標值
Javascript中的分號可有可無
不知道的屬性和方法可以for...in出來
css當中的屬性如font-color在js當中把橫線去掉，橫線後的第一個首字母大寫
javascript中的正則表達式沒有引號，直接使用定界符隔開
如：var regex=/(\w+?)\[(\w+?)=(\w+?)\]/
javascript的document對象中html標籤的class爲className
瀏覽器彈出的連接地址是絕對地址,驗證方法
<imgid="img" src="images/11.jpg" />
<script>
var t =document.getElementById('img');
alert(img.src);
</script>