js基础

JavaScript笔记

一、 简介

• js全称为JavaScript，是一种解释性脚本语言，边解释边执行
• javaScript组成:
  ECMAScript语法
  DOM文档对象模型(Document Object Model)
  BOM浏览器对象模型(Browser Object Model)

二、 JS用法

1. 内部js语法:
   在head标签中写，
   在body底部写
   注:尽量让js代码写在body底部，因为代码从上往下执行，如果js代码写在head里，有可能页面还没有加载标签，js代码就已经利用了标签，这个时候会报null
2. 引入外部js文件
   在head标签中写
   在body底部写

三、数据类型

1. 声明变量方式: var 变量名 = 值;
2. 数据类型:number string boolean undefined(未定义的) null object

四、内置函数:

1. 检测当前变量的数据类型: typeof(str);
2. 解析一个字符串，并返回一个整数: parseInt(str);
   注意:只返回第一个数字;
3. 检测数字是否非法: isNaN();

五、引用类型:(重点)

1. 数组类型: 三种声明方式:

    var a = [1,2];    					  
    var b = new Array();     
    var c = new Array(3);

2. 对象类型:两种声明方式

    var user = {name:"天花板",age:21};  
    var user = new Object(); 

3. SON类型: 键值对形式存储数据

声明JSON对象:

var obj = {name:'王金花',age:23,sex:'女'};

声明JSON数组对象:

var jsonObj = [
    {id:1, name:'小黄'},
    {id:2, name:'老李'},
    {id:3, name:'贱贱'}
    ];

js对象转换成json格式的字符串:

JSON.stringify(obj)

json格式的字符串转换成json对象:

JSON.parse(str)

六、运算符:

1. 算数运算符: + - * / %
2. 逻辑运算符: && || !
3. 比较运算符: > < >= <= == !=
   ===(不仅判断值是否相对，也要判断数据类型是否相等)
4. 自增自减: ++ –
5. 双目运算符: += -= *= /= %=

七、条件分支语句、循环语句

• if(条件表达式){ }else{ }
• switch(表达式){ case 值: break;}
• while(条件表达式){ }
• do{ }while(条件表达式)
• for(var i = 0;i< num;i++){}

八、函数(方法)

js声明方法:

1. 无参无返回值方法: function 方法名(){}
2. 有参无返回值方法: function 方法名(参数){}
3. 无参有返回值方法: function 方法名(){ return 值; }
4. 有参有返回值方法: function 方法名(参数){ return 值; }

九、事件

• 点击事件用法:
• a标签的事件特殊用法:
• 其他事件:

1. onchange: 表单内容改变事件
2. onclick: 鼠标左击事件
3. onmouseover: 鼠标滑过事件
4. onmousemove: 鼠标滑过事件
5. onmouseout: 鼠标离开事件
6. onkeyup: 键盘弹起事件
7. onkeydown: 键盘按下事件
8. onload: 预加载事件
   onload用法: window.onload = function(){} 只要打开页面，就执行此事件

十、js弹框:

1. 警告弹框: alert(“内容”);
2. 确认弹框: confirm(“郝老师美不美？”);
3. 文本弹框: prompt(“问题”,“默认内容”);
   点击确定返回输入内容，点击取消返回null

十一、js操作DOM元素

获取dom元素

1. 根据id获取:
   document.getElementById(“id”);
2. 根据class获取:
   document.getElementsByClassName(“class”)[0];
3. 根据标签名获取：
   document.getElementsByTagName(“div”)[1];
4. 根据name获取:
   document.getElementsByName(“username”)[2];
5. css选择器获取:
   document.querySelectorAll("#id");
   注:除id外，其他选择器获取的都为数组对象

获取元素的子节点

• obj.childNodes: 包含空格及元素
• oDiv.children: 获取元素的子节点
• 获取元素的第一个子节点:nodes[0];
  obj.firstElementChild:谷歌支持,ie不支持
  obj.firstChild:ie支持,谷歌支持,第一个获取的是空字符
  综合写法:obj.firstElementChild || obj.firstChild

dom操作元素

• 创建:document.createElement
• 修改:document.body.replaceChild
• 删除:document.body.removeChild

dom操作元素的属性和属性值

• 获取
• 所有属性:obj.attributes
• 某一个属性:obj.getAttribute
• 只能获取默认属性,无法获取自定义属性:obj.className
• 添加:obj.setAttribute
• 修改:obj.setAttribute
• 删除:oInput.removeAttribute

获取元素节点

• 获取元素节点: oDiv.nodeType
• 获取属性节点:oDiv.attributes[0].nodeType
• 获取文本节点:document.createTextNode(‘aaa’).nodeType

js操作DOM的样式、内容、属性

var doc = document.getElementById(“name”);

1. js获取标签内容: doc.innerHTML;
2. js获取表单内容: doc.value;
3. js向标签内写入内容: doc.innerHTML = “新内容”;
4. js获取元素背景颜色: doc.stlye.backgroundColor;
5. js添加元素样式: doc.style = “color:red;font-size:10px;”;
6. js获取元素属性: doc.name;
   注: js在获取class的时候， doc.className;
7. js添加元素属性: doc.src= “index.html”;

js操作节点

<div><span>我是原有标签</span></div>

获取页面标签:

var div = document.getElementsByTagName(“div”)[0];

1. 创建元素:

var p = document.createElement(“标签名称”);

2. 向创建的元素中添加内容: 创建一段文本:

var content = document.createTextNode(“文字”);

3. 将文本添加到标签内:

p.appendChild(content);

4. 将创建的元素添加到页面中:

div.appendChild();

5. 删除元素:

div.removeChild§;

6. 替换元素:

var span = doucment..getElementsByTagName("pan")[0];//获取页面要替换的元素
//创建一个新的元素
var li = document.createElement("li");
var liCon = document.createTextNode("我是li标签内容");
li.appendChild(liCon);
div.replaceChild(li,span);//将div中的span替换成了li

7. 插入元素:

var span = doucment..getElementsByTagName("span")[0];//获取一个元素
//创建一个新的元素
var li = document.createElement("li");
var liCon = document.createTextNode("我是li标签内容");
li.appendChild(liCon);
div.insertBefore(li,span); //将li标签插入到span标签前面

十二、时间与Math对象用法:

Math用法:

1. 随机数用法: Math.random(); 产生0~1之间的随机数
2. 向上舍入: Math.ceil(10.1); ---->11
3. 向下舍入: Math.floor(10.1); ----->10
4. 四舍五入: Math.round(9.5); ---->10
5. 最大值、最小值: Math.max(4,3);–>4
   Math.min(4,3);–>3
6. 次幂: Math.pow(2,3); ---->8

Date用法:

1. 获取系统时间:var date = new Date(); //创建时间对象
2. 获取年:var year = date.getFullYear();
3. 获取月: var month = date.getMonth()+1; 月份的取值范围是:0~11
4. 获取日: var day = date.getDate();
5. 获取时: var hours = date.getHours();
6. 获取分: var minu = date.getMinutes();
7. 获取秒: var sec = date.getSeconds();
8. 获取星期: var week = date.getDay();星期的取值范围:0~6

十三、定时器

function show(){
alert(“我是计时器和延时器要执行的方法”);
}

1. 计时器用法:

var inter = setInterval(“show()”,1000);//每1000毫秒调用一次show方法

2. 停止计时器:

clearInterval(inter);//清除名为inter的计时器

3. 延时器用法:

var timeout = setTimeout(“show()”,5000);//经过5000后再执行show方法

4. 停止延时器:

clearTimeout(timeout);

十四、BOM元素

window: 浏览器窗口

1. 获取屏幕宽高:

screen.availWidth;//宽度 screen.availHeight;//高度

2. 获取浏览器可用宽高:

宽度:
window.innerWidth||document.documentElement.clientWidth|| document.body.clientWidth;
高度:
window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
window.innerWidth (ie8及以下是不支持的)
document.documentElement.clientWidth (IE FIREFOX opera)
document.body.clientWidth (ie firefox google)

history:

1. 让浏览器后退方法: history.back();
2. 让浏览器前进方法: history.forward();

location

1. 跳转页面: window.location.href = “新页面地址”;

2. 刷新页面:window.location.reload();

3. 获取域名:window.location.hostname; localhost表示本机地址---->127.0.0.1

4. 获取端口:window.location.port; 8080、3306

5. 获取页面路径:window.location.pathname;

6. 获取协议:window.location.protocol; http://或https: //

7. 刷新页面:window.location.reload();

8. 获取域名:window.location.hostname; localhost表示本机地址---->127.0.0.1

9. 获取端口:window.location.port; 8080、3306

10. 获取页面路径:window.location.pathname;

11. 获取协议:window.location.protocol; http://或https://