本文详细介绍了JavaScript的基本语法，包括输出与输入、变量与数据类型、运算符、控制语句。接着讨论了函数和事件，如系统函数、自定义函数以及各种事件监听。深入讲解了浏览器对象模型(BOM)和文档对象模型(DOM)，涉及窗口对象、定位对象、历史对象和文档对象的操作。最后，介绍了jQuery的核心概念，如选择器、DOM操作、事件处理以及动画和特效，还提到了jQuery插件的使用。
第一章 JavaScript基本语法
1、输出与输入：
输出：document.write("你好")：网页输出内容
alert("你好，弹出对话框")：网页弹出对话框
输入：
（1）var ret=prompt("输入提示","默认值");//弹出框输入
（2）表单输入
2、变量与数据类型
2.1、数据类型：
number数字、string字符串、boolean布尔类型、null空值、undefined未定义
2.2、决定变量两个维度：
类型及大小
2.3、定义变量：var age=true;
2.4、什么是弱类型：变量可以存放任意类型的值
弱类型变量何时知道变量类型：赋值及使用
2.5、判断数据的函数：var type=typeof(age)
3、运算符与表达式
3.1、算术运算符 +、 -、 * 、/(有余数)、%（模运算）
3.2、赋值运算符 =
3.3、比较运算符 >、 >=、<、<= 、!=、==
3.4、逻辑运算符 ||或、&&与、!非
4、控制语句
4.1、顺序结构 从上往下 从左往右
4.2、选择结构 if、switch
if( true){ }else if(true ){ } else{ }
switch(a){
case 1:
执行语句1
break;
case 2:
执行语句2
break;
default:
执行默认语句
}
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是否不是数字 is not a number
eval(str)：运行以字符串形式表示的JavaScript代码串，并返回执行代码串后的结果
2、自定义函数
//1定义函数
function 函数名 (形式参数1,形式参数2){
函数体
return 值 //可选
}
//2 调用函数
函数名(实际参数1,实际参数2)
3、常用事件
onclick：单击事件
onload：页面加载事件
onunload：网页关闭或刷新时触发的事件
onblur：失去焦点事件
onmouseover：鼠标移上去事件
onmouseout：鼠标移出事件
onmousemove：鼠标移动事件
onkeypress：键按下事件
onchange:下拉列表框的值发生变化的时候触发的事件
第三章 BOM模型（浏览器对象模型）brower object model
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
window.requestAnimationFrame(fn); 按帧执行函数fn 执行一次函数
2）location定位（地址）对象:
location.href="baidu.com"：跳转到指定网址
location.reload()：刷新
3）history历史对象
history.back()：后退
history.forward（）：前进
history.go(-1)：跳转到指定页
4）document文档对象
第四章 DOM模型：document object model
1）获取元素（标签）:
a.var imgobj = document.getElementById("img");//通过id获取
b.var imgList = document.getElementsByTagName("img");//通过标签名称获取
c.var imgList = document.getElementsByName("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"
}
（三）元素常用属性
A、文本属性
innerHTML：获取/设置元素的html文本
innerText：获取/设置元素的纯文本
B、事件属性：以on开头的属性，如onclick、onchange、onmouseover、onmouseout、onmousemove、onkeyup按键弹松开的时候触发
C、HTML标签属性： html标签有什么属性，都可以通过js获取该标签，然后通过属性名获取/设置该属性的值
eg:obj.width="200"
D、css样式属性
获取：obj.style.css样式属性名
设置：obj.style.css样式属性名="css属性值"
b、元素节点增加/删出：
（一）增加子标签
第一步、动态创建新标签：var newtag=document.createElement("p") 生孩子
第二步、添加新标签到父节点：parentobj.appendChild(newtag) 上户口
（二）删除子标签：imgobj.removeChild()
注：html标签有多少属性都可以通过属性获取/设置该属性的值，对于css样式中多个单词之间用“-”分割的形式，将“-”去掉，再把“-”后面单词的首个字母转换为大写,如：
//borderBottom在css中写法为border-bottom
imgobj.borderBottom="1px"
第五章 JavaScript对象
1、内部对象
1）Object对象，万物之祖，所有对象的父对象
2）Date对象，获取浏览器时间，
getTime()获取时间包括年月日 小时 分钟 秒
getDate()获取某个月的某一天
getDay() 星期几
getHours()获取小时
getMinute()获取分钟
getSecond()获取秒
3）Image对象，图片对象，缓存，图片预加载
var imgobj=new Image()
imgobj.src="图片路径" //预加载
4）Math对象：数学对象
Math.abs(num)：返回num的绝对值
Math.random()：返回[0-1)之间的伪随机数
Math.round(num)：四舍五入取整
Math.ceil(num)：向上取整 天花板
Math.floor(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[1]=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.substring(startindex,endindex)：在字符串str中从指定索引位置index截取到结束下标endindex
str.toLowerCase()：把字符串转换为小写
str.toUpperCase()：把字符串转换为大写
str.charAt(index)：返回字符串中指定索引处的字符。
2、创建自定义对象
1）var obj=new Object();
2）function Person(){}//定义个类
var obj=new Person();//创建类的对象实例
3、对象常用语句
1）循环对象的所有属性：for(变量 in 对象){//执行语句}
第六章 初识jQuery（选择器）
1、简单使用
$(function(){ //页面加载事件，所有jQuery代码放在此处 })
2、事件使用
$("css选择器").on("click|mouseover|mouseout",function(){ alert("单击事件") })
3、css选择器
a、基本：id、类、标签、并集、交集
b、层次选择器
c、过滤选择器
d、属性选择器
第七章 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)。 var $node= $("<div>这是节点新的</div>")
b、插入元素节点：
（一）元素内部插入子节点：
append(content)：$(A).append(B)，表示将B追加到A中。
appendTo(content)：$(A).appendTo(B)，表示把A追加到B中。
prepend(content)：$(A).prepend(B)，表示在A的前面插入B。
prependTo(content)：$(A).prependTo(B)，表示把A前置插入到B中。
（二）元素外部插入同辈节点：
after(content)：$(A).after(B)，表示在A的后面插入B。
insertAfter(content)：$(A).insertAfter(B)，表示将A插入到B之后。
before(content)：$(A).before(B)，表示在A的前面插入B。
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）jQuery UI 用户界面：
5）验证插件：validate.js
使用方法：
$("验证表单form").validate({
rules:{},
messages:{}})
扫一扫
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
