JavaScript

1.语法基础（变量常量，数据类型，运算符，表达式与语句，类型转换，转义字符，注释）
2.流程控制（选择结构if switch。循环结构 while do...while for）
3.函数（定义，调用，嵌套，内置，自定义）
4.字符串对象（获取长度，大小写转换，获取某个字符，截取字符串，替换，分割，检索）

 getLength(n)
  {
      var str = n + "";// n为数字时，获取的长度
      return str.length;
  }

"小写：" + str.toLowerCase() 
"大写：" + str.toUpperCase()

"第1个字符是：" + str.charAt(0)
"第7个字符是：" + str.charAt(6)
举例：找出字符串中小于某个字符的所有字符
   var str = "how are you doing？";
   //定义一个空字符串，用来保存字符
   var result = "";
   for (var i = 0; i < str.length; i++) 
   {
       if (str.charAt(i) < "s") 
       {
           result += str.charAt(i) + ",";
       }
   }
//两个字符之间比较的是ASCII码的大小

字符串名.substring(start, end)// 当end省略时，截取的范围为：start到结尾。.截取范围为：[start,end)

字符串名.replace(原字符串, 替换字符串)
字符串名.replace(正则表达式, 替换字符串)

var str = "I am loser, you are loser, all are loser.";
var str_new = str.replace(/loser/g, "hero");//str.replace(“loser”, “hero”)
// 正则/loser/g会替换所有的“loser”，而字符串“loser”只会替换第1个“loser”。

字符串名.split("分割符") // split()方法把一个字符串分割成一个数组
var str = "HTML,CSS,JavaScript";
var arr = str.split(",");
//split(" ")和split("")是不一样的 前者两个引号之间是有空格的，所以表示用空格作为分割符来分割。后者两个引号之间是没有空格的，所以可以用来分割字符串每一个字符
//数组join()方法一般都是配合字符串的split()方法来使用的。

字符串名.indexOf(指定字符串) // match()和search()
字符串名.lastIndexOf(指定字符串)
indexOf()和lastIndexOf()不仅可以用于检索字符串，还可以用于检索单个字符。
//如果字符串中包含“指定字符串”，indexOf()就会返回指定字符串首次出现的下标，而lastIndexOf()就会返回指定字符串最后出现的下标；如果字符串中不包含“指定字符串”，indexOf()或lastIndexOf()就会返回-1。

5.数组对象（创建，获取，赋值，获取长度，截取，添加，删除，比较大小，颠倒顺序，连接成字符串）

var 数组名 = new Array(元素1, 元素2, ……, 元素n);    //完整形式
var 数组名 = [元素1, 元素2, ……, 元素n];             //简写形式

数组名.slice(start, end);截取范围为：[start,end)

在数组开头添加元素：unshift()
数组名.unshift(新元素1, 新元素2, ……, 新元素n)
 var arr = ["JavaScript", "jQuery"];
arr.unshift("HTML", "CSS");

在数组结尾添加元素：push()
数组名.push(新元素1, 新元素2, ……, 新元素n)
 var arr = ["HTML", "CSS"];
arr.push("JavaScript","jQuery");

删除数组中第一个元素：shift()
var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
arr.shift();

删除数组最后一个元素：pop()//push()用于在数组结尾处添加新的元素，pop()用于删除数组最后一个元素
var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
arr.pop();
unshift()、push()、shift()、pop()这4个元素都会改变数组的结构，因此数组的长度（length属性）也会改变

数组名.sort(函数名)
//定义一个升序函数
function up(a, b) 
{
  return a - b;
}
//定义一个降序函数
function down(a, b) 
{
  return b - a;
}
//定义数组
var arr = [3, 9, 1, 12, 50, 21];
arr.sort(up);//升序：1、3、9、12、21、50
arr.sort(down);//降序：50、21、12、9、3、1

数组名.reverse();
 var arr = [3, 1, 2, 5, 4];
 arr.reverse();//反向排列后的数组：4,5,2,1,3

join()方法来将数组中的所有元素连接成一个字符串。
arr.join()表示使用默认符号（,）作为分隔符，arr.join("*")表示使用星号（*）作为分隔符。
arr.join("") =没有任何字符
var str1 = "我*哎*学*习";
 var str2 = str1.split("*").join("#");// 我#哎#学#习

        var str1 = "我哎学习网";
        var str2 = str1.split("").join("><");
        var arr = str2.split("");
        arr.unshift("<");
        arr.push(">");
        var result = arr.join("");//<我><哎><学><习><网>

6.时间对象（年月日时分秒 获取星期几）

时间对象.png

主要分为两大类：getXxx()和setXxx()。getXxx()用于获取时间，setXxx()用于设置时间。

getFullYear()   获取年份，取值为4位数字
getMonth()  获取月份，取值为0（一月）到11（十二月）之间的整数
getDate()   获取日数，取值为1~31之间的整数
getHours()  获取小时数，取值为0~23之间的整数
getMinutes()    获取分钟数，取值为0~59之间的整数
getSeconds()    获取秒数，取值为0~59之间的整数

setFullYear()   可以设置年、月、日
setMonth()  可以设置月、日
setDate()   可以设置日
setHours()  可以设置时、分、秒、毫秒
setMinutes()    可以设置分、秒、毫秒
setSeconds()    可以设置秒、毫秒

getDay()返回一个数字，其中0表示星期天，1表示星期一……6表示星期六。
var d = new Date();
document.write("今天是星期" + d.getDay());

var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var d = new Date();
document.write("今天是" + weekday[d.getDay()]);

7.数字对象（Math属性，方法，最大值最小值，取整运算，三角函数，生成随机数）

Math.max(a, b, …, n);
Math.min(a, b, …, n);
示例：
        var a = Math.max(3, 9, 1, 12, 50, 21);
        var b = Math.min(3, 9, 1, 12, 50, 21);
        document.write("最大值为：" + a + "<br/>");
        document.write("最小值为：" + b);
floor()方法对一个数进行向下取整。所谓“向下取整”，指的是返回小于或等于指定数的“最近的那个整数”。
Math.floor(x)
ceil()方法对一个数进行向上取整。所谓“向上取整”，指的是返回大于或等于指定数的“最近的那个整数”.
Math.ceil(x)

取整.png

sin(x)  正弦
cos(x)  余弦
tan(x)  正切
asin(x) 反正弦
acos(x) 反余弦
atan(x) 反正切
atan2(y, x) 反正切（注意y、x顺序）
"sin30°：" + Math.sin(30 * Math.PI / 180) //sin30°：0.49999999999999994
"cos60°：" + Math.cos(60 * Math.PI / 180//cos60°：0.5000000000000001
"tan45°：" + Math.tan(45 * Math.PI / 180)//tan45°：0.9999999999999999
atan2(y, x)跟atan(x)是不一样的，atan2(y, x)能够精确判断角度对应哪一个角，而atan(x)不能。因此在高级动画开发时，我们大多数用的是atan2(y, x)，基本用不到atan(x)。
反三角函数用得很少（除了atan2()），一般都是用三角函数，常用的有：sin()、cos()和atan2()。

Math.random()//生成随机数
Math.random()*m
表示生成0~m之间的随机数，例如“Math.random()*10”表示生成0-10之间的随机数。
Math.random()*m+n
表示生成n~m+n之间的随机数，例如“Math.random()*10+8”表示生成8-18之间的随机数。
Math.random()*m-n
表示生成-n~m-n之间的随机数，例如“Math.random()*10-8”表示生成-8-2之间的随机数。
Math.random()*m-m
表示生成-m~0之间的随机数，例如“Math.random()*10-10”表示生成-10-0之间的随机数。

Math.random()*5来说，由于floor()是向下取整，因此Math.floor(Math.random()*5)生成的是04之间的随机整数。
如果你想生成05之间的随机整数 Math.floor(Math.random()*(5+1))
如果你想生成0到m之间的随机整数 Math.floor(Math.random()*(m+1))
生成1到m之间的随机整数（包括1和m） Math.floor(Math.random()*m)+1
生成n到m之间的随机整数（包括n和m） Math.floor(Math.random()*(m-n+1))+n

8.DOM（节点类型，获取元素，创建，插入，删除，复制，替换，css属性操作，DOM遍历，innerHTML和innerText）

9.事件（鼠标事件，键盘事件，表单事件，编辑事件，页面事件，监听器，event对象，this）

onclick 鼠标单击事件
onmouseover 鼠标移入事件
onmouseout  鼠标移出事件
onmousedown 鼠标按下事件
onmouseup   鼠标松开事件
onmousemove 鼠标移动事件
onload表示文档加载完成后再执行的一个事件。
window.onload = function(){
    ……
}

obj.addEventListener(type , fn , false)
obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。
fn是一个函数名，或者一个匿名函数。
false表示事件冒泡阶段调用。

obj.removeEventListener(type , fn , false);
obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
type是一个字符串，指的是事件类型。例如，单击事件用click，鼠标移入用mouseover等。一定要注意，这里不需要加上on前缀的。
对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.addEventListener("click", alertMes, false);
            function alertMes() 
            {
                alert("那你很棒棒噢~");
                oBtn.removeEventListener("click", alertMes, false);
            }
        }

10.window对象（窗口操作，对话框，定时器，location对象，navigator对象）

location对象的href属性来获取或设置当前页面的地址。
window.location.href//window.location.href可以直接简写为location.href

window.location.search//search属性来获取和设置当前页面地址“?”后面的内容

对话框有3种： alert()、confirm()和prompt()。

      window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            //timer存放定时器
            var timer = null;
            oBtn[0].onclick = function () 
            {
                timer = setTimeout(function () {
                    alert("定时");
                }, 2000);
            };
            oBtn[1].onclick = function () 
            {
                clearTimeout(timer);
            };
        }

        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            var oDiv = document.getElementsByTagName("div")[0];
            //定义一个数组colors，存放6种颜色
            var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
            //timer用于存放定时器
            var timer = null;
            //i用于计数
            var i = 0;
            //“开始”按钮
            oBtn[0].onclick = function () 
            {
                //每次点击“开始”按钮，一开始就清除一次定时器
                clearInterval(timer);
                //每隔1秒切换一次背景颜色
                timer = setInterval(function () {
                    oDiv.style.backgroundColor = colors[i];
                    i++;
                    i = i % colors.length;
                }, 1000);
            };
            //“暂停”按钮
            oBtn[1].onclick = function () 
            {
                clearInterval(timer);
            };
        }

定时任务.png

11.document对象（属性，方法）