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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、1 javascript內部對象<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>var person=new Object();/創(chuàng)建對象用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對象隨機數<!DOCTYPE html><html><head><meta charset="UTF-8"><titl

4、e></title><script>var num=Math.random();alert(num)</script></head><body></body></html>猜數游戲<!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("猜對了");</script></h

6、ead><body>猜數字（1-10）<input type="text" id="txt" placeholder="請輸入數字"/> <input type="button" value="猜一猜" onclick="guessNumber()" /></body></html>3數組第一種方式<!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>數組的認識數組定義后不改變長度，size是方法 length是屬性 只要帶括號的就是方法。Sort排序注意 javascript中的數組里面的值是數據類型可以隨意類型（java不行）<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script> var arr= new Array(4);/Array是js的一個內置對象，創(chuàng)建

10、數組并且初始化長度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","你好","中國"/創(chuà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的一個類庫用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() /*入口函數*/$("#fo").click(function()$("#fo").css("font-size","100px")</script></head><body><font id="fo">我是jQuery</fon

15、t></body></html>5 jQuery編程步驟Step1 導入jQuery的jsStep2 根據情況編寫入口函數Step3 根據選擇器找到對應節(jié)點<!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>里面的寫法<!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 入口函數Window.onload = function（）/等到頁面全部加載完畢$(document).ready(function() /等到頁面框架加載完成Jquery對象和DOM對象相互轉化Dom對象轉化為jquery對象$(dom對象)；Jquery對象轉化為dom對象$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()">點擊我</a></body></html>Dom對象到jquery對象<!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()">點擊我</a></body></html>Jquery對象到dom對象<!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()">點擊我</a></body&

28、gt;</html>7 通過jQuery改變樣式$(“#”).css(“樣式屬性“，“對應的值”)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) /*測試*/$("#d1").css("color","red")</script></head><body style="font-size: 30px;"><div id="d1">hello jquery</div><a href="#" id="btn">點擊我</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) /*測試*/$(

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

32、ry 提供css（name，value）方法設置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;/*大盒子一個界限*/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是個id*/$("#div1 > div").css("background", "yellow");) /*在給定的父元素下匹配所有的子元素,不包括孫子元素*/$("#btn3").click(function() $("#div2+div").css("background", "yellow&q

40、uot;) /*匹配所有緊接在當前元素后的下一個元素 第三個變黃*/ $("#btn4").click(function() $("#div2div").css("background","yellow") ) /*匹配當前元素之后的所有兄弟元素 3 ，4個變黃*/)</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內部對象objectObject對象提供了一種創(chuàng)建自定義對象的簡單方式，不需要程序員再次定義構造函數。由于在程序運行時可以為JavaScript對象添加屬性，因此使用Object對象很容易創(chuàng)建出自定義對象。<!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對象通過創(chuàng)建Date對象，可以獲取計算機中的時間。由于腳本總是在客戶端中運行，而不是服務器，所以獲取的是本地計算機的時間。方法功能getDate 返回一個月中的某一天（131）getDay 返回一周中的某一天（06），0為周日，1為周一，以此類推getFullYear 以四位數返回年份getHours 返回小時（023）getMilliseconds 返回毫秒getMinutes 返回分鐘（059）getMonth 返回月份（011），0為一月，1為二月，以此類推getSeconds 返

46、回秒數（059）getTime 返回1970年1月1日至今的毫秒數利用Date制作時鐘特效<!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(); /獲得小時、分鐘和秒 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秒取一次當前的時間window.onload=showTime;</script></script></head><body><div id="myclock"></div></body></html>Date對象可以制作倒計時<!DOCTYPE html><html><head><meta charset="UTF-8"><tit

49、le></title><script> window.onload= function() var now=new Date(); /今天的時間 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對象在網頁內使用圖片，只需要使用<img>標簽，然后在src屬性中設置圖片的絕對路徑或者相對路徑即可。如果需要在網頁里實現(xiàn)動畫或者圖像效果，那么就得在JavaScript里使用Image對象。使用圖像緩沖技術。 <!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對象Math.abs(number) 返回number的絕對值Math.ceil(number) 對number向上取整，如Math.ceil(67.6)返回值是68

53、Math.floor(number) 對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之間的偽隨機數，可能為0，但總是小于1，0,1) Math.round(number) 返回最接近number的整數Math.sqrt(number) number的平方根11 數組數組就是用一個變量來表示的一組數據的集

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

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

溫馨提示

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

評論

0/150

提交評論