javascript学习

So11ude
126 阅读4分钟

js组成

* ECMAScript（解释器

翻译作用，是js的核心
几乎没有兼容性问题

* DOM（页面文档对象模型

1.js操作html的能力
2.有些操作不兼容

* BOM（浏览器对象模型

1.操作浏览器的能力
2.window
3.完全不兼容

转整数：parseInt()

转小数：parseFloat()

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

一.用法

  • 字符串（含数字）➡️数字

  • 字符串（不含数字）➡️NaN(Not a Number)

二.一些补充

  • NaN不等于NaN
  • isNaN(a)可用来判断a是否为NaN

判断NaN更可靠的方法是，利用NaN为唯一不等于自身的值的这个特点，进行判断。

function myIsNaN(value) {
  return value !== value;
}

命名规范

image.png

隐式类型转换

  • ==: 先转换类型，然后比较
  • ===: 不转换类型，直接比较
  • 减法

ture: true，非零数字，非空字符串，非空对象

false: false，数字0，空字符串，null，undefined

getElementById

在FF下直接使用ID会出现兼容性问题，引入document.getElementById()，在任何浏览器下均可使用。

js里的"类"：className

class在js里是关键字/保留字的意思。

操纵属性的方法

oTxt.value = 'abc';

{
var oTxt = document.getElementById('txt1');
oTxt[name] = 'abc';
}
//name = 'value'

style与className

1.元素.style.属性 = xxx修改的是行间样式

例如oDiv.style[name] = value;

之后再修改className不会有效果

（样式优先级：*<标签<class<ID<行间

提取行间事件

为元素添加事件：

  • 事件和其他属性一样，可用js添加
  • windows.onload
  • 行为，样式，结构三者分离

选项卡

  1. 按钮的实现
  • 添加事件 this:当前发生事件的元素
  • 清空所有按钮，选中当前按钮
  1. 内容的实现

索引值的使用——当需要知道“第几个”的时候。 html添加索引值，会被FF过滤，故在JS里加索引值。

JSON

for in 循环

var json = { a: 12, b: 5, c: "abc" };

for (var i in json) {
alert("第" + i + "个东西是" + json[i]);
}

函数返回值

return 函数的执行结果

函数传参

1.可变参（不定参）：arguments

参数的个数可变，参数数组 例：求和/css

2.取非行间样式

obj.currentStyle[attr] getComputedStyle(obj,false)[attr]

数组基础

1.数组的使用

var arr=[12,5,8]; var arr=new Array(12,5,8); 无差别，[]性能略高，因为代码短

2.数组的属性

length

既可以获取，又可以设置 例子：快速清空数组

3.数组使用原则：数组中应该只存一种类型的变量

js里可以使用连等

a=b=c=6; ###offsetLeft/offsetTop/offsetWidth/offsetHeight

DOM

DOM节点

1.parentNode 查找某元素的父节点

2.offsetParent获取一个元素用来定位的父级,实际位置（例如使用position:absolute..

3.children（和childNotes最大的区别在于children只包括元素节点，不包括文本节点

子节点只算第一层的。

4.首尾子节点：firstChild/firstElementChild, lastChild/lastElementChild

5.兄弟节点：nextSibling/nextElementSibling, previousSibling/previousElementSibling

DOM操纵元素属性

元素属性操作：
  • oDiv.style.display= 'block';
  • oDiv.style['display']= 'block';
  • DOM方式：

获取：getAttribute(名称) 设置：setAttribute(名称,值) 删除：removeAttribute(名称)

元素查找

className

创建，插入和删除元素

创建DOM元素
  • createElement(标签名）：创建一个节点
  • appendChild(节点)：追加一个节点
插入元素

insertBefore(节点,原有节点)：在已有元素前插入

删除DOM元素

removeChild(节点)

文档碎片

文档碎片可以提高DOM操作性能（理论上

document.createDocumentFragment()

appendChild()

oUl.appendChild(oLi); 1.把元素从原有父级移除 2.添加到新的父级

运动框架

  • 在开始运动时，关闭已有定时器
  • 把运动和停止隔开(if/else)

null&undefined

null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

undefined表示“未定义”，下面是返回undefined的典型场景。

// 变量声明了，但没有赋值
var i;
i // undefined

// 调用函数时，应该提供的参数没有提供，该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时，默认返回 undefined
function f() {}
f() // undefined

布尔值

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""或''（空字符串）

Math.round()

Math.round() 函数返回一个数字四舍五入后最接近的整数。

avatar
文章
阅读
粉丝