獲取元素
document.get Element By Id()
文檔 獲取 元素 通過
document.getElementById("box").style.background = "blue";
//就通過獲取文檔中的ID，來改變背景顏色
cssText
-
cssText 獲取style中所有內容
-
直接修改cssText會覆蓋晌区，style中的所有內容隐砸，如果不想覆蓋之前的所有內容髓堪，可以直接寫 style姜凄，或者用 +=
box.style.cssText += "width: 400px"; //修改其中的一個樣式 box.style.cssText = ""; //清空所有行間樣式?
-
cssText = "" 可以直接清空所有的行間樣式
元素改變的是行間的樣式
innerHTML
- innerHTML 元素的內容
- 從元素的開標簽到閉合標簽之間的所有內容,包括元素中包含的子元素
- 直接設置元素的innerHTML烛亦，或替換掉之前的所有內容,如果不想替換只是添加內容用 +=
+號運算符
加法運算
鏈接兩個字符串（包在引號中的一串字符杈湾，叫做字符串）
-
+= (a += b --- a = a + b)
cosole.log(1 + 1); //2個數(shù)字相加膝迎，結果是2； cosole.log("1" + "1"); //2個字符串鏈接灰蛙，結果是11祟剔；加號有兩個作用，一個是加法運算摩梧，一個是字符串連接,只有加號左右兩側是數(shù)字的情況才會執(zhí)行加法運算,如果有一次是字符串就會執(zhí)行字符串連接物延，連接的結果也是字符串
字符串寫法 var deg = 0; var tX = 0; //transform: rotate(0deg) translateX(0px); transform = "rotate(" + deg + "deg) translateX(" + tX + "px)";?
函數(shù)
- 函數(shù)聲明
function name(){
? 要執(zhí)行的內容；
}
name();
- 有名字的函數(shù)
var left = 0;
var t = 100;
function running(){
left += 100;
t += 100;
box.style.left = left + "px";
box.style.top = t + "px";
}
running();
//在寫left仅父，width等樣式時叛薯，一定注意加單位
- 匿名函數(shù)
function(){
left += 100;
top += 100;
box.style.left = left + "px";
box.style.top = top + "px";
}
//暫時匿名函數(shù)不能直接使用，只能使用在事件中
-
函數(shù)調用
事件調用：不加括號
非事件調用：添加括號
什么時候加括號笙纤，什么時候不加括號:
- 當瀏覽器讀到這行代碼的時候耗溜，就執(zhí)行需要給函數(shù)調用加();
- 當某種特定的條件下才執(zhí)行，不需要加();
window.onload
window.onload 整個頁面加載完整
onload事件 加載完整
用來當頁面加載完成后省容，運行js抖拴。
window.onload = function(){ //要運行的js代碼 }
document.querySelector('Css Selector');
接收一個css選擇器(通配，群組腥椒，包含城舞，id，類……等等)
如果這個選擇器對應的是一組元素寞酿，就只找第0個
var box = document.querySelector('.box'); //如果下面有很多個.box的class家夺，那就只對應第0個js下是從0 開始計算
使用class來改變樣式
先給一個class設置好需要改變的樣式
.hover {
display: block;
}
再通過給需要改變的元素添加class來改變樣式
<script type="text/javascript">
window.onload = function(){
var wrap = document.querySelector('.wrap');
var ul = document.querySelector('ul');
wrap.onmouseover = function(){
ul.className = "hover";
};
wrap.onmouseout = function(){
ul.className = "";
};
};
</script>
if判斷
-
邏輯運算符
== 相等；伐弹！=不等拉馋；>= 大于等于 ；<=小于等于惨好；>大于煌茴；<小于；
-
if(判斷條件)｛
? 條件成立要執(zhí)行的內容
｝ else {
? 條件不成立要執(zhí)行的內容
}
-
布爾值 （true/false）
var a = 10; var b = 10; if(a != b){ alert("正確"); } else { alert("不正確"); } /* if(布爾值true或false){ 為true時要執(zhí)行的語句 } else { 為false時要執(zhí)行的語句 } */一種操作下日川，會有兩種或以上的執(zhí)行結果蔓腐，記得用判斷
開關
<script type="text/javascript"> window.onload = function() { var btn = document.querySelector('#btn'); var is = true; /* 默認是true*/ btn.onclick = function(){ if(is == true) { alert("正確"); is = false; /* 為true的時候，就改成false龄句，下次就會走else */ } else { alert("錯誤"); is = true; /* 為false的時候回论，就改成true散罕，下次就會走if */ } }; }; </script>取反
<script type="text/javascript"> window.onload = function() { var btn = document.querySelector('#btn'); var is = true; /* 默認是true*/ btn.onclick = function(){ if(is) { alert("正確"); } else { alert("錯誤"); } is = !is; // ! 取反 true 變成false false變成true }; }; </script>布爾值的前綴一般為is
?
if的四種寫法
-
第一種
<script type="text/javascript"> var a = 0; var b = 1; if(a + b < 0) { alert(true); } else { alert(false); } </script> -
第二種
<script type="text/javascript"> var a = 0; var b = 1; // 成立做某件事，不成立啥都不做 if(a + b < 0) { alert(true); } </script> -
第三種
<script type="text/javascript"> var a = 0; var b = 1; if(a + b == 0) { //條件成就執(zhí)行里邊的內容傀蓉，下邊 else if 就不會在執(zhí)行 alert(0); } else if(a + b == 1) {//上邊的條件不成立欧漱，就查看本條，條件成就執(zhí)行里邊的內容葬燎，下邊的內容不執(zhí)行 alert(1); } else if(a + b == 2) { alert(2); } </script> -
第四種
<script type="text/javascript"> var a = 0; var b = 10; /* if(a + b == 0) { //條件成就執(zhí)行里邊的內容误甚，下邊 else if 就不會在執(zhí)行 alert(0); } else if(a + b == 1) {//上邊的條件不成立，就查看本條谱净，條件成就執(zhí)行里邊的內容窑邦，下邊的內容不執(zhí)行 alert(1); } else if(a + b == 2) { alert(2); } else { //都不成立 } </script>
可以獲取到一組元素的幾種選擇方式
<script type="text/javascript"> window.onload = function(){ var list = document.querySelector('.list'); var li = list.getElementsByClassName("li"); /* 父級.getElementsByTagName("標簽名"); 獲取元素下的某個類型的標簽 獲取的結果是 一組元素(元素集合) 父級.getElementsByClassName("class名"); 獲取元素下的某個類型的class 獲取的結果是 一組元素(元素集合) 父級.querySelectorAll('css 選擇器'); 獲取元素下的某個類型的元素 獲取的結果是 一組元素(元素集合) */ console.log(li); }; </script>1.一組元素不能在js直接操作
2.一組元素哪怕只有1個，他也是一組元素
3.一組元素在操作的時候壕探，可以使用下標
4.如果需要知道這組元素有幾個冈钦，可以使用 length屬性
window.onload = function(){ var list = document.querySelector('.list'); var li = list.getElementsByTagName("li"); //console.log(li); li[0].style.background = "red"; alert(li.length); }; </script>
循環(huán)
循環(huán)的樣式
<script type="text/javascript"> for(var i = 0; i < 5; i++) { alert(i); } </script>循環(huán)執(zhí)行過程
var i = 0;是初始值 （1） i < 5;是判斷條件（2） i++ ；自增（3） alert(i);執(zhí)行語句（4）
初始值往下走浩蓉；
判斷條件是否成立派继；
成立后執(zhí)行語句宾袜；
返回來自增捻艳；
再進行判斷條件是否成立；
一直進行到判斷條件不成立庆猫；
?
this
在事件函數(shù)中认轨，this代表觸發(fā)當前事件的元素
例如
<script type="text/javascript"> window.onload = function(){ var li = ul.querySelectorAll('li'); for(var i = 0; i < li.length; i++) { li[i].onclick = function(){ console.log(this); // 在事件函數(shù)中，this代表觸發(fā)當前事件的元素 }; } }; </script>
//console.log中的this 顯示當前l(fā)i的所有元素<li>innerHTML</li>
