JavaScript 基础
JavaScript 语言简介
什么是 JavaScript 语言
- JavaScript 是为网页而生的语言，初衷是给网页提供可编程能力，从而完成诸如用户输入数据验证等功能。
- JavaScript 是一种解释型语言，程序由一个叫做解释器的东西逐句读取执行。
- JavaScript 遵循的语言标准是 ECMAScript，简称 ES，目前的主流标准版本是 ES6 (ES2015)。
- JavaScript 解释器一开始主要存在于浏览器中，用于执行网页中的程序。现在 JavaScript 解释器也存在于操作系统中，成为一个流行的编程平台，用于编写各种应用程序，包括 Web 应用服务器。
- JavaScript 目前已经成为最流行的编程语言之一（在 github 上使用 JavaScript 的项目仅次于 Python 和 Java，位列第三）。
第一章 JavaScript基本语法
1.1、输出与输入：
输出：
document.write("你好")：网页输出内容
alert("你好，弹出对话框")：网页弹出对话框
输入：
var ret=prompt("输入提示","默认值");//弹出框输入
表单输入
1.2、变量与数据类型
1.2.1、数据类型：
- number数字
- string字符串
- boolean布尔类型
- null空值
- undefined未定义
1.2.2、决定变量两个维度：
- 类型及大小
1.2.3、定义变量
- var age=true;
1.2.4、什么是弱类型：变量可以存放任意类型的值
- 弱类型变量何时知道变量类型：赋值及使用
1.2.5、判断数据的函数
- var type=typeof(age)
1.3、运算符与表达式
1.3.1、算术运算符
- +、 -、 * 、/(有余数)、%（模运算）
1.3.2、赋值运算符
- =
1.3.3、比较运算符
-
>、 >=、<、<= 、!=、==
1.3.4、逻辑运算符
- ||或、&&与、!非
1.4、控制语句
1.4.1、顺序结构
- 从上往下 从左往右
1.4.2、选择结构
- if
- switch
if( true){ }else if(true ){ } else{ }
switch(a){
case 1:
执行语句1
break;
case 2:
执行语句2
break;
default:
执行默认语句
}
1.4.3、循环结构
- for
- while
- do-while
注：
1. js可以放到html文档任何地方
2. 在html文档中可以放多个js代码片段
3. 变量使用前必须要先声明，js代码按照从上往下从左往右顺序执行
4. js外部文件推荐放到body后面
第二章 JavaScript函数和事件
2.1、系统函数
- parseInt(str)：将字符串转换为整数
- parseFloat(str)：将字符串转换为浮点数
- isNaN(str)：判断str是否不是数字 is not a number
- eval(str)：运行以字符串形式表示的JavaScript代码串，并返回执行代码串后的结果
2.2、自定义函数
//1定义函数
function 函数名 (形式参数1,形式参数2){
函数体
return 值 //可选
}
//2 调用函数
函数名(实际参数1,实际参数2)
2.3、常用事件
- onclick：单击事件
- onload：页面加载事件
- onunload：网页关闭或刷新时触发的事件
- onblur：失去焦点事件
- onmouseover：鼠标移上去事件
- onmouseout：鼠标移出事件
- onmousemove：鼠标移动事件
- onkeypress：键按下事件
- onchange:下拉列表框的值发生变化的时候触发的事件
第三章 BOM模型（浏览器对象模型）brower object model
3.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 执行一次函数
3.2、location定位（地址）对象:
- location.href="baidu.com"：跳转到指定网址
- location.reload()：刷新
3.3、history历史对象
- history.back()：后退
- history.forward（）：前进
- history.go(-1)：跳转到指定页
3.4、document文档对象
第四章 DOM模型：document object model
4.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选择器获取所有
4.2、操作元素
- 获取/设置元素（标签）属性值
4.2.1、单个元素：
获取属性值：
var oldsrc=imgobj.src;
设置属性值：
imgobj.src="images/a.jpg"
4.2.2、元素列表集合
获取/设置元素集合中的第n个元素的属性
获取属性值：
var oldsrc=imgList[n].src;
设置属性值：
imgList[n].src="images/a.jpg"
通过循环遍历元素集合：
for(var i=0;i<imgList.length;i++) {
imgList[i].src="images/pic"+i+".jpg"
}
4.3、元素常用属性
- 文本属性
- innerHTML：获取/设置元素的html文本
- innerText：获取/设置元素的纯文本
- 事件属性
- 以on开头的属性，如onclick、onchange、onmouseover、onmouseout、onmousemove、onkeyup按键弹松开的时候触发
- HTML标签属性
- html标签有什么属性，都可以通过js获取该标签，然后通过属性名获取/设置该属性的值
- eg:obj.width="200"
- CSS样式属性
- 获取：obj.style.css样式属性名
- 设置：obj.style.css样式属性名="css属性值"
4.4、元素节点增加/删出：
4.4.1、增加子标签
- 动态创建新标签：
var newtag=document.createElement("p") // 生孩子
- 添加新标签到父节点：
parentobj.appendChild(newtag) // 上户口
4.4.2、删除子标签
imgobj.removeChild()
注：html标签有多少属性都可以通过属性获取/设置该属性的值，对于css样式中多个单词之间用“-”分割的形式，将“-”去掉，再把“-”后面单词的首个字母转换为大写
如：
// borderBottom在css中写法为border-bottom
imgobj.borderBottom="1px"
第五章 JavaScript对象
5.1、内部对象
- Object对象，万物之祖，所有对象的父对象
- Date对象，获取浏览器时间
- getTime()获取时间包括年月日 小时 分钟 秒
- getDate()获取某个月的某一天
- getDay() 星期几
- getHours()获取小时
- getMinute()获取分钟
- getSecond()获取秒
- Image对象，图片对象，缓存，图片预加载
var imgobj=new Image()
imgobj.src="图片路径" //预加载
- Math对象：数学对象
- Math.abs(num)：返回num的绝对值
- Math.random()：返回[0-1)之间的伪随机数
- Math.round(num)：四舍五入取整
- Math.ceil(num)：向上取整 天花板
- Math.floor(num)：向下取整 地板
- Array数组对象
1、创建一位数组：
- 初始化数组：var arr=[1,2,"3"]
- 创建数组对象 var arr=new Array(10);
2、创建二维数组： - 初始化数组：var arr=[[11,12],[21,22]]
创建数组对象：
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]
- 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)：返回字符串中指定索引处的字符。
5.2、创建自定义对象
- var obj=new Object();
- function Person(){}//定义个类
- var obj=new Person();//创建类的对象实例
5.3、对象常用语句
循环对象的所有属性：
- for(变量 in 对象){//执行语句}
第六章 初识jQuery（选择器）
6.1、简单使用
$(function(){ //页面加载事件，所有jQuery代码放在此处 })
6.2、事件使用
$("css选择器").on("click|mouseover|mouseout",function(){ alert("单击事件") })
6.3、css选择器
- 基本：id、类、标签、并集、交集
- 层次选择器
- 过滤选择器
- 属性选择器
第七章 jQuery操作DOM
7.1、jQuery操作DOM步骤
- 获取指向某元素的jQuery对象。
- 使用jQuery对象的方法来操作该元素。
7.2、jQuery中的DOM操作种类
- 元素样式操作
- css(name,value)：直接设置元素单个样式值。name为样式名称，value为样式值。
- css({name1:value1,name2:value2,name3:value3})：直接设置元素多个样式值
- addClass(class)：为元素增加样式类
- removeClass([class])：删除元素的指定样式类
- toggleClass(class):切换元素的样式类。当元素含有类class时，则删除该样式类，反之，则增加该样式类。
- 元素内容操作：
- 获取或设置元素的HTML内容
- html()：无参数，用于获取第一个匹配的html内容或文本内容。
- html(html内容)：用于设置所有匹配元素的html内容或文本内容。
- 获取或设置元素的text文本内容：
- text()：用于获取所有匹配元素的文本内容。
- text(text内容)：用于设置所有匹配元素的文本内容。
- 元素值/属性操作：
- 元素值操作：
- val()：获取元素的值
- val(值)：设置元素的值。
- 元素属性操作：
- attr(name)：获取元素的指定属性名name的属性值。
- attr(name,value)：设置元素的单个属性值。参数name表示属性名称，value表示属性值。
- attr({name0:value0,name1:value1})：设置元素的多个属性值。
- removeAttr(name):删除元素的属性值。参数name为元素属性的名称。
- 元素节点操作：
- 创建节点元素：
var $node=$(html)
var $node= $("<div>这是节点新的</div>")
- 插入元素节点：
- 元素内部插入子节点：
- 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事件
9.1、页面加载事件
- 一个页面只有一个页面加载事件
- $(function() { //要执行的代码 })
- $(document).ready(function() { //要执行的代码 })
- jQuery(document).ready(function() { //要执行的代码 })
- jQuery(function() { //要执行的代码 })
9.2、绑定事件:
- mouseover(fn):鼠标移到元素上时执行fn函数
- mouseout(fn):鼠标移出元素时执行fn函数
- keydown(fn):按下键时执行fn函数
- keyup(fn):释放键时执行fn函数
- keypress(fn):按下可打印的字符时执行fn函数
- focus(fn):获得焦点时执行fn函数
- blur(fn):失去焦点时执行fn函数
- on(type,fn):为每个选择元素的事件绑定处理函数，
注：type:事件类型；fn:要执行的函数
9.3、切换事件：
- hover(over,out):使元素在鼠标移入与移除事件中进行切换
注：over：鼠标移入元素时触发的函数；out：鼠标移出元素时触发的函数。 - toggle(fn1,fn2,fn3[,...]):每次单击元素后依次调用函数。
9.4、其他事件
- one(type,fn):为所选择的元素绑定一个仅触发一次的处理函数。
- trigger(type):在所选择的元素上触发指定类型的事件。type为触发事件的类型。
第十章 jQuery的动画与特效
10.1、显示与隐藏
- 改变display、宽高 、透明
show([time,fn]) // 显示
hide([time,fn]) // 隐藏
toggle([time,fn]) // 显示与隐藏切换
10.2、淡入与淡出：改变透明度
fadein([time,fn]) // 淡入
fadeout([time,fn]) // 淡出
fadeoToggle([time,fn]) // 淡入与淡出切换
10.3、滑入与滑出：改变高度
slideDown([time,fn]) // 滑入
slideUp([time,fn]) // 滑出
slideToggle([time,fn]) // 滑入与滑出切换
10.4、自定义动画
animate(属性[,time,fn]);
注：time：动画执行的时间；fn：动画完成后要执行的函数；[]括号里面的参数为可选
10.5、动画停止
- stop():结束当前的动画
第十一章 jQuery插件
- 插件：（俗称补丁，或外挂）即扩展，对某个应用程序功能的扩展。
11.1、常用插件
- 自动补全（自动提示插件）jquery.autocomplete.js
使用方法：
$("需要提示的文本输入框").autocomplete([提示数据数组])
- 放大镜插件：放大图片：jquery.jqzoom.js
使用方法：
$("图片的父容器").jqzomm({参数})
- 灯箱插件P328：轮播图片插件 ，notesForLightBox.js
使用方法：
$("图片容器").lightBox({参数})
- jQuery UI 用户界面：
- 验证插件：validate.js
使用方法：
$("验证表单form").validate({
rules:{},
messages:{}})
