JS总结

三标准

• ECMAScript（JS标准）
• DOM（如何通过js操作网页）
• BOM（如何通过JS操作浏览器）

JS数据变量

console.log(typeof a);//监测变量类型
var b = parseInt(a);//类型转化

基本数据类型

• number
• String
• undefined 类型，变量未定义时的值，这个值自己是一种类型
• boolean
• function

引用数据类型

type=object

1. object

   ``javascript
   var person={firstname:“John”, lastname:“Doe”, id:5566};//对象

2. array

   var cars=new Array("Saab","Volvo","BMW");
   

3. Date

不含任何值的类型

• Infinity无穷大

  console.log(Infinity<1)；
  

• null(数据类型是object)

• NaN不是一个数(type=number)

对象

var person = {
    firstName: "John",
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

词法

in

var o=new Object();
o.name='1';//无需定义
alert("name" in o);//in检查对象o中是否有name属性
var ot={name:'1'};// 对象字面量
console.log("name" in ot);//in检查对象o中是否有name属性

&&

age>=18&&alert("'失败'");
//上下两语句相同
if (age>=18) {
alert('执行了');
}

语法

输出句

alert("浏览器在开始时弹出一个窗口");
document.write("在body里输出一个内容（最上方）");
console.log("向控制台输出内容");
var a = prompt("请输入你的电话","139");//接收信息框
document.getElementById("demo").innerHTML=myFunction(4,3);//替换标签中内容

全局

// 此处可调用 carName 变量
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

LIFE

(function(){//自己会执行
	alert("哈哈");
})();

数组

var arr=[1,true,'1',4,5];
console.log(arr);
console.log(typeof arr[2]);

方法调用

alert(b(1,2));//函数调用
function b(a,b){
	console.log(b);
	function b(c){
		return c;
	}
	return b(1);
}

typeof

空null

var person = null;// 值为 null(空), 但类型为对象
var person;// 值为 undefined(空), 类型是undefined
var person = undefined;// 值为 undefined, 类型为undefined
//区别
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

表单

var x=document.forms["myForm"]["fname"].value;
var inpObj = document.getElementById("id1");//获得表单输出内容

JS函数

(function () {				
    var x = "Hello!!";      
})();						// 我将调用自己
function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

HTML DOM

HTML更改

var x=document.getElementById("main");//获得id=mian的元素
var y=x.getElementsByTagName("p");
z=y[0];//获得id=mian中<p>的元素，并访问第一个元素（collection对象）
var x=document.getElementsByClassName("intro");//获得class=元素
document.getElementById("p1").innerHTML="新文本!";//改变p1内容
document.getElementById("image").src="land.jpg";//改变image属性

CSS更改

document.getElementById("p2").style.color="blue";//改变样式

DOM事件

<button οnclick="alert('弹');">点了就弹</button>//在HTML中操作
<a href="javascript:console.log(0x88);">点了就弹</a>
<h1 οnclick="changetext(this)">点击文本!</h1>

document.getElementById("myBtn").onclick=function({
    displayDate()
};

监听

document.getElementById("myBtn").addEventListener("click",displayDate，true);//冒泡（点击内部时，内部元素的事件会先被触发，然后再触发外部元素）
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}//点击id所做出的反应
element.removeEventListener("mousemove", myFunction);//移除监听

结点

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection[1];//collection
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;//NodeList

区别：

• NodeList 与 HTMLCollection 都有 length 属性。
• HTMLCollection 元素可以通过 name，id 或索引来获取。
• NodeList 只能通过索引来获取。
• 只有 NodeList 对象有包含属性节点和文本节点。
• 无数组其他方法

JS高级

JS对象

var person={fname:"John",lname:"Doe",age:25}; 
for (x in person){
    txt=txt + person[x];
}//对象成员遍历
Person.prototype.nationality = "English";//为对象添加新属性

对象

RegExp

• 修饰符：
  • i - 修饰符是用来执行不区分大小写的匹配。
  • g - 修饰符是全文（而不是在找到第一个就停止查找,而是找到所有的匹配）。
• test()方法搜索字符串指定的值
• exec() 方法检索字符串中的指定值

浏览器BOM

Windows对象

window.innerHeight //浏览器窗口的内部高度(包括滚动条)
window.innerWidth //浏览器窗口的内部宽度(包括滚动条)
window.open() ;// 打开新窗口
window.close() ;// 关闭当前窗口
window.moveTo();// 移动当前窗口
window.resizeTo（）;// 调整当前窗口的尺寸

Screen

screen.availWidth //可用的屏幕宽度
screen.availHeight // 可用的屏幕高度

Location

location.hostname //返回 web 主机的域名
location.pathname //返回当前页面的路径和文件名
location.port //返回 web 主机的端口 （80 或 443）
location.protocol //返回所使用的 web 协议（http: 或 https:）

Navigator

对象包含有关访问者浏览器的信息。

弹窗

alert("你好，我是一个警告框！");//警告框
if (confirm（"按下按钮"）==true){}//确认
if(prompt("请输入你的名字","Harry Potter")!=null){}//提示框

计时时间

a=setInterval(function(){alert("Hello")},3000);
window.clearInterval(a);//间隔指定的毫秒数不停地执行指定的代码；停止
b=setTimeout(function(){alert("Hello")},3000);
clearTimeout(b);//3秒后只执行一次；停止