JS基础 最后一遍JS基础，需要一定的语言基础
1. JS在网页中使用
//可以放在任何地方，一般在head
//引入JS资源文件
2. 注释
//单行注释
/*
*多行注释
*/
3. 变量
声明变量 var 变量名; 区分大小写，驼峰式
var a,b; //undefined
var c=10,d=10;
4. 数据类型
number string boolean null undefined
var a,b; //undefined false
a+3; //Nan not a number
使用 typeof() 获取数据类型
var a=10;
typeof(a); //number
parseInt('22.22'); //22 去掉小数
parseFloat('22.22') //22.22
5. 字符串的基本处理
JS参考手册
var test='aaaa,aaa';
- test.length 字符串长度
- test.charAt(0) 字符串下标0位置的字符 test.charAt(test.length-1) 最后一个字符
- test.indexOf('a') 字符串第一个字符'a'的下标
- test.lastIndexOf('a') 字符串最后一个字符'a'的下标
- test.substring(0,3) 字符串截取前3个字符，0截取开始的位置，3截取多少个字符
- test.replace('a','b') 将字符串中'a'字符全部替换为字符'b'
- test.split(',') 用','把字符串分割成数组
6. 数组
var arr=[]; //；//类型 Object
arr=['A','B','C'];
- arr.length 数组长度
- arr[0] 访问数组内容
- arr[1]='D' 修改数组内容
- arr.push('aaa','bbb') 追加数组元素，可以是多个
- arr.unshift('aaa') 在数组最前面添加元素
- arr.pop(); 从数组中移除最后一个元素，并返回
- arr.shift(); 从数组中移除第一个元素，并返回
- delete arr[0]; 删除下标0元素的值，变成 undefined,不会影响数组的长度
- arr.splice(3); 删除数组下标为3的元素，数组长度减1
- arr.splice(3,2); 从数组下标3开始，删除2个元素，数组长度减2
- arr.concat(['cccc','dddd']); 合并数组，并返回
7. 流程控制 if
if(boolean表达式){ 代码块 }
else if(boolean表达式){ 代码块 }
else{ 代码块 }
8. 流程控制 switch
switch(表达式){
case 表达式值1: 代码块 break;
case 表达式值2: 代码块 break;
default: 默认代码块;
}
9. while循环
var i=0;
while(i<10){
//循环体
i++;
}
10. for循环
for(var i=0;i<10;i++){
//循环体
}
11. 函数
定义函数
function 函数名(形参1,形参2...){
函数体
}
12. 定义函数
function alertMessage(msg){
alert(msg);
}
//调用
alertMessage('AAA');
13. 函数表达式
//匿名函数
var alertMessage = function (msg){
alert(msg);
}
//调用
alertMessage('BBB');
14. 变量应用范围
全局变量 在函数外声明
内部变量 在函数内声明，函数外不能访问内部变量
15. 对象
包含
property 属性
method 方法
js中，除了 number string boolean null undefined以外，都是对象
16. 创建一个对象
var beyond={};
beyond.formedIn='1983';
beyond['founderIn']='香港'
var beyond={formedIn:'1983',founderIn='香港'};
17. 对象中的数组
var beyond={formedIn:'1983',founderIn='香港'};
beyond.artist=['黄家驹','黄贯中','黄家强','叶世荣'];
beyond.artist[0];
18. 更新与删除对象属性
var beyond={formedIn:'1983',founderIn='香港'};
beyond.formedIn='1983'; //更新属性
delete beyond.formedIn; //删除属性
19. 为对象添加方法
var beyond={formedIn:'1983',founderIn='香港'};
beyond.artist=['黄家驹','黄贯中','黄家强','叶世荣'];
beyond.showArtist=function(){
for(var i=0,len=this.artist.length;i20. 循环输出对象属性
//打印对象属性
var property;
for(property in beyond){
//过滤掉方法
if(typeof(beyond[property] !=='function')){
console.log(beyond[property]);
}
}
21. DOM 操作文档的接口
DOM --Document Object Model 文档对象模型
DOM 是几乎所有浏览器都遵循的规范
JS可以通过DOM修改文档(网页)的结构、样式、内容
22. 文档树
Coldplay
乐队于 1997 年成立于伦敦
- Chris Martin
- Jonny Buckland
树形结构
document
HTML
HEAD
TITLE
BODY
H1
P
ul
li
共有12种节点，常用的如下
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
23. 获取文档元素
- getElementById 根据id获取元素，需要为某个元素设置id
var title=document.getElementById('page-title');
24. 获取文档元素
- getElementsByTagName 根据标签获取元素
var lis=document.getElementsByTagName('li');
25. querySelector 与 querySelectorAll
根据css选择器获取元素
var lis=document.querySelectorAll('.artist-list li'); //返回找到的所有元素
var li=document.querySelector('.artist-list li'); //返回找到的第一个元素
26. 访问元素的属性
var pageTitle=document.getElementById('page-title');
var nodeName=pageTitle.nodeName; //节点名字
var text=pageTitle.innerText; //文字内容
var pnode=pageTitle.parentNode; //父节点
var previous=pageTitle.previousElementSibling; //上一个元素
var next=pageTitle.nextElementSibling; //下一个元素
var artistList=document.querySelector('.artist-list li');
var childs=artistList.childNodes; //获取所有的子节点
var childLength=artistList.childElementCount; //获取子节点的数量
var firstChild=artistList.firstElementChild; //获取第一个子节点
var lastChild=artistList.lastElementChild; //获取最后一个子节点
lastChild.innerText='修改文字'; //修改显示的文字
27. 创建并插入新的节点
var newMember=document.createElement('li'); //创建新的节点
//newMember.innerText="HAHA"; 设置显示的内容或者插入文本节点
var newMemberText=document.createTextNode('HAHA'); //创建文本类型节点
newMember.appendChild(newMemberText); //添加节点
document.querySelector('.artist-list').appendChild(newMember); //在最后插入新建的节点
28. 在指定位置插入节点
document.querySelector('.artist-list').removeChild(newMember);
var artistList=document.querySelector('.artist-list');
artistList.insertBefore(newMember,artistList.firstChild); //在最前面插入节点
var bandMember=document.createElement('h3');
bandMember.innerText='乐队成员';
artistList.parentNode.insertBefore(bandMember,artistList.previousElementSibling);
29. 处理发生的事件
用户的一些操作认为是事件
30. 处理事件的方法
元素on打头的属性，一般都是事件的属性
处理事件的方法有3种：
- 在元素中使用事件的属性
- 在js中使用事件处理的属性
- 使用addEventListener()方法为元素绑定事件
//适用于简单的事件逻辑
连接
31. 在js中处理事件
window.onload=function(){
var btn=document.querySelector('.btn');
btn.onclick=function(){
console.log('被点击了');
};
btn.onmouseover=function () {
console.log('谁在上面');
};
btn.onmouseout=function(){
console.log('离开了');
};
}
32. addEventListener为对象绑定事件
window.onload=function(){
var btn=document.querySelector('.btn');
function showMessage(event){
console.log(event);
}
//1 绑定的事件
//2 事件处理的方法
//3 是否拦截事件
btn.addEventListener('click',showMessage,false);
}
33. 事件的传播
默认情况，事件有内向外进行传播，类似冒泡
//拦截事件，事件由外向内进行传播
btn.addEventListener('click',showMessage,true);
35. 停止事件传播
//停止事件传播
event.stopPropagation();
//去掉事件默认行为
event.preventDefault();