JavaScript.js
来源:原创
时间:2016-07-23
作者:脚本小站
分类:代码笔记
javascript DOM 和 BOM jQuery //============================================================= //---------------------------输出------------------------------ alert("this is exe"); document.write("this is string"); //------------在同一个页面中的javascript同属一体------------- //============================================================= //--------------------javascript重定向------------------------ //1.当点击连接时执行该程序 <a href="javascript:alert()">demo</a> //2.利用表单执行javascript //3.凡是有连接的地方都可同样操做 <form action="javascript:alert('hello-----');"> <input type="submit"> </form> //-------------------------事件--------------------------- <div onclick="alert('hello')">hello</div> //============================================================= //---------------------运算符和表达式------------------------- /* 算数运算符号 + - * / % ++ -- +加法 +连接字符串 %一种是被整除 一种求一段范围 赋值运算符号 = += -= *= /= %= 条件运算符号 > < == != >= <= === !== 逻辑运算符号 && || ! ^ 位运算符 >> >>> << | & ~ 其他运算符 ? : */ //============================================================= //--------------------javascript语法特点---------------------- //javascript区分大小写 //对象:每个单词首字母都要大写 Date(); new Object(); //javascript将换行看做语句的结束 //变量在浏览器关闭后释放 //-----------------------变量的声明--------------------------- //在函数外面声明的变量为全局变量,在函数内部声明的变量为局部变量 var a=10; a=20; //重新给变量赋值 //也可以不声明直接使用变量 a=20; //--------------------返回变量或函数类型---------------------- typeof(变量); typeof(函数不加括号); //javascript数据类型 number (int float double) string (string char) boolean object(object array null) //javascript单引号和双引号相同 //============================================================= //---------------------javascript函数-------------------------- //函数无调用顺序,即函数声明前后都可调用。 //函数遇到return就停止执行。 //--------在javascript中函数是变量,可以将函数赋值---------- //函数声明 function table(){} //将函数table赋值给demo,不加括号仅代表函数,加括号则调用函数 demo=table; //调用函数 demo(); //弹出table函数声明,即函数代码 alert(table); //-------------------其他声明函数的方法----------------------- //此函数不用起名 var test=function(a,b){} //函数的调用 test(a,b); //-------------------将函数作为参数传入函数------------------ //声明带有函数参数的函数 function demo(a,fun){ return a+fun(); } //被调用的函数 function test(){ return 100; } //调用带参数的函数 demo(a,test); //在函数中直接传函数可以不写函数名 demo(a,function(){return true;}); //---------------全局变量与局部变量--------------------------- var test=10; //声明全局变量 function demo(){ test+=20; //此处调用的是全局变量 } demo(); //------------javascript函数没有默认参数---------------------- //php默认没有参数,即在调用函数时有参数就要传值 function demo(a,b){} //自定义添加默认参数功能 function test(a,b){ if(typeof(a)=="undefined") a=1; if(typeof(b)=="undefined") b=2; alert(a+"-------"+b); } //其他自定义添加默认参数功能 function test(a,b){ a = a ? a : 1; b = b ? b : 1; alert(a+"---"+b); } //实参比形参多的情况下,利用函数arguments function test(){ alert(arguments.length); //arguments是一个函数,arguments.length代表数组长度 alert(arguments[2]); //此方法取出数组内容 } test(1,2,3,4,5,6); //============================================================= //-------------------------对象------------------------------- //javascript没有类的概念 global escape(字符串) //将字符串编码 unescape(编码) //将字符串解码 parseInt(小数) //将数字舍去小数点后部 parseFloat(字符串) //字符串转浮点数 isNaN(类数字) //检测是否为数字 eval(代码) //检查并执行代码,执行代码组成的字符串 //-------------------------实例化对象------------------------- var date=new Date(); //对象使用方法 对象实例.属性 对象实例.["属性"] 对象实例.方法() //------------------------获取时间实例------------------------ var DT=new Date(); var str="Today is:"; str+=DT.getYear()+"年"; str+=(DT.getMonth()+1)+"月"; str+=DT.getDate()+"日"; str+=DT.getHours()+":"; str+=DT.getMinutes()+":"; str+=DT.getSeconds()+" 星期"; switch(DT.getDay()){ case 0: str+="日";break; case 1: str+="一";break; case 2: str+="二";break; case 3: str+="三";break; case 4: str+="四";break; case 5: str+="五";break; case 6: str+="六";break; } document.write(str); //=====================自定义对象============================= //----------------------1.方式一-------------------------- function Play(){} var p=new Play(); //自定义属性 p.width=300; p.height=200; p.num=4; p.autotime=3; //自定义方法 p.autoplay=function(){alert("------");} p.test=function(){} //调用对象 alert(p.width); //-----------------------2.方式二------------------------- //系统自定义方法,系统自动带有Object方法 var p=new Object; //下面同上 p.width=100; //-----------------------3.方式三------------------------- //用一个方法将声明过程包括在内 function Play(){ var p=new Play(); //自定义属性 p.width=300; p.height=200; p.num=4; p.autotime=3; //自定义方法 p.autoplay=function(){ //内部调用用this关键字代表本类 alert(this.width); } p.test=function(){} return p; } var p=Play(); //后面也可以添加属性与方法(不推荐) p.demo="hello"; //--------------------4.方式四----------------------------* //创建对象 function Play(width,height,num){ this.width=width; this.height=height; this.num=num; this.autoPlay=function(){} this.test=function(){ alert(this.height); } } //调用对象 var p=new Play(300,200,5); //调用对象里的方法 p.test(); //------------------------对象的使用-------------------------- //-----------------用for语句遍历对象--------------------- var p=new Play(300,200,5); //for(变量 in 对象){} 每一次将对象的属性名p赋值给变量pro var pro=""; for(pro in p){ alert(pro); //pro为属性名称 alert(p[pro]);//中括号中的字母是一个变量不加引号 } p["width"] //改width为字符串 p[width] //改width为变量 //-----------------对象的操作方式------------------------- //with有省略书写类名称的作用 with(对象){ 方法或属性名;//此处省略类名 } with(document){//大括号内的方法都是with小括号内对象的方法 write("hello"); } //==========================常用对象========================== //-----------------函数对象的操作,不推荐----------------- var demo=new Function(字符串参数,字符串参数,最后一个函数体); var demo=new Function("x","y","return x+y"); //------------------字符串对象---------------------------- var str=new String("abc"); var str="abc"; //两种方法相同 //字符串对象属性 length() //-------------------正则对象----------------------------- //在javascript中正则模式不用加引号 var pattern=/\<img\>/i; //此方法用引号 var pattern=new RegExp("/\<img\>/","i"); //JavaScript模式修正符只有三个 /* i 匹配部分大小写 g 匹配多次 m 多行查找*/ //正则表达式必须放在字符串处理函数上才能发挥作用 var str=" user name"; if(str.match(/^\s+$/)){//匹配空白 alert("true"); }else{ alert("false"); } //str.replace()函数的使用 var str="vfbb23gvtbvh"; var nstr=str.replace("23","232323"); //使用正则匹配替换 var nstr=str.replace(/\d/g,"232323"); //-------------------常用数学对象------------------------- Math.random(); //随机数 Math.ceil(); //进一取整 Math.floor(); //割舍,小于等于这个浮点数 Math.round(); //四舍五入 //将数字控制在一个范围内 var num=25; var i=Math.max(-6,Math.min(6,num)); //=======================数组的声明与使用===================== //-------------------------数组的声明------------------------- //json格式 var p={name:"stephne",age:20,sex:man}; //快速格式 var p=["","",""]; //二维数组的声明 var p=[["",""],["",""],["",""]]; //数组的使用 alert(p[1]); alert(p["name"]); alert(p.name); //二维数组的使用 alert(p[1][1]); //使用Array对象 var arr=new array("",""); var arr=new array(10); //表示创建带有10个空元素的数组 //------------------------数组的输出------------------------- var arr=[1,5,9,7,8,3,4]; //用for语句遍历数组 for(var i=0;i< arr.length;i++){ //arr.length数组的长度 document.write(arr[i]+"<br>"); } //直接输出数组 document.write(arr); document.write(arr[2]); //在数组中排序 var arr=[1,5,9,7,8,3,4]; arr.sort(); //---------------------传入回调函数排序方法----------------- arr.sort( function(a,b){ if(a.length < b.length) return -1; else if(a.length == b.length) return 0; else return 1; } ); document.write(arr); //----------------------向数组中压入与弹出数据-------------- //-------------------堆栈式------------------------------ //向数组中压入数据,数据在数组最后一个 arr.push("hello","hello2",...); //弹出(拿出)数组中的数据,弹出最后一个数据 arr.pop(); //每调用一次弹出一个 //-------------------队列式------------------------------ //向数组中加入数据,数据在数组的第一个 arr.unsift(); //弹出(拿出)数组中最后一个数据 arr.sift(); //数组对象属性 constructor length prototype //数组对象方法 concat join pop push reverse shift slice sort splice toLocaleString toString unshift valueOf //============================================================= //-----------------------常用函数------------------------------ indexOf() //指定的字符串在字符串中首次出现的位置 substr(start,length) //截取并返回指定长度字符串 substring(start,end) //截取并返回指定位置的字符串 split(',') //将字符串按指定的符号分割成数组 parseInt() //转换成整型 parseFloat() //转换成浮点型 toFixed(位数) //限制小数位数 //背景颜色属性 document.bgColor="yellow"; //随机更改背景颜色例 //Math.random() 返回0到1之间的随机数 var colors=["red","blue","yellow","green"]; document.bgColor=colors[Math.floor(Math.random()*colors.length)]; //============================================================= //--------------------在js中添加方法自定义方法---------------- String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } String.prototype.ltrim=function(){ return this.replace(/(^\s*)/g,""); } String.prototype.rtrim=function(){ return this.replace(/(\s*$)/g,""); } //============================================================= //---------------------js闭包实例----------------------------- /* 不加~的时候 function(x){}(i) 对比下匿名函数的声明方式 function (){} 不过是多了个(i)而已 此时浏览器解释器会把它当作声明来解析 但规范中并没有说你能在函数声明後面直接调用的吧 这时我们需要给点前提条件 让解释器去知道我们希望进行匿名函数的直接调用 以下方法都是可行的 a = function(){}() ~function(){}() !function(){}() +function(){}() void function(){}() (function(){})() */ var del = document.getElementsByName('del'); for(var i = 0;i < del.length;i++){ ~function(x){ del[x].onclick = function (){ this.parentNode.style.backgroundColor = 'red'; alert(x);//点那个弹那个 } }(i); } //============================================================= //-----------------------阻止submit提交------------------------ //其中submit为表单提交对象,用onclick事件 submit.onclick = function (){ if(username.value == ''){ //方法一: //submit.disabled = true; //方法二: return false; } } //=====================格式化时间戳=========================== //------------------------------------------------------------- function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); } //============================================================= //-------------------------------------------------------------