JavaScript 基础应用

JavaScript组成
ECMAScript:解释器、翻译,几乎没有兼容性问题。
DOM:Document Object Model(html-document),有一些操作不兼容。
BOM:Browser Object Model(浏览器-window),完全不兼容。

为a链接添加JS href=“javascript:;” 不会发生页面跳转

className的使用
element.className = “classname”
style与className
元素.style.属性=xxx 是修改行间样式
之后再修改className不会有效果

this的使用:当前发生事件的元素

索引值的使用
什么时候用索引值——需要知道“第几个”的时候
html添加index——会被FF过滤
js添加index 元素[i].index = i

变量数据类型
typeof运算符判断变量类型

常见类型:string(字符串)、number(数字)、boolean(布尔值)、function(函数)、object(对象)、undefined

1、字符串
由零个或多个字符构成。字符包括(但不限于)字母、数字、标点符号和空格,字符串必须包在引号里,单引号或双引号均可。
JS里用反斜杠对字符进行转译(var mood = ‘don\’t ask’)

2、数值
整数、浮点数(小数点数值)、负数、负数浮点数

数据类型转换
显式类型转换(强制类型转换)
parseInt()转整数、 parseFloat()可转小数
NaN检测 isNAN(Variable Name)判断一个变量是否非数字

See the Pen NaN by Adele (@qianduank) on CodePen.

隐式类型转换
==先转换类型然后比较、===不转换类型直接比
减法也是隐式类型转换

3、布尔值(boolean)
只有两个可选值——true或false,布尔值不是字符不可用引号括起来。

4、函数function
函数传参:参数就是占位符
什么时候用传参——函数里定不下来的东西
栗子:

See the Pen setColor by Adele (@qianduank) on CodePen.


改变Div的任意样式
操纵属性的两种方式
① element.attribute = “…”
② element[attribute] = “…” 属性名字可变
什么时候用:要修改的属性不固定

See the Pen setStyle by Adele (@qianduank) on CodePen.


字符串和变量——区别和关系
字面量(值是固定的,又叫常量):数字、字符串
变量(值不固定),变量不需要加引号,字符串需要加引号。

可变参(不定参):arguments
栗子:求所有参数的和

See the Pen arguments by Adele (@qianduank) on CodePen.

取非行间样式(不能用来设置):
obj.currentStyle[attr] IE下兼容
getComputedStyle(obj, false)[attr] firefox和chrome下兼容
全兼容栗子:

See the Pen getStyle by Adele (@qianduank) on CodePen.

函数返回值:
函数的执行结果
创建一个函数并让它返回一个数值、一个字符串、一个数组或一个布尔值需要用到return
一个函数应该只返回一种类型的值

5、对象(object)

var lennon ={ name : "John", year : 1940 , living : false};

变量作用域(作用范围):局部变量、全局变量
什么是闭包:子函数可以使用父函数中的局部变量

注意:一个变量应该只存放一种类型的数据

命名变量时用下划线分隔各个单词,在命名函数时从第二个单词开始每个单词第一个字母大写的形式(驼峰命名法)
11111

数组
var arr=[12, 5, 8, 9];
var arr=new Array(12, 5, 8, 9);
以上两种没有任何差别,[]的性能略高,因为代码短

JS中数组可以用关键字Array声明,声明数组的同时还可以指定数组初始元素的个数,也就是这个数组的长度。数组元素可以是字符串、布尔值、数值、变量甚至是另一个数组元素。

数组属性length
既可以获取,又可以设置(length=0可以清空数组)
数组使用原则:数组中应该只存一种类型的变量

数组的方法
添加
push(元素),从尾部添加
unshift(元素),从头部添加

删除
pop(),从尾部弹出
shift(),从头部弹出

排序
sort([比较函数]),排序一个数组
排序一个字符串数组
排序一个数字数组
栗子:

var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){
	return n1-n2;
	/*if(n1<n2)
	{
		return -1;
	}
	else if(n1>n2)
	{
		return 1;
	}
	else
	{
		return 0;
	}*/
});
alert(arr);

转换类
concat(数组2) 连接两个数组
join(分隔符) 用分隔符,组合数组元素,生成字符串
字符串split

splice (删除、插入、替换)
替换:splice(开始, 长度,元素…) 长度不为0,先删除,后插入
删除:splice(开始,长度)
插入:splice(开始, 0, 元素…)

关联数组

var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;

运算符操作

算术:+ 加、- 减、* 乘、/ 除、% 取模

赋值:=(单个等号用于完成赋值操作)、+=、-=、*=、/=、%=

关系:<、>、<=、>=、==、===、!=(不等)、!==(严格不等)

逻辑:&& 与、|| 或、! 否
“逻辑与”操作符(&&)操作对象是布尔值,每个逻辑操作数返回一个布尔值true或者是false。只有当它的两个操作数都是true时才会返回true。

“逻辑或”操作符(||)其操作数中有一个是true,其操作就将是true,只有当它的两个操作数都是false时才会是false。

“逻辑非”操作符(!)只能用于单个逻辑操作数,其结果是把那个逻辑操作数所返回的布尔值取反。

运算符优先级:括号

程序流程控制
判断:if、switch、?:
if:if(条件){语句}else if(条件){语句}else{语句}
switch:switch(变量)case 值1:语句1 break; case 值2: 语句2 break; default: 语句

See the Pen switch by Adele (@qianduank) on CodePen.


三元运算符: 条件?语句1:语句2

循环:while、for
while循环

var count = 1;
while (count < 11){
    alert(count);
    count++;
}

do…while循环

var count = 1;
do{
    alert(count)'
    count++;
}while(count < 1);

for循环

for(var count = 1; count < 11; count++){
    alert(count);
}

跳出:break(中断整个循环)、continue(中断本次循环)
什么是真、什么是假:
真:true、非零数字、非空字符串、非空对象
假:false、数字零、空字符串、空对象、undefined

什么是Json
var json = {name1:value1,name2:value2};
Json和数组
Json的下标是字符串json[“name1”]或json.name1,json没有length
数组的下标是数字arr[num]
Json和for in
json使用for in进行循环 for(var i in json){语句}

获取元素节点的方法:
1、getElementById(“id”)
typeof操作符可以告诉我们操作数是字符串、数值、函数、布尔值还是对象
2、getElementsByTagName(“tag”)
其允许把一个通配符作为参数,通配符(”*”)必须放在引号里。
3、getElementsByClassName(“class”)
要指定多个类名只要在字符串参数中用空格分隔类名即可

获取和设置属性
getAttribute 获取元素的属性 object.getAttribute(“attribute”)
setAttribute对属性节点的值做出改变 object.setAttribute(“attribute”,”value”)

childNodes属性
可以用来获取任何一个元素的所有子元素,其是一个包含这个元素全部子元素的数组
node.childNodes[0]等价于node.firstChild
node.childNodes[node.childNodes.length-1]等价于node.lastChild

nodeType属性
其值是一个数字,nodeType属性总共有12种可取值,但其中仅有3种具有使用价值。(元素节点的值是1、属性节点的值是2、文本节点的值是3)

nodeValue属性
用来得到(和设置)一个节点的值

JS使用window对象的open()方法来创建新的浏览器窗口
window.open(url,name,features)
这三个参数是可选的
第一个参数是想在新窗口打开的网页的URL地址。如果省略这个参数,屏幕上将弹出一个空白的浏览器窗口。
第二个参数是新窗口的名字。可以在代码中通过这个名字与新窗口通信。
第三个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性。

动态创建标记
document.write
document对象的write()方法可以方便快捷地把字符串插入到文档里。

innerHTML
可以用来读、写某给定元素的HTML内容

createElement方法
document.createElement(nodeName)
创建一个新的元素

appendChild方法
parent.appendChild(child)
把创建的新元素插入节点数

createTextNode方法
document.createTextNode(text)
创建一个文本节点

insertBefore()方法
parentElement.insertBefore(newElement,targentElement);
把一个新元素插入到一个现有元素的前面

parentNode 返回指定节点的父节点

insertAfter()函数方法

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注