（1）條件運算符
條件運算符也叫三元運算符
語法：
條件表達式?語句1:語句2;
- 執(zhí)行的流程：
條件運算符在執(zhí)行時蹲蒲，首先對條件表達式進行求值番甩，
如果該值為true侵贵，則執(zhí)行語句1届搁，并返回執(zhí)行結(jié)果
如果該值為false，則執(zhí)行語句2窍育，并返回執(zhí)行結(jié)果
如果條件的表達式的求值結(jié)果是一個非布爾值卡睦，會將其轉(zhuǎn)換為布爾值然后在運算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件運算符</title>
<script type="text/javascript">
//true?alert("語句1"):alert("語句2");
//false?alert("語句1"):alert("語句2");
var a = 300;
var b = 143;
var c = 50;
//a > b ? alert("a大"):alert("b大");
//獲取a和b中的最大值
//var max = a > b ? a : b;
//獲取a b c 中的最大值
//max = max > c ? max : c;
//這種寫法不推薦使用，不方便閱讀
var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
//console.log("max = "+max);
//"hello"?alert("語句1"):alert("語句2");
</script>
</head>
<body>
</body>
</html>
(2)運算符的優(yōu)先級
運算符
使用,可以分割多個語句漱抓，一般可以在聲明多個變量時使用
就和數(shù)學中一樣表锻，在JS中運算符也有優(yōu)先級，
比如：先乘除 后加減
在JS中有一個運算符優(yōu)先級的表乞娄，
在表中越靠上優(yōu)先級越高瞬逊，優(yōu)先級越高越優(yōu)先計算
如果優(yōu)先級一樣，則從左往右計算
但是這個表我們并不需要記憶仪或，如果遇到優(yōu)先級不清楚
可以使用()來改變優(yōu)先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>運算符的優(yōu)先級</title>
<script type="text/javascript">
//使用,運算符同時聲明多個變量
//var a, b, c;
//可以同時聲明多個變量并賦值
//var a=1, b=2, c=3;
//alert(b);
// var result = 1 + 2 * 3;
//var result = 1 + 23;
/*
如果||的優(yōu)先級高确镊，或者兩個一樣高，則應(yīng)該返回3
如果與的優(yōu)先級高范删，則應(yīng)該返回1
*/
var result = 1 || 2 && 3;
console.log("result = " + result);
</script>
</head>
<body>
</body>
</html>
(3)代碼塊
我們的程序是由一條一條語句構(gòu)成的
語句是按照自上向下的順序一條一條執(zhí)行的
在JS中可以使用{}來為語句進行分組,
同一個{}中的語句我們稱為是一組語句蕾域，
它們要么都執(zhí)行，要么都不執(zhí)行，
一個{}中的語句我們也稱為叫一個代碼塊
在代碼塊的后邊就不用再編寫;了
JS中的代碼塊旨巷，只具有分組的的作用巨缘，沒有其他的用途
代碼塊內(nèi)容的內(nèi)容，在外部是完全可見的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代碼塊</title>
<script type="text/javascript">
{
var a = 10;
alert("hello");
console.log("你好");
document.write("語句");
}
console.log("a = "+a);
</script>
</head>
<body>
</body>
</html>
(4)js操作屬性
DOM是為了操作文檔（網(wǎng)頁）的API采呐，document是它的一個對象
BOM是為了操作瀏覽器的API若锁，window是它的一個對象
常用BOM對象還有：alert、定時器等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作屬性</title>
<script type="text/javascript">
//整個文檔加載完之后執(zhí)行一個匿名函數(shù)
window.onload = function(){
document.getElementById('div1').title = "我看到了懈万！";
//變量oA代表整個a標簽
var oA = document.getElementById('link1');
oA.;
oA.title = "跳轉(zhuǎn)到騰訊網(wǎng)"
alert(oA.id);
alert(oA.title);
}
</script>
</head>
<body>
<div id="div1" class="div1" title="這是div元素拴清，看到了嗎？">這是一個div元素</div>
<a href="#" id="link1">騰訊網(wǎng)</a>
<!-- <script type="text/javascript">
document.getElementById('div1').title = "我看到了会通！";
</script> -->
</body>
</html>
(5)js換膚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js換膚</title>
<link rel="stylesheet" type="text/css" href="css/1.css" id="link1">
<script type="text/javascript">
window.onload = function(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
alert(oLink.id);
}
</script>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>
(6)js操作style屬性
style屬性中的樣式屬性口予，沒有"-"號的，寫法相同
style屬性中的樣式屬性涕侈，帶"-"號的需要去掉"-"號沪停，寫成小駝峰式
例如：font-size屬性要寫為fontSize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作style屬性</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
</body>
</html>
(7)js操作class
由于class是js中的保留關(guān)鍵字，所以設(shè)置class屬性時裳涛，要寫為className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作class</title>
<style type="text/css">
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.className = 'box02';
}
</script>
</head>
<body>
<div class="box01" id="div1"></div>
</body>
</html>
(8)js中括號操作屬性
oDiv.style.color = 'red';//red必須加引號木张，否則會認為它是一個變量，引起來會認為它是一個值端三，賦值給=號左邊
通過innerHTML可以讀寫元素包括的內(nèi)容
讀取標簽里面包裹的元素舷礼，即“這是一個div元素
oDiv2.innerHTML = '這是第二個div元素';向div標簽中插入內(nèi)容
document.write和innerHTML的區(qū)別
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中括號操作屬性</title>
<style type="text/css">
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//oDiv.style.color = 'red';//red必須加引號，否則會認為它是一個變量郊闯，引起來會認為它是一個值妻献，賦值給=號左邊
var attr = 'color';
// oDiv.style[attr] = 'red';
/* 通過[]操作屬性可以寫變量 */
oDiv['style'][attr] = 'red';
alert(oDiv.innerHTML);
var oDiv2 = document.getElementById('div2');
oDiv2.innerHTML = "<a ;//向div標簽中插入超鏈接標簽
}
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
<div id="div2"></div>
</body>
</html>
(9)js函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函數(shù)</title>
<script type="text/javascript">
function aa(){
alert('hello!');
}
/*
//直接調(diào)用
aa();
*/
</script>
</head>
<body>
<input type="button" name="" value="彈框" onclick="aa()" />
</body>
</html>
(10)js可控換膚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js換膚</title>
<link rel="stylesheet" type="text/css" href="css/1.css" id="link1">
<script type="text/javascript">
window.onload = function(){
/* 提取行間事件 */
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
oBtn01.onclick = skin01;//這里不能寫skin01()，這樣寫就馬上執(zhí)行了
oBtn02.onclick = skin02;
}
function skin01(){
var oLink = document.getElementById('link1');
oLink.href = "css/1.css";
}
function skin02(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
}
</script>
</head>
<body>
<!--
行間調(diào)用函數(shù)
<input type="button" name="" value="皮膚01" onclick="skin01()" />
<input type="button" name="" value="皮膚02" onclick="skin02()" /> -->
<input type="button" name="" value="皮膚01" id="btn01" />
<input type="button" name="" value="皮膚02" id="btn02" />
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>
