JavaScript
javascript概述
- JavaScript是一门脚本语言
- 不需要编译,直接就可以被浏览器解析执行
- 由ECMAScript、BOM、DOM组成
ECMAScript之数据类型
- 原始数据类型:
- Number
- 整数、小数、NaN(not a number)
- string
- 字符串(“abc”、‘abc’)
- boolean
- true、false
- null
- 空对象
- undefined
- 定义一个变量,但是没有赋初值
- 引用数据类型:
- js对象
ECMAScript运算
- 一元运算符:++、–、+
- 算数运算符:+、-、/、*
- 赋值运算符:=、+=、-=
- 比较运算符:>、<、>=、<=、==
- 逻辑运算符:&&、||、!
- 三元运算符
ECMAScript基本对象
Function对象
var 方法名 = new Function("形式参数列表","方法体");
- 不需要返回值类型
- 形参不需要参数类型
- 如果方法定义了形参,调用时,可以不传递实际参数
Array对象
var arr1 = new Array("a","b","c"); var arr2 = ["a","b","c"];
- join
- 用于把数组中的所有元素放入一个字符串。
- pop
- 用于删除并返回数组的最后一个元素。
- push
- 可向数组的末尾添加一个或多个元素,并返回新的长度。
Date对象
- toLocaleString
- 获取本地的当前时间
- getFullYear
- 获取年份
- genMonth
- 获取月份,范围:0~11
- getDate
- 获取天
- getHours
- 获取小时
- getMinutes
- 获取分钟
- getSeconds
- 获取秒钟
- getTime
- 获取对应的毫秒值
RegExp对象
var reg1 = /^[a]{3}$/; console.log(reg1.test("aaaa"));
全局对象
- parseInt
- 将数字字符串转换成数字
- isNaN
- 判断变量是否是一个NaN
- eval
- 将json字符串转换成js对象,方便调用属性
ECMAScript之事件
- 事件源:发生事件的源头
- 监听器:发生事件后触发的组件
- 事件绑定:将事件源和监听器关联
- 事件:能够触发监听器的事
onload事件
- 某个页面或图像被完成加载
onfocus、onblur事件
- 监听元素获取焦点、失去焦点
onkeydown、onkeyup事件
- 监听键盘按下、键盘松开
onmousedown、onmousemove、onmouseup事件
- 监听鼠标按下、鼠标移动、鼠标松开
onchange事件
- 用户改变域的内容
onsubmit事件
- 监听表单提交
Json
Json介绍
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 它基于ECMAScript的 一个子集。
- JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习 惯。这些特性使JSON成为理想的数据交换语言。
- 易于人阅读和编写,同时也易于机器解析 和生成(网络传输速率)
Json语法
- 单一对象
- {“属性名1”:“属性值1” , “属性名2”:“属性值2”}
- 多个对象
- [{“属性名1”:“属性值1” , “属性名2”:“属性值2”} , {“属性名1”:“属性值1” , “属性名2”:“属性值2”}]
Jackson使用
- 将对象转换为json字符串
- 将json字符串转换为对象
Ajax
Ajax概述
- 概述
- ajax:Asynchronous javascript and xml,异步JavaScript和Xml
- 作用
- 局部刷新页面
- 发起异步请求
- 和同步请求区别
- 同步请求:当一个页面中的内容发生改变时,需要全部刷新。当一个请求发起时,其他的请求不能发起
- 异步请求,当一个页面中的内容发生改变时,可以局部刷新。当一个请求发起时,其他的请求也能发起
XMLHttpRequest对象概述
- 常用属性
- onreadystatechange
- 用于监听异步请求对象状态(readyState)改变
- status
- 服务器响应状态码
- readyState
- 异步请求对象的状态
- 0:异步请求对象还没有初始化完成
- 1:开始发起请求
- 2:发起请求完成
- 3:开始读取服务器的响应
- 4:读取服务器响应完成
- 异步请求对象的状态
- responseText
- 响应正文
- onreadystatechange
- 常用方法
- open(请求方式,请求路径,flag)
- flag:为true就是异步请求;否则为同步请求
- send
- 发送参数
- setRequestHeader
- 设置请求头
- open(请求方式,请求路径,flag)
Ajax之get请求
- 创建异步请求对象
- 监听异步请求对象状态改变
- 判断服务器响应状态码为200
- 判断异步请求对象状态为4
- 打开连接
- 设置请求方式
- 设置请求路径
- 设置异步请求
- 发送参数
function createXMLHttpRequest() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari,Google
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
//当异步请求对象状态发生改变就会执行本方法
console.log("异步请求对象,状态发生改变" + xhr.readyState);
//主要是监听readyState属性改变
//判断请求是否成功?
//首先判断服务器响应状态码status,再判断异步请求对象是否读取服务器响应成功?readyState
if (xhr.status == 200 && xhr.readyState == 4) {
//获取的服务器传输过来的json字符串
var responseText =xhr.responseText;
//将json字符串 -> js对象
var jsObj = eval("("+responseText+")");
console.log(jsObj.flag);
console.log(jsObj.msg);
}
}
xhr.open("get","${pageContext.request.contextPath}/demo01?username=root&password=root",true);
Ajax之post请求
- 创建异步请求对象
- 监听异步请求对象状态改变
- 判断服务器响应状态码为200
- 判断异步请求对象状态为4
- 打开连接
- 设置请求方式
- 设置请求路径
- 设置异步请求
- 设置请求头Content-Type
- 发送参数
function createXMLHttpRequest() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari,Google
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
//1,创建异步请求对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
//当异步请求对象状态发生改变就会执行本方法
console.log("异步请求对象,状态发生改变" + xhr.readyState);
//主要是监听readyState属性改变
//判断请求是否成功?
//首先判断服务器响应状态码status,再判断异步请求对象是否读取服务器响应成功?readyState
if (xhr.status == 200 && xhr.readyState == 4) {
//获取的服务器传输过来的json字符串
var responseText =xhr.responseText;
//将json字符串 -> js对象
var jsObj = eval("("+responseText+")");
console.log(jsObj.flag);
console.log(jsObj.msg);
var ele = document.getElementById("div");
if (jsObj.flag) {
//用户名可用
ele.innerHTML = "<font color='blue'>"+jsObj.msg+"</font>";
} else {
//用户名不可用
ele.innerHTML = "<font color='red'>"+jsObj.msg+"</font>";
}
}
}
xhr.open("post","${pageContext.request.contextPath}/demo01",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username=root1&password=root");
JavaScript之BOM对象
BOM概述
- BOM对象
- bom : browser object model,浏览器对象模型
- 分类
- window
- Navigator
- Screen
- History
- Location
window对象
-
作用
- 跳转页面
- 获取其他bom对象
- 显示警告框
- 显示确认框
- 显示输入框
- 关闭页面
-
常用属性
- location
- 设置跳转页面路径
- location
-
常用方法
- alert
- 显示警告框
- confirm
- 显示确认框
- prompt
- 显示输入框
- close
- 关闭页面
- setInterval
- setTimeout
- clearInterval
- clearTimeout
- alert
window对象之setInterval、setTimeout
- 方法说明
- setInterval(code,millisec):设置重复动作
- code:重复调用的代码
- millisec:重复间隔时间,单位为毫秒
- 返回值是重复对象
- clearInterval(id_of_setinterval):清除重复动作
- id_of_setinterval:重复对象的id
- setTimeout(code,millisec):设置延迟动作
- code:延迟调用的代码
- millisec:延迟时间
- 返回值是延迟对象
- clearTimeout(id_of_settimeout):请求延迟动作
- id_of_settimeout:延迟对象的id
- setInterval(code,millisec):设置重复动作
Location对象
-
概述
- Location 对象包含有关当前 URL 的信息。
-
常用属性
- href
- 设置或返回完整的 URL。
- href
-
常用方法
- reload
- 重新加载当前页面
- reload
History对象
-
概述
- History 对象包含用户(在浏览器窗口中)访问过的 URL。
-
常用方法
- back
- 加载 history 列表中的前一个 URL。
- forward
- 加载 history 列表中的下一个 URL。
- go
- 加载 history 列表中的某个具体页面。
- go(-1):相当于back方法
- go(1):相当于forward方法
- back
JavaScript之DOM对象
DOM概述
- 概念
- dom : document object model,文档对象模型
- 分类
- Xml DOM:既可以操作xml文件,也可以操作html文件
- Html DOM:只能操作html文件
Xml DOM之Document对象
-
概述
- Document 对象是一棵文档树的根,可为我们提供对文档数据的最初(或最顶层)的访问入口。
-
作用
- 创建元素节点、文本节点、属性节点、注释节点
- 获取元素节点
-
常用方法
- createElement
- 创建元素节点对象
- createTextNode
- 创建文本节点对象
- getElementById
- 根据id获取元素节点对象
- getElementsByTagName
- 根据标签名称获取一组元素节点对象
- createElement
Xml DOM之Element对象
-
概述
- Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本,则在文本节点中表示该文本。
-
作用
- 操作该元素中的属性节点
- 操作该元素中的子元素节点
- 操作该元素中的文本节点
-
常用方法
- getAttribute
- 返回指定属性的值
- setAttribute
- 设置属性值
- removeAttribute
- 移除指定属性
- getAttribute
Xml Dom之Node对象
-
概念
- Node对象是整个 DOM 的主要数据类型。
- Node对象可以是元素节点、属性节点、文本节点。
-
常用属性
- childNodes
- 获取所有的子节点
- firstChild
- 获取第一个子节点
- lastChild
- 获取最后一个子节点
- nodeType
- 获取节点名称
- 1:元素节点
- 2:属性节点
- 3:文本节点
- 8:注释
- 9:文档
- parentNode
- childNodes
-
常用方法
- appendChild
- removeChild
HTML DOM
-
概念
- HTML DOM 定义了访问和操作HTML文档的标准方法。
- HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
-
document对象
- getElementById
- getElementByTagName
-
innerHTML、innerText
-
innerHTML
- 用于往标签中插入内容(包含html标签)、解析html标签
-
innerText
- 用于往标签中插入内容(包含html标签)、不能解析html标签
-
-
InputText对象
- 文本输入对象
-
Select对象
- 下拉列表对象
-
Option对象
- 选项对象
Jquery
Jquery概述
- Jquery是什么?
- JQuery是一个JS的类库文件
- Jquery的作用?
- 可以简化遍历HTML文 档、操作DOM、处理事件、执行动画、开发Ajax等操作
- Jquery的诞生
- 2006年8月诞生的一个开源项目,现在Jquery团队主要包括核心库,UI和插件开发等. 开发人员,凭借简洁的语法和跨平台的兼容性.
- 其独特而又优雅的代码风格改变了 javascript程序员的设计思路和编写程序的方式
jquery对象和js对象
-
问题
- jquery对象能否直接使用js对象的属性和方法?
- 不能!
- js对象能否直接使用jquery对象的属性和方法?
- 不能!
- jquery对象能否直接使用js对象的属性和方法?
-
jquery对象和js对象的相互转换
- js对象 -> jquery对象
- $(js对象)
- jquery对象 -> js对象
- jquery对象.get(0)
- jquery对象[0]
- js对象 -> jquery对象
Jquery选择器
jquery选择器之基本选择器
- 基本选择器
- id选择器
- $("#id")
- class选择器
- $(".class")
- 元素选择器
- $(“元素名”)
- 通配符选择器
- $("*")
- id选择器
jquery选择器之层次选择器
-
层次选择器
- 从父子关系、兄弟关系来选择页面上节点
-
分类
- $(“a b”)
- 获取节点a下的所有的节点b
- $(“a > b”)
- 获取节点a下的所有的子节点b
- $(“a + b”)
- 获取节点a的下一个兄弟节点b
- $(“a ~ b”)
- 获取节点a的所有兄弟节点b
- $(“a b”)
jquery选择器之基本过滤选择器
-
基本过滤选择器
- 从位置的角度来对页面的标签进行过滤选择
-
分类
- $(“tagName:first”)
- 选择第一个tagName标签
- $(“tagName:last”)
- 选择最后一个tagName标签
- $(“tagName:eq(2)”)
- 选择脚标为2的tagName标签 ,脚标从0开始
- $(“tagName:gt(2)”)
- 选择脚标大于2的tagName标签
- $(“tagName:lt(2)”)
- 选择脚标小于2的tagName标签
- $(“tagName:odd”)
- 选择脚标为奇数的tagName标签
- $(“tagName:even”)
- 选择脚标为偶数的tagName标签
- $(“tagName:first”)
jquery选择器之内容过滤选择器
-
概念
- 从内容来对页面的标签进行过滤选择
-
分类
- $(“tagName:contains(‘aaa’)”)
- 选中内容包含"aaa"的tagName元素
- $(“tagName:empty”)
- 选中没有任何内容的tagName元素
- $(“tagName:has(.one)”)
- tagName中是否包含一个class为one的子元素,如果有就选中tagName
- $(“tagName:contains(‘aaa’)”)
** jquery选择器之属性过滤选择器**
-
概念
- 从属性的角度来对页面的标签进行过滤选择
-
分类
-
$(“tagName[id]”)
- 选取含有属性id的tagName元素
-
$(“tagName[id=‘cc’]”)
- 选取属性id值为"cc"的tagName元素
-
$(“tagName[id!=‘cc’]”)
- 选取属性id值不为"cc"的tagName元素
-
$(“tagName[title^=‘cc’]”)
- 选取属性id值以"cc"开头的tagName元素
-
$(“tagName[title $=‘cc’]”)
- 选取属性id值以"cc"结束的tagName元素
-
$(“tagName[title*=‘cc’]”)
- 选取属性id值包含"cc"的tagName元素
-
jquery选择器之子元素过滤选择器
-
概念
-
从父子关系对标签进行过滤选择
-
分类
-
$(“tagName :nth-child(2)”)
- tagName元素下的第二个子元素(脚标从1开始)
-
$(“tagName :first-child”)
- tagName元素下的第一个子元素
-
$(“tagName :last-child”)
- tagName元素下的最后一个子元素
-
$(“tagName :only-child”)
- tagName元素下的仅仅只有一个子元素,那么选中这个子元素
jquery的dom操作
- 常用方法
- html()
- 设置/获取标签内容,解析html标签,相当于innerHTML
- text()
- 设置/获取标签内容,不解析html标签,相当于innerText
- val()
- 设置/获取value属性值,相当于value属性
- attr()
- 设置/获取属性值,相当于setAttribute/getAttribute
- removeAttr()
- 移除属性,相当于removeAttribute
- html()
Jquery事件
jquery事件之监听页面加载完成
- jquery方式完整版
$(document).ready(function () {
console.log("页面加载完成2")
})
- jquery方式简化版
$(function () {
console.log("页面加载完成3")
})
jquery事件之事件绑定
- 方式一
jquery对象.事件名(function(){
});
- 方式二
jquery对象.bind("事件名",function(){
});
Jquery遍历
- 方式一
jquery数组对象.each(function(index,element){
});
- 方式二
$.each(jquery数组对象,function(index,element){
});
Jquery异步请求
jquery异步请求之get
- $.get(url,data,callback,type)
- url
- 请求服务器资源的路径
- data
- 请求参数,遵守json格式(键值对)
- callback
- 请求成功后,回调的函数
- type
- 服务器响应给浏览器的数据类型( html,xml,json,jasonp,script,text)
- url
jquery异步请求之post
- $.post(url,data,callback,type)
- url
- 请求服务器资源的路径
- data
- 请求参数,遵守json格式(键值对)
- callback
- 请求成功后,回调的函数
- type
- 服务器响应给浏览器的数据类型 (html,xml,json,jasonp,script,text)
- url
jquery异步请求之ajax
-
概念
- $.ajax(options) 是低层级 AJAX 函数的语法。
- $.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
- option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
-
属性
- async
- 设置是否为异步请求
- contentType
- 设置请求头Content-Type,默认值:”application/x-www-form-urlencoded“
- data
- 请求参数
- dataType
- 响应正文的数据类型(html,xml,json,jasonp,script,text)
- complete(XHR, TS)
- 请求完成的回调函数
- error
- 请求失败的回调函数
- success
- 请求成功的回调函数
- timeout
- 设置请求延迟时间
- type
- 请求方式(Get/Post)
- url
- 请求路径
- xhr
- 获取异步请求对象
- async
-
常用属性
- data、dataType、success、type、url