javascript简要笔记
Posted 坚强的小蚂蚁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 class=‘artist-list‘>
<li>jack</li>
<li>hong</li>
<li>son</li>
</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>乐队成员
六.事件
1. 处理事件的方法
1）直接在元素上添加事件
<a href="#" class="btn"
onclick="console.log(‘被点了‘)"
onmouseover="console.log(‘谁在上面‘)"
onmouseout="console.log(‘离开了‘)">一个链接</a>
<script src="script.js"></script>
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文本
<ul class="list-group">
<li class = "album" >
<img src=‘1.jpg‘ alt=‘atlas‘>
</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>中的事件