十月十日JavaScript基础3

**加法运算符** 加法运算符“+”是最常用的运算符之一，但是使用却相对复杂。因为在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标签比如：

<!DOCTYPE html>

Element：网页的各种HTML标签比如：

<body> <h> <a> <div>

Attribute：网页元素的属性比如：

id=”id” class=”class” type=”text”

2.DOM节点
DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中，节点的类型一共有7种
Document：整个文档树的顶层节点；
DocumentType：dotype标签比如：
Element：网页的各种HTML标签比如：

<body> <h> <a> <div>

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。

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, <span color='red'>nantong!</span>";
// hello, <span color='red'>nantong!</span>上面代码在插入文本时，会将标签解释为文本，而不会当做标签去处理。

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基础3相关推荐

今天是十月十日卖萌日
今天是十月十日卖萌日,还以为会放两天假,原来今天要上班啊.不过也没什么了... 从这之后要开始写关于jQuery的程序了,这是最主要的,h5的话放到后面吧,比较js是个硬骨头.今天写了一个特别简单的, ...
JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
javascript基础语法——表达式
前面的话一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...
JavaScript基础，Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...

十月十日JavaScript基础3

十月十日JavaScript基础3相关推荐

最新文章

热门文章