文章出處

Python自動化【第十五篇】：CSS、JavaScript 和 Dom介紹

本節內容

CSS
javascript
dom

CSS

position標簽

fixed：固定在頁面的某個位置
relative + absolute：相對定位

opacity：0.5 設置透明度

z-index：數值大的在上邊

overflow: hidden 超過div的寬度后隱藏 auto 出現滾動條

hover：當鼠標移動到當前標簽上時才生效

background-image:url(‘1.jpg’) #默認 div大，圖片水平放置

background-repeat:no-repeat #不重復堆疊 repeat-x:水平堆疊 repeat-y：垂直放

background-position-x：默認是0

background-position-y：默認是0

或者background-position：10px 10px

或者background里直接把所有參數值都寫上，如下圖：

JavaScript

JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋并做出相應的處理。

一、如何編寫

1、JavaScript代碼存在形式

1 <!-- 方式一 -->
2 <script type"text/javascript" src="JS文件"></script>
3   
4 <!-- 方式二 -->
5 <script type"text/javascript">
6     Js代碼內容
7 </script>

View Code

2、JavaScript代碼存放位置

- HTML的head中
- HTML的body代碼塊底部(推薦)

由于Html代碼是從上到下執行，如果Head中的js代碼耗時嚴重，就會導致用戶長時間無法看到頁面，如果放置在body代碼塊底部，那么即使js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>

View Code

二、變量

JavaScript中變量的聲明是一個非常容易出錯的點，局部變量必須一個 var 開頭，如果未使用var，則默認表示聲明的是全局變量。

 1 <script type="text/javascript">
 2  
 3     // 全局變量
 4     name = 'seven';
 5  
 6     function func(){
 7         // 局部變量
 8         var age = 18;
 9  
10         // 全局變量
11         gender = "男"
12     }
13 </script>

View Code

JavaScript中代碼注釋：

- 單行 //
- 多行 /* */

注意：此注釋僅在Script塊中生效。

三、數據類型

JavaScript 中的數據類型分為原始類型和對象類型：

- 原始類型
  - 數字
  - 字符串
  - 布爾值
- 對象類型
  - 數組
  - “字典”
  - ...

特別的，數字、布爾值、null、undefined、字符串是不可變。

// null、undefined
null是JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”。
undefined是一個特殊值，表示變量未定義。

View Code

1、數字（Number）

JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。

轉換：

- parseInt(..) 將某值轉換成數字，不成功則NaN
- parseFloat(..) 將某值轉換成浮點數，不成功則NaN

特殊值：

- NaN，非數字。可使用 isNaN(num) 來判斷。
- Infinity，無窮大。可使用 isFinite(num) 來判斷。

更多數值計算：

常量

Math.E
常量e，自然對數的底數。

Math.LN10
10的自然對數。

Math.LN2
2的自然對數。

Math.LOG10E
以10為底的e的對數。

Math.LOG2E
以2為底的e的對數。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

靜態函數

Math.abs( )
計算絕對值。

Math.acos( )
計算反余弦值。

Math.asin( )
計算反正弦值。

Math.atan( )
計算反正切值。

Math.atan2( )
計算從X軸到一個點的角度。

Math.ceil( )
對一個數上舍入。

Math.cos( )
計算余弦值。

Math.exp( )
計算e的指數。

Math.floor( )
對一個數下舍人。

Math.log( )
計算自然對數。

Math.max( )
返回兩個數中較大的一個。

Math.min( )
返回兩個數中較小的一個。

Math.pow( )
計算xy。

Math.random( )
計算一個隨機數。

Math.round( )
舍入為最接近的整數。

Math.sin( )
計算正弦值。

Math.sqrt( )
計算平方根。

Math.tan( )
計算正切值。

Math

View Code

2、字符串（String）

字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript并未提供修改已知字符串內容的方法。

常見功能：

 1 obj.length                           長度
 2  
 3 obj.trim()                           移除空白
 4 obj.trimLeft()
 5 obj.trimRight)
 6 obj.charAt(n)                        返回字符串中的第n個字符
 7 obj.concat(value, ...)               拼接
 8 obj.indexOf(substring,start)         子序列位置
 9 obj.lastIndexOf(substring,start)     子序列位置
10 obj.substring(from, to)              根據索引獲取子序列
11 obj.slice(start, end)                切片
12 obj.toLowerCase()                    大寫
13 obj.toUpperCase()                    小寫
14 obj.split(delimiter, limit)          分割
15 obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
16 obj.match(regexp)                    全局搜索，如果正則中有g表示找到全部，否則只找到第一個。
17 obj.replace(regexp, replacement)     替換，正則中有g則替換所有，否則只替換第一個匹配項，
18                                      $數字：匹配的第n個組內容；
19                                      $&：當前匹配的內容；
20                                      $`：位于匹配子串左側的文本；
21                                      $'：位于匹配子串右側的文本
22                                      $$：直接量$符號

View Code

3、布爾類型（Boolean）

布爾類型僅包含真假，與Python不同的是其首字母小寫。

- == 比較值相等
- != 不等于
- === 比較值和類型相等
- !=== 不等于
- || 或
- && 且

4、數組

JavaScript中的數組類似于Python中的列表

常見功能：

 1 obj.length          數組的大小
 2  
 3 obj.push(ele)       尾部追加元素
 4 obj.pop()           尾部獲取一個元素
 5 obj.unshift(ele)    頭部插入元素
 6 obj.shift()         頭部移除元素
 7 obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
 8                     obj.splice(n,0,val) 指定位置插入元素
 9                     obj.splice(n,1,val) 指定位置替換元素
10                     obj.splice(n,1)     指定位置刪除元素
11 obj.slice( )        切片
12 obj.reverse( )      反轉
13 obj.join(sep)       將數組元素連接起來以構建一個字符串
14 obj.concat(val,..)  連接數組
15 obj.sort( )         對數組元素進行排序

View Code

四、其他

1、序列化

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

2、轉義

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

3、eval

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

- eval()
- EvalError 執行字符串中的JavaScript代碼

4、正則表達式

1、定義正則表達式

- /.../ 用于定義正則表達式
- /.../g 表示全局匹配
- /.../i 表示不區分大小寫
- /.../m 表示多行匹配
  JS正則匹配時本身就是支持多行，此處多行匹配只是影響正則表達式^和$，m模式也會使用^$來匹配換行的內容)

1 var pattern = /^Java\w*/gm;
2 var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
3 result = pattern.exec(text)
4 result = pattern.exec(text)
5 result = pattern.exec(text)

View Code

注：定義正則表達式也可以 reg= new RegExp()

2、匹配

JavaScript中支持正則表達式，其主要提供了兩個功能：

- test(string) 檢查字符串中是否和正則匹配

n = 'uui99sdf'
reg = /\d+/
reg.test(n)  ---> true
 
# 只要正則在字符串中存在就匹配，如果想要開頭和結尾匹配的話，就需要在正則前后加 ^和$

View Code

- exec(string) 獲取正則表達式匹配的內容，如果未匹配，值為null，否則，獲取匹配成功的數組。

獲取正則表達式匹配的內容，如果未匹配，值為null，否則，獲取匹配成功的數組。
 
非全局模式
    獲取匹配結果數組，注意：第一個元素是第一個匹配的結果，后面元素是正則子匹配（正則內容分組匹配）
    var pattern = /\bJava\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /\b(Java)\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
全局模式
    需要反復調用exec方法，來一個一個獲取結果，直到匹配獲取結果為null表示獲取完畢
    var pattern = /\bJava\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /\b(Java)\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

View Code

3、字符串中相關方法

obj.search(regexp)                   獲取索引位置，搜索整個字符串，返回匹配成功的第一個位置(g模式無效)
obj.match(regexp)                    獲取匹配內容，搜索整個字符串，獲取找到第一個匹配內容，如果正則是g模式找到全部
obj.replace(regexp, replacement)     替換匹配替換，正則中有g則替換所有，否則只替換第一個匹配項，
                                        $數字：匹配的第n個組內容；
                                          $&：當前匹配的內容；
                                          $`：位于匹配子串左側的文本；
                                          $'：位于匹配子串右側的文本
                                          $$：直接量$符號

View Code

5、時間處理

JavaScript中提供了時間相關的操作，時間操作中分為兩種時間：

- 時間統一時間
- 本地時間（東8區）

更多操作參見：http://www.shouce.ren/api/javascript/main.html

五、語句和異常

1、條件語句

JavaScript中支持兩個中條件語句，分別是：if 和 switch

    if(條件){
 
    }else if(條件){
         
    }else{
 
    }

   switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

switch

2、循環語句

JavaScript中支持三種循環語句，分別是：

var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

方式一

var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

方式二

方式三

3、異常處理

 1 try {
 2     //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
 3 }
 4 catch (e) {
 5     // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
 6     //e是一個局部變量，用來指向Error對象或者其他拋出的對象
 7 }
 8 finally {
 9      //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
10 }

View Code

注：主動跑出異常 throw Error('xxxx')

六、函數

1、基本函數

JavaScript中函數基本上可以分為一下三類：

 1 // 普通函數
 2     function func(arg){
 3         return true;
 4     }
 5           
 6 // 匿名函數
 7     var func = function(arg){
 8         return "tony";
 9     }
10   
11 // 自執行函數
12     (function(arg){
13         console.log(arg);
14     })('123')

View Code

注意：對于JavaScript中函數參數，實際參數的個數可能小于形式參數的個數，函數內的特殊值arguments中封裝了所有實際參數。

2、作用域

JavaScript中每個函數都有自己的作用域，當出現函數嵌套時，就出現了作用域鏈。當內層函數使用變量時，會根據作用域鏈從內到外一層層的循環，如果不存在，則異常。

切記：所有的作用域在創建函數且未執行時候就已經存在。

 1 function f2(){
 2     var arg= 111;
 3     function f3(){
 4         console.log(arg);
 5     }
 6      
 7     return f3;
 8 }
 9  
10 ret = f2();
11 ret();

View Code

注：聲明提前，在JavaScript引擎“預編譯”時進行。

更多：http://www.cnblogs.com/wupeiqi/p/5649402.html

3、閉包

閉包是指可以包含自由（未綁定到特定對象）變量的代碼塊。

「閉包」，是指擁有多個變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。

閉包是個函數，而它「記住了周圍發生了什么」。表現為由「一個函數」體中定義了「另個函數」

由于作用域鏈只能從內向外找，默認外部無法獲取函數內部變量。閉包，在外部獲取函數內部的變量。

 1 function f2(){
 2     var arg= [11,22];
 3     function f3(){
 4         return arg;
 5     }
 6     return f3;
 7 }
 8  
 9 ret = f2();
10 ret();

View Code

4、面向對象

 1 function Foo (name,age) {
 2     this.Name = name;
 3     this.Age = age;
 4     this.Func = function(arg){
 5         return this.Name + arg;
 6     }
 7 }
 8   
 9 var obj = new Foo('alex', 18);
10 var ret = obj.Func("sb");
11 console.log(ret);

View Code

對于上述代碼需要注意：

- Foo充當的構造函數
- this代指對象
- 創建對象時需要使用 new

上述代碼中每個對象中均保存了一個相同的Func函數，從而浪費內存。使用原型和可以解決該問題：

 1 function Foo (name,age) {
 2     this.Name = name;
 3     this.Age = age;
 4 }
 5 Foo.prototype = {
 6     GetInfo: function(){
 7         return this.Name + this.Age
 8     },
 9     Func : function(arg){
10         return this.Name + arg;
11     }

View Code

DOM

文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。我們最為關心的是，DOM把網頁和腳本以及其他的編程語言聯系了起來。DOM屬于瀏覽器，而不是JavaScript語言規范里的規定的核心內容。

一、查找元素

1、直接查找

document.getElementById             根據ID獲取一個標簽
document.getElementsByName          根據name屬性獲取標簽集合
document.getElementsByClassName     根據class屬性獲取標簽集合
document.getElementsByTagName       根據標簽名獲取標簽集合

View Code

2、間接查找

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

View Code

二、操作

1、內容

innerText   文本
outerText
innerHTML   HTML內容
innerHTML  
value       值

View Code

2、屬性

attributes                // 獲取所有標簽屬性
setAttribute(key,value)   // 設置標簽屬性
getAttribute(key)         // 獲取指定標簽屬性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

View Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="全選"  onclick="CheckAll();"/>
 9     <input type="button" value="取消" onclick="CancelAll();"/>
10     <input type="button" value="反選" onclick="ReverseCheck();"/>
11 
12     <table border="1" >
13         <thead>
14 
15         </thead>
16         <tbody id="tb">
17             <tr>
18                 <td><input type="checkbox" /></td>
19                 <td>111</td>
20                 <td>222</td>
21             </tr>
22             <tr>
23                 <td><input type="checkbox" /></td>
24                 <td>111</td>
25                 <td>222</td>
26             </tr>
27             <tr>
28                 <td><input type="checkbox" /></td>
29                 <td>111</td>
30                 <td>222</td>
31             </tr>
32             <tr>
33                 <td><input type="checkbox" /></td>
34                 <td>111</td>
35                 <td>222</td>
36             </tr>
37         </tbody>
38     </table>
39     <script>
40         function CheckAll(ths){
41             var tb = document.getElementById('tb');
42             var trs = tb.childNodes;
43             for(var i =0; i<trs.length; i++){
44 
45                 var current_tr = trs[i];
46                 if(current_tr.nodeType==1){
47                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
48                     inp.checked = true;
49                 }
50             }
51         }
52 
53         function CancelAll(ths){
54             var tb = document.getElementById('tb');
55             var trs = tb.childNodes;
56             for(var i =0; i<trs.length; i++){
57 
58                 var current_tr = trs[i];
59                 if(current_tr.nodeType==1){
60                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
61                     inp.checked = false;
62                 }
63             }
64         }
65 
66         function ReverseCheck(ths){
67             var tb = document.getElementById('tb');
68             var trs = tb.childNodes;
69             for(var i =0; i<trs.length; i++){
70                 var current_tr = trs[i];
71                 if(current_tr.nodeType==1){
72                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
73                     if(inp.checked){
74                         inp.checked = false;
75                     }else{
76                         inp.checked = true;
77                     }
78                 }
79             }
80         }
81 
82     </script>
83 </body>
84 </html>

View Code

3、class操作

className                // 獲取所有類名
classList.remove(cls)    // 刪除指定類
classList.add(cls)       // 添加類

View Code

4、標簽操作

a.創建標簽

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

View Code

b.操作標簽

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

View Code

實例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='請輸入關鍵字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '請輸入關鍵字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='請輸入關鍵字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>

搜索框

跑馬燈

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds

python自動華（十五） - honey01

Python自動化【第十五篇】：CSS、JavaScript 和 Dom介紹

CSS

JavaScript

一、如何編寫

二、變量

三、數據類型

四、其他

五、語句和異常

六、函數

DOM

一、查找元素

二、操作

歷史上的今天

留言列表

參觀人氣

文章搜尋

最新文章

文章精選

誰來我家

熱門文章

文章分類

最新留言

QR Code

POWERED BY

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds

python自動華 （十五） - honey01

Python自動化 【第十五篇】：CSS、JavaScript 和 Dom介紹

CSS

JavaScript

一、如何編寫

二、變量

三、數據類型

四、其他

五、語句和異常

六、函數

DOM

一、查找元素

二、操作

歷史上的今天

留言列表

參觀人氣

文章搜尋

最新文章

文章精選

誰來我家

熱門文章

文章分類

最新留言

QR Code

POWERED BY

python自動華（十五） - honey01

Python自動化【第十五篇】：CSS、JavaScript 和 Dom介紹