第三天 Javascript
JavaScript
比較運算符
比較類型javascript
類型相同：直接比較 html
*字符串按照字典順序比較，按位逐一去比較，直到得出大小。前端
類型不一樣：先轉換類型再比較java
*===（全等於） 比較的是值和類型，先比較類型是否相同，不相同直接返回false，相同的話再去比較值。正則表達式
*==比較的是值後端
邏輯運算符
&&：與（短路）數組
||或（短路）瀏覽器
!非app
其餘類型轉boolean：框架
number：0和NaN爲假，其餘爲真。
string：除了空字符串（「」），其餘都爲true
undefined&null：都是false
對象：全部對象都爲true
三元運算符
格式 ：
var result = 表達式?值1:值2；
若是表達式爲true，選擇值1，若是表達式爲false，選擇值2。
特殊語法（不建議使用，瞭解就行）
一、語句以；結尾，若是是一條語句能夠不寫；，能夠省略（不建議使用）
二、在函數中變量定義可使用var關鍵字，也能夠不使用。（不建議使用）
*使用 就是局部變量
*不使用 就是全局變量
流程控制語句
差很少都和Java基礎使用的方式一致。
if....else...
switch
*java中switch()，括號裏只能夠接收byte、short、int、char、枚舉（1.5）、String（1.7）
*javascript中，括號裏能夠接收任何數據類型。
while
do.....while
for
基本對象
function 函數對象
一、建立
一、 function 方法名（形式參數列表）{方法體}
二、 var 方法名=function（形式參數列表）{方法體}
二、方法
三、屬性
length：表明形參的個數
四、特色
一、方法定義時，形參類型不用寫，返回值類型也不寫。
二、方法是一個對象，若是定義方法名稱相同的方法 ，前面的方法會被覆蓋。
三、在JS中，方法的調用只與方法的名稱有關，與方法的參數列表無關。
四、在方法聲明有一個隱藏的內置對象（數組）arguments數組，封裝了全部的實際參數。
//獲取全部參數的和。
<script>
function run(){
var sum=0 ; //先初始化定義一個
for(var i = 0 ;i<arguments.length;i++){
sum+=arguments[i];
}
document.write(sum);
}
run(3,5,6,9);
</script>
五、調用
方法名稱 （實際參數列表）
Array對象
Array對象
一、建立
一、var arr = new Array(元素列表);
二、var arr = new Array(默認長度);
三、var arr = [元素列表];
二、方法
join（參數），將數組的元素按指定的分隔符拼接成字符串。
三、屬性
length：數組的長度。
四、特色
在JS中數組的類型可變，長度可變
Date日期對象
一、建立
var date = new Date();
二、方法
toLocaleString() 返回當前對象對應的本地時間本地字符串格式。
getTime() 獲取毫秒值，當前時間到1970年1月1日零點的毫秒值。
Regexp正則表達式
正則表達式：定義一個字符串的組成規則
建立
一、var reg = new Regexp("正則表達式");
二、var reg = /正則表達式/;
方法
test（參數）驗證參數是否和正則表達式匹配。
DOM簡單學習
功能：控制HTML文檔的內容
代碼：獲取頁面標籤（元素）對象。
*document.getElementById("id");經過元素的id獲取對象。
操做Element對象
修改屬性值：
*明確獲取的對象是哪個
*查看API找其中能夠設置的屬性
修改標籤體內容：
先獲取標籤的對象
var ele = document.getElementById("id");
再修改內容
經過innerHTML方法：ele.innerHTMl = 要修改爲的內容。
事件的簡單學習
功能：某些組件執行了某些操做後，觸發了某些代碼的執行。
如何綁定事件：
一、直接在html標籤上，指定事件的屬性，屬性值就是JS代碼
事件：onclick---單擊事件
二、經過js代碼獲取元素對象，指定事件屬性，設置一個函數如（function fun01(){}）。
//先獲取img標籤的對象
var pho = document.getElementById("pho");
//修改指定元素的值,綁定事件
pho.onclick = fun01;
BOM(Browser Object Model)瀏覽器對象模型
將瀏覽器的各個組成部分封裝成對象。
組成：
Window 窗口對象
Navigator 瀏覽器對象（不重要）
Screen 顯示器屏幕對象（不重要）
History 歷史記錄對象
Location 地址欄對象
window對象
建立：
方法：
一、與彈出框有關的方法
alert()顯示帶有一段信息和確認按鈕的警告框。
*confirm()顯示帶有一段信息以及確認按鈕和取消按鈕的對話框。
*若是點擊確認按鈕，則方法返回true，
*若是點擊取消按鈕，則方法返回false；
prompt()顯示可提示用戶輸入的對話框
*返回值是獲取用戶輸入的值。
二、與打開關閉有關的方法。
open()打開一個新的瀏覽器窗口
屬性：
一、獲取其餘BOM對象。
history 對 History 對象的只讀引用
location 用於窗口或框架的 Location 對象
Navigator 對 Navigator 對象的只讀引用
screen 對 Screen 對象的只讀引用。
二、獲取DOM對象
document 對Document對象的只讀引用
特色：
window 對象不須要存在能夠直接使用。如window.方法名。
window引用能夠省略，如方法名（）
location：地址欄對象
建立
一、window.location()
二、location()
方法
reload()從新加載當前頁面；刷新
屬性
href：設置或返回完整的URL
DOM：
概念：（Document Object Model）
將標記語言文檔的各個組成部分，封裝成對象，使用這些對象對標記語言進行增刪改查的操做
DOM被分爲三個不一樣的部分
核心DOM-針對任何結構化文檔的標準模型。
*Document：文檔對象
Element：元素對象
Attribute：屬性對象
Text：文本對象
Comment：註釋對象
Node：節點對象，其餘5個的父對象
XML DOM-針對XML文檔的標準模型
HTML DOM-針對HTML文檔的標準模型。
核心DOM模型：
Document：文檔對象
Element：元素對象
Node：節點對象，其餘5個的父對象
Document：文檔對象
建立：window.document 和document直接獲取
方法
一、獲取Element對象
getElementById（id值），根據id屬性值獲取id對象，id是惟一的
二、獲取其餘Dom對象
createElement（元素名稱）經過指定名稱建立一個元素對象
createTextNode（）建立文本節點
屬性
Element：元素對象
一、獲取/建立 經過document來獲取和建立
二、方法
removeAttribute()刪除屬性
setAttribute()設置屬性
Node：節點對象，其餘5個的父對象
特色：全部DOm對象均可以認爲是一個節點。
方法：CRUD dom樹
appendchild() 向節點的子節點列表的末尾添加一個新的子節點
removechild() 刪除當前節點指定的子節點
replacechild() 用新節點替換子節點
屬性：
parentNode()：返回當前節點的父節點
案例：動態表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid ;
margin: auto;
width: 500px;
}
th,td{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text"id="id"placeholder="請輸入編號" />
<input type="text"id="uname"placeholder="請輸入名字" />
<input type="text"id="sex"placeholder="請輸入性別" />
<input type="button"id="ad"value="添加" />
</div>
<table id="table">
<caption>學生信息表</caption>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>操做</th>
</tr>
<tr>
<td>001</td>
<td>安林</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="fun01(this)" >刪除</a> </td>
</tr>
<tr>
<td>002</td>
<td>安林林</td>
<td>男</td>
<td><a href="#"onclick="fun01(this)" >刪除</a> </td>
</tr>
</table>
<script>
//綁定單擊事件
document.getElementById("ad").onclick = function(){
//獲取文本框的內容
var id = document.getElementById("id").value;
var name = document.getElementById("uname").value;
var sex = document.getElementById("sex").value;
//建立td，設置td的文本爲文本框的內容
var td_id = document.createElement("td");//建立td
var text_id = document.createTextNode(id);//將id的文本經過createTextNode文本節點進行賦值 ，而後添加到元素中
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_sex.appendChild(text_sex);
//建立a標籤的td
var td_a = document.createElement("td");
var aa = document.createElement("a");
aa.setAttribute("href","#");
aa.setAttribute("onclick","fun01(this);");
var text_a = document.createTextNode("刪除");
aa.appendChild(text_a);//將元素都添加到標籤中
td_a.appendChild(aa);//將標籤添加到td中
//建立tr
var tr = document.createElement("tr");
//將td添加到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_a);
//獲取table，將tr添加到table中。
var table = document.getElementById("table");
table.appendChild(tr);
}
//刪除一行
function fun01(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
HTML DOM
標籤體的設置和獲取：innerHTML。能夠進行追加使用+=。
使用html元素對象的屬性
控制樣式
一、使用元素的style屬性來設置
<div id="div1">你們好</div>
<script>
//一、使用style屬性來設置樣式
//先獲取該標籤的對象
var div1 = document.getElementById("div1");
//再綁定單擊事件
div1.onclick = function(){
div1.style.border ="1px solid red";
div1.style.width = "500px";
div1.style.fontSize = "40px";
}
</script>
二、提早定義好類選擇器，經過元素的className的屬性來設置其class屬性值。
代碼以下：
<style> .d1{ border: 1px solid red ; width: 400px; font-size: 50px; } .d2{ border: 3px solid black; width: 200px; font-size: 30px; } </style> <div id="div2"> 你們好我是div2. </div> <script> var div2 = document.getElementById("div2"); div2.onclick = function(){ div2.className = "d2"; } </script>
事件：
概念：某些組件被執行了某些操做後，觸發某些代碼的執行。
*事件：某些操做。如：單擊，雙擊，鍵盤按下了，鼠標移動了
*事件源：組件。如：按鈕，文本輸入框。。。
*監聽器：代碼。
*註冊監聽：將事件，事件源，監聽器結合在一塊兒。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
常見的事件：
一、點擊事件：
onclick：單擊事件
ondblclick：雙擊事件
二、焦點事件：
onblur：失去焦點 通常用於表單的校驗
onfocus：元素活動焦點
三、加載事件：
一、onload：一張頁面或一張圖像完成加載。
四、鼠標事件：
onmousedown 鼠標按鈕被按下
*定義方法時，定義一個形參接收event對象
*event對象的button屬性能夠獲取鼠標哪一個按鈕被點擊了
*左鍵是0，滾輪是1，右鍵是2.
document.getElementById("aa").onmousedown = function(num){//num是參數
alert(num.button);//num.button獲取那個鼠標按鈕對應的值。
}
onmouseup 鼠標按鈕被鬆開
onmousemove 鼠標被移動。
onmouseover 鼠標移到某元素上
onmouseout 鼠標從某元素移開
五、鍵盤事件
onkeydown 鍵盤被按下
onkeyup 鍵盤被鬆開
onkeypress 鍵盤按下並鬆開
六、選中和改變事件
onselect 文本被選中
onchange 域的內容被改變時會調用：能夠用於省內二級聯動。代碼以下：
<script>
// 定義二維數組,存儲城市信息
var cities = new Array();
cities[0] = new Array("海淀區","昌平區","朝陽區");
cities[1] = new Array("鄭州市","開封市","洛陽市","平頂山市");
cities[2] = new Array("濟南市","青島市","煙臺市","濰坊市","淄博市");
cities[3] = new Array("石家莊市","唐山市","邯鄲市","廊坊市");
cities[4] = new Array("南京市","蘇州市","揚州市","宿遷市");
//改變指定的值
function fun(obj){
//經過obj獲取value的值，而後將值傳給二維數組獲取指定的一維數組
var arr = cities[obj];
//獲取city的對象
var city = document.getElementById("city");
city.innerHTML = "<option>----請-選-擇-市----</option>";//將每次都進行清空
//遍歷獲取的一維數組
for(var i = 0 ; i<arr.length;i++){
city.innerHTML += "<option>"+arr[i]+"</option>";//將每個值都添加到city中
}
}
</script>
<body>
<select id="province" onchange="fun(this.value)" style="width:150px">
<option value="">----請-選-擇-省----</option>
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">山東省</option>
<option value="3">河北省</option>
<option value="4">江蘇省</option>
</select>
<select id="city" style="width:150px">
<option value="">----請-選-擇-市----</option>
</select>
</body>
七、表單事件
onsubmit 確認按鈕被點擊
*用於表單 的校驗
若是爲false表單將不會提交，若是爲true，表單將提交
onreset 取消按鈕被點擊
總結 ：
JavaScript很重要，不管是學前端仍是學後端都要精通它，感受對邏輯沒啥要求，主要仍是記標籤記方法，
就一句話我一個學後端的還怕前端的這一點東西嗎。。。分分鐘征服JavaScript！！！
- 1. JavaScript第三天
- 2. JAVASCRIPT第三天
- 3. HTML和javascript 第三天
- 4. javascript基礎(第三天)
- 5. vue第三天
- 6. js第三天
- 7. 第十三天
- 8. JavaScript第一天
- 9. 第14天，JavaScript
- 10. JavaScript學習筆記第三天_對象
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • 第一個MyBatis程序 - MyBatis教程
- • RxJava操作符（三）Filtering
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
- 1. JavaScript第三天
- 2. JAVASCRIPT第三天
- 3. HTML和javascript 第三天
- 4. javascript基礎(第三天)
- 5. vue第三天
- 6. js第三天
- 7. 第十三天
- 8. JavaScript第一天
- 9. 第14天，JavaScript
- 10. JavaScript學習筆記第三天_對象