javascript简要笔记

零. 数据

0. 变量

分为字符串，数字，undefined, null，对象

undefined类型是只声明了变量，但是没赋值

可以使用typeof()函数来查看变量类型

例子1

var weight=160;

var weightIncrease="2.5斤"

weight+weightIncrease 返回值是"162.5斤" #整数和字符串类型相加时，会自动把整型转为字符串

把字符串转为整型的函数有2个，用法如下

parseFloat(weightIncrease) , parseInt(weightIncrease)

1. 字符串的处理

var words = "hello"

words.length #字符串长度

words.charAt(0) #获得words中的第一个字符

words.charAt(words.length -1) #获得最后一个字符

words.indexof('l') #获得第一个字母'l'的索引号

words.lastindexof('l') #获得最后一个字母'l'的索引号

words.substring(0,3) #截取字符串中的前三个字符

words.replace('h','H') #把h替换成H, 也可替换he为she

words = ('你好'，'美女')

words.split(', ') #split函数，以逗号为分隔符来切割数组，返回的结果是一个数组["你好","美女"]

var newwords = words.split(',') #重新赋值给一个变量

newwords[0] #返回"你好"

一. 数组

var trackCD1= ['长城，'农民'，'工人']

var tarckCD2= ['红花','绿叶']

typeof(trackCD1)返回结果为object

1. trackCD1.push('遥望','家乡') #在后面追加

2. trackCD1.pop（）#删除最后一个元素，并弹出

3. trackCD1.shift() #删除第一个元素，并弹出

4. delete trackCD1[1] #删除第一个元素，但是位置还存在，只是设为了undefied

5. trackCD1.splite(1) #这个可以彻底删除第一个元素

6. var tracks = trackCD1.concat(trackCD2) #合并2个数组元素

二流程控制

1. if语句

var weather = '晴天'，temperature = 25;

if ((weather === '晴天') && (temperature <=26)) {

alert('心情不错');

}

else if (weather === '下雨') {

alert('忧郁');

}

else {

alert('心情忧郁');

}

&&表示与；||表示或

2. switch语句

var weather = '下雨';

switch (weather) {

case '下雨':

alert('忧郁');

break;

case '晴天':

alert('心情不错');

break;

default:

alert('心情糟糕');

break;

}

3. while语句

控制台输出1-10的奇数

var i = 0;

while (i < 10) {

i++;

if (i % 2 === 0) {

continue;

}

console.log(i);

}

4. for语句

var week = ['周一', '周二', '周三' , '周四' , '周五']

for (var i = 0; i < week.length; i++) {

console.log(week[i]);

}

三. 函数

1. 定义函数

function alertMessage (message) {

alert(message);

}

alertMessage('您好');

可以写上message形参，也可以为空，如下

function alertMessage () {

alert('hello!');

}

alertMessage();

2. 函数表达式

var alertMessage = function (message) {

alert(message);

}

alertMessage('hello');

function (message) {} 为匿名函数，并赋值给变量alertMessage，然后可把这个变量当函数用，传递参数。

四. 对象

1. 创建对象及添加属性

var beyond = {}; #创建了一个空对象 beyond

添加属性的2种方式，如下

beyond.formedIn = '1983';

beyond['foundedIn'] = '香港';

也可以在创建对象的时候添加对象

var beyond = {

formedIn:'1983',

foundedIn:'香港',

artist:['黄家驹','罗贯中','刘翔']

};

访问数组内容：beyond.artist[1]

2. 更新对象属性

beyond.foundedIn = '台湾' #修改属性

delete beyond.foundedIn #删除属性

3. 添加方法

var beyond = {

formedIn:'1983',

foundedIn:'香港',

artist:['黄家驹','罗贯中','刘翔']

};

#这里添加了一个showArtist的方法

beyond.showArtist = function () {

for (var i = 0; i < this.artist.length; i++) {

document.writeln(this.artist[i]);

}

};

beyond.showArtist();

说明：

this表示beyond对象

document表示网页内容

function () {...} 为匿名函数

4. 循环输出对象里的属性

在上面的基础上添加如下

var property;

for (property in beyond) {

console.log(beyond[property]);

}

上面的代码会输出对象的属性和方法，如果不想输出方法内容，可以加一个if语句

var property;

for (property in beyond) {

if (typeof beyond[property] !== 'function') {

console.log(beyond[property]);

}

五. DOM

1. 获取文档中的元素的几种方法

1）. getElementById

比如<h1 id='page-title'>coldplay</h1>

document.getElementById('page-title') #根据ID名，获取元素返回的对象

var pageTitle = document.getElementById('page-title') #把对象赋值给一个变量，方便调用

2）. getElementsByTagName

document.getElementsByTagName('li') #获取所有的li标签元素，返回类型为数组对象

var list = document.getElementsByTagName('li')

list[0] #返回第一个<li>中的值

2. 访问元素属性

var pageTitle = document.getElementById('page-title')

pageTitle.nodename #返回标签名称H1

pageTitle.innerText #返回标签文本coldpaly

pageTitle.parentNode #返回父节点标签名,比如<body>

pageTitle.previousElementSibing #返回上个兄弟节点元素

pageTitle.nextElementSibing #返回下个兄弟节点元素

pageTitle.nextElementSibing.innerText #返回下个兄弟节点中的文字

</ul>

var artistList = document.querySelector('.artist-list');

artistList.childNodes #查看所有子节点的元素，包括标签和文本

artistList.childElementCount #查看子节点的元素数, 返回3

artistList.firstElementChild #返回第一个子节点元素，<li>jack</li>

artistList.lastElementChild #返回最后一个子节点元素，<li>son</li>

artistList.firstElementChild.innerText #查看第一个子节点的文本，返回jack

artistList.firstElementChild.innerText = "马丁" #修改jack值为"马丁"

3. 在文档中创建并插入新的节点

var newMember = document.createElement('li') #创建<li>元素节点

var newMemberText = document.createTextNode('张三'); #创建文本节点

newMember.appendChild(newMemberText) #把文本节点放在元素节点中

document.querySelector('.artist-list').appendChild(newMember) #指定<li>元素节点添加位置,并加在最后。

document.querySelector('.artist-list').removeChild(newMember); #删除刚才添加的<li>元素节点

使用insertBefore，在指定位置上插入节点

例子1

var artistList = document.querySelector('.artist-list');

artistList.insertBefore(newMember, artistList.firstChild) #在原先第一个<li>前添加<li>节点

例子2

var bandMember = document.createElement('h3')

bandMember.innerText = '乐队成员'

artistList.parentNode.insertBefore(bandMember, artistList.previousSibling)

效果就是在<ul classs="artist-list">..</ul> 上面的兄弟节点加上一行<h3>乐队成员

六.事件

developer.mozilla.org/en-US/docs/Web/Reference/Events

1. 处理事件的方法

1）直接在元素上添加事件

<a href="#" class="btn"

onclick="console.log('被点了')"

onmouseover="console.log('谁在上面')"

onmouseout="console.log('离开了')">一个链接</a>

2）用对象的事件处理程序处理事件

取消1）中的事件定义，在script.js中添加如下内容

window.onload = function () {

var btn = document.querySelector('.btn');

btn.onclick = function(){

console.log('被点了');

};

btn.onmouseover=function () {

console.log('谁在上面');

};

btn.onmouseout=function () {

console.log('离开了');

};

window.onload #它也是一个事件，表示网页中的其他元素都执行完之后才执行windwo.onload中的内容

3）addEventListener--为对象绑定事件

事件发生的时候，调用一个函数

windows.onload = function () {

var btn = document.querySelector('.btn');

function showMessage() {

console.log('被点了'); #showMessage()里可以加一个参数如event, 那么这里"被点了"可以替换成event参数，这样可以返回一个对象。

}

btn.addEventListener('click', showMessage, false);

};

2. 事件的传播

1). 在一个无序列表中，每一个<li>标签中都有一个图像，想实现点击图像就能显示<img>标签中的alt文本

</li>

...

</ul>

方法如下

var listGroup = document.querySelector('.list-group')

function showMessage(event) {

console.log(event.target.alt); 这个会显示图像标签中<alt>中的文本

}

listGroup.addEventListener('click', showMessage,false);

2). 更改事件传播方式

var listGroup = document.querySelector('.list-group')

function showMessage(event) {

console.log('点击了 url'); 点击任何一个图片都会显示这个文本

}

listGroup.addEventListener('click', showMessage,false);

在一个图片标签中加上一个id属性, 值为lost，这样点击这个图片时，会显示"点击了lost"

var lost = document.getElementById('lost');

function showAnotherMessage(event) {

console.log('点击了 lost');

}

lost.addEventListener('click', showAnotherMessage, false);

说明，当最后一个参数是false时，事件传递方式是从内到外；当为true时，方式为从外到内

所以此时点击lost图片是，控制台显示

点击了 lost

点击了 ul

先触发<img>中的事件，显示"点击了 lost"；然后到<li>，无事件；最后到<ul>中的事件，显示“点击了ul"

如果把listGroup.addEventListener中的true改为false，那么显示顺序为

点击了 ul

点击了 lost

3). 停止传播事件

var listGroup = document.querySelector('.list-group')

function showMessage(event) {

console.log('点击了 url');

event.stopPropagation();

}

listGroup.addEventListener('click', showMessage,true);

var lost = document.getElementById('lost');

function showAnotherMessage(event) {

console.log('点击了 lost');

}

lost.addEventListener('click', showAnotherMessage, false);

这样点击lost图片时，只会在控制台显示"点击了url", 因为现在事件传播方式是从外到内，并且使用了event.stopPropagation()来停止传播事件，所以就不会触发<img>中的事件