JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。
1、存在方式
<!--導(dǎo)入javascript腳本方法--> <script type="text/javascript" src="t1.js "></script>
<!--直接在html內(nèi)部編寫javascript--> <script type="text/javascript"> function func() { alert("Hello Shuaige") }
2、javascript代碼塊位置
放在<body>標(biāo)簽內(nèi)的代碼底部，為什么不能放在上面呢？為什么css的就可以放在上面呢？
注：css代碼首先要記住html代碼是從上往下解釋的，如果css代碼放在下面，在上面的代碼使用css樣式，如果css代碼塊放在下面就沒有辦法顯示樣式了
另不同的瀏覽器處理請求也不同：正常來說當(dāng)有一個(gè)請求過來時(shí)候會把js&css一起發(fā)送過去，咱們按照最low的方式理解的話可以這么理解：如果js文件或者js耗時(shí)比較久的話，下面的html代碼就無法執(zhí)行了。
3、變量和函數(shù)的聲明
變量：
function m1() { alert("shuaige") var name = 'tianshuai'; //var 變量名 ,變量名前面加var為局部變量 age = '18'; //注這里需要注意,建議使用的時(shí)候一般不要使用全局變量!否則如果代碼量比較大的 //時(shí)候容易出現(xiàn)調(diào)用混亂的問題 } m1();
函數(shù)
// 普通函數(shù) function func() { alert("Hello Shuaige") }// 定義一個(gè)可傳參數(shù)的函數(shù) function func(arg) { alert(arg) } func('Superman')// 自執(zhí)行函數(shù),顧名思義,定義好之后可以自動執(zhí)行 (function f3(arg) {alert(arg)})("Shuaige is good man");
// 匿名函數(shù),用處不是很大了解就行 var a = function() { alert('meinv'); }; a();
js 的展示方法有兩種：
通過網(wǎng)頁來展示
<script type="text/javascript"> function f1() { alert("hello shuai ge") } f1() </script>
顯示效果如下：
通過console來展示
<script type="text/javascript"> function f1() { console.log("Hello shuaige ") } f1() </script>
顯示效果如下：
打開google chrome F12點(diǎn)擊"Console"，刷新頁面！
4、字符串常用方法及屬性
調(diào)試的地方可以在google chrome 上進(jìn)行測試，F(xiàn)12點(diǎn)擊"Console"
obj.trim() 去除空格
var a = " Luotianshuai "undefineda.trimLeft() #去除左邊的空格"Luotianshuai "a.trimRight() #去除右邊的空格" Luotianshuai"a.trim() //去除兩邊的空格"Luotianshuai"a" Luotianshuai " #這里可以發(fā)現(xiàn)我執(zhí)行了上面的去除空格的命令之后,實(shí)際的值是沒有改變的b = a.trim()"Luotianshuai" #但是我們可以通過賦值來改變他b"Luotianshuai"
obj.charAt(index) 根據(jù)索引獲取字符串里的字符
b"Luotianshuai"b.charAt(0)"L"b.charAt(1)"u"b.charAt(2)"o"
obj.substring(start,end) 獲取字符的子序列，類似于切片
b"Luotianshuai"b.substring(0,3)"Luo"
obj.indexOf(char) 去字符串找指定的字符的索引值是多少
b"Luotianshuai"b.indexOf("t")3
obj.length 獲取字符串的長度
b"Luotianshuai"b.length12
5、數(shù)組
聲明一個(gè)數(shù)組和python中的列表類似
a = [11,22,33,44] #聲明一個(gè)數(shù)組[11, 22, 33, 44]
插入
a = [11,22,33,44] #聲明一個(gè)數(shù)組[11, 22, 33, 44]a.push(55) #在數(shù)組最后增加一個(gè)元素5 #這里是數(shù)組的長度a[11, 22, 33, 44, 55]a.unshift(00) #在數(shù)組最前面增加一個(gè)元素6 #長度a[0, 11, 22, 33, 44, 55]a.splice(3,0,'insert') #在指定的索引增加一個(gè)元素,括號內(nèi)(3為索引值,0為固定值,要插入的內(nèi)容)[]a[0, 11, 22, "insert", 33, 44, 55]a.unshift(100)8
移除
a[100, 0, 11, 22, "insert", 33, 44, 55]a.pop() # 從尾部獲取55a.shift() #從開頭獲取100a[0, 11, 22, "insert", 33, 44]a.splice(3,1) #從指定位置獲取,括號內(nèi)參數(shù)為(元素的索引,后面為索引后的元素個(gè)數(shù),包含本身)["insert"]a[0, 11, 22, 33, 44]
切片
a[0, 11, 22, 33, 44]a.slice(1,3)[11, 22]a[0, 11, 22, 33, 44]
合并
a = [11,22][11, 22]b = [44,55][44, 55]a.concat(b)[11, 22, 44, 55]a[11, 22]b.concat(a)[44, 55, 11, 22]
反轉(zhuǎn)
a[11, 22]a.reverse()[22, 11]a[22, 11]
字符串格式化
a[22, 11]a.join('_')"22_11"a[22, 11]
數(shù)組長度
a[22, 11]a.length2
6、字典
字典是數(shù)組的一種特殊形式
dict1 = {'k1':123,'k2':234} #定義一個(gè)字典Object {k1: 123, k2: 234}dict1['k1']123
7、循環(huán)
js中的循環(huán)有兩種方式
#第一種for (var i=0;i<10;i++) {console.log(i)}#輸出結(jié)果,看本代碼下第一圖#第二種for (var item in a) {console.log(a[item])}#輸出結(jié)果，看本代碼下第二圖
圖二：
8、異常處理
和python中的異常處理類似，代碼如下：
<script type="text/javascript"> try{ var tiancai = isme }catch(e) { console.log(e) }finally{ console.log("shuaige is so smart;") } </script>
顯示效果如下：
DOM編程
文件對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。
DOM編程：可以操作html所有的標(biāo)簽，進(jìn)行找、操作！他也是javascript的一部分
1、選擇器：
document.getElementById('id') 查找指定的id，然后我們可以進(jìn)行操作
<body> <div id="id_1"> 123 </div> <script type="text/javascript"> var i = document.getElementById('id_1'); //查找指定的id i.innerText = '456'; //innerText修改指定的字符串 </script></body>
顯示效果，當(dāng)我們打開IE的時(shí)候123就會被修改為456
下面操作方式也類似：
document.getElementsByName('name')
<body> <div name="name_1"> 123 </div> <script type="text/javascript"> var i = document.getElementsByName('name_1'); //查找指定的name,這里和ID不一樣name可以有多個(gè) for (var item in i) { i[item].innerText = '456'; //innerText修改指定的字符串 }; </script></body>
document.getElementsByTagName('tagname')
<body> <div> 123 </div> <div> 234 </div> <script type="text/javascript"> var i = document.getElementsByTagName('div'); //查找指定的標(biāo)簽類型,這里同樣和ID不一樣標(biāo)簽比如<div>標(biāo)簽可以有多個(gè) for (var item in i) { i[item].innerText = '456'; //innerText修改指定的字符串 }; </script></body>
上面的代碼試用jquery會非常方便就不需要重造輪子
2、注冊 事件
首先了解下面的意思：
事件：比如有一個(gè)“按鈕”，當(dāng)你點(diǎn)擊的時(shí)候發(fā)生什么，雙擊的時(shí)候發(fā)生什么，這個(gè)就叫做事件！
注冊：首先這個(gè)按鈕，當(dāng)你點(diǎn)擊的時(shí)候發(fā)生的動作，上面的事件要使他出現(xiàn)我們想要的效果，首先得把事件和函數(shù)進(jìn)行綁定，然后把他們注冊到指定標(biāo)簽上。
常用事件：
onclick
onblur
onfocus
..................
舉例代碼如下：
寫一個(gè)input的標(biāo)簽，首先把事件和函數(shù)進(jìn)行綁定，當(dāng)你一點(diǎn)這個(gè)按鈕的時(shí)候就會自動執(zhí)行，綁定的函數(shù)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>shuaige_js_file</title> <!--導(dǎo)入javascript腳本方法--> <!--<script type="text/javascript" src="t1.js "></script>--> <style> .color_red { background-color: red; } </style></head><body> <div id="id_1"> 234 </div> <!--下面的input標(biāo)簽:onclick是個(gè)事件他等于一個(gè)函數(shù),就是事件和函數(shù)進(jìn)行綁定,應(yīng)用到標(biāo)簽中就是注冊到標(biāo)簽中--> <input type="button" onclick="edit();" value="修改" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; } </script></body></html>
那么恢復(fù)按鈕呢？只要在新增一個(gè)即可
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>shuaige_js_file</title> <!--導(dǎo)入javascript腳本方法--> <!--<script type="text/javascript" src="t1.js "></script>--> <style> .color_red { background-color: red; } </style></head><body> <div id="id_1"> 234 </div> <!--下面的input標(biāo)簽:onclick是個(gè)事件他等于一個(gè)函數(shù),就是事件和函數(shù)進(jìn)行綁定,應(yīng)用到標(biāo)簽中就是注冊到標(biāo)簽中--> <input type="button" onclick="edit();" value="修改" /> <input type="button" onclick="rollback();" value="回滾"/> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; } function rollback() { var i = document.getElementById('id_1'); i.className = ''; //這里只要給他設(shè)置為空即可 } </script></body></html>
事件列表：
事件列表屬性此事件什么時(shí)候發(fā)生（什么時(shí)候被觸發(fā)
onabort 圖象的加載被中斷
onblur 元素失去焦點(diǎn)
onchange 區(qū)域的內(nèi)容被修改
onclick當(dāng)用戶點(diǎn)擊某個(gè)對象時(shí)調(diào)用的事件句柄（比點(diǎn)擊input標(biāo)簽時(shí)執(zhí)行上面的代碼例子）
ondblclick當(dāng)用戶雙擊某個(gè)對象時(shí)調(diào)用的事件句柄
onerror 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤
onfocus元素獲得焦點(diǎn)
onkeydown某個(gè)鍵盤按鍵被按下
onkeypress某個(gè)鍵盤按鍵被按下并松開
onkeyup某個(gè)鍵盤被松開
onload一張頁面或一副圖片完成加載
onmousedown鼠標(biāo)按鈕被按下
onmousemove鼠標(biāo)移動過來后
onmouseout鼠標(biāo)從某個(gè)元素移開
onmouseover鼠標(biāo)移動到某個(gè)元素之上
onmouseup鼠標(biāo)按鍵被松開
onreset 重置按鈕被點(diǎn)擊
onresize 窗口或框架被重新調(diào)整大小
onselect 文本被選中
onsubmit 確認(rèn)按鈕被點(diǎn)擊
onunload 用戶退出頁面
注：一個(gè)標(biāo)簽可以綁定多個(gè)事件??！
<input type="button" onmouseover="edit()" onmouseout="rollback()" value="修改&回滾" />
注：onload 和其他的不太一樣，他是寫在Javascirpt里的
<script type="text/javascript">// 這里的onload是,當(dāng)整個(gè)頁面加載完成之后才執(zhí)行的,整個(gè)頁面包含的元素加載完成之后才執(zhí)行的. window.onload = function () { alert("The page Load complete") }; function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; } function rollback() { var i = document.getElementById('id_1'); i.className = ''; //這里只要給他設(shè)置為空即可 } </script>
3、常用函數(shù)
獲取或修改者樣式，修改上上面的例子已經(jīng)寫了
在看下面的例子，在標(biāo)簽內(nèi)注冊了之后，如果在函數(shù)內(nèi)i.className = 'color_red'; 這樣是給他設(shè)置值，如果不設(shè)置值呢？：
function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; }
不給他設(shè)置值：
function edit() { var i = document.getElementById('id_1'); console.log(i.className); }
不給他設(shè)置：
function rollback() { var i = document.getElementById('id_1'); console.log(i.className) }
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>shuaige_js_file</title> <!--導(dǎo)入javascript腳本方法--> <!--<script type="text/javascript" src="t1.js "></script>--> <style> .color_red { background-color: red; } </style></head><body> <div id="id_1"> 234 </div> <!--下面的input標(biāo)簽:onclick是個(gè)事件他等于一個(gè)函數(shù),就是事件和函數(shù)進(jìn)行綁定,應(yīng)用到標(biāo)簽中就是注冊到標(biāo)簽中--> <input type="button" onmousemove="edit()" value="修改 "/> <input type="button" onclick="rollback()" value="修改 "/> <script type="text/javascript">// 這里的onload是,當(dāng)整個(gè)頁面加載完成之后才執(zhí)行的,整個(gè)頁面包含的元素加載完成之后才執(zhí)行的.// window.onload = function () {// alert("The page Load complete")// }; function edit() { var i = document.getElementById('id_1'); i.className = "color_red"; } function rollback() { var i = document.getElementById('id_1'); console.log(i.className) } </script></body></html>
效果圖如下：
獲取或設(shè)置屬性
獲取屬性
<body> <div name="luotianshuai" id="id_1"> age 18 </div> <input type="button" value="測試" onclick="edit()" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); //首先找到這個(gè)ID = id_1的標(biāo)簽 var result = i.getAttribute('name'); //獲取id_1的標(biāo)簽的屬性為name并賦值 console.log(result); //輸出結(jié)果在console } </script></body>
修改屬性：
<body> <div name="luotianshuai" id="id_1"> age 18 </div> <input type="button" value="測試" onclick="edit()" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); //首先找到這個(gè)ID = id_1的標(biāo)簽 var result = i.setAttribute('name','ShuaiGe'); //修改屬性 var result = i.getAttribute('name'); //獲取id_1的標(biāo)簽的屬性為name并賦值 console.log(result); //輸出結(jié)果在console } </script></body>
獲取或修改樣式中的屬性
修改樣式屬性
<body> <div name="luotianshuai" id="id_1" style="font-size:8px;background-color:green"> age 18 </div> <input type="button" onclick="edit()" value="測試" /> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); //首先找到這個(gè)ID = id_1的標(biāo)簽 i.style.backgroundColor = "red"; //修改樣式中的屬性還有很多,可以測試 } </script></body>
獲取和上面一樣很簡單！
提交表單，并不是之前的那種提交表單！
看下面的例子：
<body> <form id="form_1" action="https://www.sogou.com/"> <div> <input type="text" name="query"/> </div> <!--第一個(gè)submit是可以提交的這個(gè)肯定沒問題--> <input type="submit" value="submit"> <!--第二個(gè)button可以提交嗎?--> <input type="button" value="button" onclick="go()"> </form></body>
答案當(dāng)然是不可以，那怎么可以讓他提交呢？在js里可以通過修改屬性來讓他支持提交，代碼如下:
document.getElementById('form_1').submit();
<body> <form id="form_1" action="https://www.sogou.com/"> <div> <input type="text" name="query"/> </div> <!--第一個(gè)submit是可以提交的這個(gè)肯定沒問題--> <input type="submit" value="submit"> <!--第二個(gè)button可以提交嗎?--> <input type="button" value="button" onclick="go()"> </form> <script type="text/javascript"> function go() { document.getElementById('form_1').submit(); } </script></body>
調(diào)轉(zhuǎn)頁面函數(shù)
<body> <div> 跳轉(zhuǎn)范例 </div> <div> <!--在同一個(gè)標(biāo)簽內(nèi)打開--> <input type="button" onclick="jump()" value="跳轉(zhuǎn)至百度" /> <!--新起一個(gè)標(biāo)簽打開--> <input type="button" onclick="jump_new()" value="跳轉(zhuǎn)至百度" /> </div> <script type="text/javascript"> function jump() { window.location. } function jump_new() { window.open('https://www.baidu.com') } </script></body>
confirm() ，彈出消息提示框，顯示“是”或“否”，根據(jù)用戶的選擇返回True 或者 Flase
<script type="text/javascript"> var result = confirm('是否繼續(xù)'); console.log(result); </script>
setInterval("alert()",2000); clearInterval(obj) 可以理解為一個(gè)計(jì)時(shí)器
代碼如下：
setInterval("alert()",2000);設(shè)置計(jì)時(shí)器
<body> <script type="text/javascript"> function f1() { console.log("test message print in console") } setInterval('f1()',1000);//這里括號內(nèi),可以是字符串也可以是函數(shù),我們這個(gè)是執(zhí)行函數(shù),第二個(gè)參數(shù)為毫秒, //這里是每隔1秒執(zhí)行一次,我這里測試發(fā)現(xiàn),如果函數(shù)哪里不加引號就只執(zhí)行一次! </script></body>
clearInterval(obj)；關(guān)閉計(jì)時(shí)器
<body> <script type="text/javascript"> function f1() { console.log("test message print in console"); clearInterval(obj); //這里是關(guān)閉計(jì)時(shí)器,他需要個(gè)句柄,所以在下面的函數(shù)中,這個(gè)obj句柄必須是全局的 } obj = setInterval('f1()',1000);//這里括號內(nèi),可以是字符串也可以是函數(shù),我們這個(gè)是執(zhí)行函數(shù),第二個(gè)參數(shù)為毫秒, //這里是每隔1秒執(zhí)行一次,我這里測試發(fā)現(xiàn),如果函數(shù)哪里不加引號就只執(zhí)行一次! </script></body>
setTimeout(); clearTimeout(obj) 也是計(jì)時(shí)器他和interval的區(qū)別就是，他只執(zhí)行一次
<body> <script type="text/javascript"> function f1() { console.log("test message print in console"); } obj = setTimeout('f1()',1000);//這里括號內(nèi),可以是字符串也可以是函數(shù),我們這個(gè)是執(zhí)行函數(shù),第二個(gè)參數(shù)為毫秒, //這里是setTimeout所以他只執(zhí)行一次 </script></body>
js實(shí)例：
跑馬燈實(shí)例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>帥哥很帥 </title> <!--跑馬燈實(shí)例--> <script type="text/javascript"> function run_go() { //定義一個(gè)函數(shù) var content = document.title; //獲取title的內(nèi)容 var firstChar = content.charAt(0); //獲取content第一個(gè)元素 var sub = content.substring(1,content.length); //獲取content字符串剩余的元素 document.title = sub + firstChar; //對字符串進(jìn)行新的拼接 } setInterval('run_go()',1000); //使用interval每秒執(zhí)行然后達(dá)到跑馬燈的目的 </script></head><body></body></html>
搜索框?qū)嵗瑢?shí)用性非常高，已用在很多地方?。。?div style="height:15px;">
jQuery是一個(gè)兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)，對javascript進(jìn)行了封裝，是的更加便捷的開發(fā)，并且在兼容性方面十分優(yōu)秀。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>shuaige</title> <style> .r { background-color:red; /* 給標(biāo)簽設(shè)置背景顏色為紅色*/ } </style></head><body> <div id="id_1"> 123 </div> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div> <!--導(dǎo)入Jquery文件--> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script> $(function () {alert('Hello shuaige');}); //當(dāng)頁面執(zhí)行完后加載 //這里$是什么呢? 他可以理解為jQurey創(chuàng)建的對象,類似于python中的類創(chuàng)建的對象,對象去調(diào)用方法一樣.!!!僅僅是類似 $('#id_1').text('456'); //分解 $('#id_1') 找到id為id_1的標(biāo)簽,并把里面的內(nèi)容修改為456 //這里雖然永不倒dom但是,會dom對jQurey有很大的幫助 $('.c1').addClass('r'); //分解 $('.c1') 找到class為c1的標(biāo)簽 </script></body></html>
