JavaScript

JavaScript

函数

一、嵌套函数

嵌套函数，就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。

二、递归函数

递归函数用于让一个函数从其内部调用其本身。不过需要注意的是，如果递归函数处理不当，就会使程序陷入“死循环”。为了防止“死循环”的出现，可以设计一个做自加运算的变量，用于记录函数自身调用的次数，如果次数太多就让它自动退出循环。

function 递归函数名(参数1)
{
    递归函数名(参数2)
}

在定义递归函数时，需要2个必要条件：

（1）首先包括一个结束递归的条件；

（2）其次包括一个递归调用的语句；

三、内置函数

eval()函数简介

在JavaScript中，eval()函数可以把一个字符串当做一个JavaScript表达式一样去执行它。

string表示一个字符串，是eval()函数必选参数。eval()函数是有返回值的，如果参数字符串是一个表达式，就会返回表达式的值。如果参数字符串不是表达式，也就是没有值，那么就会返回“undefined”

<script type="text/javascript">
        eval("x=10;y=20;document.write(x*y)");
        //输出200
    </script>

isFinite()函数简介

在JavaScript中，isFinite()函数用来确定某一个数是否是一个有限数值。

document.write(isFinite(123));   //true

isNaN()函数简介

在JavaScript中使用isNaN()函数来判断一个值是否是NaN值。如果该值为非数字值或NaN值，返回true，否则返回false。

那什么叫NaN值呢？啊，很简单：

NaN = “Not a Number”（非数字值）

顾名而思义，现在大家都懂了什么叫NaN值吧。其实数字型数据（整型或浮点型）就不是NaN值，而非数字型（如字符串）就是NaN值。

       document.write(isNaN(123));      //false
        document.write(isNaN("123"));    //false
        document.write(isNaN("123jj"));   //true

parseInt()函数

parseInt()函数主要将首位为数字的字符串转化为数字。如果字符串不是以数字开头，则将返回NaN。(并且是int型)

     document.write(parseInt("12kkk"));     //12
        document.write(parseInt("g12kkk"));   //NaN
        document.write(parseInt(12.56));     //12

parseFloat()函数

parseFloat()函数主要将首位为数字的字符串转化为浮点型数字。如果字符串不是以数字开头，将返回NaN。

字符串对象String

转换类

toUpperCase()

把字符串转换成大写

 var str = "hujiang";
        document.write(str.toUpperCase());   //HUJIANG

tolowerCase()

把字符串转换成小写

查找类

indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

 var str = "hujiang shuaige";
        document.write(str.indexOf("hu")+"<br/>");   //0

lastIndexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中最后出现的位置。

        var str = "hujiang shuaige";
        document.write(str.lastIndexOf("hu")+"<br/>");   //9

charAt()

获取字符串中指定位置的字符

var str = "hujiang";
        document.write(str.charAt(0));    //h

截取类

substring()

substring()方法来提取字符串中的某一部分字符串。

字符串.substring(开始位置,结束位置)

var str1="hujiangdd";
        var str2=str1.substring(3,5);
        document.write(str2);     //ia

substr()

substr() 的参数指定的是子串的开始位置和长度

var str="Hello world!"
document.write(str.substr(3))       //lo world!
document.write(str.substr(3,7))     //lo worl

组合类(和正则表达式组合使用)

split()

把字符串按指定字符分割成数组

字符串.split(分割符)

 var str ="I love hujiang";
        var arr=new Array();
        arr=str.split(" ");
        console.log(arr);   //["I", "love", "hujiang"]

replace()

replace()方法常常用于在字符串中用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子串。

strObject.replace(原字符,替换字符)    
strObject.replace(正则表达式,替换字符)  //匹配正则表达式

  var str ="I love javascript!";
        var str_new=str.replace("javascript","hujiang");
        document.write(str_new);      //I love hujiang!

match()

match()方法可以从字符串内检索指定的值，或者找到一个或多个正则表达式的匹配.有，则返回该值。无，则返回null

         var str="Hello World!";
        document.write(str.match("world")+"<br/>");   //null
        document.write(str.match("World")+"<br/>");   //World

search()

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。有，则返回该值索引。无，则返回-1

         var str = "hujiang shuaige";
        document.write(str.search("ge")+"<br/>");    //13
        document.write(str.search("hh"));            //-1

连接类

concat()

可以使用concat()方法来连接2个或多个字符串。返回新的字符串

字符串1.concat(字符串2,字符串3,…,字符串n);

var str1="hu";
        var str2="jiang";
        var str3="dd";
        var str=str1.concat(str2,str3);
        document.write(str);       //hujiangdd

Array对象

slice()	获取数组中的某段数组元素
unshift()	在数组开头添加元素
push()	在数组末尾添加元素
shift()	删除数组中第一个元素
pop()	删除数组最后一个元素
toString()	将数组转换为字符串
join()	将数组元素连接成字符串
concat()	多个数组连接为字符串
sort()	数组元素正向排序
reverse()	数组元素反向排序

栈方法

push()

push()方法是在数组的末尾添加元素,并且返回新数组的长度

var arr=new Array("hu","hh");
        console.log(arr.push("jQ", "Aj"));   //4
        console.log(arr);          //["hu", "hh", "jQ", "Aj"]

pop()

pop()方法删除并返回数组中的最后一个元素,并且返回最后一个元的值

 <script type="text/javascript">
        var arr=new Array("hu","hh");
        console.log(arr.pop());          //hh
    </script>

队列方法

unshift()

unshift()方法在数组开头添加元素，并且返回新数组的长度

 var arr=new Array("hu","hh");
        console.log(arr.unshift("jQ", "Aj"));    //4
        console.log(arr);     //["jQ", "Aj", "hu", "hh"]

shift()

shift()方法来删除数组中第一个元素，并且返回第一个元素的值。

       var arr=new Array("hu","hh");
        console.log(arr.shift());    //hu

排序方法

sort()

sort()方法对数组元素进行大小比较排序。

        //升序比较函数
        function asc(a,b)
        {
            return a-b;       //根据返回数值的正负进行排序
        }
        //降序比较函数
        function des(a,b)
        {
            return b-a;
        }
       var arr=new Array(3,9,1,12,50,21);
        arr.sort(asc);
        document.write("升序后的数组元素"+arr.join(","));
        document.write("<br/>");
        arr.sort(des);
        document.write("降序后的数组元素"+arr.join(","));

reverse()

reverse()方法将数组中的元素反向排列。注意，reverse()是一种“排列”方法，而不是“排序”方法。

 var arr1= new Array("html","css","javascript");
   console.log(arr1.reverse());
        //["javascript", "css", "html"]

操作方法

concat()

concat()方法连接两个或多个数组。该方法不会改变现有的数值，而仅仅会返回被连接数组的一个副本。

 var arr1=new Array("hu","hh");
  var arr2 = new Array("html","css","javascript");
   console.log(arr1.concat(arr2));   
   //["hu", "hh", "html", "css", "javascript"]

slice()

slice()方法来获取数组中的某段数组元素。该方法不会改变原始数组。

数组对象.slice(start,end)

var arr=new Array("hu","hh","jj","jiang","ji");
        console.log(arr.slice(1,3));   //["hh", "jj"]

join()

join()方法把数组中的所有元素连接成为一个字符串

       var arr=new Array("hu","hh");
       console.log(arr.join(','));    //hu,hh

splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。

var arr = new Array(6)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"
        arr[3] = "James"
        arr[4] = "Adrew"
        arr[5] = "Martin"

        document.write(arr + "<br />")  //George,John,Thomas,James,Adrew,Martin

        //在index 为2 的位置添加一个元素：
        arr.splice(2,0,"William")
        document.write(arr + "<br />")  //George,John,William,Thomas,James,Adrew,Martin

        //删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素
        arr.splice(2,1,"Jilliam")
        document.write(arr + "<br />")  //George,John,Jilliam,Thomas,James,Adrew,Martin

        //将删除从 index 2 开始的三个元素，并添加一个新元素来替代被删除的元素
        arr.splice(2,3,"William")    
        document.write(arr)        //George,John,William,Adrew,Martin

查找方法

indexOf()

lastIndexOf()

迭代方法

every()

filter()

forEach()

map()

some()

Math对象的方法

ceil(x)	对数进行上舍入
floor(x)	对数进行下舍入

round(x)	把数四舍五入为最接近的整数
min(x,y)	返回x和y中的最小值

random()	返回0~1之间的随机数
abs()	求一个数的绝对值

document.write( Math.ceil(0.4) );     //1
document.write( Math.ceil(0.6));      //1

document.write(Math.floor(0.6) );      //0
 document.write( Math.floor(-1.1) );    //-2

var num=Math.floor(Math.random()*10+1);  //返回1到10的随机数
var num=Math.floor(Math.random()*9+2);   //返回2到10的随机数

事件

JavaScript鼠标事件

onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件

        var btn = document.getElementById("btn");
        var e = document.getElementById("hj");
        btn.onmousedown = function () {
            e.style.color = "red";
        }
        btn.onmouseup = function () {
            e.style.color = "black";
        }

JavaScript键盘事件

onkeypress事件

onkeypress事件是在键盘上的某个键被按下到松开整个过程中触发的事件

onkeydown事件

键盘的按键被按下时触发

onkeyup事件

onkeyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件

JavaScript表单事件

onfocus/onblur

onfocus表示获取焦点触发的事件，onblur表示失去焦点触发的事件

具有获得焦点和失去焦点事件的元素有3个：

• （1）单行文本框text；

• （2）多行文本框textarea；

• （3）下拉列表select；

onchange事件

用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事

具有获得onchange事件的元素有3个：

• （1）单行文本框text；
• （2）多行文本框textarea；
• （3）下拉列表select；

onselect事件

在JavaScript中，当用户选中单行文本框text或多行文本框textarea的文本时，会触发onselect事件。onselect事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。

<textarea id="txt" rows="5" cols="20"></textarea><br />
    输入字符长度为：<span id="num"></span>
    <script type="text/javascript">
        var e = document.getElementById("txt");
        var n = document.getElementById("num");
        e.onchange = function () {
            var len = e.value.length;
            n.innerText = len;
        }
    </script>

JavaScript页面相关事件

onload（加载事件）

window.onload=function(){
    ……
}

onresize（页面大小事件）；

对于页面大小改变的事件我们用的是onresize。这个事件常用于固定浏览器的大小

onerror（出错事件）；

当文档或图像加载过程中发生错误时就会触发onerror事件。

其他事件

onscroll 事件：滚动条发生滚动时触发

window.onscroll = function () {
                var scrollTop =   document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop > 200) {
                    show(oTop);
                } else if (scrollTop <= 200) {
                    hide(oTop);
                }
            };