JavaScript

javascript是一种是一种弱类型的脚本语言、解释型语言,浏览器是上到下边解释边执行的,它由三部分组成:

  • ECMAScript(ECMA-262定义)提供核心语言功能,javascript的语法标准都是基于ECMScript
  • 文档对象模型(DOM)提供访问和操作网页内容的方法和借口
  • 浏览器对象模型(BOM)提供与浏览器交互的方法和接口

数据类型

  1. 基本数据类型:Number、Boolean、String、Undefined、Null、
  2. 引用类型:Object类型(如对象、数据、RegExp、Date、function)
    //Number包括整数和小数(最高精度17位小数)、NaN、Infinity, -Infinity 。
    var a = 0.1;
    var b = 0.2;
    var c = a + b;
    alert(c == 0.3);//false.浮点数的最高精度是17位,所以最后结果是false
    
    var d = 070;//8进制
    alert(d);//56
    
    var e = 0xA;//16进制
    alert(e);//10
    
    var f = 1/0;//Infinity,正无穷
    var g = -1/0;//-Infinity,负无穷
    
    /*
     * Undefined:表示变量声明但未赋值,或者对象属性不存在
     * Null:表示一个空的对象引用(也就是赋值为null)
     * NaN是Not a Number的简写,表示不是一个数字
     * javscript区分正0和负0。 
    
     * Boolean类型
     *   "":空字符串是假,
     *   " ":这个是真
     *   0:零是假
     *   1:一是真
     *   undefined是假
     */

 

 

typeof操作符

var e = undefined;
alert(typeof e);//undefined

var f = null;
alert(typeof f);//object

//判断console对象是否存在
if(typeof console == "undefined"){
    return;
}

//判断a是否存在
var a;	
if(typeof(a)==undefined){
	alert("undefined")
}else{
	alert(a);
}

//也可以通过三目运算来判断
a = a ? a : 'undefined';
alert(a);

 

数组

var arr = [1,2,3,true,new Date(),'abc'];
alert(arr)
arr.length = 5;//会把后面的截掉
alert(arr);//这里弹出时隐式调用了Array的toString方法,所以看到的会是数组里的元素的值而不是弹出[Object object]

/*
 * push(压栈)和pop(弹栈)从尾部追加或弹出 
 * shift和unshift从头部追加或弹出
 */
arr.push(5,6,7,false);//向数组尾部追加元素,返回新数组的长度
alert(arr);
var pop = arr.pop();//从数组的尾部移除一个元素,返回被移除的元素的值
alert(pop);

var r1 = arr.shift();//从头部移除一个元素(返回移除的元素)
alert(arr);
alert(r1);
var r2 = arr.unshift(10,false);	//从头部插入多个元素(返回新数组的长度)
alert(arr);
alert(r2);

/**
 * splice(出队)、slice(入队)方法 (截取的方法)
 * splice方法操作数组本身,
 * slice:返回截取的内容 ,截取范围 (左闭右开区间),方法不操作数组本身
 */
var arr = [1,2,3,4,5];
arr.splice(1,2,3,4,5);//参数1:截取的起始位置;参数2:表示截取的个数;后面的表示追加的新元素
alert(arr);

var arr = [1,2,3,4,5];
var reuslt = arr.slice(2,4);   
alert(reuslt);		//3,4     

/*
 * 操作数组的方法: concat join
 */
var arr1 = [1,2,3];
var arr2 = [true , 4 , 5];

var reuslt = arr1.concat(arr2);	//合并粘连的操作(不操作数组本身)
alert(reuslt);

var result = arr1.join('-');//在每个元素之间加入内容(不操作数组本身)
alert(arr1); 
alert(result);

/**
 * sort排序 
 * reverse反转
 */

var arr1 = [10,2,4,1,7];

arr1.sort();//按字符串排序的
alert(arr1);
arr1.sort(compare);//传入自定义排序方法
alert(arr1);


arr1.reverse();//反转 ,将Array 对象中的元素位置进行反转
alert(arr1);


//返回值必须是-1,0,1
function compare(value1 , value2){
	if(value1 < value2){
		return -1 ;
	} else if(value1 > value2){
		return 1 ; 
	} else {
		return 0 ;
	}
}

var arr2 = [2,3,7,8,9,4,3,7,2];
arr2.sort(function(a,b){
	if(a > b){
		return -1;
	}else if(a == b){
		return 0;
	}else{
		return 1;
	}
})


/**** EMCAScript5 Array新方法 *****/
var arr = [1,2,3,4,5,4,3,2,1];
//indexOf获取元素的索引位置
var index = arr.indexOf(4);//返回4在数组arr第一次出现的索引位置
var index = arr.indexOf(4,2);//从索引4开始,返回数字2出现的索引位置

// lastIndexOf方法
var index = arr.lastIndexOf(2);//从最后开始查找数字2出现的索引位置

/*
 * 5个新加迭代的方法
 * every :对于数组每一个元素进行一个函数的运行 如果都返回true 最后则返回true 如果有一个返回false最后结果则返回false
 * filter :对于数组的每一个元素进行一个函数的运行 给定的函数去执行 把过滤后的结果返回 
 * forEach :循环数组每一项的值 并执行一个方法 
 * map 对于数组的每一个元素进行一个函数的运行 可以经过函数执行完毕后 把新的结果返回
 * some :对于数组每一个元素进行一个函数的运行 如果有一项返回true 最后则返回true 如果每一项都返回false最后结果则返回false
 */

/*
 * @param item 数组元素
 * @param index 索引
 * @param array数组
 */
var result = arr.every(function(item , index , array){
	return item > 2 ;
});

var result = arr.filter(function(item , index , array){
	return item > 2 ;
});

arr.forEach(function(item, index, array){
		alert(item);
});

var result = arr.map(function(item, index, array){
	return item*2;
});

var result = arr.some(function(item, index, array){
	return item >=5 ;
});


/*
 * reduce    reduceRight
 * 变量的起始位置不同  
 */
//前一个值 , 当前值 , 索引位置 , array
var result = arr.reduce(function(prev , cur , index , array){
	return prev + cur ;
});

var result = arr.reduceRight(function(prev , cur , index , array){
	return prev + cur ;
});

 

 

Object

        Object每个实例都会具有下列属性和方法:
            Constructor: 保存着用于创建当前对象的函数。(构造函数)
            hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在。
            isPrototypeOf(Object): 用于检查传入的对象是否是另外一个对象的原型。
            propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。
            toLocaleString():返回对象的字符串表示。该字符串与执行环境的地区对应.
            toString():返回对象的字符串表示。
            valueOf():返回对象的字符串、数值或布尔表示。

//Object 所有类的基础类 
				
// 实例化对象,并给对象设置属性
//var obj = new Object();
var obj = {} ;
obj.name = '张3';
obj.age  = 20 ; 
//obj.sex  = '男';
obj["birthday"] = '1980-08-07';//注意方括号里必须加引号
obj.say = function(){
	alert('hello world!');					
}

// 访问对象的属性或方法
alert(obj.name);
alert(obj.age);
obj.say();

// delete 操作符 删除对象的属性或方法的
delete obj.age ;
delete obj.say ;
alert(obj.name);
alert(obj.age);
alert(obj.sex);
obj.say();


//for in 语句式,遍历一个js对象里的属性
for(var attribute in obj) {
	alert(attribute +" : "+ obj[attribute]);//取属性的值必须使用方括号,attribute为一个临时变量
}

//Constructor保存对象的创建函数
alert(obj.constructor);
var arr = [] ; 
alert(arr.constructor);

//hasOwnProperty(propertyName) 用于检测给定属性在对象中是否存在
alert(obj.hasOwnProperty('sex'));

//isPrototypeOf(Object) 检测原型 

//检测给定的属性是否能被for in 所枚举出来 
alert(obj.propertyIsEnumerable('say'));

Js简单实现Java中Map

function Map(){
	
	// private 
	var obj = {} ;// 空的对象容器,承装键值对
	
	// put 方法
	this.put = function(key , value){
		obj[key] = value ;		// 把键值对绑定到obj对象上
	}
	
	// size 方法 获得map容器的个数
	this.size = function(){
		var count = 0 ; 
		for(var attr in obj){
			count++;
		}
		return count ; 
	}
	
	// get 方法 根据key 取得value
	this.get = function(key){
		if(obj[key] || obj[key] === 0 || obj[key] === false){
			return obj[key];
		} else {
			return null;
		}
	}
	
	//remove 删除方法
	this.remove = function(key){
		if(obj[key] || obj[key] === 0 || obj[key] === false){
			delete obj[key];						
		}
	}
	
	// eachMap 变量map容器的方法
	this.eachMap = function(fn){
		for(var attr in obj){
			fn(attr, obj[attr]);
		}
	}	
}

//模拟java里的Map
var m = new  Map();
m.put('01' , 'abc');
m.put('02' , false) ;
m.put('03' , true);
m.put('04' , new Date());

//alert(m.size());

//alert(m.get('02'));
//m.remove('03');
//alert(m.get('03'));

m.eachMap(function(key , value){
	 alert(key +" :"+ value);
});

 

Global对象(全局)

其内部定义了一些方法和属性:encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、Escape、 unescape

//encodeURI 、encodeURIComponent编码
var uri = 'http://www.bjsxt.com cn';
var str1 = 	encodeURI(uri); // (url : // 不会进行编码)
var str2 = 	encodeURIComponent(uri);//常用的方法 (任何不标准的文字都会进行编码)
alert(str1);
alert(str2);
//decodeURI、decodeURIComponent 解码
alert(decodeURI(str1));
alert(decodeURIComponent(str2));

//eval(string) 方法 无形的javascript解析器
var str1 = "var a = 10 ; var b = 20;";
eval(str1);
alert(a+b);
var strobj = "{name:'z3' , age:20}";
var obj = eval('('+strobj+')');//注意加上括号
alert(obj.name);

//escape unescape 编码解码
var str1 = '喜羊羊同学';
var str2 = escape(str1);
alert(str2);
var str3 = unescape(str2);
alert(str3);

//isNaN是is not a number的缩写 如果不是number类型 true  是number类型 false
var num1 = '10';
var num2 = 'abcd10e';
alert(isNaN(num2));

//在js里面 只有NaN 自己不等于自己本身的
if(NaN == NaN){
	alert('相等');
} else {
	alert('不等')
}

 

 

Date对象

//Date 日期类型
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1 ; 
var da   = date.getDate();
var day  = date.getDay();
var hours = date.getHours();
var min   = date.getMinutes();
var sc    = date.getSeconds();
document.write('今天是' + year + '年' + month + '月 ' + da+ '日' + hours +':' + min +':' +sc+ '星期' +day );
document.write('\n' + date.getTime());



/**
 * 根据日期字符串或日期 返回本周周一至周日的日期字符串 
 * @param  date 日期或日期字符串
 * @return 
 */
function getWeekDate(date) {
	var _date = undefined;
	if (date instanceof Date) {
		_date = date
	} else {
		_date = new Date(date.replace(/-/g, "/"));
	}
	var _this_week = undefined;

	_date.setTime(_date.getTime() - 1000 * 60 * 60 * 24 * (_date.getDay() - 1));//本周一
	_this_week = _date.getFullYear() + "年" + (_date.getMonth() + 1) + "月" + 
                         _date.getDate() + "日" + getCNWeekday(_date) + "至";

	_date.setTime(_date.getTime() + 1000 * 60 * 60 * 24 * (7 - _date.getDay()));//本周末
	_this_week = _this_week + _date.getFullYear() + "年" + (_date.getMonth() + 1) + "月" + 
                                      _date.getDate() + "日" + getCNWeekday(_date);

	return _this_week;
}

/**
 * 获取中式星期
 * @param {Object} date 日期
 * @return 星期几
 */
function getCNWeekday(date) {
	var week = {
		"0" : "星期日",
		"1" : "星期一",
		"2" : "星期二",
		"3" : "星期三",
		"4" : "星期四",
		"5" : "星期五",
		"6" : "星期六"
	};
	return week[date.getDay()]
}

//获取当天日期
$(function(){
	$("#weekplan_date").text(getWeekDate(new Date()));
})

 

Math对象

Math.random(),产生   [0,1)  范围一个任意数

 

函数

/* 三种方式定义函数:
 *	1 function语句式
 *	2 函数的直接量 ECMAScript
 *	3 function构造函数式
 * 三种方式解析顺序问ti:对于function语句式的函数,javascript解析器会优先的解释,另外两种是按执行顺序解析
 * 三种方式定义函数作用域的概念:前两种具有函数的作用域,最后一种方式具有顶级函数(顶级作用域)
 */
// 1 function语句式
test1();//可以调用到,说明test1函数已经被解析过
function test1(){
	alert('我是test1');
}

// 2函数的直接量 ECMAScript
alert(test2); //undefined,表示test2变量声明了没有被赋值,函数还没有被解析
var test2 = function(){
	alert('我是test2');
}

// 3function构造函数式
var test3 = new Function("a" , "b" ,"return a+b;");
//alert(test3(10,20));

//作用域
var k = 1 ; 
function t1(){
	var k = 2 ; //局部变量 k
	function t2(){alert(k) ;}
	var t3 = function(){ alert(k) ;};//函数直接量
	var t4 = new Function('alert(k) ;');// 构造函数的方式
	
	t2();//2
	t3();//2
	t4();//1,具有顶级作用域,所以使用的是全局的k
}
t1();

 

arguments对象

function test(a,b,c,d){
	alert(test.length);//返回函数的形参个数
	alert(arguments.length);//返回函数的实际参数个数,非形参个数
	alert(arguments[0]);//获取第一个实际参数的值
	alert(arguments.callee.length)//返回函数的实际参数个数,arguments.callee函数返回arguments对象所属的函数的引用,该方法也常用

	if(arguments.callee.length == arguments.length){
		return a+b;
	} else {
		return '参数不正确!';
	}
}
alert(test(10,20));		// 30

 

this对象

this对象是指在运行时期基于执行环境所绑定的,this总是指向调用者

var k = 10 ; 
function test(){
	this.k = 20 ;
}

//这里是window调用的,所以在test里的this.k改变的是外面的k的值
test();window.test()
alert(k);

 

call和apply方法

每一个函数都包含两个非继承而来的方法:call、apply。这俩个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。call、apply的用途之一就是传递参数,但事实上,它们真正强大的地方式能够扩充函数赖以运行的作用域。使用call()、aplly()来扩充作用域的最大好处就是对象不需要与方法有任何耦合关系。

//扩充作用域	
window.color = 'red';
var obj = {color:'blue'};
var obj2 = {color:'yellow'};
function showColor(){
	alert(this.color);
}

showColor.call(window);//将showColor绑定到window对象上
showColor.call(obj);//将showColor方法绑定到obj对象上

 

闭包

闭包与函数有着紧密的关系,它是函数的代码在运行过程中的一个动态环境,是一个运行期的、动态的概念。所谓闭包,是指词法表示包括不必计算的变量的函数。也就是说,该函数能够使用函数外定义的变量.。 在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留他们在闭包最初定义(或创建)时的值。

// 闭包:一个函数 可以访问另外一个函数作用域中的变量
// 封闭性 : private 起到一个保护变量的作用
function f(x){
    var temp = x ;         //局部变量     //temp已经没有被使用    
    return function(x){        // 3 (function 有了一个执行域 var obj)
        temp += x ;        //  又被使用了                        
        alert(temp);                        
    }
}                
var a = f(50);//这个函数返回了一个函数            
a(5);//temp=55,调用返回的函数,时temp变量会被使用,不会被垃圾回收。体现闭包
a(10);//65
a(20);//85

 

prototype原型

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。然后就可以访问该引用的属性和方法。

A.prototype = new B();
理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。

可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

/* 父 */
function baseClass() {
    this.showMsg = function() {//对象方法
        alert("baseClass::showMsg");   
    }
   
    this.baseShowMsg = function() {
        alert("baseClass::baseShowMsg");
    }
}

baseClass.showMsg = function() {
    alert("baseClass::showMsg static");
}

/* 子 */
function extendClass() {
    this.showMsg =function () {//对象方法
        alert("extendClass::showMsg");
    }
}

extendClass.showMsg = function() {//类方法
    alert("extendClass::showMsg static")
}

//extendClass是以baseClass的一个实例为原型克隆创建的,extendClass也同时包含showMsg这个对象方法。
extendClass.prototype = new baseClass();


/*调用执行*/
var instance = new extendClass();

/*
 * 函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。
 * 或者可以理解为prototype不会克隆同名函数??这个不确定
 */
instance.showMsg(); //显示extendClass::showMsg, 调用的是自身的对象方法
instance.baseShowMsg(); //显示baseClass::baseShowMsg, 调用的是父类的

//如果想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?
//答案是可以使用call:

//将instance当做baseinstance来调用,调用它的对象方法showMsg
baseClass.showMsg.call(instance);//显示baseClass::showMsg static,调用的是父类的类方法
new baseClass().showMsg.call(instance);//显示baseClass::showMsg,调用的是父类的对象方法

 

function Person(){
	
}

/* 1、原型prototype */
var obj = Person.prototype;//获取Person对象的原型对象
console.info(obj);// Person {},构造函数.prototype =  原型对象
alert(obj.constructor);//返回构造函数,原型对象.constructor = 构造函数

obj.name = 'z3';//给原型对象添加属性,原型的属性name
obj.sayName = function(){alert(this.name);};//给原型对象添加方法

/* 2、区分原型对象和实例对象,他们是属于两个对象 */
var p1 = new Person();
p1.name = 'w5';		// 实例对象的name
alert(p1.name);//w5,获取属性的值时,会先从实例对象中搜索,若不存在再去原型对象中搜索
delete p1.name ; 
alert(p1.name);	//z3 返回的是原型的name

/* 
 * 在原型对象中 是否存在这个属性
 * @param object 当前对象
 * @param name 要判断的属性
 */
function hasPrototypeProperty(object , name){
	//不是实例对象属性并且在原型对象中存在
	return !object.hasOwnProperty(name) //true=表示是实例属性,取反
		&& name in object ;//in 操作符:判断属性是否存在于实例对象或原型对象中,前面提到过for-in
}

/* ECMA5的几个方法: 
 *	1.原型对象.isPrototypeOf(实例对象):判断原型对象是不是实例对象的原型
 *	2.Object.getPrototypeOf():根据实例对象获得原型对象,该方法属于顶级Object
 *  3.Object.keys();拿到当前对象里的所有属性名 返回一个数组,不包括constructor
 */
alert(obj.isPrototypeOf(p1));//true,判断obj是不是p1的原型
alert(p1.isPrototypeOf(obj));//false

var prototypeObj = Object.getPrototypeOf(p1);//获取p1的原型对象
alert(prototypeObj == Person.prototype);

var attributes = Object.keys(p1);//获取p1实体对象的所有属性名
var attributes2 = Object.keys(Person.prototype);//获取Person原型对象的所有属性名

// ECMA5 constructor属性: 该属性是不能被枚举的[eable = false]
// Object.getOwnPropertyNames 枚举对象所有的属性 :不管该内部属性能否被枚举
var attributes3 = Object.getOwnPropertyNames(Person.prototype);
alert(attributes3);

 

/* 
 * 在Array上扩展一个each方法
 */
var arr = [1,2,3,[4,[5,[6]]]]; // arr.length

Array.prototype.each = function(fn){
	try{
		//1.计数器 记录当前遍历的元素位置
		this.i || (this.i=0);  //var i = 0 ;
		//2.当数组的长度大于0的时候 && 传递的参数必须为函数
		if(this.length >0 && fn.constructor == Function){
			// 循环遍历数组的每一项
			while(this.i < this.length){
				//获取数组的每一项
				var e = this[this.i];
				//如果当前元素获取到了 并且当前元素是一个数组
				if(e && e.constructor == Array){
					// 直接做递归操作
					e.each(fn);
				} else {
					//如果不是数组 (那就是一个单个元素)
					// 这的目的就是为了把数组的当前元素传递给fn函数 并让函数执行
					//fn.apply(e,[e]);
					fn.call(e,e);
				}
				this.i++ ;
			}
			this.i = null ; // 释放内存 垃圾回收机制回收变量
		}
		
	} catch(ex){
		// do something 
		alert(ex);
	}
	return this ;
}

arr.each(function(item){
	alert(item);
});

 

/* 1、简单原型 */
function Person(){}

Person.prototype = {
	//constructor : Person ,	//必须得表示原型对象的构造器,这样设置的话,constructor属性能被枚举
	name: 'z3' , 
	age : 20 , 
	job : '程序员' ,
	say : function(){
		alert('我是原型的函数!');
	}
};

// ECMA5 给原型对象重新设置构造器的方法 Object.defineProperty(); FF4+ ie8+ 才支持
// 3个参数  参数1 :重设构造器的对象   参数2:设置什么属性  参数3:options配置项
Object.defineProperty(Person.prototype , 'constructor' , {
	 enumerable : false , 
	 value : Person 
});



/* 2、组合使用原型和构造函数式(开发时常用的方式) */
function Person(name , age , friends , job){
	this.name = name ; 
	this.age  = age ; 
	this.friends = friends ;
	this.job = job ;
}

Person.prototype = {
	constructor: Person , 
	sayName : function(){
		alert(this.name);
	}
};

var p1 = new Person('z3' , 20 , ['王五','赵六'] , '技术总监');
var p2 = new Person('李四', 25 , ['王五','赵六' ,'赵7'] ,'boss');

alert(p1.friends);
p1.sayName();
alert(p2.friends);
p2.sayName();


/* 3、动态原型模式:(代码都封装到一起) */
function Person(name , age , friends , job){
	this.name = name ; 
	this.age  = age ; 
	this.friends = friends ;
	this.job = job ;
	
	//动态原型方法:new Person时只会创建一次sayName方法
	if( typeof this.sayName != 'function'){//判断方法是小写的function,构造器是大写的Function
		Person.prototype.sayName = function(){
			alert(this.name);
		}
	}
}

 

继承

js中怎么去实现继承?
原型链继承:将父类实例赋值给子类原型,原型继承即继承了父类的模版,又继承了父类的原型对象
类继承(模版继承或借用构造函数继承)

 

//父类
function Person(name){
	this.name = name;

	// 父类的原型对象
	if(typeof this.sayName != 'function'){
		Person.prototype.sayName = function(){
			alert(this.name);
		}
		Person.prototype.id = 10 ;
	} 
}




// 子类1:原型继承
function Boy(age){
	this.age = age ;
}
Boy.prototype = new Person(); //即继承了父类的模版 又继承了父类的原型对象


// 子类2:通过call或apply实现继承
function Girl(name){
	Person.call(this,name);	//只继承模版,不继承原型对象
	this.sex = sex ; 
}


//子类3:两种方式混合继承
function Man(name , age , sex){
	Man.superClass.constructor.call(this , name , age);//继承父类模版
	this.sex = sex ;
	extend(Man , Person);//只继承一遍父类的原型对象
}

// 给子类加了一个 原型对象的方法,会覆盖父类的sayName方法
Man.prototype.sayName = function(){
	alert('hi javascript!');
}




// extend方法 实现只继承1次父类的模版 只继承一次父类的原型对象
function extend(sub ,sup){
 // 目的: 实现只继承父类的原型对象
 var F = new Function();	// 1 创建一个空函数    目的:空函数进行中转
 F.prototype = sup.prototype; // 2 实现空函数的原型对象和超类的原型对象转换
 sub.prototype = new F(); 	// 3 原型继承 
 sub.prototype.constructor = sub ; // 4还原子类的构造器
 //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
 sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象
 //判断父类的原型对象的构造器 (加保险)
 if(sup.prototype.constructor == Object.prototype.constructor){
	sup.prototype.constructor = sup ; //手动欢迎父类原型对象的构造器
 }
}

 

jQuery操作Table tr td常用的方法

/* 1、查找 */
//获取最后一行
$('#testTable tr:last');

//获取最后一行的行号
var trIndex = $("#estimatePopTable tr:last").index();

//获取指定行
var currentTr = $("#estimatePopTable tr:eq(" + trIndex + ")");

//获取表的总行数
var trLength = $("#testTable tr").length;

//获取倒数第二行,行数要求大于1
$("#testTable tr").get( trLength - 2); 
$("#testTable tr").eq(-2); 


$('#testTable tr:last').find('td').addClass('end'); 
$('#testTable tr').find('td:last').addClass('end'); 

$("#table1 tbody tr:eq(3)").


/* 2、删除 */
//删除第一行外的所有行
$("#idsQuesTable tr:not(:first)").remove();

//删除第一行和第二行外的所有行
$("#reckonConditionTable tr").eq(1).nextAll().remove();

//删除指定行  
$("#table1 tr:eq(3)").remove();  

//删除除第一列外的所有列   
$("#table1 tr td:not(:nth-child(1))").remove();  

//删除第一列  
$("#table1 tr td::nth-child(1)").remove();  
	

/* 3、隐藏 */
//隐藏一行
$("#table1 tbody tr:eq(3)").hide();   

//隐藏一列
$("#table1 tr td::nth-child(3)").hide();  
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

//奇偶行不同颜色
$("#table1 tbody tr:odd").css("background-color", "#bbf");   
$("#table1 tbody tr:even").css("background-color","#ffc");   
$("#table1 tbody tr:odd").addClass("odd")   
$("#table1 tbody tr:even").addClass("even")   

//得到(设置)某个单元格的值
//设置table1,第2个tr的第一个td的值。   
$("#table1 tr:eq(1) td:nth-child(1)").html("value");   
//获取table1,第2个tr的第一个td的值。   
$("#table1 tr:eq(1) td:nth-child(1)").html();  

//获取每一行指定的单元格的值
var  arr  = [];  
$("#table1 tr td:nth-child(1)").each(function (key, value) {  
    arr.push($(this).html());  
});  

 

layer

layer是一款web弹层组件,另还有 lhg、artdialog也是。

var pagesii = layer.open({
    title : title,
    type : 1,
    skin : 'layui-layer-rim', //加上边框
    area : [ '500px', '330px' ], //宽高
    content : $("#pwdDiv")//要弹出的DIV,直接指定DIV的ID即可
});

layer.open({
    title:'详情',
    type: 2,
    skin: 'layui-layer-rim.background:red;', //加上边框
    area: ['584px', '600px'], //宽高
    content: "${rc.contextPath}/loan/apply.htm"//指定页面的访问地址,然后弹出
});

//弹出一个页面层
layer.open({
	title : "取消申请",
	type : 1,
	closeBtn: 1,
	shadeClose: true,
	area : [ '430px', '250px' ], //宽高
	content : $("#cancleApplyDiv")//要弹出的DIV,直接指定DIV的ID即可
});

 

for...in

// 创建具有某些属性的对象
var myObject = new Object();
myObject.name = "James";
myObject.age = "22";
myObject.phone = "555 1234";
// 枚举(循环)对象的所有属性
for (prop in myObject){
   // 显示 "The property 'name' is James",等等。
   window.alert("The property '" + prop + "' is " + myObject[prop]);
}

 

消息框

//确认消息框
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
    window.alert("欢迎访问我们的 Web 页!");
} else{
    window.alert("再见啦!");
}

//提示消息框
var theResponse = window.prompt("欢迎?","请在此输入您的姓名。");

 

 <body>
	<!-- 指定的是id -->
	<form id="one">
		<input id="age"/>
	</form>

	<!-- 指定的是name -->
	<form name="two">
		<input name="username"/>
		<input id="mobile"/>
	</form>
 </body>
</html>


<script type="text/javascript">
var frs = document.forms;
//console.info(frs);//可以找到俩个form

var oneForm = document.one;//form必须指定name才行
var twoForm = document.two;
//console.info(oneForm);//undefined
//console.info(twoForm);//可以找到


var username = document.two.username;//查找name=two的form下的username
var mobile = document.two.mobile;//
console.info(username);//可以找到
console.info(mobile);//可以找到

</script>

 

<!-- 解决点击button会自动刷新页面问题,加上return false; -->
<button class="codebtn out" onclick="nextNew(this);return false;">下一步</button>
//判断浏览器
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
	alert('你是使用IE')
}else if (navigator.userAgent.indexOf('Firefox') >= 0){
	alert('你是使用Firefox')
}else if (navigator.userAgent.indexOf('Opera') >= 0){
	alert('你是使用Opera')
}else{
	alert('你是使用其他的浏览器浏览网页!')
}

 

 

 

 

  • ==和===

        ===等同符:不会发生类型的自动转化

        ==等值符:会发生类型自动转化、自动匹配

 

 

 

 

 

二、JS正则表达式中使用变量

//手机号部分隐藏
"12345678901".replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');

  sendCodes.replace(eval('/'+data.code+','+'/g'),'')

将JSON字符串变成对象:r = eval("("+ r +")");

prop与attr

 

JS对象转字符串:console.info(JSON.stringify(parentNodeArr))

JSON2.js

另外经过测试,firefox也内置了JSON.pares()和JSON.string()方法,它对JSON的处理和joon2.js提供的方法是一样的。

http://msdn.microsoft.com/zh-cn/library/ie/cc836459(v=vs.94).aspx

 

(function(){

})();

//function用小括号括起来表示这个函数就是一个单独的作用域,里面的代码跟外面的代码不产生任何关系。再在后面跟上小括号表示执行该匿名函数

在js里0就是假,非0就是真

空就是假,非空就是真

//EasyUI
//格式化日期
{index:'signEndDate',name:'signEndDate',label:'有效期结束时间',width:0,align:'center',formatter:"date",formatoptions: {newformat:'Y-m-d'}},

 

IE文本域实现拖动 http://jqueryui.com/resizable/

JavaScript跨域总结与解决办法

 

转载于:https://my.oschina.net/weslie/blog/471965

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值