js 学习笔记

基础内容

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);