2019-06-10相等運(yùn)算符,條件運(yùn)算符,運(yùn)算符得優(yōu)先級(jí),代碼塊,js操作屬性,js換膚,js操作style屬性,js操作class.html,js中括號(hào)操作屬性,js函數(shù),js可控制換膚,變...


相等運(yùn)算符

相等運(yùn)算符用來(lái)比較兩個(gè)值是否相等,

如果相等會(huì)返回true,否則返回false

使用 == 來(lái)做相等運(yùn)算

- 當(dāng)使用==來(lái)比較兩個(gè)值時(shí),如果值的類(lèi)型不同,則會(huì)自動(dòng)進(jìn)行類(lèi)型轉(zhuǎn)換,將其轉(zhuǎn)換為相同的類(lèi)型,然后再比較

不相等

不相等用來(lái)判斷兩個(gè)值是否不相等,如果不相等返回true,否則返回false

- 使用 != 來(lái)做不相等運(yùn)算

- 不相等也會(huì)對(duì)變量進(jìn)行自動(dòng)的類(lèi)型轉(zhuǎn)換,如果轉(zhuǎn)換后相等它也會(huì)返回false

=== 全等

- 用來(lái)判斷兩個(gè)值是否全等,它和相等類(lèi)似,不同的是它不會(huì)做自動(dòng)的類(lèi)型轉(zhuǎn)換

如果兩個(gè)值的類(lèi)型不同,直接返回false

!== 不全等

- 用來(lái)判斷兩個(gè)值是否不全等,和不等類(lèi)似,不同的是它不會(huì)做自動(dòng)的類(lèi)型轉(zhuǎn)換

如果兩個(gè)值的類(lèi)型不同,直接返回true

條件運(yùn)算符


條件運(yùn)算符也叫三元運(yùn)算符

語(yǔ)法:

條件表達(dá)式?語(yǔ)句1:語(yǔ)句2;

- 執(zhí)行的流程:

條件運(yùn)算符在執(zhí)行時(shí),首先對(duì)條件表達(dá)式進(jìn)行求值,

如果該值為true,則執(zhí)行語(yǔ)句1,并返回執(zhí)行結(jié)果

如果該值為false,則執(zhí)行語(yǔ)句2,并返回執(zhí)行結(jié)果

如果條件的表達(dá)式的求值結(jié)果是一個(gè)非布爾值,會(huì)將其轉(zhuǎn)換為布爾值然后在運(yùn)算


運(yùn)算符得優(yōu)先級(jí)

, 運(yùn)算符

使用,可以分割多個(gè)語(yǔ)句,一般可以在聲明多個(gè)變量時(shí)使用

*/

//使用,運(yùn)算符同時(shí)聲明多個(gè)變量

//var a, b, c;

//可以同時(shí)聲明多個(gè)變量并賦值

//var a=1, b=2, c=3;

//alert(b);

/*

就和數(shù)學(xué)中一樣,在JS中運(yùn)算符也有優(yōu)先級(jí),

比如:先乘除 后加減

在JS中有一個(gè)運(yùn)算符優(yōu)先級(jí)的表,

在表中越靠上優(yōu)先級(jí)越高,優(yōu)先級(jí)越高越優(yōu)先計(jì)算

如果優(yōu)先級(jí)一樣,則從左往右計(jì)算

但是這個(gè)表我們并不需要記憶,如果遇到優(yōu)先級(jí)不清楚

可以使用()來(lái)改變優(yōu)先級(jí)


代碼塊

我們的程序是由一條一條語(yǔ)句構(gòu)成的

語(yǔ)句是按照自上向下的順序一條一條執(zhí)行的

在JS中可以使用{}來(lái)為語(yǔ)句進(jìn)行分組,

同一個(gè){}中的語(yǔ)句我們稱(chēng)為是一組語(yǔ)句,

它們要么都執(zhí)行,要么都不執(zhí)行,

一個(gè){}中的語(yǔ)句我們也稱(chēng)為叫一個(gè)代碼塊

在代碼塊的后邊就不用再編寫(xiě);了

JS中的代碼塊,只具有分組的的作用,沒(méi)有其他的用途

代碼塊內(nèi)容的內(nèi)容,在外部是完全可見(jiàn)的


js操作屬性

DOM是為了操作文檔(網(wǎng)頁(yè))的API,document是它的一個(gè)對(duì)象

BOM是為了操作瀏覽器的API,window是它的一個(gè)對(duì)象

常用BOM對(duì)象還有:alert、定時(shí)器等

//整個(gè)文檔加載完之后執(zhí)行一個(gè)匿名函數(shù)


js換膚


js操作style屬性


js操作class


js中括號(hào)操作屬性

window.onload = function(){

var oDiv = document.getElementById('div1');

//oDiv.style.color = 'red';//red必須加引號(hào),否則會(huì)認(rèn)為它是一個(gè)變量,引起來(lái)會(huì)認(rèn)為它是一個(gè)值,賦值給=號(hào)左邊

var attr = 'color';

// oDiv.style[attr] = 'red';

/* 通過(guò)[]操作屬性可以寫(xiě)變量 */

oDiv['style'][attr] = 'red';

/* 通過(guò)innerHTML可以讀寫(xiě)元素包括的內(nèi)容 */

alert(oDiv.innerHTML);//讀取標(biāo)簽里面包裹的元素,即“這是一個(gè)div元素”

var oDiv2 = document.getElementById('div2');

// oDiv2.innerHTML = '這是第二個(gè)div元素';//向div標(biāo)簽中插入內(nèi)容

oDiv2.innerHTML = "<a ;//向div標(biāo)簽中插入超鏈接標(biāo)簽

document.write和innerHTML的區(qū)別

document.write只能重繪整個(gè)頁(yè)面

innerHTML可以重繪頁(yè)面的一部分

************************************************

<div id="div1">這是一個(gè)div元素</div>

<div id="div2"></div>

js函數(shù)


js可控制換膚

<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;//這里不能寫(xiě)skin01(),這樣寫(xiě)就馬上執(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>

***********************************

<input type="button" name="" value="皮膚01" id="btn01" />

<input type="button" name="" value="皮膚02" id="btn02" />

<div class="box01"></div>

<div class="box02"></div>

變量和函數(shù)欲解析


匿名函數(shù)


<div id="div1">這是一個(gè)div元素</div>

函數(shù)傳參


函數(shù)return關(guān)鍵字

window.onload = function(){

var oInput01 = document.getElementById('input01');

var oInput02 = document.getElementById('input02');

var oBtn = document.getElementById('btn');

//寫(xiě)入值

// oInput01.value = 10;

// oInput02.value = 5;

oBtn.onclick = function(){

var val01 = oInput01.value;

var val02 = oInput02.value;

var rs = add(val01, val02);

alert(rs);

}

function add(a, b){

var c = parseInt(a) + parseInt(b);

// alert('計(jì)算完成');//執(zhí)行

return c;//返回函數(shù)設(shè)定的值,同時(shí)結(jié)束函數(shù)的運(yùn)行

// return;//不返回值,僅結(jié)束函數(shù)的運(yùn)行

// alert('計(jì)算完成');//不執(zhí)行

}

}

</script>

***************************************

<input id="input01" type="text" name="">

<input id="input02" type="text" name="">

<input id="btn" type="button" name="" value="相加">

流程控制語(yǔ)句


流程控制語(yǔ)句

- JS中的程序是從上到下一行一行執(zhí)行的

- 通過(guò)流程控制語(yǔ)句可以控制程序執(zhí)行流程,

使程序可以根據(jù)一定的條件來(lái)選擇執(zhí)行

- 語(yǔ)句的分類(lèi):

1.條件判斷語(yǔ)句

2.條件分支語(yǔ)句

3.循環(huán)語(yǔ)句

console.log('你好');

alert('hello');

條件判斷語(yǔ)句


條件判斷語(yǔ)句:

- 使用條件判斷語(yǔ)句可以在執(zhí)行某個(gè)語(yǔ)句之前進(jìn)行判斷,

如果條件成立才會(huì)執(zhí)行語(yǔ)句,條件不成立則語(yǔ)句不執(zhí)行。

- if語(yǔ)句

- 語(yǔ)法一:

if(條件表達(dá)式){

語(yǔ)句...

}

if語(yǔ)句在執(zhí)行時(shí),會(huì)先對(duì)條件表達(dá)式進(jìn)行求值判斷,

如果條件表達(dá)式的值為true,則執(zhí)行if后的語(yǔ)句,

如果條件表達(dá)式的值為false,則不會(huì)執(zhí)行if后的語(yǔ)句。

if語(yǔ)句只能控制緊隨其后的那個(gè)語(yǔ)句,

如果希望if語(yǔ)句可以控制多條語(yǔ)句,

可以將這些語(yǔ)句統(tǒng)一放到代碼塊中

if語(yǔ)句后的代碼塊(即{})不是必須的,但是在開(kāi)發(fā)中盡量寫(xiě)上代碼塊,即使if后只有一條語(yǔ)句

- 語(yǔ)法二:

if(條件表達(dá)式){

語(yǔ)句...

}else{

語(yǔ)句...

}

if...else...語(yǔ)句

當(dāng)該語(yǔ)句執(zhí)行時(shí),會(huì)先對(duì)if后的條件表達(dá)式進(jìn)行求值判斷,

如果該值為true,則執(zhí)行if后的語(yǔ)句

如果該值為false,則執(zhí)行else后的語(yǔ)句


input type="button" value="切換" id="btn">

<br>

<div class="box" id="box"></div>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 相等運(yùn)算符 相等運(yùn)算符用來(lái)比較兩個(gè)值是否相等, 如果相等會(huì)返回true,否則返回false 使用 == 來(lái)做相等運(yùn)...
    張明越閱讀 356評(píng)論 0 0
  • 工廠(chǎng)模式類(lèi)似于現(xiàn)實(shí)生活中的工廠(chǎng)可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠(chǎng)模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,131評(píng)論 2 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,819評(píng)論 1 45
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,851評(píng)論 0 3
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見(jiàn)的單例模式,...
    Obeing閱讀 2,315評(píng)論 1 10

友情鏈接更多精彩內(nèi)容