加法运算符
加法运算符“+”是最常用的运算符之一,但是使用却相对复杂。因为在Javascript中,加法运算符可以完成两种含义的操作,一种是算术的加法,一种是做字符串拼接。
console.log(1 + 1); // 2
console.log(true + true); // 2
console.log(1 + true); // 2
console.log(‘1’ + 1); // 11
算法步骤:
1、如果运算子是个对象,先转成原始类型的值(即先执行该对象的valueOf方法,如果结果还不是原始数据类型,再执行toString方法);
2、两个运算子都是原始数据类型以后,只要有一个运算子是字符串,则两个运算子都转化为字符串,做字符串拼接操作。
3、否则,两个运算子都转化为数值,做算术加法运算。
2 算术运算符
名称 表示
加法运算符 x + y
减法运算符 x – y
乘法运算符 x * y
除法运算符 x / y
余数运算符(模运算符) x % y
自增运算符 ++x、x++
自减运算符 –x、x–
数值运算符 +x
负数值运算符 -x
var i = 0;
var arr6 = [‘a’,’b’,’c’,’d’];
while (i < arr6.length) {
console.log(arr6[i++]);
// 等同于
// console.log(arr6[i]);
// i = i + 1;
}
3.赋值运算符
最常见的赋值运算符就是“=”;
除了=之外,还有包括“+=”、“-=”、“/=”、“=”、“%=”、“>>=”、“<<=”、“>>>=”、“&=”、“|=”、“^=”
最常用的包括“+=”、“-=”、“/=”、“=”、“%=”。
4.比较运算符
比较运算符运算的结果是一个boolean值,表示是否满足条件。
== 相等、=== 严格相等、!= 不等于、!== 严格不等于、< 小于、<= 小于等于、> 大于、>= 大于等于
关于==和===
相等运算符比较两个值是否相等,严格相等运算符比较他们是否为“同一个值”。如果两个值不是同一类型,严格相等运算符直接返回false,而相等运算符会将他们转成同一数据类型,再用严格相等运算符进行比较。
布尔运算符
将表达式转为布尔值
取反运算符!、且运算符&&、或运算符||、三元运算符?:
1.取反运算符
取反运算符有转换数据类型的作用。
console.log(!undefined); // true
console.log(!null); // true
console.log(!0); // true
console.log(!NaN); // true
console.log(!”“); // true
console.log(!54); // false
console.log(!’hello’); // false
对于或和且的理解:对于两个boolean类型的数据
或:有一个真即真;且:有一个假即假
2.且运算符“&&”
规则:如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值是false,则返回第一个运算子的值,且不再对第二个运算子求值。
console.log(true && true); // true;
console.log(false && true); // false;
console.log(true && ‘abc’); // ‘abc’;
console.log(‘f’ && ‘abc’); // ‘abc’
console.log(NaN && ‘abc’); // NaN
3.或运算符“||”
规则:如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值;如果第一个运算子的值为false,则返回第二个运算子的值。
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
console.log(true || “abc”); // true
console.log(false || “abc”); // abc
或运算符常用于为一个变量设置默认值
function hello(text) {
text = text || ‘hello’;
console.log(text);
}
hello();
4.三元运算符
var text=(intelligence===0?’人工智障’:’人工智能’);
console.log(text);
用if…else结构也能实现
DOM和DOM节点
1.DOM
DOM是Javascript操作网页的接口,全称叫文档对象模型(Document Object Model)。它的作用是将网页转化为一个Javascript对象,从而用Javascript脚本进行各种操作(比如增删元素等)。
2.DOM节点
DOM的最小组成单位就是节点(node)。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中,节点的类型一共有7种
Document:整个文档树的顶层节点;
DocumentType:dotype标签比如:
Element:网页的各种HTML标签比如:
Attribute:网页元素的属性比如:id=”id” class=”class” type=”text”
Text:标签之间或标签包含的文本
Comment:注释
DocumentFragment:文档片段
3.节点树
一个文档的所有节点,按照所在的层次,可以抽象成一个树状结构。这种树状结构就是DOM。
最顶层的节点就是document类型的节点,它代表了整个文档。文档里面最高一层的HTML标签,一般是,它构成树结构的根节点(root node),其他的Html标签都是它的下级。
除了根节点,其他节点对于周围的几点都存在3种关系
父节点关系(parentNode):直接的那个上级节点
子节点关系(childNodes):直接的下级节点
同级节点关系(sibling):拥有同一父节点的节点
DOM提供操作接口,用来获取三种关系的节点。
获取子节点:firstChild(第一个子节点)lastChild(最后一个子节点)等
获取同级别:nextSibling(紧邻在后的同级节点)和previousSibling(紧邻在前的同级节点)
特征相关属性
所有的节点对象我们都可以理解为浏览器内置的node对象的实例。
1.Node.nodeName和Node.nodeType
console.log(“document.nodeName=” + document.nodeName); // #document
console.log(“document.nodeType=” + document.nodeType); // 9
2.Node.nodeValue
返回是一个字符串,表示当前节点本身的文本值,该属性可读写。
由于只有Text节点、Comment节点和xml文档的CDATA节点有文本值,因此只有这三类节点有nodeValue,其他节点一律返回null。
注意,这里需要特别注意的是,Text节点代表的是元素或属性中的文本内容。
console.log(“p.nodeValue=” + document.getElementById(“_p”).nodeValue); //null
3.Node.textContent
返回当前节点和它的后代节点的文本内容,该属性是可读写的。
console.log(“p.textContent=” + document.getElementById(“_p”).textContent); // hello,world
document.getElementById(“_p”).textContent = “hello, nantong!“;
// hello, nantong!
上面代码在插入文本时,会将标签解释为文本,而不会当做标签去处理。
4.Node.nextSibling
返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null。
注意:该属性还包括文本节点。因此如果当前节点后面有空格,该属性返回一个文本节点,内容为空格。
var _pb = document.getElementById(“_p”).nextSibling;
console.log(_pb.textContent); // 空格
5.Node.previousSibling
返回当前节点前面的,距离最新的一个同级节点。
6.Node.parentNode
返回当前节点的父节点。父节点只可能包括三种类型:element节点、document节点、documentfragment节点
7.Node.parentElement
返回当前节点的父element节点。不是W3C标准,仅支持IE。
8.childNodes
返回一个nodelist集合,成员包括当前节点的所有子节点。
注意:除了Html元素节点,还包括Text节点和Comment节点。如果当前节点不包含任何子节点,则返回一个空的nodelist集合。
Html:
<div id="_asia">
<span id="_china">China</span>
<!-- xxxx -->
<span id="_korea">Korea</span>
<span id="_japan">Japan</span>
</div>
var _asia = document.getElementById("_asia");
var _asias = _asia.childNodes;
console.log(_asias);
9.Node.firstChild/lastChild
返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。
用javascript 数组编写网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CODING COFFEE</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content=''>
<style type="text/css">
h1{ /*margin:0 auto;
width:50%;
border:2px dashed red;*/
text-align:center;
}
.wrapper{
width:1080px;
/*border:2px solid red;*/
margin:0 auto;
}
.arr{
float:left
}
.brr{width:50%;
float:right
}
body{
background-color:red;
background-image:url('./coffee/img/co.jpg' );
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left center;
background-size:cover;
/*background:rgba(255,0,0,0.5) url('./coffee/img/co.jpg') no-repeat fixed left top ;
background-size:cover*/
}
hr{ width:60%;
border:2px dashed grey;
isibility:hidden;
}
p{ line-height: 20px;
color:black;
text-align:left;
}
span {
border:2px solid red;
//padding-bottom:100px;
//margin-bottom:100px;
display:inline-block;
display:none;
isibility:hidden;
}
p{
display:inline-block;
line-height:50px;
}
</style>
</head>
<body>
<div>
<h1>CODING COFFEE MENU</h1>
<hr>
</div>
<!--<div class="wrapper">
<div class="arr">
<img id="ppp"src="./coffee/img/c2.jpg" height="300">
</div>
<div class="brr">
<h2>蓝山咖啡</h2>
<p>源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。</p>
</div>
<div style="clear:both;"></div>
</div>-->
<script type="text/javascript">
var app=[{'product':'蓝山咖啡','img':'"./coffee/img/c2.jpg" height="300"','descreption':'源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。'},
{'product':'拿铁咖啡','img':'"./coffee/img/c2.jpg" height="300"','descreption':'源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。'},
{'product':'卡布奇诺','img':'"./coffee/img/c2.jpg" height="300"','descreption':'源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。'},
]
for(i=0;i<app.length;i++){
document.write('<div class="wrapper"><div class="arr"><img id="ppp" src='+app[i]['img']+'></div>');
document.write('<div class="brr"><h2>'+app[i].product+'</h2>');
document.write('<p>'+app[i]['descreption']+'</p></div><div style="clear:both;"></div></div><hr>');
}
</script>
</body>
</html>