Python學習筆記第二十四周（JavaScript補充）

時間 2019-11-19

標籤 python 學習筆記第二十四周 4周 javascript 補充欄目 Python 简体版

原文原文鏈接

目錄：html

　　1、JS補充正則表達式

　　　　一、函數類型數組

　　　　二、string對象瀏覽器

　　　　三、instanceofapp

　　　　四、Array 數組對象less

　　　　五、Date對象dom

　　　　六、RegExp 正則表達式ide

　　　　七、Math對象函數

　　2、BOM補充測試

　　　　一、window對象

　　　　二、histroy對象

　　　　三、location對象

　　3、DOM補充

　　4、替換clear:both撐開頁面的方法

　　5、show hide toggle方法

內容：

　　類型函數：

　　一、typeof

　　只能判斷基本數據類型，對於引用數據類型，只能判斷它爲object

var s=8;
console.log(typeof(s));

var s2=new String('hello2');
console.log(typeof(s2));  //無法判斷它的具體類型

　　二、instanceof

var s3= new String('hello')
console.log(s3 instanceof(String));//判斷s3是否爲String實例化的對象

　　三、String對象

　　String有兩種建立方式：

　　　　1） var s=「hello」；

　　　　2）var s=new String（‘hello’）;

　　String能夠操做的方法：

　　　　1）length

　　　　2）字體：

　　　　　　s.italics()　　斜體

　　　　　　s.bold() 　　加粗

　　　　　　s.anchor()　　連接，正確寫法：s.anchor(‘alex’)

　　　　3）大小寫轉換：

　　　　　　s.toUpperCase();都變大寫

　　　　　　s.toLowerCase();都變小寫

　　　　4）獲取指定字符：

　　　　　　s.charAt(1) 根據索引取值

　　　　5）查詢字符串：

　　　　　　match（）；

　　　　　　search（）；

　　　　　　s.search('h'); 返回第一個匹配結果的索引值

　　　　　　s.match('l'); 返回全部的匹配結果的數組

　　　　6）replace

　　　　　　s.replace(‘e’,'E')

　　　　7) split

　　　　　　s.split('e')

　　　　8) concat 拼接

　　　　　　s.concat('world')

　　　　9） substr sbustring slice 截取字符串

　　　　　　s.substr(1,2)

　　　　　　s.slice(1,-2) slice能夠倒着取

　　　　10）Indexof

　　　　　　s.IndexOf(‘h’)

　　　　　　s.lastIndexOf('h')

　　四、Array 數組對象

　　　　var arr=[];

　　　　var arr=[1,2,3,4,5];

　　　　var arr=new Array(1,2,3,4,5)

　　　　var arr2 = new Array(3) 表示佔了3個位置，三個值都是undefined，若是採用初始化對象的方式建立數組

　　　　　　　　　　　　　　　　若是裏面只有一個值仍是數字，那麼數字表示長度而不是內容

　　　　Array的方法：

　　　　一、join方法

　　　　　　var ret = ['hello', 'world'].join('+++++')

　　　　二、shift unshift pop push方法（棧方法）

　　　　　　補充：

　　　　　　　　棧操做：

　　　　　　　　　　先進後出，有壓棧和彈棧兩個操做

　　　　　　　　隊列操做：

　　　　　　　　　　先進先出

　　　　　　　var arr1=[1,4,6];

　　　　　　　arr1.push(13);

　　　　　　　console.log(arr1) 發現13放在最後面

　　　　　　　arr1.pop() 彈最後的數值

　　　　　　　arr1.shift(45);從前面插入

　　　　　　　arr1.unshift() 從前面移除

　　　　三、sort和reverse方法

　　　　　　 arr1.reverse()；反轉

　　　　　　　arr1.sort();　排序

　　　　四、Date對象

　　　　　　建立方式：

　　　　　　var date_obj=new Date()

　　　　　　console.log(date_obj.toLocaleString())

　　　　　　var date_obj = new Date('017/07/20 16:30')

　　　　　　console.log(date_obj.toLocaleString())

　　　　　　date_obj.getFullYear();

　　　　　　date_obj.getZMonth();

　　　　　　date_obj.getDate();

　　　　　　date_obj.getDay();

　　　　　　date_obj.getHours();

　　　　　　date_obj.getSeconds();

　　　　　　date_obj.getMinutes();

　　　　　　date_obj.getHourMinuteSecond();

　　　　　　date_obj.getMilliseconds();

　　五、RegExp 正則表達式

　　　　var re_obj=new RegExp("\d+","g");

　　　　console.log(re_obj.test('asdf2345dk'))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        //方法一
        var re_obj = new RegExp('\d+','g')//定義規則,後面的g表示全局通用，若是是i表示不區分大小寫，能夠寫成gi
        console.log(re_obj.test('abd345adf234dg'))//test方法表示測試，匹配成功返回true
        //方法二
        var reg2 =  /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
        console.log(reg2.test('ste11345'));

        //匹配的內容：
        var s='helee2234o2351'
        console.log(s.match(/\d+/g))//取出全部匹配的內容放到數組中去
        console.log(s.search(/\d+/g))//匹配第一個結果的索引值，只能取一個
        console.log(s.split(/\d+/g))//取出數據分割值
        console.log(s.replace(/\d+/g,"*"))//替換匹配出來的數字
    </script>
</body>
</html>

View Code

　　六、Math對象

　　　　console.log(Math.random()); 隨機小數

　　　　console.log(Math.round(2.8)); 取四捨五入值

　　　　console.log(100*Math.pow(2,3));2的3次方

　2、BOM對象

　　BOM瀏覽器對象模型，能夠對瀏覽器窗口進行訪問和操做，使用BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做

　　使JavaScript有能力與瀏覽器對話

　　一、window對象

　　　　全部瀏覽器都支持window對象

　　　　概念上將一個html文檔對應一個window對象

　　　　功能上講控制瀏覽器窗口的

　　　　使用上講，window對象不須要建立對象，直接使用便可

　　　　例如：window.alert（）是window對象，前面的值能夠不寫

　　　　window對象方法：

　　　　一、alert（）顯示帶有一段消息和一個確認按鈕的警告框

　　　　二、confirm（）顯示帶有一段消息以及確認按鈕和取消按鈕的對話框

　　　　三、prompt() 顯示可提示用戶輸入的對話框

　　　　四、open（）打開一個新的瀏覽器窗口或查找一個已命名的窗口

　　　　五、close（）關閉瀏覽器窗口

　　　　六、setInterval（）按照指定週期（以毫秒計）

　　　　七、clearInterval（）取消由setInterval（）設置的timeout

　　　　八、setTimeout（）在指定的毫秒數後調用函數或計算表達式

　　　　九、clearTimeout（）取消setTimeout（）方法設置的timeout

　　　　十、scrollTo（）把內容滾動到指定的座標

　　　　例子：　

var ret=confirm('是否保存');
alert(ret)
if(ret == true{}{
    
}else{

}
//能夠根據返回值來進行後面的操做

confirm方法

var ret=prompt('hello')
alert(ret)
返回值是用戶輸入的內容
若是什麼都不輸入，就返回空，若是選擇取消，就返回null

prompt操做

　　二、history對象

可以知道用戶上一次從哪來，下一次往哪去，也就是瀏覽器的前進和回退按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="前進" onclick="func1();"/>
    <a href="histroy2.html">lesson2</a>

    <script>
        function func1() {
            history.forward();

        }
    </script>
</body>
</html>

histroy1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="後退" onclick="func2();"/>
    <a href="histrory1.html"></a>
    <script>
        //history內部有三種方法：forward    back    go
        function func2() {
            history.back();

        }
    </script>
</body>
</html>

histroy2

　　三、location對象

　　方法：

　　　　一、locatin.reload() 從新加載界面

　3、DOM對象

　　DOM是W3C的標準，定義了訪問HTML和XML文檔的標準

　　推薦：

　　　　parentElement 　　父節點標籤元素

　　　　children　　　　　　全部子標籤

　　　　firstElementChild 　　第一個子標籤元素

　　　　lastElementchild　　　最後一個子標籤元素

　　　　nextElementSibing 　　下一個兄弟標籤元素

　　　　previousElementSibing 上一個兄弟標籤元素　　　　　　　　　　　　　

　　DOM Event（事件）

　　一、onclick

　　二、ondblclick　　當用戶雙擊某對象時調用的事件句柄

　　三、onfoucs 　　元素獲取焦點 ,input點擊輸入框時獲取焦點

　　例子：　　　

<input type='text'/ onfouce="func1();"> 

　　　　function func1(){

　　　　　　alert(111)
　　　　}

View Code

　　四、onblur 　　　失去焦點時觸發的事件

　　五、onchange 一旦內容改變就觸發

　　備註：input標籤的DOM對象，判斷非空字符是經過Document.getElementzByid('xx').value.trim().length==0，其中trim（）表示去掉空格

　　六、onkeydown　某個鍵盤按鍵被按下觸發

　　七、keyCode 　　對於keypress事件，虛擬鍵盤碼不一樣，對於不一樣的鍵盤碼能夠區別不一樣的按鍵

　　八、onkeyup　　當按鍵鬆開時觸發

　　九、onmousedown 鼠標按鍵按下

　　十、onmousemove 鼠標被移動

　　十一、onmouseout　鼠標從某元素移開

　　十二、onmouseover 鼠標移到某元素之上

　 1三、onsubmit 　　只能用於form表單

　　1四、onselect 　　文本被選中

　　例子：判斷並阻止表單提交內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form onsubmit="return check();">
        <input type="text" name="username"/>
        <input type="submit" value="submit"/>
    </form>
    <script>
        function check() {
            alert('123');
            return false;
        }
    </script>
</body>
</html>