相等运算符 函数传参 匿名函数

相等运算符

相等运算符用来比较两个值是否相等,

如果相等会返回true,否则返回false

使用 == 来做相等运算

- 当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后再比较

不相等

不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false

- 使用 != 来做不相等运算

- 不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false

===全等

- 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换

如果两个值的类型不同,直接返回false

!==

不全等

- 用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换

如果两个值的类型不同,直接返回true

==

console.log(b==NaN;//false

console.log(isNaN(b));//true

!=

===

!==


条件运算符

也叫三元运算符 三目运算符

条件运算符也叫三元运算符

语法:

条件表达式?语句1:语句2;

- 执行的流程:

条件运算符在执行时,首先对条件表达式进行求值,

如果该值为true,则执行语句1,并返回执行结果

如果该值为false,则执行语句2,并返回执行结果

如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值然后在运算

true?alert(语句1):alert(语句2);

true 就执行语句1

false?alert(语句1):alert(语句2);

false就执行语句2

运算符的优先级

运算符 使用,可以分割多个语句,一般可以在声明多个变量时使用

var a=1 b= 2 c =3

使用,运算符同时声明多个变量

var a, b, c;

可以同时声明多个变量并赋值

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

alert(b);

就和数学中一样,在JS中运算符也有优先级,

比如:先乘除 后加减

在JS中有一个运算符优先级的表,

在表中越靠上优先级越高,优先级越高越优先计算

如果优先级一样,则从左往右计算

但是这个表我们并不需要记忆,如果遇到优先级不清楚

可以使用()来改变优先级

var result = 1 + 2 * 3;

var result = 1 + 23;

如果||的优先级高,或者两个一样高,则应该返回3

如果与的优先级高,则应该返回1


语句 statement

我们的程序是由一条一条语句构成的

语句是按照自上向下的顺序一条一条执行的

在JS中可以使用{}来为语句进行分组,

同一个{}中的语句我们称为是一组语句,

它们要么都执行,要么都不执行,

一个{}中的语句我们也称为叫一个代码块

在代码块的后边就不用再编写;了

JS中的代码块,只具有分组的的作用,没有其他的用途

代码块内容的内容,在外部是完全可见的

js 操作属性

DOM是为了操作文档(网页)的API,document是它的一个对象

BOM是为了操作浏览器的API,window是它的一个对象

常用BOM对象还有:alert、定时器等

整个文档加载完之后执行一个匿名函数

window.onload = function(){

document.getElementById('div1').title = "我看到了!";

变量oA代表整个a标签

var oA = document.getElementById('link1');

oA.href = "http://www.tencent.com";

oA.title = "跳转到腾讯网"

alert(oA.id);

alert(oA.title);

}


js换肤

例子如下

<head>

<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>


js操作style属性

style属性中的样式属性,没有"-"号的,写法相同

style属性中的样式属性,带"-"号的需要去掉"-"号,写成小驼峰式

例如:font-size属性要写为fontSize

js操作class

由于class是js中的保留关键字,所以设置class属性时,要写为className

js中括号操作属性

window.onload = function(){

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

oDiv.style.color = 'red';//red必须加引号,否则会认为它是一个变量,引起来会认为它是一个值,赋值给=号左边

var attr = 'color';

oDiv.style[attr] = 'red';

通过[]操作属性可以写变量

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

通过innerHTML可以读写元素包括的内容 alert(oDiv.innerHTML);//读取标签里面包裹的元素,即“这是一个div元素”

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

oDiv2.innerHTML = '这是第二个div元素';

向div标签中插入内容

oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";

向div标签中插入超链接标签

document.write和innerHTML的区别

document.write只能重绘整个页面innerHTML可以重绘页面的一部分


js函数

<head>

<script type="text/javascript">

function aa(){

alert('hello!');

}

/*直接调用

aa();*/

</script>

</head>

<body>

<input type="button" name="" value="弹框" onclick="aa()" />


js可控制换肤

<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(),这样写就马上执行了

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>

<!-- 行间调用函数

<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>


变量和函数预解析

/*变量预解析*/

alert(a);只把变量a的声明提前,赋值不提前,所以弹出undefined,表示它的值未定义

alert(c);//报错,c没有声明,这是真正的未定义

var a = 123;

/*函数预解析*/

myalert();//弹出hello!

function myalert(){

alert('hello!');

}


匿名函数

window.onload = function(){

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

/*有名字的函数*/

oDiv.onclick = myalert;

function myalert(){

alert('hello');

}

/*匿名函数*/

oDiv.onclick = function(){

alert('hello');


函数传参

window.onload = function(){

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

changeStyle('color', 'gold');

changeStyle('background', 'red');

changeStyle('width', '300px');

changeStyle('height', '300px');

changeStyle('fontSize', '30px');

function changeStyle(styl, val){

oDiv.style[styl] = val;


函数return关键字

window.onload = function(){

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

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

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

写入值

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('计算完成');  执行

return c;  返回函数设定的值,同时结束函数的运行

return;  不返回值,仅结束函数的运行

alert('计算完成'); 不执行


流程控制语句

- JS中的程序是从上到下一行一行执行的

- 通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行

- 语句的分类:

1.条件判断语句

2.条件分支语句

3.循环语句


条件判断语句

- 使用条件判断语句可以在执行某个语句之前进行判断,

如果条件成立才会执行语句,条件不成立则语句不执行。

- if语句

- 语法一:

if(条件表达式){

语句...

}

if语句在执行时,会先对条件表达式进行求值判断,

如果条件表达式的值为true,则执行if后的语句,

如果条件表达式的值为false,则不会执行if后的语句。

if语句只能控制紧随其后的那个语句,

如果希望if语句可以控制多条语句,

可以将这些语句统一放到代码块中

if语句后的代码块(即{})不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句

- 语法二:

if(条件表达式){

语句...

}else{

语句...

}

if...else...语句

当该语句执行时,会先对if后的条件表达式进行求值判断,

如果该值为true,则执行if后的语句

如果该值为false,则执行else后的语句

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335