python 全棧開發，Day51(經常使用內置對象,函數,僞數組 arguments,關於DOM的事件操做,DOM介紹)
1.三種引入方式
1.行內js <div onclick = 'add(3,4)'></div>javascript
function add(a,b){css
}html
2.內接JS
<script>/*js 代碼*/</script>前端
3.外接樣式
<script src='main.js'></script>java
//在前端項目中 當你看到index、main開頭，這個時候應該考慮是項目的入口文件
//標籤中img標籤 link標籤 script a標籤 裏面的屬性 href src 都會往服務器發送請求 get請求python
def add():
print('111')jquery
add()ios
對象：萬事萬物皆對象 window對象：屬性和方法(瀏覽器提供了一些本身的屬性和方法)編程
//在script腳本中聲明的變量、函數（方法）都會被掛載window，這個window是一個全局對象
//全局對象和局部做用 windows
在js中，全部的事件都是帶on的
alert 是瀏覽器原生的方法
windows.alter('11')也能執行。
可是在js裏面，能夠省略window
可是有一個例外，window.onload必需要寫全。
在js聲明對的變量，都被window掛起
|
1
2
|
var d1 = 11;
console.log(window.d1);
|
查看console，就會看到11
直接查看window
|
1
|
console.log(window);
|
查看console，這裏面有不少屬性，其中就有alert，還有聲明的變量。
1、經常使用內置對象
所謂內置對象就是ECMAScript提供出來的一些對象，咱們知道對象都是有相應的屬性和方法
數組Array
1.數組的建立方式
- 字面量方式建立（推薦你們使用這種方式，簡單粗暴）
|
1
|
var colors = ['red','color','yellow'];
|
- 使用構造函數（後面會講）的方式建立 使用new關鍵詞對構造函數進行建立對象
|
1
|
var colors2 = new Array();
|
2.數組的賦值
|
1
2
3
4
5
|
var arr = [];
//經過下標進行一一賦值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
|
3.數組的經常使用方法
3.1 數組的合併 concat()
|
1
2
3
4
5
|
var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
|
3.2 join() 將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串
|
1
2
3
|
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
|
3.3 將數組轉換成字符串 toString()
|
1
2
3
4
5
|
var score = [98,78,76,100,0];
//toString() 直接轉換爲字符串 每一個元素之間使用逗號隔開
var str = score.toString();
console.log(str);//98,78,76,100,0
|
3.4 slice(start,end); 返回數組的一段，前開後閉
|
1
2
3
|
var arr = ['張三','李四','王文','趙六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]
|
3.5 pop 移除數組的最後一個元素
|
1
2
3
|
var arr = ['張三','李四','王文','趙六'];
var newArr = arr.pop();
console.log(newArr);//["張三", "李四"，"王文"]
|
3.6 push() 向數組最後添加一個元素
|
1
2
3
|
var arr = ['張三','李四','王文','趙六'];
var newArr = arr.push('小馬哥');
console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]
|
3.7 reverse() 翻轉數組
|
1
2
3
4
5
|
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反轉數組
names.reverse();
console.log(names);
|
3.8 sort對數組排序
|
1
2
3
|
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
|
3.9 判斷是否爲數組：isArray()
|
1
|
布爾類型值 = Array.isArray(被檢測的值) ;
|
4.字符串String
字符串方法
4.1 chartAt() 返回指定索引的位置的字符
|
1
2
3
|
var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l
|
4.2 concat 返回字符串值，表示兩個或多個字符串的拼接
|
1
2
3
|
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2));//alexex
|
4.3 replace(a,b) 將字符串a替換成字符串b
|
1
2
3
|
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
|
4.4 indexof() 查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣
|
1
2
3
|
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
|
4.5 slice(start，end) 左閉右開 分割字符串
|
1
2
|
var str = '小馬哥';
console.log(str.slice(1,2));//馬
|
4.6 split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度
|
1
2
|
var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.split('a'));//["個人天呢,", "是嘛,你在說什麼呢?", "哈哈哈"]
|
4.7 subStr(statr,end) 左閉右開
|
1
2
|
var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.substr(0,4));//個人天呢
|
4.8 toLowerCase()轉小寫
|
1
2
|
var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage
|
4.9 toUpperCase()轉大寫
|
1
2
|
var str = 'xiaomage';
console.log(str.toUpperCase());
|
特別：
|
1
2
3
4
|
//1.將number類型轉換成字符串類型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
|
|
1
2
3
|
//四捨五入
var newNum = num.toFixed(2)
console.log(newNum)
|
5.Date日期對象
建立日期對象只有構造函數一種方式,使用new關鍵字
|
1
2
|
//建立了一個date對象
var myDate = new Date();
|
|
1
2
3
4
5
6
7
8
|
//建立日期對象
var myDate=new Date();
//獲取一個月中的某一天
console.log(myDate.getDate());
//返回本地時間
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
|
6.Math 內置對象
經常使用內置對象
6.1 Math.ceil() 向上取整，'天花板函數'
|
1
2
3
4
|
var x = 1.234;
//天花板函數 表示大於等於 x，而且與它最接近的整數是2
var a = Math.ceil(x);
console.log(a);//2
|
6.2 Math.floor 向下取整，'地板函數'
|
1
2
3
4
|
var x = 1.234;
// 小於等於 x，而且與它最接近的整數 1
var b = Math.floor(x);
console.log(b);//1
|
6.3 求兩個數的最大值和最小值
|
1
2
3
|
//求 兩個數的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2
|
6.4 隨機數 Math.random()
|
1
2
|
var ran = Math.random();
console.log(ran);[0,1)
|
若是讓你取100-200之間的隨機數，怎麼作？
背過公式：min - max之間的隨機數： min+Math.random()*(max-min)
2、函數
函數：就是將一些語句進行封裝，而後經過調用的形式，執行這些語句。
函數的做用：
-
將大量重複的語句寫在函數裏，之後須要這些語句的時候，能夠直接調用函數，避免重複勞動。
-
簡化編程，讓編程模塊化。
|
1
2
3
4
5
6
7
|
console.log("hello world");
sayHello(); //調用函數
//定義函數：
function sayHello(){
console.log("hello");
console.log("hello world");
}
|
第一步：函數的定義
函數定義的語法：
|
1
2
3
|
function 函數名字(){
}
|
解釋以下：
-
function：是一個關鍵字。中文是「函數」、「功能」。
-
函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。
-
參數：後面有一對小括號，裏面是放參數用的。
-
大括號裏面，是這個函數的語句。
第二步：函數的調用
函數調用的語法：
|
1
|
函數名字();
|
函數的參數：形參和實參
函數的參數包括形參和實參
注意：實際參數和形式參數的個數，要相同。
例子：
|
1
2
3
4
5
6
7
8
|
sum(3,4);
sum("3",4);
sum("Hello","World");
//函數：求和
function sum(a, b) {
console.log(a + b);
}
|
第三步：函數的返回值
例子：
|
1
2
3
4
5
6
|
console.log(sum(3, 4));
//函數：求和
function sum(a, b) {
return a + b;
}
|
3、僞數組
arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。
（1）返回函數實參的個數：arguments.length
例子：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length);
console.log(arguments.length);
console.log("---------------");
}
執行結果：
調用fn函數，就算不傳參數，也不會報錯。它接收參數是一一對應的。
2）之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：
|
1
2
3
4
5
6
7
8
|
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //將實參的第一個數改成99
arguments.push(8); //此方法不經過，由於沒法增長元素
}
|
查看結果，是由於push報錯了
清空數組的幾種方式：
|
1
2
3
4
5
|
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：刪除數組中全部項目
array.length = 0; //方式1：length屬性能夠賦值，在其它語言中length是隻讀
array = []; //方式3：推薦
|
在js中，也能夠對length修改。
arguents 用的不多
4、關於DOM的事件操做
1、JavaScript的組成
JavaScript基礎分爲三個部分：
-
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
-
DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。
-
BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。
2、事件
|
1
|
JS是以事件驅動爲核心的一門語言。
|
事件的三要素
事件的三要素：事件源、事件、事件驅動程序。
好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。
再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。
因而咱們能夠總結出：誰引起的後續事件，誰就是事件源。
總結以下：
-
事件源：引起後續事件的html標籤。
-
事件：js已經定義好了（見下圖）。
-
事件驅動程序：對樣式和html的操做。也就是DOM。
代碼書寫步驟以下：（重要）
-
（1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
-
（3）書寫事件驅動程序：關於DOM的操做
代碼舉例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 一、獲取事件源
var div = document.getElementById("box1");
// 二、綁定事件
div.onclick = function () {
// 三、書寫事件驅動程序
alert("我是彈出的內容");
}
</script>
</body>
執行效果：
常見事件以下：
onkeyup，表示按一個鍵，而後鬆開。就會觸發此事件，它能夠檢測，你必需要按enter鍵的時候才觸發。須要用到鍵盤編碼
對應的鍵值的Unicode 編碼
onmouseover跟a:hover相似，也是懸停效果
onsumit用於表單提交事件，好比檢測一個表單中，是否每一項輸入，都符合規範。檢測經過後，才發送數據給後端，不然提示彈窗，信息沒有填寫完整，請從新輸入！
這些事件中，在ie 6,7,8可能有兼容性問題。在後面學習jquery時，它自動幫你作了兼容。在任何瀏覽器，均可以使用。這不是絕對的！只是說大部分。
下面針對這事件的三要素，進行分別介紹。
一、獲取事件源的方式（DOM節點的獲取）
獲取事件源的常見方式以下：
|
1
2
3
|
var div1 = document.getElementById("box1"); //方式一：經過id獲取單個標籤
var arr1 = document.getElementsByTagName("div1"); //方式二：經過 標籤名 得到 標籤數組，因此有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：經過 類名 得到 標籤數組，因此有s
|
二、綁定事件的方式
方式一：直接綁定匿名函數
<div id="box1">
<h1>綁定事件源</h1>
</div>
<script type="text/javascript">
//1.獲取事件源
var div=document.getElementById('box1');
//2.綁定事件
div.onclick = function () {
//3.書寫事件驅動程序
alert('這是彈出的內容')
}
</script>
方式二：先單獨定義函數，再綁定
<script type="text/javascript">
var div1 = document.getElementById('box1')
//綁定事件的第二種方式
div1.onclick = fn; //注意，這裏是fn，不是fn()。fn()指的是返回值。
//單獨定義函數
function fn() {
alert('這是彈出的內容');
}
</script>
注意上方代碼的註釋。綁定的時候，是寫fn，不是寫fn()。fn表明的是整個函數，而fn()表明的是返回值。
方式三：行內綁定
<!--行內綁定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是彈出的內容");
}
</script>
注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。由於綁定的這段代碼不是寫在js代碼裏的，而是被識別成了字符串。
三、事件驅動程序
咱們在上面是拿alert舉例，不只如此，咱們還能夠操做標籤的屬性和樣式。舉例以下：
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//點擊鼠標時，本來粉色的div變大了，背景變紅了
oDiv.onclick = function () {
div1.style.width = "200px"; //屬性值要寫引號
div1.style.height = "200px";
div1.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color
}
</script>
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//點擊鼠標時，本來粉色的div變大了，背景變紅了
oDiv.onclick = function () {
div1.style.width = "200px"; //屬性值要寫引號
div1.style.height = "200px";
div1.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color
}
</script>
上方代碼的注意事項：
- 在js裏寫屬性值時，要用引號
- 在js裏寫屬性名時，是
backgroundColor，不是CSS裏面的background-Color。記得全部的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峯
onload事件
當頁面加載（文本和圖片）完畢的時候，觸發onload事件。
舉例：
|
1
2
3
4
5
|
<
script
type="text/javascript">
window.onload = function () {
console.log("小馬哥"); //等頁面加載完畢時，打印字符串
}
</
script
>
|
有一點咱們要知道：js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯。這個時候，onload事件就能派上用場了，咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行。
建議是：整個頁面上全部元素加載完畢在執行js內容。因此，window.onload能夠預防使用標籤在定義標籤以前。
事件案例
一、京東頂部廣告欄關閉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
width: 1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
width: 100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closeBanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：點擊案例，隱藏盒子。
//思路：點擊a連接，讓top-banner這個盒子隱藏起來（加隱藏類名）。
window.onload = function(){
// /1.獲取事件源和相關元素
var closeBanner = document.getElementById('closeBanner');
var topBanner = document.getElementById('topBanner');
//2.綁定事件
closeBanner.onclick = function(){
//3.書寫事件驅動程序
//類控制
//topBanner.className += ' hide';//保留原類名，添加新類名
//topBanner.className = 'hide';
//替換舊類名
topBanner.style.display = 'none';
}
}
</script>
</body>
</html>
2.要求實現效果：當鼠標懸停在img上時，更換爲另一張圖片；鼠標離開時，還原爲原本的圖片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload頁面加載完畢之後再執行此代碼
window.onload = function () {
//需求：鼠標放到img上，更換爲另外一張圖片，也就是修改路徑（src的值）。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中當即出發事件)
img.onmouseover = function () {
//3.書寫事件驅動程序(修改src)
img.src = "./img/2.png";
// this.src = "image/jd2.png";
}
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中當即出發事件)
img.onmouseout = function () {
//3.書寫事件驅動程序(修改src)
img.src = "./img/1.png";
}
}
</script>
</head>
<body>
<img id="box" src="./img/1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
5、DOM介紹
什麼是DOM
DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。
DOM就是由節點組成的。
解析過程
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性。
DOM樹（一切都是節點）
DOM的數據結構以下：
上圖可知，在HTML當中，一切都是節點：（很是重要）
-
元素節點：HMTL標籤。
-
文本節點：標籤中的文字（好比標籤之間的空格、換行）
-
屬性節點：：標籤的屬性。
整個html文檔就是一個文檔節點。全部的節點都是Object。
DOM能夠作什麼
-
找對象（元素節點）
-
設置元素的屬性值
-
設置元素的樣式
-
動態建立和刪除元素
-
事件的觸發響應：事件源、事件、事件的驅動程序
DOM節點的獲取
DOM節點的獲取方式其實就是獲取事件源的方式
操做元素節點，必須首先找到該節點。有三種方式能夠獲取DOM節點：
|
1
2
3
4
5
|
var div1 = document.getElementById("box1"); //方式一：經過id獲取單個標籤
var arr1 = document.getElementsByTagName("div1"); //方式二：經過 標籤名 得到 標籤數組，因此有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：經過 類名 得到 標籤數組，因此有s
|
既然方式2、方式三獲取的是標籤數組，那麼習慣性是先遍歷以後再使用。
特殊狀況：數組中的值只有1個。即使如此，這一個值也是包在數組裏的。這個值的獲取方式以下：
|
1
2
3
|
document.getElementsByTagName("div1")[0]; //取數組中的第一個元素
document.getElementsByClassName("hehe")[0]; //取數組中的第一個元素
|
DOM訪問關係的獲取
DOM的節點並非孤立的，所以能夠經過DOM節點之間的相對關係對它們進行訪問。以下：
節點的訪問關係，是以屬性的方式存在的。
JS中的父子兄訪問關係：
這裏咱們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。
獲取父節點
調用者就是節點。一個節點只有一個父節點，調用方式就是
|
1
|
節點.parentNode
|
（1）nextSibling：
指的是下一個節點（包括標籤、空文檔和換行節點）
-
火狐、谷歌、IE9+版本：都指的是下一個節點（包括標籤、空文檔和換行節點）。
-
IE678版本：指下一個元素節點（標籤）。
（2）nextElementSibling：
- 火狐、谷歌、IE9+版本：都指的是下一個元素節點（標籤）。
總結：爲了獲取下一個元素節點，咱們能夠這樣作：在IE678中用nextSibling，在火狐谷歌IE9+之後用nextElementSibling，因而，綜合這兩個屬性，能夠這樣寫：
|
1
|
下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSibling
|
previous的中文是: 前一個
（1）previousSibling：
-
火狐、谷歌、IE9+版本：都指的是前一個節點（包括標籤、空文檔和換行節點）。
-
IE678版本：指前一個元素節點（標籤）。
（2）previousElementSibling：
- 火狐、谷歌、IE9+版本：都指的是前一個元素節點（標籤）。
總結：爲了獲取前一個元素節點，咱們能夠這樣作：在IE678中用previousSibling，在火狐谷歌IE9+之後用previousElementSibling，因而，綜合這兩個屬性，能夠這樣寫：
|
1
|
前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling
|
三、補充：得到任意一個兄弟節點：
|
1
|
節點本身.parentNode.children[index]; //隨意獲得兄弟節點
|
- 1. 10-關於DOM的事件操做
- 2. 關於DOM的事件操做
- 3. DOM事件介紹
- 4. DOM經常使用操做
- 5. js經常使用DOM操做 經常使用DOM整理
- 6. DOM相關操做、事件、方法
- 7. dom綁定事件操做
- 8. Python經常使用內置函數
- 9. JavaScript操做DOM經常使用的API
- 10. DOM的經常使用操做
- 更多相關文章...
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • ionic 切換開關操作 - ionic 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 10-關於DOM的事件操做
- 2. 關於DOM的事件操做
- 3. DOM事件介紹
- 4. DOM經常使用操做
- 5. js經常使用DOM操做 經常使用DOM整理
- 6. DOM相關操做、事件、方法
- 7. dom綁定事件操做
- 8. Python經常使用內置函數
- 9. JavaScript操做DOM經常使用的API
- 10. DOM的經常使用操做