JavaScript:（JavaScript = ECMAScript + JavaScript 独有的东西）
-
一：概念(客户端脚本语言)
- 运行在客户端浏览器中
- 脚本语言：不需要编译 -
二：作用
- 可以用来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态效果，增强用户体验
-
三：ECMAScript
- 基本语法：
- 1.与HTML结合的方式
- 1.内部JS:定义
- 1.与HTML结合的方式
- 基本语法：
1. 创建：
1.
function 方法名称(形式参数列表){
方法体
}
2.
var 方法名 = function(形式参数列表){
方法体
}
2. 方法：
3. 属性：
length:代表形参的个数
4. 特点：
1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组）arguments, 封装所有的实际参数
5. 调用：
方法名称(实际参数列表);
2.Array:数组对象
- 创建：
- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
- 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。 - 属性
length:数组的长度 - 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
3.RegExp：正则表达式对象
-
正则表达式：定义字符串的组成规则。
单个字符:[]
如： [a] [ab] [a-zA-Z0-9_] -
特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]- 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次 - 开始结束符号
* ^:开始
* $:结束
- 量词符号：
-
正则对象：
-
创建
-
var reg = new RegExp(“正则表达式”);
- var reg = /正则表达式/;
-
方法
- test(参数):验证指定的字符串是否符合正则定义的规范
-
-
JS应用场景：
添加交互事件
操作DOM元素
操作样式
验证表单
异步请求Ajax
正则匹配
JS定时器
setTimeout:设置一个定时器，在定时器到期后执行一次函数或代码段
var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
timeoutId: 定时器ID
func: 延迟后执行的函数
code: 延迟后执行的代码字符串，不推荐使用原理类似eval()
delay: 延迟的时间（单位：毫秒），默认值为0
param1,param2: 向延迟函数传递而外的参数，IE9以上支持
setInterval:以固定的时间间隔重复调用一个函数或者代码段
var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
intervalId: 重复操作的ID
func: 延迟调用的函数
code: 代码段
delay: 延迟时间，没有默认
JS事件
onchange：用户改变域的内容
onclick：鼠标点击某个对象
onblur：元素失去焦点
onmouseover：鼠标被移动
onmouseout：鼠标从某元素移开
onload：某个页面或图像被完成加载
onkeydown：某个键盘的键被按下
BOM
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
3. Window：窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
DOM
* 概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
* Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
事件监听
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
JQuery
1. 概念： 一个JavaScript框架。简化JS开发
JQuery是一个JavaScript类库，对原生的JS进行了全方面的封装
JAQuery是一个轻量级的“写的少，做的多”的JavaScript库
本质上就是别人写好的一段通用的JS代码
2.功能：
HTML元素选取和操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有p元素
$("p.test").hide() - 隐藏所有 class="test" 的元素
$("#test").hide() - 隐藏所有 id="test" 的元素
3.选择器
语法：$(selector)
selector就是选择器表达式，语法基本和CSS选择器一致
示例：
$("#container")
$(".container")
$("img")
$("input[type='password']")
$("#container image")
1. 基本操作学习：
1. 事件绑定
//1.获取b1按钮
$("#b1").click(function(){
alert("abc");
});
2. 入口函数
$(function () {
});
window.onload 和 $(function) 区别
* window.onload 只能定义一次,如果定义多次，后边的 会将前边的覆盖掉
* $(function)可以定义多次的。
3. 样式控制：css方法
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
2. 分类
1. 基本选择器
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的 元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属 性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选 中的所有元素
2. 层级选择器
1. 后代选择器
* 语法： $("A B ") 选择A元素内部的所有B元素
2. 子选择器
* 语法： $("A > B") 选择A元素内部的所有B子元素
3. 属性选择器
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法： $("A[属性名='值']") 包含指定属性等于指定 值的选择器
3. 复合属性选择器
* 语法： $("A[属性名='值'][]...") 包含多个属性条 件的选择器
4.HTML操作
DOM操作：
属性操作：
读取操作：$(selector).attr(attrName);
示例：
var href = $("a").attr("href");
var id = $("div").attr("id");
修改属性：
$(selector).attr(attrName, "属性值");
示例：
var href = $("a").attr("href", "http://www.jd.com");
属性名不仅支持标准属性，还支持自定义属性
内容操作：
样式操作：
5.事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
6.效果
显示隐藏
淡入淡出
滑动
动画
7.遍历
遍历JQuery对象
遍历数组
EasyUI
1.简介
是一套前端框架。它封装了JQuery、Vue等前端JS框架，还提供了一套完善的UI组件
2.应用场景
主要用来做一些公司内部使用的管理系统，因为它提供了丰富的组件，可以拿来直接使用，降低了后台系统的开发时间。但是它不是很美观，不建议用来做和客户交互的系统界面。
3.使用步骤：
1.下载EasyUI组件
2.引入相关的JS和CSS：
<head>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="js/locale/easyui- lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
</head>
3.需要一个HTML标签
比如说：使用datagrid组件需要添加：
<table id="xxx"></table>
或者创建标签时一并指定样式：
<table id="xxx" class="easyui-datagrid"></table>
4.给标签添加相应的EasyUI样式（选做）
5.调用EasyUI相关JS方法来初始化、设置组件参数（选做）
比如说：
使用datagrid组件需要添加：
<table id="xxx"></table>
或者创建标签时一并指定样式：
<table id="xxx" class="easyui-datagrid"></table>
4.主要组件（详情见官方文档）
窗口相关
表格相关
树形组件
表单相关
表单验证
表单数据回显
表单常用组件
文本框
日期框
密码框
LayUI
1.简介
与EasyUI类似，都封装了JQuery和一套完整的组件样式。它是国产的，使用起来易上手。
2.布局
类似Bootstrap的栅格布局，支持响应式
3.使用步骤
1.引入LayUI相关的JS、CSS
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
2.添加样式、或者引入JS模块
LayUI中的组件分为两种：
1.一种不要引入单独的模块，直接给原生的DOM元素添加class样式即可，比如按钮、小图标（印章）
2. 另一种需要引入LayUI相关的模块，比如弹出层layer
4.组件分类
需要引入LayUI相关的模块才能使用的
只添加class样式就可以使用的
5.后台开发常用组件（详情见官方文档）
表格组件
Tab标签页
面板
弹出层
树形组件
轮播图
导航菜单
表单相关组件
面包屑导航条
扫一扫
1835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
