Javascript函數(shù)_第1頁(yè)
Javascript函數(shù)_第2頁(yè)
Javascript函數(shù)_第3頁(yè)
Javascript函數(shù)_第4頁(yè)
Javascript函數(shù)_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、1 javascript內(nèi)部對(duì)象<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>var person=new Object();/創(chuàng)建對(duì)象用person接受="孫楠"/創(chuàng)建name屬性并且初始化person.age = 18;function getAttr(attr)alert("姓名是："+personattr);getAttr(&

2、quot;name");getAttr("age");</script></head><body></body></html><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>var person=new Object();="孫楠"person.age = 18; g

3、etAttr("name","age")function getAttr(attr1,attr2)alert("姓名是："++"年齡是："+person.age)</script></head><body></body></html>2 MATH對(duì)象隨機(jī)數(shù)<!DOCTYPE html><html><head><meta charset="UTF-8"><titl

4、e></title><script>var num=Math.random();alert(num)</script></head><body></body></html>猜數(shù)游戲<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function guessNumber()var num=Math.floor(

5、Math.random()*10+1) /*1到10.9999 floor向下取整1-10*/var guessNum = document.getElementById("txt").value/獲取用戶輸入的值var guessNum1 = parseInt(guessNum);if(guessNum1>num)alert("親，輸入的值大了")else if(guessNum1<num)alert("親，輸入的值小了");elsealert("猜對(duì)了");</script></h

6、ead><body>猜數(shù)字（1-10）<input type="text" id="txt" placeholder="請(qǐng)輸入數(shù)字"/> <input type="button" value="猜一猜" onclick="guessNumber()" /></body></html>3數(shù)組第一種方式<!DOCTYPE html><html><head><meta cha

7、rset="utf-8" /><title></title><script>var arrys = "hello","world","您好","世界"for(var i = 0 ; i<4 ; i+ )document.write(arrysi+"&nbsp；")</script></head><body></body></html>第二種方式<!DOCT

8、YPE html><html><head><meta charset="utf-8" /><title></title><script>var arrys = "hello","world","您好","世界" for(var i= 0;i<arrys.length;i+) document.write(arrysi+"&nbsp；") /</script></hea

9、d><body></body></html>數(shù)組的認(rèn)識(shí)數(shù)組定義后不改變長(zhǎng)度，size是方法 length是屬性 只要帶括號(hào)的就是方法。Sort排序注意 javascript中的數(shù)組里面的值是數(shù)據(jù)類型可以隨意類型（java不行）<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script> var arr= new Array(4);/Array是js的一個(gè)內(nèi)置對(duì)象，創(chuàng)建

10、數(shù)組并且初始化長(zhǎng)度arr4=123;alert(arr4)*/ /*輸出123*/var arr = new Array(1,2,3)alert(2) */ /*輸出 2*/ var arr =new Array(3,2,1)arr.sort();for(var i=0 ;i<arr.length;i+)document.write(arri+"&nbsp；")*/ /*1 2 3*/ var arr =new Array();arr0="張三"alert(arr.length+arr0)*/ /*輸出1 張三*/ var arr = ne

11、w Array(4);arr0=123;alert(arr1);*/ /*輸出undefined*/ var str = "hello，world"var str1 = str.substr(0,4)/含頭不含尾var str2 = str.substring(0,4)alert(str1)alert(str2)*/ /*輸出hell*/var arrys = "hello","world","你好","中國(guó)"/創(chuàng)建一個(gè)數(shù)組并且給定長(zhǎng)度的初始值var obj;for(obj in arrys)d

12、ocument.write(obj)*/ /*輸出 0 1 2 3*/</script></head><body></body></html>4 jQuery jQuery是javaScript的一個(gè)類庫(kù)用js<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function dianji()var obj = document.getEl

13、ementById("fo")obj.style.fontSize="100px"</script></head><body><font id="fo" onclick="dianji()">我是jQuery</font></body></html>用jQuery替代<!DOCTYPE html><html><head><meta charset="UTF-8">&

14、lt;title></title><script src="jquery.js"></script><script>$(function() /*入口函數(shù)*/$("#fo").click(function()$("#fo").css("font-size","100px")</script></head><body><font id="fo">我是jQuery</fon

15、t></body></html>5 jQuery編程步驟Step1 導(dǎo)入jQuery的jsStep2 根據(jù)情況編寫(xiě)入口函數(shù)Step3 根據(jù)選擇器找到對(duì)應(yīng)節(jié)點(diǎn)<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script></head><body><font id="

16、;fo"> 我是jQuery</font><script>var obj =$("#fo");alert(obj) /彈出object</script></body></html><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script&

17、gt;</head><body><font id="fo"> 我是jQuery</font><script>var obj = $("#fo")obj.css("font-size","100px")</script></body></html>如果放在<head></head>里面的寫(xiě)法<!DOCTYPE html><html><head><meta c

18、harset="UTF-8"><title></title><script src="jquery.js"></script><script>$(function()var obj = $("#fo")obj.css("font-size","100px")</script></head><body><font id="fo"> 我是jQuery</font

19、></body></html>文字樣式變化<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script><script>$(function()document.getElementById("fo").style.color="red")</

20、script></head><body><font id="fo">我是jQuery</font></body></html><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script><script>$(functio

21、n()document.getElementById("fo").style.color="red"$("#fo").css("font-style","italic")$("#fo").css("font-size","100px")</script></head><body><font id="fo">我是jQuery</font></body&g

22、t;</html>6 入口函數(shù)Window.onload = function（）/等到頁(yè)面全部加載完畢$(document).ready(function() /等到頁(yè)面框架加載完成Jquery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化Dom對(duì)象轉(zhuǎn)化為jquery對(duì)象$(dom對(duì)象)；Jquery對(duì)象轉(zhuǎn)化為dom對(duì)象$obj。get（0）；$obj.get()0<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script

23、 src="jquery.js"></script><script>function dianji()var obj=document.getElementById("d1")var $obj=$(obj);$obj.css("font-style","italic")</script></head><body style="font-size: 30px;"><div id="d1">hello

24、jquery</div><a href="javaScript:;" onclick="dianji()">點(diǎn)擊我</a></body></html>Dom對(duì)象到j(luò)query對(duì)象<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script

25、><script>function dianji()var obj=document.getElementById("d1")var $obj=$(obj);$obj.css("font-style","italic") </script></head><body style="font-size: 30px;"><div id="d1">hello jquery</div><a href="javaS

26、cript:;" onclick="dianji()">點(diǎn)擊我</a></body></html>Jquery對(duì)象到dom對(duì)象<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script><script>function dianji()var $

27、obj=$("#d1")var obj = $obj.get(0);obj.innerHTML="hello java" </script></head><body style="font-size: 30px;"><div id="d1">hello jquery</div><a href="javaScript:;" onclick="dianji()">點(diǎn)擊我</a></body&

28、gt;</html>7 通過(guò)jQuery改變樣式$(“#”).css(“樣式屬性“，“對(duì)應(yīng)的值”)Onclick事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery.js"></script><script>$(function()$("#btn

29、").click(function()alert(11111) /*測(cè)試*/$("#d1").css("color","red")</script></head><body style="font-size: 30px;"><div id="d1">hello jquery</div><a href="#" id="btn">點(diǎn)擊我</a></body>

30、;</html>Blur事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery.js"></script><script>$(function()$("#btn").blur(function()alert(11111) /*測(cè)試*/$(

31、"#d1").css("color","red")</script></head><body style="font-size: 30px;"><div id="d1">hello jquery</div><a href="#" id="btn">點(diǎn)擊我</a></body></html>8 jquery 選擇器#id 改變指定元素的背景顏色jQue

32、ry 提供css（name，value）方法設(shè)置css樣式屬性Name css屬性名Value css屬性值<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery.js"></script><script>$(function()$("#btn1").c

33、lick(function()$("#div1").css("background","red")$("#btn2").click(function()$("div").css("background","yellow")$("#btn3").click(function()$(".one").css("background","green")$("#btn4&quo

34、t;).click(function() /*任何選擇器必須有前綴*/$("*").css("background","pink") /*所有變粉色包括body，不推薦使用*/)$("#btn5").click(function()$("#div1,.one").css("background","orange") /*并集選擇器*/)</script><style>divwidth: 100px;height: 100px;bor

35、der: 1px solid black;float: left;.onewidth: 50px;height: 100px;border: 1px solid red;float: left;</style></head><body><input type="button" id="btn1" value="選擇器1"/><input type="button" id="btn2" value="選擇器2"/>&l

36、t;input type="button" id="btn3" value="選擇器3"/><input type="button" id="btn4" value="選擇器4"/><input type="button" id="btn5" value="選擇器5"/><br /><br /><div id="div1"><

37、/div><div></div><div class="one"></div></body></html>9 jquery 選擇器<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery.js"></script><style>div widt

38、h: 100px;height: 100px;border: 1px solid black;float: left;/*大盒子一個(gè)界限*/div #div1 float: left;.small width: 30px;height: 30px;border: 1px solid red;float: left;</style><script>$(function() $("#btn1").click(function() $("#div1 div").css("background", "yell

39、ow") /*在給定的祖父元素下的匹配所有的后代元素不包括祖先*/$("#btn2").click(function() /*btn是個(gè)id*/$("#div1 > div").css("background", "yellow");) /*在給定的父元素下匹配所有的子元素,不包括孫子元素*/$("#btn3").click(function() $("#div2+div").css("background", "yellow&q

40、uot;) /*匹配所有緊接在當(dāng)前元素后的下一個(gè)元素 第三個(gè)變黃*/ $("#btn4").click(function() $("#div2div").css("background","yellow") ) /*匹配當(dāng)前元素之后的所有兄弟元素 3 ，4個(gè)變黃*/)</script></head><body><h3>這些都是div元素</h3><input type="button" id="btn1" va

41、lue="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input type="button" id="btn4" value="選擇器4" /><input type="button&

42、quot; id="btn5" value="選擇器5" /><br /><br /><div id="div1"><div class="small"></div><div id="div2" class="small"><div style="width: 10px;height: 10px;border: 1px solid black ; background: pink;

43、"></div></div><div class="small"></div><div class="small"></div></div></body></html>10 javascript內(nèi)部對(duì)象objectObject對(duì)象提供了一種創(chuàng)建自定義對(duì)象的簡(jiǎn)單方式，不需要程序員再次定義構(gòu)造函數(shù)。由于在程序運(yùn)行時(shí)可以為JavaScript對(duì)象添加屬性，因此使用Object對(duì)象很容易創(chuàng)建出自定義對(duì)象。<!DOCTYPE html&

44、gt;<html><head><meta charset="UTF-8"><title></title><script> var person=new Object(); ="tony" person.age=15; function getAttr(attr)alert(personattr); getAttr("name"); getAttr("age");</script></script>&

45、lt;/head><body></body></html>Date對(duì)象通過(guò)創(chuàng)建Date對(duì)象，可以獲取計(jì)算機(jī)中的時(shí)間。由于腳本總是在客戶端中運(yùn)行，而不是服務(wù)器，所以獲取的是本地計(jì)算機(jī)的時(shí)間。方法功能getDate 返回一個(gè)月中的某一天（131）getDay 返回一周中的某一天（06），0為周日，1為周一，以此類推getFullYear 以四位數(shù)返回年份getHours 返回小時(shí)（023）getMilliseconds 返回毫秒getMinutes 返回分鐘（059）getMonth 返回月份（011），0為一月，1為二月，以此類推getSeconds 返

46、回秒數(shù)（059）getTime 返回1970年1月1日至今的毫秒數(shù)利用Date制作時(shí)鐘特效<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script> function showTime() var today = new Date(); var year=today.getFullYear();/獲得年 var month=today.getMonth()+1;/獲得月 var day=today.getD

47、ate();/獲得日 var hh = today.getHours(); /獲得小時(shí)、分鐘和秒 var mm = today.getMinutes();/獲得分鐘 var ss = today.getSeconds();/獲得秒document.getElementById("myclock").innerHTML = year + "年" + month + "月" + day + "日" + hh + ":" + mm + ":" + ss;window.setInte

48、rval("showTime()",1000);/每隔1秒取一次當(dāng)前的時(shí)間window.onload=showTime;</script></script></head><body><div id="myclock"></div></body></html>Date對(duì)象可以制作倒計(jì)時(shí)<!DOCTYPE html><html><head><meta charset="UTF-8"><tit

49、le></title><script> window.onload= function() var now=new Date(); /今天的時(shí)間 var year=now.getFullYear(); var future=new Date("December 25,"+year); var diff=future.getTime()-now.getTime();/毫秒 var days=parseInt(diff/(1000*60*60*24);document.getElementById("days").innerHT

50、ML="距離"+year+"圣誕節(jié)還有："+days+"天" </script></head><body><div id="days"></div></body></html>Img對(duì)象在網(wǎng)頁(yè)內(nèi)使用圖片，只需要使用<img>標(biāo)簽，然后在src屬性中設(shè)置圖片的絕對(duì)路徑或者相對(duì)路徑即可。如果需要在網(wǎng)頁(yè)里實(shí)現(xiàn)動(dòng)畫(huà)或者圖像效果，那么就得在JavaScript里使用Image對(duì)象。使用圖像緩沖技術(shù)。 <!DOCTYPE ht

51、ml><html><head><meta charset="UTF-8"><title></title><script> var picObj=new Image(); picObj.src="img/IMG_7611.PNG" function changePic() document.getElementById("pic").src=picObj.src; </script></script></head><b

52、ody><img src="img/IMG_7612.png" id="pic" width="200" /><input type="button" value="切換" onclick="changePic()" /></body></html>Math對(duì)象Math.abs(number) 返回number的絕對(duì)值Math.ceil(number) 對(duì)number向上取整，如Math.ceil(67.6)返回值是68

53、Math.floor(number) 對(duì)number向下取整，如Math.ceil(67.6)返回值是67 Math.max(number1,number2) 返回number1與number2中的較大值Math.min(number1,number2) 返回number1與number2中的較小值Math.pow(x,y) 返回x的y次冪Math.random() 返回0和1之間的偽隨機(jī)數(shù)，可能為0，但總是小于1，0,1) Math.round(number) 返回最接近number的整數(shù)Math.sqrt(number) number的平方根11 數(shù)組數(shù)組就是用一個(gè)變量來(lái)表示的一組數(shù)據(jù)的集

54、合。它用于實(shí)現(xiàn)對(duì)這組數(shù)據(jù)的統(tǒng)一管理，數(shù)組中的每一個(gè)數(shù)據(jù)也叫數(shù)組的一個(gè)元素。 數(shù)組列表 數(shù)組列表用于表示一組數(shù)據(jù)的集合，它由一對(duì)方括號(hào)（）包圍，列表中的每個(gè)元素用逗號(hào)分隔，數(shù)組元素可以是任意類型的數(shù)據(jù)（包括其他數(shù)組）。如果數(shù)組元素本身又是數(shù)組，這就叫數(shù)組的數(shù)組，例如：Var arr="c#","java","sql","html","javascript","jQuery"可以使用“數(shù)組變量名子數(shù)組索引號(hào)子數(shù)組中的元素索引號(hào)”的格式來(lái)訪問(wèn)數(shù)組的數(shù)組中的元素。12 string對(duì)

55、象String是動(dòng)態(tài)對(duì)象，需要?jiǎng)?chuàng)建對(duì)象實(shí)例后才能使用它的屬性或方法。需要注意的是，當(dāng)某字符串使用單引號(hào)或雙引號(hào)標(biāo)注時(shí)，可以被當(dāng)作字符串對(duì)象實(shí)例進(jìn)行處理，從而直接調(diào)用String對(duì)象的屬性和方法。 常用屬性length是String對(duì)象的最常用屬性，用于計(jì)算字符串中的字符個(gè)數(shù)。例如計(jì)算“abcdf”的長(zhǎng)度。var len=" abcdf ".length;String對(duì)象中的方法主要用于搜索字符串中的字符、轉(zhuǎn)換字符的大小寫(xiě)、分割字符串以及截取子字符串。名稱描述charAt 返回字符串對(duì)象中指定索引處的字符，索引從0開(kāi)始 indexOf 返回某個(gè)子字符串在目標(biāo)字符串中首次出現(xiàn)的位置，在目標(biāo)字符串中沒(méi)有子字符串則返回-1 substr 從指定索引位置開(kāi)始截取指定長(zhǎng)度的字符串 substring 返回指定索引范圍內(nèi)的字符串。 toLowerCase 把字符串轉(zhuǎn)化為小寫(xiě)toUpperCase 把字符串轉(zhuǎn)化為大寫(xiě)。 split 返回按照指定分隔符拆分的若干子字符串?dāng)?shù)組。如：var arr="hello,world".split(","); arr是數(shù)組變量，其中第一個(gè)數(shù)組元素是“hello”，第二個(gè)數(shù)組元素是“world”使用String方法，驗(yàn)證用戶輸入的電子郵

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論