python之路 Javascript的學習

本文轉載自查看原文 2017-02-24 15:04 1383

1.JavaScript 被設計用來向 HTML 頁面添加交互行為。
2.JavaScript 是一種腳本語言（腳本語言是一種輕量級的編程語言）。
3.JavaScript 由數行可執行計算機代碼組成。
4.JavaScript 通常被直接嵌入 HTML 頁面。
5.JavaScript 是一種解釋性語言（就是說，代碼執行不進行預編譯）。

javascript能做什么

表單數據驗證：表單數據驗證是JavaScript最基本也是最能體現效率的功能。
動態HTML（即DHTML）：動態HTML指不需要服務器介入而動態變化的網頁效果，包括動態內容、動態格式、動態布局等。
用戶交互：用戶交互指根據用戶的不同操作進行的響應處理。例如：聯動菜單等。
少量數據查找：能夠實現在當前網頁中進行字符串的查找和替換。
AJAX核心技術：AJAX即異步JavaScript+XML。該對象提供一種支持異步請求的技術，使客戶端可以使用JavaScript向服務器提出請求並處理響應，但並不影響用戶在客戶端的瀏覽。

javascript的書寫方式

第一種：寫到整個網頁內容中最下面（原則：將所有內容加載出來再出現所要互動的效果）

　　sdfsdfsdfsd

第二種：通過連接一個文件來實現

javascript的輸出方式

javascript的注視方式

單行注釋：//

多行注釋：/**/

變量

1.變量是用於存儲信息的容器： x=5; length=66.10;

2. JavaScript 變量名稱的規則：

　　(1).變量對大小寫敏感（y 和 Y 是兩個不同的變量）

　　(2).第一個字符必須是字母、下划線（_）或美元符號（$）

　　(3).余下的字符可以是下划線、美元符號或任何字母或數字字符

注釋：由於 JavaScript 對大小寫敏感，變量名也對大小寫敏感。

3.關於變量，js中是這樣定義的：var 變量名 = 變量值（局部變量）變量名 = 變量值（全局變量）

數據類型

數字

var num = 10 或者.1(與0.1相同) parseInt會把變量總的以數字開頭的數字取出來，如果數字在中間會報Nan(not a number)。

parsefloat解析浮點數

var num = 1234sdsf parseInt（num）

字符串

var str = 'alex is sb'

console.log(str)

obj.length 長度

obj.trim() 移除空白 obj.trimLeft() obj.trimRight()

obj.charAt(n) 返回字符串中的第n個字符

obj.concat(value, ...) 拼接

obj.indexOf(substring,start) 子序列位置

obj.lastIndexOf(substring,start) 子序列位置

obj.substring(from, to) 根據索引獲取子序列

obj.slice(start, end) 切片

obj.toLowerCase() 大寫

obj.toUpperCase() 小寫

obj.split(delimiter, limit) 分割

實例：跑馬燈

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <marquee behavior="" direction="">my nane is liwenqiang</marquee>
 9 
10     </body>
11 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <div id="wel">歡迎光臨</div>
 9 
10     </body>
11     <script>
12         function test(){
13             var mywel = document.getElementById("wel");
14             var content = mywel.innerText;
15             var f_content = content.charAt(0);
16             var l_content = (content.substring(1,content.length));
17             var new_content = l_content + f_content;
18             mywel.innerText = new_content;
19 
20         }
21         setInterval("test();",1000);
22     </script>
23 </html>

View Code

數組

obj.length 數組的大小

obj.push(ele) 尾部追加元素
obj.pop() 尾部獲取一個元素

obj.unshift(ele) 頭部插入元素
obj.shift() 頭部移除元素

obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數組的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替換元素
obj.splice(n,1) 指定位置刪除元素

obj.slice( ) 切片
obj.reverse( ) 反轉
obj.join(sep) 將數組元素連接起來以構建一個字符串
obj.sort( ) 對數組元素進行排序

循環方式：

　　第一種(循環類似於數據的數據)：for(var i = 0 ;i<arr.length;i++){

　　　　console.log('sdfsdfsd')

}

　　第二種（循環字典類型的數據）：for(var in arr){

　　 console.log(arr[i]);

}

字典

var = dict{'lwq':11,'hsc':qwq}

bool

true or false

對象

function 函數，在js中位置很重要

typeof產看數據類型

算法

Math.ceil(數值)

Math.floor(數值)
Math.round(數值)

Math.min(數值1,數值2)
Math.max(數值1,數值2)

Math.random() 獲得0-1之間的隨機數

算術運算符：
+ - * / % ++ --

var num=10

var total = num++ ++num

console.log(total)

num++:total先等於num，然后num在+1

++num：num先+1，total再等於num

比較運算符：
> >= < <= != == === !==

三個等於相當於全部相等（數值和數據類型都相等）

邏輯運算符：
&& || ！

賦值運算符：
= += -= *= /=

字符串運算符：
+ 連接，兩邊操作數有一個或兩個是字符串就做連接運算

流程控制

順序結構

　　代碼一行一行向下執行

分支結構

　　1.單分支

　　if（）{}

　　2.雙分支

　　if（）{}

　　else（）{}

　　3.多分枝

　　if（）{}

　　else if（）{}

　　else（）{}

　　
循環結構

　　do ..... while 先執行一次，然后再執行while

　　var n = 0

　　do {

　　console.log('sdfsdfsd')

　　n = n+1

}while(n<3)

函數

書寫方式：

1.function 函數名（）{

　　console.log('rerer')

}

2.var func = function(){

　　console.log()

}

3.(function(){

　　console.log()

}) 直接運行，不用調用

系統函數

eval ( ) 是Python中eval和exec的合集，既可以編譯代碼也可以獲取返回值。

1、序列化
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

2、轉義
decodeURI( ) URl中未轉義的字符
decodeURIComponent( ) URI組件中的未轉義字符
encodeURI( ) URI中的轉義字符
encodeURIComponent( ) 轉義URI組件中的字符
escape( ) 對字符串轉義
unescape( ) 給轉義字符串解碼
URIError 由URl的編碼和解碼方法拋出

時間函數

實例：時間顯示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <div id="clock">
 9 
10         </div>
11 
12     </body>
13     <script>
14         function clock() {
15             var mydate = new Date();
16             var myyear = mydate.getFullYear();
17             var mymonth = mydate.getMonth() + 1;
18             var myday = mydate.getDate();
19 
20             var myhour = mydate.getHours();
21             var myminutes = mydate.getMinutes();
22             var mysec = mydate.getSeconds();
23 
24             var res = myyear +"-"+ mymonth +"-"+ myday +" "+ myhour +":"+ myminutes +":"+ mysec
25             var mycolock = document.getElementById("clock")
26             mycolock.innerText = res
27         }
28         setInterval("clock()",1000)
29     </script>
30 </html>

View Code

JavaScript之DOM操作

什么是DOM

HTML Document Object Model（文檔對象模型）
2.HTML DOM 定義了訪問和操作HTML文檔的標准方法
3.HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）

獲取元素節點方法

1.直接查找：

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”) 獲取一個數組

2.間接查找

parentElement // 父節點標簽元素
children // 所有子標簽
firstElementChild // 第一個子標簽元素
lastElementChild // 最后一個子標簽元素
nextElementtSibling // 下一個兄弟標簽元素
previousElementSibling // 上一個兄弟標簽元素

操作屬性節點方法

tag.className => 直接整體做操作
tag.classList.add('樣式名') 添加指定樣式
tag.classList.remove('樣式名') 刪除指定樣式

innerText innerHtml
value獲取當前選中的value值
1.input value獲取當前標簽中的值

var myinput = document.getElementById('username')

myinput.value

myinput.value = 'fuck'
2.select （selectedIndex 代表找索引）
3.textarea
innerHTML 給節點添加html代碼：
該方法不是w3c的標准，但是主流瀏覽器支持
tag.innerHTML = “<p>要顯示內容</p>”;

案例：輸入框搜索關鍵字(focus, blur)

操作樣式屬性方法

創建節點方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div id="myinput">
10 
11     </div>
12 
13 </body>
14 <script>
15     var myinput = document.getElementById("myinput");
16 //    var tag = "<input type='text' />";
17 //    myinput.insertAdjacentHTML('beforeEnd',tag);
18       var myipt  = document.createElement("input"); // <input type="">
19       myipt.setAttribute("type","button");
20       myipt.setAttribute("value","點擊");
21         myinput.appendChild(myipt);
22 
23 </script>
24 </html>

View Code

1.字符串的方式創建：
var tag = "<input type='text' />";
xxx.insertAdjacentHTML('beforeEnd',tag);

注意：第一個參數只能是：
‘beforeBegin’‘afterBegin’‘beforeEnd’‘afterEnd’

2.createElement(標簽名)
創建一個指定名稱的元素。
例：var tag = document.createElement(“input")
tag.setAttribute('type','text');

追加節點方法

追加一個子節點（作為最后的子節點）
somenode.appendChild(newnode)

把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);

節點替換
somenode.replaceChild(newnode, 某個節點);

str.add

表格案例：直接查找

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8     <input type="button" value="全選" onclick="selectAll();">
 9     <input type="button" value="取消" onclick="cancleAll();">
10     <input type="button" value="反選" onclick="reverseAll();">
11     <table border="1">
12         <thead>
13         <tr>
14             <th>操作</th>
15             <th>ip</th>
16             <th>端口</th>
17         </tr>
18         </thead>
19         <tbody id="info">
20         <tr>
21             <td><input type="checkbox"></td>
22             <td>&nbsp;</td>
23             <td>&nbsp;</td>
24         </tr>
25         <tr>
26             <td><input type="checkbox"></td>
27             <td>&nbsp;</td>
28             <td>&nbsp;</td>
29         </tr>
30         <tr>
31             <td><input type="checkbox"></td>
32             <td>&nbsp;</td>
33             <td>&nbsp;</td>
34         </tr>
35         </tbody>
36     </table>
37 
38     </body>
39     <script>
40         function selectAll() {
41 //            console.log('dafdfdf'); 檢測
42 //            1.得到tbody
43             var myTody = document.getElementById('info');
44 //            console.log(myTody)
45 
46             //2.找下面的孩子
47             var Mytrs = myTody.children;
48 //            console.log(Mytrs)
49             for (var i = 0;i<Mytrs.length;i++){
50 //                console.log(Mytrs[i].children[0].children[0]);
51                 var Myinput = Mytrs[i].children[0].children[0]
52                 Myinput.checked = true;
53             }
54         }
55         function cancleAll() {
56 //              console.log('dafdfdf'); 檢測
57 //            1.得到tbody
58             var myTody = document.getElementById('info');
59 //            console.log(myTody)
60 
61             //2.找下面的孩子
62             var Mytrs = myTody.children;
63 //            console.log(Mytrs)
64             for (var i = 0;i<Mytrs.length;i++){
65 //                console.log(Mytrs[i].children[0].children[0]);
66                 var Myinput = Mytrs[i].children[0].children[0]
67                 Myinput.checked = false;
68             }
69 
70         }
71         function reverseAll() {
72              var myTody = document.getElementById('info');
73 //            console.log(myTody)
74 
75             //2.找下面的孩子
76             var Mytrs = myTody.children;
77 //            console.log(Mytrs)
78             for (var i = 0;i<Mytrs.length;i++){
79 //                console.log(Mytrs[i].children[0].children[0]);
80                 var Myinput = Mytrs[i].children[0].children[0]
81                if (Myinput.checked) {
82                     Myinput.checked = false;
83                }else{
84                    Myinput.checked = true
85                }
86             }
87         }
88     </script>
89 </html>

View Code

模態框：間接查找（三層實例）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <style>
 7             .one{
 8                 position: fixed;
 9                 top:0;
10                 bottom: 0;
11                 left:0;
12                 right: 0;
13                 background-color: black;
14                 opacity:0.6;
15             }
16             .info{
17                 position: fixed;
18                 top:50px;
19                 left: 400px;
20                 right:400px;
21                 background-color: white;
22                 width: 400px;
23                 height: 300px;
24             }
25             .hide{
26                 display: none;
27             }
28             .show{
29                 display: block;
30             }
31         </style>
32 </head>
33 <body>
34         <div>
35             <input type="button" value="點擊" onclick="showMode();"/>
36         </div>
37         <div class="one hide">
38         </div>
39         <div class="info hide">
40             <p><input type="text"></p>
41             <p><input type="text"></p>
42             <span><input type="button" value="確定"></span>
43             <span><input type="button" value="取消" onclick="hideMode();"></span>
44         </div>
45 
46 </body>
47 <script>
48     function showMode() {
49         var myone = document.getElementsByClassName('one')[0];
50         myone.classList.remove('hide');
51         var mytwo = document.getElementsByClassName('info')[0];
52         mytwo.classList.remove('hide');
53     }
54     function hideMode() {
55         var myone = document.getElementsByClassName('one')[0];
56         myone.classList.add('hide');
57         var mytwo = document.getElementsByClassName('info')[0];
58         mytwo.classList.add('hide');
59     }
60 </script>
61 
62 </html>

View Code

使用js操作css屬性的寫法是有一定的規律：

1、對於沒有中划線的css屬性一般直接使用style.屬性名即可。如：
obj.style.margin，obj.style.width，obj.style.left，obj.style.position等

2、對於含有中划線的css屬性，將每個中划線去掉並將每個中划線后的第一個字符換成大寫即可。如：
obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。

綁定方式：如果編輯框中有內容，可以提交，如沒有內容，彈出提示框。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <form action="http://www.baidu.com">
 9             <input type="text" id="user" name="user" />
10             <input type="submit" value="提交" onclick="return func();" />
11         </form>
12 
13     </body>
14           <script>
15             function func() {
16             var v = document.getElementById('user').value;
17             if(v.length>0){
18                 return true;
19             }else{
20                 alert('請輸入內容');
21                 return false;
22             }
23                         }
24         </script>
25 </html>

View Code

綁定方式2：

鼠標點擊文本框，文本框中的提示內容消失，如果點擊文本框外部，文本框中的內容出現。（獲取焦點onfoucs、失去焦點onblur）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <input type="text" value="請輸入關鍵字" onfocus="fuckFoucs(this)"; onblur="fuckBlur(this);" />
 9         <input type="button" value="提交"/>
10         <script>
11             /* 當標簽獲取焦點時，執行該函數*/
12             function fuckFoucs(ths){
13                 var v= ths.value;
14                 if(v == '請輸入關鍵字'){
15                     ths.value = '';
16                 }
17             }
18              /* 當標簽失去焦點時，執行該函數*/
19             function fuckBlur(ths) {
20                 var v = ths.value;
21                 if (v.length == 0){
22                     ths.value = '請輸入關鍵字'
23                 }
24 
25             }
26         </script>
27     </body>
28 </html>

View Code

阻止默認事件發生：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9 
10     <a href="http://www.baidu.com" onclick=" return func();">揍你</a>
11 
12     <script>
13         function  func() {
14             alert(123);
15             return false;
16         }
17     </script>
18 </body>
19 </html>

View Code

第二種方式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9 
10     <a href="http://www.baidu.com" id="i1">揍你</a>
11     <script>
12         document.getElementById('i1').onclick = function () {
13             alert(123);
14             return false;
15         }
16     </script>
17 </body>
18 </html>

View Code

實例：用戶提交數據（沒有填寫內容）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <form action="http://www.baidu.com">
10         <input type="text" id="user" name="user" />
11         <!--<input type="submit" value="提交" onclick="return func();" />-->
12         <input type="submit" id="sb" value="提交" />
13     </form>
14     <script>
15         document.getElementById('sb').onclick = function(){
16             var v = document.getElementById('user').value;
17             if(v.length>0){
18                 return true;
19             }else{
20                 alert('請輸入內容222');
21                 return false;
22             }
23         };
24         function func() {
25             var v = document.getElementById('user').value;
26             if(v.length>0){
27                 return true;
28             }else{
29                 alert('請輸入內容');
30                 return false;
31             }
32         }
33     </script>
34 </body>
35 </html>

View Code

綁定多個相同的事件
document.getElementById('i1').addEventListener('click',function () {
console.log(2);

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 
 8 </head>
 9 <body>
10 
11     <div id="i1" onclick="console.log(1);" >雞建明</div>
12     <script>
13 //        document.getElementById('i1').onclick = function () {
14 //            console.log(2);
15 //        }
16         document.getElementById('i1').addEventListener('click',function () {
17             console.log(2);
18         })
19     </script>
20 </body>
21 </html>

View Code

- 事件執行順序：
- 捕獲 true
- 冒泡
document.getElementById('i1').addEventListener('click',函數,true或者false)
- event是當前事件的信息

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9        <!--<div id="i1" style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">-->
10         <!--<div id="i2" style="height: 300px;width: 300px;background-color: green" onclick="alert(2);">-->
11             <!--<div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" onclick="alert(3);"></div>-->
12         <!--</div>-->
13     <!--</div>-->
14     <div id="i1" style="height: 400px;width: 400px;background-color: red" >
15         <div id="i2" style="height: 300px;width: 300px;background-color: green" >
16             <div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" ></div>
17         </div>
18     </div>
19 
20     <script>
21             document.getElementById('i1').addEventListener('click',function () {alert(1);},true);
22             document.getElementById('i2').addEventListener('click',function () {
23                 alert(2);
24             },true);
25             document.getElementById('i3').addEventListener('click',function () {
26                 alert(3);
27             },true);
28     </script>
29 
30 </body>
31 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <input type="text" onkeydown="func(this,event);" />
10 
11     <script>
12         function  func(ths,e) {
13             console.log(ths,e);
14         }
15         window.onkeydown = function(e){
16             console.log(e);
17         }
18 
19     </script>
20 </body>
21 </html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 python學習之路前端-JavaScript python之路 JavaScript基礎 Python學習之路（二）爬蟲（一） Python學習之路：for循環 Python學習之路（三）爬蟲（二） [python之路]學習路線 JS學習之路之JavaScript match() 方法 Javascript 學習之路：鼠標長按事件 Python學習之路：多態實例 Python學習之路1 - 基礎入門