初识javaScript
js组成
1.ecmaScript
2.dom
3.bom
javascript语法
js函数
- isNaN 判断是否是数字
var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false
- typeof 返回数据类型
var x = 1;
console.log(typeof x); 返回number
- arguments 获取所有实参
function getAgs(arg1) {
console.log(arg1);
console.log(arguments);
for (const age of arguments) {
console.log(age);
}
}
getAgs(1, 2, 3);
js对象
创建对象
自面量创建对象
var obj={}; var obj = {uname : '张三',age : 23, sayHi : function(){ console.log('holle !!!'); } };new 创建对象
使用对象
console.log(obj.age);
console.log(obj['age']);
数据类型转换
- 1.转化为字符串
var number = 10;
var str = number.toString();
str = String(number);
str = "" + number;
- 2.转化为number
var strAge = 23;
var age = parseInt(strAge);//取整,去末尾字符串
age = parseFloat(steAge);//去末尾字符串
age = Number(strAge);
age = strAge - 0;
逻辑运算符
短路运算
1.逻辑与
语法: 表达式1 && 表达式2
表达式1为真,返回表达式2
表达式1为假,返回表达式1
```
console.log(1 && 2); 方法2
console.log(0 && 2); 返回0
注意: 0 ‘’ null undefined NaN 是假的,其余都是真的
##### 2.逻辑或
* 语法: 表达式1 || 表达式2
* 表达式1为真,返回表达式1
* 表达式1为假,返回表达式2
console.log(1 || 2); 方法1
console.log(0 || 2); 返回2
注意: 0 ‘’ null undefined NaN 是假的,其余都是真的
#### 赋值运算符
var num = 1;
num ++ ; //2
num += 1; //2
num *= 1; //1
num -= 1; //0
#### 运算符优先级
## dom
### 1.对节点得真删改查
#### 查
##### 查看元素节点
* domument ->代表整个文档
* domument.getElementById() ->通过元素id获取节点,ie8及以下浏览器id不区分大小写,而且也返回匹配name元素
* docment.getElementsByTagName() ->通过标签名获取
* docment.getElementsByName() ->通过name属性获取,需注意,只有部分标签name 属性生效
* docment.getElementsByClassName() ->通过class属性获取,ie8及以下版本不支持
* querySelector() ->css选择器 不实时 ie7及以下没有
* querySelectorAll() ->css选择器 不实时 ie7及以下没有
##### 遍历节点数
* parentNode -> 父节点
* childNodes -> 子节点 数组
* firstNode -> 第一个子节点
* lastNode -> 最后一个节点
* nextSibling -> 下一个兄弟节点
* previousSibling -> 上一个兄弟节点
##### 遍历元素节点数
* parentElement -> 父元素节点
* children ->子元素节点
* childElementCount === children .length ->获取子节点的个数
* firstElementChild -> 第一个子元素节点
* lastElementChild -> 最后一个子元素节点
* nextElementSibling -> 下一个兄弟节点
* previousElementSibling -> 上一个兄弟节点
##### 节点的4个属性
* nodeName -> 元素标签的名称
* nodeValue -> text节点或Comment节点的文本内容,可读写
* nodeType -> 该节点的类型,只读
* attributes -> Element节点的属性集合
##### 节点的一个返回
* hasChildNodes() -> 有没有子节点
#### 增
##### 创建节点
* createElement() -> 创建节点
* createTextNode() -> 创建文本节点
* createComment() -> 创建注释节点
##### 插入节点
* appendChild() ->插入节点到最后
* insertBefore('要插入的节点','该元素之前') -> 插入到某个节点之前
##### 删除节点
* removeChild -> 删除子节点
* remove -> 删除自己
##### 替换节点
* replaceChild(new,origin) ->替换节点
### 2.基本操作
#### Element节点的属性
* innerHtml
* innerText(火狐不兼容)/textContent(老版ie不好使)
#### Element节点的方法
* setAttribute()
* getAttribute()
#### 查看滚动条的滚动距离
* window.pageXOffset/pageYOffset ->IE8及IE8以下不兼容
* document.body/documentElement.scrollLeft/scrollTop ->兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值
* 封装兼容性方法,求滚动轮滚动距离getScrollOffSet()
function getScollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
#### 查看视口尺寸
* window.innerWidth/window.innerHeight ->可视窗口的宽/高 IE8一下不支持
* document.documentElement.clientWidth/clientHeight -> 标准模式下任何浏览器都兼容
* document.body.clientWidth/clientHeight -->适用于怪异模式下的浏览器
* 封装兼容性方法,方法浏览器视口尺寸getViewportOffset()
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode === ‘BackCompat’) {
return {
w: document.body.clientWidth,
h: document.body.clientHeight,
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
* getBoundingClientRect() -> 获取DOM对象属性
$(“body”)[0].getBoundingClientRect() 返回–> DOMRect
```
