https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
ES6标准 http://es6.ruanyifeng.com/#README
mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/
自建对象
标注自建对象
Math
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
求最大值
Math.max(10, 20); // 20
Math.max(-10, -20); // -10
Math.max(-10, 20); // 20
基础语法
变量相关
布尔判断(小写的)
true 和false
元素未定义的判断()
if(typeof(sentiment)!="undefined"){}
强制字符串转数字,int
parseInt(stringnum);
数组
http://www.w3school.com.cn/jsref/jsref_obj_array.asp
数组初始化和添加元素
var wordarray=[];
wordarray.push(obj);
遍历
array.forEach(function(value){ //处理}) //(ES 5)
array.forEach(function(value,i,a){a[i]=value+1;//每个元素自加1})
//value是数组之中的一个元素,i是序号,a是数组
//jquery
$(".class").each(function(index){ var color=$(this).attr("color"); })
数组切割,有两个,slice返回一个新的数组,splice在原来的数组上进行删除和增加。
array.slice(beginInt,endInt)
数组的连接 concat,新建一个数组
a = concat([1],[2])
数组的开头增加元素,修改原来的数组 跟push相对应
arrayObject.unshift(newelement1,newelement2,....,newelementX)
数组的排序 数组返回0,1,-1!!!!!
array=[1,2,3,4];
array.sort(function(a,b){return a>b?1:-1;})
//[1, 2, 3, 4]
array.sort(function(a,b){return a>b?-1:1;})
//[4, 3, 2, 1]
如果是字母的
a = "HelloWorld"
a.split('').sort().join('')
//"HWdellloor"
数组的过滤
filtedData=a.filter(function(x){return x>3;});
//返回了大于3的过滤数组
判断在不在数组里面
//indexOf有IE不兼容的问题
array.indexOf(value)
if (!Array.indexOf) {
Array.prototype.indexOf = function (obj) {
for (var i = 0; i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
return -1;
}
}
// http://blog.csdn.net/jumtre/article/details/41893779 这个博客有几种方案
多维数组
var a=[];
a[0]=new Array();
删除数组中的元素
delete arrary[3]
//这种方式删除了之后是稀疏数组保留序号,数组长度不变
array.splice(i,n);
//删除从i开始的n个元素,返回被删除的元素
//这个删除之后,数组的长度会变
array.shift()
//删除数组的第一个元素'
array.pop()
//删除数组的最后一个元素
ES5 的方法:
forEach (js v1.6)
array.forEach(function(value,i,a){a[i]=value+1;//每个元素自加1})
map (js v1.6)
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item,index,array) {
return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16
filter (js v1.6)
some (js v1.6)
every (js v1.6)
indexOf (js v1.6)
lastIndexOf (js v1.6)
reduce (js v1.8)
reduceRight (js v1.8)
字符串
字符串查找
if(key.indexOf('c')>0){
continue;
}
//如果key这个字符串中有c这个串,那么继续
强制转化成数字,http://blog.csdn.net/yf505261213/article/details/17374647
parseInt(a);
查看数据类型
typeof(data);
正则 RegExp
正则生成对象
/ab+c/i;
new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');
正则的转义
var re = /\w+/;
var re = new RegExp('\\w+');
正则的测试
function checknum(value) {
var Regx = /^[A-Za-z -]*$/;
if (Regx.test(value)) {
return true;
}
else {
return false;
}
}
//正则判断是不是由字母,空格和-组成
字典 Map
mdn Map
其实早期Js里面没有字典的定义,字典的用法其实就是对象的用法
然后键-值组合就是对象的属性组合。后来我竟然发现ES6加入了map,欢呼~
map的和对象的键值对的区别是,对象的键只能是字符串,而map可以是各种数据类型。
//ES6
var m = new Map();
var o = {p: "Hello World"};
m.set(o, "content")
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
下面的是以前传统javascript的实现
var dic={} //var dic=[]
dic["key"]=value
//遍历
for(var key in dic){
var value=dic[key];
}
判断某个元素在不在字典里面
if(dic[key]){
//在字典里面
}
if(typeof(clickedWords[wordsText)=="undefined"){
}
//《可维护的Js》说第一种不好
遍历对象所有属性
if( key in dic){
}
删除键值
delete array["key"];
函数
arguments属性,是函数收到的实参
// 求圆形面积,矩形面积, 三角形面积
function area () {
if(arguments.length == 1) {搜索
alert(3.14 * arguments[0] * arguments[0]);
} else if(arguments.length == 2) {
alert(arguments[0] * arguments[1]);
} else if(arguments.length == 3) {
alert(arguments[0] + arguments[1] + arguments[2]);
} else {
return null;
}
}
area(10,20,30);
对象
在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,or string),那它就是一个对象
原型
原型对象(注:也就是某个对象的原型所引用的对象)的属性一旦定义,就可以被多个引用它的实例所继承(注:即这些实例对象的原型所指向的就是这个原型对象)
获取对象的原型
var a = {};
//Firefox 3.6 and Chrome 5
Object.getPrototypeOf(a);
//[object Object]
//Firefox 3.6, Chrome 5 and Safari 4
a.__proto__;
//[object Object]
//all browsers
a.constructor.prototype;
//[object Object]
var obj={};
obj.text=key;
//obj["text"]=key; //效果相同
obj.weight=wordfre[key];
构造对象
function myforce(nodes,links){
this.nodes=nodes;
this.links=links;
}
a = new myforce("node", "link");
//or
a= myforce("node", "link");
//相互的区别 前者的this是新生成的对象,后者的this指向全局变量
myforce.prototype.init=function(){
}
其他
日期
Date对象的问题
var date=new Date("2001-1-1");
date.setDate()//设置日期的时候从1开始
date.setMonth();//设置月份的时候从0开始,而且超过11会自动转入下一年
JSON
加载数据,花了半天加载数据,发现问题也很坑爹。
字符串转数组
array=JSON.parse(str[,retrivel]);
$.parseJSON(str);//也是一种从字符串转数组的方法。
数组转json 字符串
str=JSON.stringify(array)
d3加载本地json文件,用来测试可视化
d3.json("../data4.json", function(error, all_data) {
dealwith(all_data);
})
http://blog.csdn.net/lowkeysk/article/details/8175195
$.getJSON()加载数据没反应的问题,也没有报错,最后发现是因为相对路径和绝对路径的问题,要用相对路径。
Dom操作
节点的选择
选取节点
var selector="#id";
var selector2=".cc";
document.querySelector(selector);//原生态
document.querySelectorAll(selector2);
document.getElementById("id");
$(selector);//jquery
获得某个节点的子节点
//var cn=ele.childNodes; 这个方法能够弄到text也就是空白
var cn=ele.children;
对节点的内容进行提取
//<div> cc<b>lala</b> <div>
ele.innerHTML
//提取所有的html:cc<b>lala</b>
ele.innerText //提取所有的文本,忽略html:cc
$(".class").each(function(index){ var color=$(this).attr("color"); })
//遍历每个类为class的元素
$.each的用法
http://www.cnblogs.com/mabelstyle/archive/2013/02/19/2917260.html
$.each(options,function(){
})
如果要在遍历的时候删除数组元素,应当倒序遍历
或者在遍历的时候新建一个数组,而不是在原数组上进行改变。
下面的这个讲了python和js互相传数据的,
Ajax,python数据库,cgi,
节点的控制
//jquery对于节点的控制啥的比较顺手,
$.("button").empty();
//清除节点里面的 内容
//d3
d3.select("div")
.append("#subdiv")
.attr("width",w);
属性:
获得某个节点的classname
ele.className
获取某个节点的属性
$(ele).attr("class","className");
function checknum(value) {
var Regx = /^[A-Za-z -]*$/;
if (Regx.test(value)) {
return true;
}
else {
return false;
}
}
//正则判断是不是由字母,空格和-组成
css的处理
删除某个属性
$(“ele”).attr(“color”,”“);
节点内容。
(“div”).text();获取中间的文本,不包括html标签;
(“div”).html(); 获取中间的所有内容。
节点滚动条设置
http://www.w3school.com.cn/jquery/css_scrolltop.asp
$(".btn1").click(function(){
$("div").scrollTop(100);
});
//数字代表滚动的数值
checkbox,用来判断复选框有没有被选中,之前看到有attr(“checked”)的,表示不行。
$(this).is(‘:checked’))
交互
jquery 的若干时间
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
鼠标的移入移出,用来做tip
ele.mouseenter(function(){});
ele.mouseout(function(){});
浏览器对象
window
打开新窗口
window.open("http://www.imooc.com","_blank","width=600,height=400,top=100,left=0")
模块化
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
其他
:
相关博文,
《编写可维护的javascript》
js的一些资源 https://jquery.com/
Jquery 是一个用来简化js的库
Jquery UI 是一些根据jquery扩展的Ui http://jqueryui.com/demos/
一个测试js的网站
http://jsfiddle.net/zfcnM/
d3的一个博客
http://www.ourd3js.com/wordpress/?p=2209
angularjs
https://github.com/dolymood/AngularLearning
javascript的说明库
https://developer.mozilla.org/en-US/docs/Web/JavaScript
zencode http://docs.emmet.io/abbreviations/syntax/
数据类型以及控制