JavaScript基础

第一章 JavaScript基本语法
1、输出与输入：
输出：document.write(“你好”)：网页输出内容
alert(“你好，弹出对话框”)：网页弹出对话框
输入：
（1）var ret=prompt(“输入提示”,“默认值”);//弹出框输入
（2）表单输入
2、变量与数据类型
2.1、数据类型：
number数字、string字符串、boolean布尔类型、null空值、undefined未定义
2.2、决定变量两个维度：
类型及大小
2.3、定义变量：var age;
2.4、什么是弱类型：变量可以存放任意类型的值
弱类型变量何时知道变量类型：赋值及使用
2.5、判断数据的函数：var type=typeof(val)
3、运算符与表达式
3.1、算术运算符 +、 -、 * 、/(有余数)、%（模运算）
3.2、赋值运算符 =
3.3、比较运算符 >、 >=、<、<= 、!=、==
3.4、逻辑运算符 ||、&&、!
4、控制语句
4.1、顺序结构 从上往下 从左往右
4.2、选择结构 if、switch
4.3、循环结构 for、while、do-while
注：
1）js可以放到html文档任何地方
2）在html文档中可以放多个js代码片段
3）变量使用前必须要先声明，js代码按照从上往下从左往右顺序执行
4）js外部文件推荐放到body后面

第二章 JavaScript函数和事件
1、系统函数
parseInt(str)：将字符串转换为整数
parseFloat(str)：将字符串转换为浮点数
isNaN(str)：判断str是否不是数字
eval(str)：运行以字符串形式表示的JavaScript代码串，并返回执行代码串后的结果
2、常用事件
onclick：单击事件
onload：页面加载事件
onunload：网页关闭或刷新时触发的事件
onblur：失去焦点事件
onmouseover：鼠标移上去事件
onmouseout：鼠标移出事件

第三章 DOM编程
1、BOM模型（浏览器对象模型）
1）window窗口对象
window.alert(提示消息)：弹出消息框
window.prompt(标题,默认消息)：提示用户输入的对话框
window.confirm()：确认框
window.close():关闭浏览器窗口
window.open(url)：打开新浏览器窗口，加载指定的url
window.setTimeout(fn,time)：在设定的毫秒数time后执行指定的函数fn，执行一次
window.setInterval(fn,time)：定时毫秒数time后执行指定的函数fn，循环执行
window.clearInterval(timer)：清除定时器timer
2）location定位对象:
location.href=“baidu.com”：跳转到指定网址
location.reload()：刷新
3）history历史对象
history.back()：后退
history.forward（）：前进
history.go(-5)：跳转到指定页
4）document文档对象
2、DOM模型：
1）获取元素（标签）:
a.var imgobj = document.getElementById(“img1”);//通过id获取
b.var imgList = document.getElementByTagName(“img”);//通过标签名称获取
c.var imgList = document.getElementByName(“img”);//通过name属性名获取
d.var imgList = document.getElementsByClassName(“img”);//通过类名称获取
e.var imgobj = document.querySelector(“img”);//通过css选择器获取
f.var imgList = document.querySelectorAll(“img”);//通过css选择器获取
2）操作元素：
a、获取/设置元素（标签）属性值
（一）如果是单个元素：
获取属性值：var oldsrc=imgobj.src;
设置属性值：imgobj.src=“images/pic1.jpg”
（二）如果是元素列表集合：
（1）获取/设置元素集合中的第n个元素的属性
获取属性值：var oldsrc=imgList[n].src;
设置属性值：imgList[n].src=“images/pic1.jpg”
（2）通过循环遍历元素集合：
for(var i=0;i<imgList.length;i++){
imgList[i].src=“images/pic”+i+".jpg"
}
b、元素节点增加/删出：
（一）增加子标签
第一步、动态创建新标签：var newtag=document.createElement(“p”)
第二步、添加新标签到父节点：imgobj.appendChild(newtag)
（二）删除子标签：imgobj.removeChild()

        注：html标签有多少属性都可以通过属性获取/设置该属性的值，对于css样式中多个单词之间用“-”分割的形式，将“-”去掉，再把“-”后面单词的首个字母转换为大写,如：
              //borderBottom在css中写法为border-bottom
              imgobj.borderBottom="1px"  

第四章 JavaScript对象
1、内部对象
1）Object对象，万物之祖，所有对象的父对象
2）Date对象，获取浏览器时间，
getTime()获取时间包括年月日 小时 分钟 秒
getDate()获取某个月的某一天
getHours()获取小时
getMinute()获取分钟
getSecond()获取秒
3）Image对象，图片对象，图片预加载
var imgobj=new Image()
imgobj.src=“图片路径”
4）Math对象：数学对象
Math.abs(num)：返回num的绝对值
Math.random()：返回0-1之间的伪随机数
Math.round(num)：四舍五入取整
4)Array数组对象
（一）创建一位数组：
a、初始化数组：var arr=[1,2,“3”]
b、创建数组对象 var arr=new Array(10);
（二）创建二维数组：
a、初始化数组：var arr=[[11,12],[21,22]]
b、创建数组对象：
var box=new Array(10)//大的集装箱，装10个小箱子
box[0]=new Array(15);//每个小箱子装15瓶
赋值：
box[0][0]=“第1箱1瓶”
box[0][1]=“第1箱2瓶”
取值：
var one=box[0][0]
5）String字符串对象：
str.trim()：去除空格
str.indexOf(str1)：返回str1在str中出现的位置，用于判断str是否包含str1
str.substr(index,len)：在字符串str中从指定索引位置index截取指定长度len的子字符串
str.toLowerCase()：把字符串转换为小写
str.toUpperCase()：把字符串转换为大写
str.charAt(index)：返回字符串中指定索引处的字符。
2、创建自定义对象
1）var obj=new Object();
2）function Person(){}//定义个类
var obj=new Person();//创建类的对象实例
3、对象常用语句
1）循环对象的所有属性：for(变量 in 对象){//执行语句}

第六章 正则表达式
1、创建正则表达式RegExp对象：
方式一：var reg=new RegExp(“表达式”,“ig”);
方式二：var reg=/表达式/ig ；
2、正则表达式RegExp对象的方法：
a、reg.test(string)：检查字符串中是否存在指定表达式的匹配
b、reg.exec(string)：用指定的表达式模式搜索字符串，返回所有结果的数组。
2、String字符串对象关于正则表达式的3个方法:
str.search(reg)//在字符串中寻找匹配的表达式，返回找到的第一个的位置 不贪心
str.match(reg)//定的表达式模式搜索字符串，返回所有结果的数组 贪心
str.replace(reg,replacecontent);//查找替换

第八章 jQuery操作DOM
1、jQuery操作DOM步骤
1）第一步，获取指向某元素的jQuery对象。
2）第二步，使用jQuery对象的方法来操作该元素。
2、jQuery中的DOM操作种类：
1）元素样式操作：
a、css(name,value)：直接设置元素单个样式值。name为样式名称，value为样式值。
css({name1:value1,name2:value2,name3:value3})：直接设置元素多个样式值
b、addClass(class)：为元素增加样式类
c、removeClass([class])：删除元素的指定样式类
d、toggleClass(class):切换元素的样式类。当元素含有类class时，则删除该样式类，反之，则增加该样式类。
2）元素内容操作：
a、获取或设置元素的HTML内容：
（一）html()：无参数，用于获取第一个匹配的html内容或文本内容。
（二）html(html内容)：用于设置所有匹配元素的html内容或文本内容。
b、获取或设置元素的text文本内容：
（一）text()：用于获取所有匹配元素的文本内容。
（二）text(text内容)：用于设置所有匹配元素的文本内容。
（3）元素值/属性操作：
a、元素值操作：
（一）val()：获取元素的值
（二）val(值)：设置元素的值。
b、元素属性操作：
（一）attr(name)：获取元素的指定属性名name的属性值。
（二）attr(name,value)：设置元素的单个属性值。参数name表示属性名称，value表示属性值。
（三）attr({name0:value0,name1:value1})：设置元素的多个属性值。
（四）removeAttr(name):删除元素的属性值。参数name为元素属性的名称。
（4）元素节点操作：
a、创建节点元素：var $node=$(html)。
b、插入元素节点：
（一）元素内部插入子节点：
append(content)：$(A).append(B)，表示将B追加到A中。appendTo(content)：$(A).appendTo(B)，表示把A追加到B中。
prepend(content)：$(A).appendTo(B)，表示将B前置插入到A中。prependTo(content)：$(A).prependTo(B)，表示把A前置插入到B中。
（二）元素外部插入同辈节点：
after(content)：$(A).after(B)，表示将B插入到A之后。insertAfter(content)：$(A).insertAfter(B)，表示将A插入到B之后。
before(content)：$(A).before(B)，表示将B插入到A之前。insertBefore(content)：$(A).insertBefore(B)，表示将A插入到B之前。
（三）替换节点：replaceWith(content)：参数content为要替换的内容。
（四）复制节点：clone(),复制选择的html元素。
（五）删除节点：remove()
（六）遍历元素：each(function(i,e){//执行的代码})，i是遍历元素的序号，e是遍历的当前元素。

第九章 jQuery事件
1、页面加载事件：一个页面只有一个页面加载事件
1）写法一：$(function()//要执行的代码)2）写法二：$(document).ready(function() { //要执行的代码 })
3）写法三：jQuery(document).ready(function() { //要执行的代码 })
4）写法四：jQuery(function() { //要执行的代码 })
2、绑定事件:
1）mouseover(fn):鼠标移到元素上时执行fn函数
2）mouseout(fn):鼠标移出元素时执行fn函数
3）keydown(fn):按下键时执行fn函数
4）keyup(fn):释放键时执行fn函数
5）keypress(fn):按下可打印的字符时执行fn函数
6）focus(fn):获得焦点时执行fn函数
7）blur(fn):失去焦点时执行fn函数
8）on(type,fn):为每个选择元素的事件绑定处理函数，
注：type:事件类型；fn:要执行的函数
3、切换事件：
1）hover(over,out):使元素在鼠标移入与移除事件中进行切换
注：over：鼠标移入元素时触发的函数；out：鼠标移出元素时触发的函数。
2）toggle(fn1,fn2,fn3[,…]):每次单击元素后依次调用函数。
4、其他事件
1）one(type,fn):为所选择的元素绑定一个仅触发一次的处理函数。
2）trigger(type):在所选择的元素上触发指定类型的事件。type为触发事件的类型。

第十章 jQuery的动画与特效
1、显示与隐藏：改变display或宽高
show([time,fn])：显示
hide([time,fn])：隐藏
toggle([time,fn]):显示与隐藏切换
2、淡入与淡出：改变透明度
fadein([time,fn]):淡入
fadeout([time,fn])：淡出
fadeoToggle([time,fn])：淡入与淡出切换
3、滑入与滑出：改变高度
slideDown([time,fn])：滑入
slideUp([time,fn])：滑出
slideToggle([time,fn])：滑入与滑出切换
4、自定义动画：animate(属性[,time,fn]);
注：time：动画执行的时间；fn：动画完成后要执行的函数；[]括号里面的参数为可选
5、动画停止：stop():结束当前的动画

第十二章 jQuery插件
1、插件：（俗称补丁，或外挂）即扩展，对某个应用程序功能的扩展。
2、常用插件：
1）自动补全（自动提示插件）jquery.autocomplete.js
使用方法：$("需要提示的文本输入框").autocomplete([提示数据数组])2）放大镜插件：放大图片：jquery.jqzoom.js使用方法：$(“图片的父容器”).jqzomm({参数})
3）灯箱插件P328：轮播图片插件 ，notesForLightBox.js
使用方法：$("图片容器").lightBox(参数)4）jQueryUI用户界面：5）验证插件：validate.js使用方法：$(“验证表单form”).validate({
rules:{},
messages:{}})