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, " ");
}
//=============================================================
//-------------------------------------------------------------