基础内容

1.DOM定位 查询标签

document.getElementById("demo"); //根据id定位标签 //两者只能使用其中一种！ //通过$包装 function $(id){ //id定位，例：$("demo") return document.getElementById(id); } //个人想法,并没什么用,传入(类型，内容) 例：$("ByName","demo") function $(type,content){ if(type == "id"){ //id定位 return document.getElementById(content); }else if(type == "ClassName"){ //class定位 return document.getElementsByClassName(content); }else if(type == "ByName"){ //name属性定位 return document.getElementsByName(content); }else{ //...... } }

除了id，其他类型可能返回数组类型，所以还可使用数组操作方法

2.简单计算、拼接字符

(1).判断符合条件的数字

/* *根据传入的数字判断是否符合条件 *return 0：不符合条件，1：能被3整除，2：能同时被3和7整除 */ function checkNum(num){ if(num%3==0){ if(num%7==0){ return 2; }else{ return 1; } }else{ return 0; } }

(2).拼接字符串

function getInfo(){ //resultHTML中存放拼接后返回html中的字符串 var resultHTML=""; //循环0到500中能够被3和7整除的数字，并进行拼接 for(var i=0;i<=500;i++){ var num = checkNum(i); //调用上文方法 if(num>0){ //符合条件 /* 以下有两种结果： 1.<span class="num">+i+"</span>" (能被3整除) 2.<span class="num div_7num">+i+"</span>"(同时被3，7整除) */ resultHTML+='<span class="num'; if(num==2) resultHTML+=" div_7num"; resultHTML+= '">'+i+"</span>"; if(++content % 10==0) resultHTML +="<br>"; } } }

(3).最后效果

3.对象数组的增删改查

W3Schools国内镜像

(1).对象数组的初始化

对象直接量 (不可复用)

var Student = { sNum : 001, name : "小明", age : 18, say : function(){ console.log("我是"+this.name); }; }; //window.onload(网页加载时调用) window.onload = Student.say(); //我是小明

工厂模式 (无法识别对象类型)

function Student(sNum,name,age){ var s = new Object(); s.sNum = sNum; s.name = name; s.age = age; s.say = function(){ console.log("我是"+this.name); }; return s; //返回对象数组 }; var s1 = Student(001,"波波",18); window.onload = s1.say(); //我是波波

构造函数 (不灵活)

// 构造函数 function Student(sNum,name,age){ this.sNum = sNum; this.name = name; this.age = age; this.hobby = { //也可将对象数组作为属性 h0 : "游泳", h1 : "睡觉" }; this.say = function(){ console.log("我喜欢"+this.hobby.h1); }; }; var s1 = new Student(001,"铁蛋",18); window.onload = s1.say(); //我喜欢睡觉

原型模式(定义原型)

function Student(){ //prototype (向对象添加属性和方法) Student.prototype.sNum = 001; Student.prototype.name = "嘟嘟"; Student.prototype.age = 18; Student.prototype.say = function(){ console.log("我是"+this.name); }; }; var s1 = new Student(); var s2 = new Student(); s2.name = "小黑"; //修改s2的name属性 window.onload = function(){ s1.say(); //我是嘟嘟 s2.say(); //我是小黑 };

构造函数+原型

function Student(sNum,name,age){ this.sNum = sNum; this.name = name; this.age = age; }; Student.prototype = { say : function(){ console.log("我是"+this.name); } }; var s = new Student(001,"小曾",18); window.onload = s.say();

(2).新增

var stuList = []; //创建数组 function Student(sNum,name,age){ this.sNum=sNum; this.name=name; this.age=age; }

push (添加元素到数组的末尾)

var nLength = stuList.push(new Student(sNum,name,age)); //新建对象放入数组

unshift (添加元素到数组的头部)

var nLength = stuList.unshift(new Student(sNum,name,age));

splice(start,deleteCount,item) (插入)

deleteCount为0或负数时不删除元素 var index = 1; //在索引为1的位置插入对象 stuList.splice(index,0,new Student(sNum,name,age));

nlength为新增对象后数组的长度

(3).删除

pop (删除数组末尾的元素)

var last = stuList.pop();

first (删除数组最前面（头部）的元素)

var first = stuList.first();

splice(start,deleteCount) (删除)

//定义数组 var arr = ['小明', '小黑', '小红', '铁蛋'];

删除索引2后的元素，deleteCount 若被省略， 如splice(2) ,

var removed = arr.splice(2); //removed中为['小红','铁蛋']

删除索引2后的元素，当deleteCount >= array.length - start ;(array.length == 5) 如splice(2,3)

var removed = arr.splice(2,3); //removed中为['小红','铁蛋']

从尾部开始定位，start为负数时， 如splice(-2,1)

var removed = arr.splice(-2,1); //removed中为['小红']

(4).修改

splice (start,deleteCount,item)

//定义数组 var arr = ['小明', '小黑', '小红', '铁蛋'];

删除并插入新的元素

var removed = arr.splice(2,1,"小蓝","波波"); //removed中为"小红"

(5).查询、遍历

//定义数组 var arr = ['小明', '小黑', '小红', '铁蛋'];

索引值查询 (indexOf)

var a1 = arr[0]; //a1中为["小明"] var a2 = arr.indexOf("小黑"); //a2中为索引值 1

遍历 (forEach)

arr.forEach(function(item, index, array){ //index可省略 console.log(index+":"+item+" "); }); // 0:小明 1:小黑 2:小红 3:铁蛋

返回索引 (findIndex)

var e = "铁蛋"; function(e){ var idx = arr.findIndex(function(element){ return element == e; //找不到时返回-1 }); } console.log(idx); // 3

返回值 (find) 找不到时返回 undefined

var e = "铁蛋"; function(e){ var name = arr.find(function(element){ return element == e; //找不到时返回-1 }); } console.log(name); //["铁蛋"]

(6).排序

sort

纯数字排序 var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; //升序 //return b - a; 降序 }); console.log(numbers); // [1, 2, 3, 4, 5] 按对象.属性排序 function sortAsc(property){ return function (a,b){ return (a[property] - b[property]); //按sNum升序排序 }; }; function getSort(){ stuList.sort(sortAsc("sNum")); //传入sNum作为排序属性 };

4.jQuery框架

jQuery API-cuishifeng中文文档

(1) 基本应用

基本定位

$("#myId"); //获取html中id属性为 myId 的标签 $(".myClass"); //获取html中class属性为 myClass 的标签 $("span"); //获取html中标签为 span 的标签

层级

$("form input"); //后代元素选择器 $("form > input"); //子级元素选择器 $("div ~ input"); //匹配与div同层且在div之后的标签元素

5.JSON文件读取与应用

(1).读取JSON文件

本地JSON

//获取json数据 $.getJSON("../data/pca-data.json", //本地json文件地址 function(data){ //方法 console.log(data); } );

本地JSON文件跨域问题

由于JavaScript中 “Same-Origin Policy”（同源策略）的限制 即不同域名的JavaScript代码不能够互相访问。

一篇关于Jsonp跨域问题详解的文章

使用vs code中Live Server插件后，右击选择Open with Live Server 相当于将JSON文件放入小型开发服务器，可自动重载文件

(2).JSON文件的格式

Data 数据 (使用 " " 包含)

"firstName":"John" //"name" : "value"

Objects 对象 (由若干个数据组成)

{"firstName":"John", "lastName":"Doe"}

Arrays 数组 (value中包含对象)

"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]

(3).JSON与对象的相互转换

json ==> 对象

var obj = JSON.parse(text);

对象 ==> json

var jsonData = JSON.stringify(obj);