2018-12-01
2018-12-01 本文已影响0人
11bbc2c5d0c6
赋值运算符
<script type="text/javascript">
/*
=
可以将符号右侧的值赋值给符号左侧的变量
+=
a += 5 等价于 a = a + 5
-=
a -= 5 等价于 a = a - 5
*=
a *= 5 等价于 a = a5
/=
a /= 5 等价于 a = a / 5
%=
a %= 5 等价于 a = a % 5
*/
var a = 10;
//a = a + 5;
//a += 5;
//a -= 5;
//a *= 5;
// a = a%3;
a %= 3;
console.log("a = "+a);
</script>
关系运算符
<script type="text/javascript">
/*
通过关系运算符可以比较两个值之间的大小关系，
如果关系成立它会返回true，如果关系不成立则返回false
> 大于号
- 判断符号左侧的值是否大于右侧的值
- 如果关系成立，返回true，如果关系不成立则返回false
>= 大于等于
- 判断符号左侧的值是否大于或等于右侧的值
< 小于号
<= 小于等于
非数值的情况
- 对于非数值进行比较时，会将其转换为数字然后再比较
- 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码
*/
var result = 5 > 10;//false
result = 5 > 4; //true
result = 5 > 5; //false
result = 5 >= 5; //true
result = 5 >= 4; //true
result = 5 < 4; //false
result = 4 <= 4; //true
//console.log("result = "+result);
//console.log(1 > true); //false
//console.log(1 >= true); //true
//console.log(1 > "0"); //true
//console.log(10 > null); //true
//任何值和NaN做任何比较都是false
//console.log(10 > "hello"); //false
//console.log(10 >= "hello"); //false
//console.log(10 < "hello"); //false
//console.log(10 <= "hello"); //false
//console.log(true > false); //true
//console.log("1" < "5"); //true
//console.log("11" < "5"); //true
//比较两个字符串时，比较的是字符串的字符编码
//console.log("a" < "b");//true
//比较字符编码时是一位一位进行比较
//如果两位一样，则比较下一位，所以借用它来对英文进行排序
// console.log("abc" < "b");//true
// console.log("bbc" < "b");//false
//console.log("abc" < "bcd");//true
//比较中文时没有意义
//console.log("你" > "我"); //false
// console.log("月" > "我"); //true
//如果比较的两个字符串型的数字，可能会得到不可预期的结果
//注意：在比较两个字符串型的数字时，一定一定一定要转型
console.log("11123123123123123123" < +"5"); //false
</script>
Unicode编码
| <link rel="icon" href="[img/favicon.ico](img/favicon.ico)" type="image/x-icon" /> |
| | <link rel="shortcut icon" href="[img/favicon.ico](img/favicon.ico)" type="image/x-icon"/> |
| | <script type="text/javascript"> |
| | /* |
| | 在字符串中使用转义字符输入Unicode编码 |
| | \u四位编码 |
| | */ |
| | console.log("\u2F81"); |
| | console.log("\u2620"); |
| | </script> |
| | </head> |
| | <body> |
| | <!-- |
| | 在网页中使用Unicode编码： |
| | &#编码; |
| | 注意：这里的编码需要的是10进制 |
| | --> |
| | <h1 style="font-size: 200px; color:red;">☠</h1> |
| | <h1 style="font-size: 200px;">⚀</h1> |
| |
|
| | </body> |
相等运算符
<script type="text/javascript">
/*
相等运算符用来比较两个值是否相等，
如果相等会返回true，否则返回false
使用 == 来做相等运算
- 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较
不相等
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
- 使用 != 来做不相等运算
- 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
===
全等
- 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
如果两个值的类型不同，直接返回false
!==
不全等
- 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换
如果两个值的类型不同，直接返回true
*/
//console.log(1 == 1); //true
var a = 10;
//console.log(a == 4); //false
//console.log("1" == 1); //true
//console.log(true == "1"); //true
//console.log(null == 0); //false
/*
undefined 衍生自 null
所以这两个值做相等判断时，会返回true
*/
//console.log(undefined == null);//true
/*
NaN不和任何值相等，包括他本身
*/
//console.log(NaN == "1"); //false
//console.log(NaN == "undefined"); //false
//console.log(NaN == NaN); //false
var b = NaN;
//判断b的值是否是NaN
//console.log(b == NaN);//无法判断，只会返回false
/*
可以通过isNaN()函数来判断一个值是否是NaN
如果该值是NaN则返回true，否则返回false
*/
//console.log(isNaN(b)); //true
//console.log(10 != 5); //true
//console.log(10 != 10); //false
//console.log("abcd" != "abcd"); //false
//console.log("1" != 1);//false
//console.log("123" === 123);//false
//console.log(null === undefined);//false
console.log(1 != "1"); //true
</script>
条件运算符
<script type="text/javascript">
/*
条件运算符也叫三元运算符
语法：
条件表达式?语句1:语句2;
- 执行的流程：
条件运算符在执行时，首先对条件表达式进行求值，
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果
如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算
*/
//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>
运算符的优先级
<script type="text/javascript">
/*
, 运算符
使用,可以分割多个语句，一般可以在声明多个变量时使用
*/
//使用,运算符同时声明多个变量
//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
*/
var result = 1 || 2 && 3;
console.log("result = " + result);
</script>
代码块
<script type="text/javascript">
/*
我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
在JS中可以使用{}来为语句进行分组,
同一个{}中的语句我们称为是一组语句，
它们要么都执行，要么都不执行，
一个{}中的语句我们也称为叫一个代码块
在代码块的后边就不用再编写;了
JS中的代码块，只具有分组的的作用，没有其他的用途
代码块内容的内容，在外部是完全可见的
*/
{
var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
}
console.log("a = "+a);
</script>
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); |
| | } |
| | </script> |
| | </head> |
| | <body> |
| | <div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素 </div> |
| |
|
| | <a href="[#](#)" id="link1">腾讯网</a> |
| |
|
| |
|
| | <!-- <script type="text/javascript"> |
| | document.getElementById('div1').title = "我看到了！"; |
| | </script> --> |
| | </body> |
js换肤
| <link rel="stylesheet" type="text/css" href="[css/1.css](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> |
js操作style属性
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
/*style属性中的样式属性，没有"-"号的，写法相同*/
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
/*
style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
例如：font-size属性要写为fontSize
*/
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
