一、javaScript基础

                              JavaScript的组成：ECMAscript JavaScript核心

                                                                  DOM文档对象

                                            　　　　　BOM 浏览器对象

   　　　　　　 JavaScript基本结构

　　　　　　　　　　　　内部:<script type=”text/javascript” >

　　　　　　　　　　　　　　　　　　//js代码

　　　　　　　　　　　　　　</script>

　　　　　　　　　　　　行内: onclick=”javascript:;”

　　　　　　　　　　　　外部:<script src=”js文件” ></script>

　　　　　　核心语法:

1. 1. 1. 变量声明与使用: var s = 变量值 ; //根据值确定数据类型
      2. 数据类型: string//字符类型

　　　　　　　　　　　　　　　　　　1)方法：CharAt()//获取指定下标的字符

　　　　　　　　　　　　　　　　　　2) indexOf();//获取指定字符的下标

　　　　　　　　　　　　　　　　　　3) Substring(开始下标,结束下标);截取字符

　　　　　　　　　　　　　　　　　　4) Split(“”);根据指定字符分割成一个数组

 　　　　　　　　　　　　　　　　number//数字类型

　　　　　　　　　　　　　　　　boolean//布尔类型

　　　　　　　　　　　　　　　　object//标签对象

　　　　　　　　　　　　　　　　undefined//未定义

1. 1. 1. 数组: 定义:var s = new Array();

　　　　　　　　　　　　　　　　Var s = {};

　　　　　　　　　　　　　　属性:length

　　　　　　　　　　　　　　方法:sort()//排序

 　　　　　　　　　　　　　　　　 Join()//根据连接符组成一个字符串

  　　　　　　　　　　　　　　　　Push()//在数组末尾加上一个

　　　　　　　　　　4.运算符:

        　　　　　　　　　　　　算数运算符:+-*/%

       　　　　　　　　　　　　 关系运算符:> < >= <= != ==

        　　　　　　　　　　　　逻辑运算符:&& || !

　　　　　　　　　　5.逻辑控制语句:

　　　　　　　　　　　　　　　　顺序结构:从上到下

　　　　　　　　　　　　　　　　选择结构:if() switch()

　　　　　　　　　　　　　　　　循环结构:while(),do-while(),for()

　　　　　　　　　　6.注释://,/**/

           　　　　　　　7.语法约定:

　　　　　　　　　　　　　　　　A.不能是关键字

　　　　　　　　　　　　　　　　B.开头不能是数字

　　　　　　　　　　　　　　　　C.不能有特殊符号

　　　　　　　　　　　　　　　　D.一行写一句代码

           　　　　　　　 8.自定义函数:

　　　　　　　　　　　　　　function 函数名(参数列表){

　　　　　　　　　　　　　　　　　　　　　　//代码

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　9.变量的作用域:全局变量,局部变量

　　　　　　　　　　　　　　事件:onclick

二、javaScript操纵BOM对象

　　　　　　　　1.window对象:

             　　　　　　　　属性:history//历史记录

                 　　　　　　　　　location//设置当前URL

            　　　　　　　　  方法:prompt(“提示信息”,”默认值”)//输入

                  　　　　　　　　　alert()//警告框输出

                 　　　　　　　　　 confirm()//带确定与取消，返回true,flase

                  　　　　　　　　　close()//关闭浏览器窗口

                 　　　　　　　　　 open()//打开一个新的窗口

                  　　　　　　　　　setTimeout();//定时函数，触发调用

                  　　　　　　　　　setInterval();//定时函数，自己调用

　　　　　　　　2.history对象

                  　　　　　　　　方法:forward()//回到下一个页面

                       　　　　　　　　　back()//回到上一个页面

                       　　　　　　　　　go()//正值为下个，负值为上个

　　　　　　　3.location对象

                  　　　　　　属性:href//获取或设置URL

                       　　　　　　　host//得到主机名和端口号

                      　　　　　　　 hostname//得到主机名和IP地址

                  　　　　　 方法:reload()//重新加载本文档，刷新

                      　　　　　　 replace()//替换文档

　　　　　　4.document对象

                 　　　　　　方法:

　　　　　　　　　　　　getElementById();

　　　　　　　　　　　　getElementsByName();

　　　　　　　　　　　　getElementsByTagName();

　　　　　　　　　　　　Write();//向HTML文档中输入内容

　　　　　　5.javaScript内置对象:

                   　　　　　　Math.ceil()//向上取整

                   　　　　　　Math.floor()//向下取整

                   　　　　　　Math.random()//随机数

   　　　　　　　　　　  Math.round()//四舍五入

                   　　　　　　Date.getDate()//一月中的某一天

                   　　　　　　Date.getDay()//一星期中的某一天

                   　　　　　　Date.getHours()//小时数0~23

   　　　　　　　　　　  Date.getMinutes()//分钟数0~59

                  　　　　　　 Date.getMonth()//月份0~11

                   　　　　　　Date.getFullYear()//年份

三、JavaScript操作DOM对象

             　　1.DOM操作:

　　　　　　　　　　分类:DOM-Core：dom核心

 　　　　　　　　　　       HTML-DOM:元素

    　　　　　　　　　　    CSS-DOM:样式

　　　　　　　　　　A.节点间的关系:父子，兄弟

　　　　　　　　　　B.通过JavaScript层级关系访问:

　　　　　　　　　　　　　　　　　　　　　　parentNode//访问父节点

　　　　　　　　　　　　　　　　　　　　　　childNodes//访问子节点

　　　　　　　　　　　　　　　　　　　　　　firstChild//访问第一个子节点

　　　　　　　　　　　　　　　　　　　　　　lastChild//访问最后一个子节点

　　　　　　　　　　　　　　　　　　　　　　nextSibling;//下一个兄弟

　　　　　　　　　　　　　　　　　　　　　　PreviousSibling;//上一个兄弟

　　　　　　　　　　c.节点信息:nodeName//节点名称

　　　　　　　　　　　　　　　nodeType//节点类型

　　　　　　　　　　　　　　　nodeValue//节点内容

　　　　　　2.操作节点：

　　　　　　　　　　A操作节点的属性:
　　　　　　　　　　　　　　　　　　getAttribute()//获取节点的属性

　　　　　　　　　　　　　　　　　　setAttribute()//设置节点的属性

　　　　　　　　　　B创建和插入节点

　　　　　　　　　　　　　　　　　　Var s = createElement(“标签名”);//创建节点

　　　　　　　　　　　　　　　　　　父节点.appendChild(“子节点”)//在父节点的末尾追加

　　　　　　　　　　　　　　　　　　父节点.insertBefore(“节点A”,”节点B”);//在节点B的前面加上节点A

　　　　　　　　　　　　　　　　　　删除和替换节点:父节点.removeChild(“节点”)//删除节点

   　　　　　　　　　　　　　　　　　父节点.replaceChild(“新节点”,”旧节点”)// 替换节点

　　　　　3.操作节点样式：

　　　　　　　　　　　　节点.style.样式=”值”//设置样式

　　　　　　　　　　　　节点.className=”样式名字”//追加样式

五、jQuery

　　　　　　　　　　　　A.$();//工厂函数 将dom对象转换成jQuery对象

            　　　　·　　　　　　　　　　　　 ,$也可换成jQuery

　　　　　　　　　　　　B.jQuery方法的应用:

　　　　　　　　　　　　　　　　　　　　 addClass(“类名字”);//追加样式,准备好类

　　　　　　　　　　　　　　　　　　　　css(“样式名”,”值”);//设置样式

　　　　　　　　　　　　　　　　可设置多个css({

　　　　　　　　　　　　　　　　　　　　　　　　“样式名1”:”值1”，
　　　　　　　　　　　　　　　　　　　　　　　　“样式名2”:”值2”

　　　　　　　　　　　　　　　　　　　　　　　})

1. 1. 1. 1. “$”的使用:将DOM对象转jQuery对象，工厂函数
         2. 链式操作:$(“”).mouseover(function(){}).css()//在一个方法后再点 一个方法
         3. 隐式迭代:选择器自动遍历
         4. DOM对象
         5. jQuery对象
         6. jQuery对象与DOM对象的相互转换:

　　　　　　　　　　　　　　　　　　J~D:$(“div”).get(0)||$(“div”)[0]

  　　　　　　　　　　　　　　　　　　 D~J:$(“DOM对象”)||jQuery(“DOM对象”)

六、Query选择器

　　　　　　　　　　1.选择器

　　　　　　　　　　　　　　A.什么是jQuery选择器

　　　　　　　　　　　　　　　通过选择器选择元素

　　　　　　　　　　　　　　B.jQuery选择器的优势:更简洁

　　　　　　　　　　　　　　C.jQuery选择器的类型

　　　　　　　　　　　　　　　　　　基本，层次，过滤，属性

            　　　　　　2.jQuery选取元素

　　　　　　　　　　　　　　A.通过CSS选择器选取元素

 　　　　　　　　　　　　　　　　 a.基本选择器

　　　　　　　　　　　　　　　　　　　　　　ID,类,并集,标签,全局

  　　　　　　　　　　　　　　　　b.层次选择器

　　　　　　　　　　　　　　　　　　　　　　子代，后代，相邻兄弟，通用兄弟

 　　　　　　　　　　　　　　　　 c.属性选择器

　　　　　　　　　　　　　　　　　　　　　　$(“标签名[name=’值’]”)

　　　　　　　　　　　　　　　　　　　　　　$(“标签名[name!=’值’]”)

　　　　　　　　　　　　　　　　　　　　　　$(“标签名[name=^’值’]”)//这个属性开头以这个值的

　　　　　　　　　　　　　　　　　　　　　　$(“标签名[name=$’值’]”)//这个属性结尾以这个值的

　　　　　　　　　　　　　　　　　　　　　　$(“标签名[name=*’值’]”)//这个属性含有以这个值的

           　　　　　　　　　　 B.通过条件过滤选取元素

　　　　　　　　　　　　　　　　　　　　a.基本过滤选择器

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:first”)//第一个

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:last”)//最后一个

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:eq(0)”)//选择第0个,从零开始

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:gt(2)”)//选择比2大的

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:lt(2)”)//选择比2小的

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:not(指定的值)”);//class不为指定的值的被选中

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:even”)//选择偶数,从零开始，在页面中为奇数

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“标签:odd”)//选择奇数,从零开始，在页面中为偶数

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“body:header”)//选择页面中所有的标题标签

　　　　　　　　　　　　　　　　　　　　b.可见性过滤

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“:hidden”)//选择不可见的元素

　　　　　　　　　　　　　　　　　　　　　　　　　　$(“:visible”)//选择可见的元素

七、jQuery中的事件与动画

      　　　　　　　　　　1.jQuery中的事件

        　　　　　　　　　　　　　　 A.基础事件

                 　　　　　　　　　　　　　　　　a.鼠标事件

　　　　　　　　　　　　　　　　　　　　　　移入:mouseover//mouseenter

　　　　　　　　　　　　　　　　　　　　　　移出:mouseout//mouseleave

　　　　　　　　　　　　　　　　　　　　　　点击:click

                 　　　　　　　　　　　　　　　　b.键盘事件

　　　　　　　　　　　　　　　　　　　　　　键盘被按下:keyDown

　　　　　　　　　　　　　　　　　　　　　　键盘被释放:keyUp

　　　　　　　　　　　　　　　　　　　　　　可打印的字符:keypress

                 　　　　　　　　　　　　　　　　c.Windows事件

　　　　　　　　　　　　　　　　　　　　　　浏览器窗口被改变时:resize()

　　　　　　　　　　　　　　　　　　　　　　浏览器滚动条滚动时:scorll()

         　　　　　　　　　　　　　　　　　　B.绑定和移除事件

　　　　　　　　　　　　　　　　　　　　　　绑定:bind()

　　　　　　　　　　　　　　　　　　　　　　解绑:unbind()

         　　　　　　　　　　　　　　　　　　C.复合事件

                 　　　　　　　　　　　　　　　　　hover(方法1，方法2);//移入移出的集合

                　　　　　　　　　　　　　　　　　 toggle();//对里面的函数循环执行，不加函数时为显示隐藏效果

　　　　　　　　　　　　　　　　　　　　　　　　注：toggle不支持1.12.4以下版本

                　　　　　　　　　　　　　　　　　 toggleClass();//removeClass和addClass的集合

     　　　　　　　　　2.jQuery中的动画

         　　　　　　　　　　　　　　A.控制元素显示与隐藏:show()显示,hide()隐藏

        　　　　　　　　　　　　　　 B.改变元素的透明度:fadeIn()淡入,fadeout()淡出

         　　　　　　　　　　　　　　C.改变元素高度:slideDown()伸张,slideUp()收缩

         　　　　　　　　　　　　　　D.自定义动画:animate({“执行的动画”:”值”},时间)

八、使用jQuery操作DOM

    　　　　　　　　1.样式操作

                 　　　　　　　　css()//设置样式

                　　　　　　　　 addClass()//追加样式

                 　　　　　　　    removeClass()//删除样式

                　　　　　　　　 toggleClass()//连续点击切换样式

　　　　　　　　2.内容操作

         　　　　　　　　　　$().html()//获取或设置内容，能解析标签

         　　　　　　　　　　$().text()//获取或设置内容，不能解析标签

         　　　　　　　　　　$().val()//获取或设置元素的value值

　　　　　　　　3.节点操作

　　　　　　　　　　(1) 查找节点:$(“标签”);

　　　　　　　　　　(2) 创建节点元素:$(“<li></li>”);

　　　　　　　　　　(3) 插入节点:

　　　　　　　　　　　　　　　　① //父节点对子节点操作

　　　　　　　　　　　　　　　　② 父节点.append()//在父节点的末尾追加子节点

　　　　　　　　　　　　　　　　③ 子节点.appendTo(父节点);//用子节点点出父节点

　　　　　　　　　　　　　　　　④ 父节点.prepend(子节点)//将子节点插入到父节点的开头

　　　　　　　　　　　　　　　　⑤ 子节点.prependTo(父节点)//将子节点插入到父节点的开头

　　　　　　　　　　　　　　　　⑥ //兄弟节点

　　　　　　　　　　　　　　　　⑦ $(大哥).after(小弟);//在前面大哥追加小弟

　　　　　　　　　　　　　　　　⑧ $(小弟).insertAfter(大哥);//将小弟追加到前面大哥后面

　　　　　　　　　　　　　　　　⑨ $(小弟).before(大哥);//将大哥插入到小弟前面

　　　　　　　　　　　　　　　　⑩ $(大哥).insertBefore(小弟);//在小弟前面插入大哥

　　　　　　　　　　(4) 删除节点

　　　　　　　　　　　　　　① remove()//删除整个节点

　　　　　　　　　　　　　　② empty()//删除内容，保留事件等

　　　　　　　　　　(5) 替换节点

　　　　　　　　　　　　　　① $(“旧节点”).replaceWith(“新节点”);

　　　　　　　　　　　　　　② $创建的节点.replaceAll(“旧节点”);

　　　　　　　　　　(6) 复制节点

　　　　　　　　　　　　　　① $(“标签”).clone();//括号里可以为true:复制事件,flase:不复制,默 认为不复制

    　　　　 4.属性操作

             　　　　　　(1).attr()//获取和设置元素属性

            　　　　　　 (2).removeAttr()//删除元素属性

    　　　　5.节点遍历

            　　　　　　(1).遍历子元素：children()//所有子元素，括号里加标签找指定的元素

           　　　　　　 (2).遍历同辈元素:prev(),next(),siblings()

            　　　　　　(3).遍历前辈元素:parent(),parents()

           　　　　　　 (4).其他遍历方法:each(),end(),find(),eq(),first()