相等运算符
相等运算符用来比较两个值是否相等，
如果相等会返回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后的语句
网友评论