1. JavaScript
JavaScript 是ECMAScript+BOM+DOM
ECMAScript:客户端脚本语言的标准 脚本语言:不需要编译,就可以被浏览器解析解析执行
2. 引入方式
- 在html内部 由
<script>标签引入 - 外部引入 由
<script src="js路径">标签引入
3. 注释
- 单行注释 // 内容
- 多行注释 / 内容 /
4. 输入输出语句
- 输入框 prompt(“提示内容”)
- 弹出警告框 alert(“提示内容”)
- 控制台输出 console.log(“显示内容”)
- 页面内容输出 document.write(“显示内容”)
- 弹出确认框 确认返ture 取消返false confirm(“提示内容”)
5. 变量和常量
JavaScript属于弱类型语言,定义变量时不区分具体的数据类型
- 定义局部变量 let 变量名 = 值
- 定义全局变量 变量名 = 值
- 定义常量 const 常量名 = 值
6. 原始数据类型
- boolean 布尔类型
- null 声明null值的特殊关键字
- undefined 代表变量未定义
- numbner 整数或者浮点数
- string 字符串
- bigint 大整数 如: let num =10n
6.1. typeof 方法
tpyeof() 用于判断变量的数据类型
7. 算数运算符
与JAVA没有太大差别 多个全等于 ===
字符串 做 + 运算时 都是拼接
而与数字做 - * % 等运算时会自动转换类型
8. 流程控制和循环语句
- if语句
- switch语句
- for循环
- while循环 与java都差不多
9. 数组
与java数组基本一致 , 但数组类型和长度都没有限制
- let 数组名 =[元素1 , 元素2, …]
- 索引 从0开始 最大到数组长度-1 没有索引越界 而且长度没有限制 可以直接越界赋值
- 数组长度 数组名.length
数组高级运算符
...- 数组复制 let arr2=[…arr]
- 合并数组 let arr4 =[…arr2,…arr3]
- 字符串转数组 let arr5=[…”hello”]
10. 函数
类似于方法
- function 方法名(参数) { return 返回值}
- 可变参数 function 方法名(…参数名) { return 返回值}
- 匿名函数 function(参数列表) {方法体 }
11. DOM
DOM(document object model) 文档对象模型
将html 文档的各个组成方法 , 封装成对象 . 借助这些东西,可以对html文档进行增删改查的动态操作
- Document 文档对象
- Element 元素对象
- Attribute 属性对象
- Text 文本对象
11.1. Element 元素操作
11.1.1. 获取元素
- getELmentByid(id属性值) 根据id获取一个元素
- getELmentByTagName(标签名称) 标签标签名称获取多个元素
- getELmentByName(name属性值) 根据name属性获取多个元素
- getELmentByClassName(class属性值) 根据class属性获取多个元素
- 子元素对象.parentElemnet属性 获取当前元素的父元素
11.1.2. 操作元素
- createElemnt(标签名) 创建一个标签 创建后需要配合添加使用
- appendChild(子元素对象) 将指定子元素添加到父元素中
- removeChild(子元素对象) 用父元素删除指定子元素
- replaceChild(新元素对象,旧元素对象) 用新元素替换旧元素
12. Attribute 属性的操作
- setAttribute(属性名,属性值) 设置属性
- getAttribute(属性名) 根据属性名获取属性值
- removeAttribute(属性名) 根据筛选名移除指定的属性
- style属性 为元素添加样式 如: div.style.color = “red”
- className属性 添加指定样式 (其实是为元素添加class属性) 如: div.className = “div”
13. Text 文本操作
- innerText 只添加文本内容,不解析标签
- innerHTML 添加文本内容,并解析标签 如
<a>解析为标签而不是文本
14. 事件
事件指当某些组件执行了某些操作后,会触发某些代码的执行
- onload 某个页面或者图像被完成加载
- onsubmit 当表单提交时触发
- onclick 鼠标点击事件
- ondblclick 鼠标双击双击
- onblur 元素失去焦点
- onfocus 元素获得焦点
- onchange 用户改变域的内容
- onkeydown 某个键盘的键被按下
- onkeypress 某个键盘的键被按下或者按住
- onkeyup 某个键盘的键被松开
- onmouserdown 某个鼠标按键被按下
- onmouseup 某个鼠标按键被松开
- onmouseover 鼠标被移到某元素之上
- onmouserout 鼠标从某元素移开
14.1. 绑定事件
通过标签中事件属性绑定
<button id="up" onclick="up()"></button>
通过DOM元素属性绑定
document.getElementById("down").onclick = function(){let img = document.getElementById("img")img.setAttribute("src","../../品优购/img/arrow-prev.png")}
15. 面向对象
15.1. 定义和使用
class 类名{//构造方法constructor(变量列表){变量赋值}方法名(参数列表){方法体return 返回值}}//使用let 对象名 = new 类名(实际变量值)对象名.方法名()class Person {constructor(name, age) {this.name = namethis.age = age}show(){document.write(this.name + " " + this.age)}}let P = new Person("ZZ",19)P.show()
15.2. 继承
extends关键字 顶级父类 object
class worker extends Person {constructor(name, age, salary) {super(name, age)this.salary = salary}show() {document.write(this.name + ' ' + this.age + ' ' + this.salary)}}let w =new worker("qq",22,33)w.show()
15.3. 内置对象
Number
- parseFloat() 将传入的字符串浮点数转为浮点数
- parseInt() 将传入的字符串整数转为整数 从左到右转化 一直转换到有非数字字符停止 如200a13bc 则转为200 后面的忽略
Math
- ceil(x) 向上取整
- floor(x) 向下取整
- round(x) 四舍五入最接近的整数
- random() 随机数返回 [0.0 , 1.0) 之间的数
- pow(x,y) 幂运算x的y次方
Date
- Date() 根据当前时间创建对象
- Date(value) 根据指定毫秒值创建对象
Date(year,month,[day,hours,minutes,seconds,milliseconds])
- getFullYear() 获取年
- getMonth() 获取月 从0-11
- getDate() 获取天
- getHours() 获取小时
- getMinutes() 获取秒
- getTime() 返回时间戳 1970年1月1日到now的毫秒数
- toLocaleString() 返回本地日期格式的字符串
String
- String(value) 根据指定字符串创建对象
let s = “字符串” 赋值
- length属性 长度
- charAt(index) 获取指定索引的字符
- indexOf(value) 查找指定字符的索引 没有为-1
- substring(start,end) 截取字符串 (含头不含尾)
- split(value) 切割字符串 返回数组
- replace(old,new) 字符串替换
RegExp 正则表达式
- RegExp(规则) 根据规则创建对象
let reg = /^规则$/ 赋值
- test(匹配的字符串) 根据指定规则验证字符串是否符合 返回布尔值
Array
- push(元素) 添加元素到末尾
- pop() 删除末尾的元素
- shift() 删除数组最前面的元素
- includes(元素) 判断数组是否包含此元素
- reverse() 反转数组
- sort() 排序数组
Set 元素唯一 存取顺序一致
Set() 创建set对象
- add(元素) 添加元素
- size顺序 获取长度
keys() 获取迭代器对象
- next().value 获取迭代器元素
- delete(元素) 删除指定元素
Map 存取顺序一致
Map() 创建Map对象
- set(key,value) 添加元素
- size属性 获取长度
- get(key) 根据key获取value
entries() 获取迭代器对象
- next().value 获取迭代器元素 键值对
- delete(key) 根据key删除键值对
JSON(JavaScript Object Notation)
- stringify(对象) 将指定对象转为json字符串
- parse(字符串) 将JSON字符串 转为js对象
- decodeURIComponent(string s) 将url字符转为UTF-8
16. BOM
BOM(Browser Object Model) 浏览器对象模型 将浏览器的各个组成部分封装成不同的对象
Windows 窗口对象
定时器
- setTimeout(功能,毫秒值) 设置一次性定时器 返回一个唯一标识
- clearTimeout(标识) 取消一次性定时器
- setInterval(功能,毫秒值) 设置循环定时器 返回一个唯一标识
- clearInterval(标识) 取消循环定时器
加载事件
- window.onload 在页面加载完毕后触发此事件
Location 地址栏对象
- href属性 设置新的URL 使浏览器读取并显示新的URL
History 历史记录对象
Navigator 浏览器对象
Screen 显示器屏幕对象
17. jQuery
17.1. jQuery对象
- $(JS的 DOM 对象) JS对象和jQuery对象转换
- jQuery 对象[索引] jQuery对象转为js对象
- jQuery 对象.get(索引) jQuery对象转为js对象
14. 事件
去掉js中.on的语句 如: onclick ===> click jQuery对象.click(功能)
绑定事件 jQuery对象.on(事件名称,执行的功能)
解绑事件 jQuery对象.off(事件名称) 如果不指定事件名称,则会将此对象所有事件都解绑
17.2.1. 事件切换
需要给同一个对象绑定多个事件,并且多个事件有先后顺序关系
- 单独定义
.%E4%BA%8B%E4%BB%B6%E6%96%B9%E6%B3%95%E5%90%8D1(%E5%8A%9F%E8%83%BD)%0A#card=math&code=%28%E5%85%83%E7%B4%A0%29.%E4%BA%8B%E4%BB%B6%E6%96%B9%E6%B3%95%E5%90%8D1%28%E5%8A%9F%E8%83%BD%29%0A)(元素).事件方法名2(功能)
- 链式定义
$(元素).事件方法名1(功能).事件方法名2(功能)
17.3. 遍历
for循环
对象.each(function(index,ele)) 方法 index为索引 ele为元素
$.each(容器对象,function(index,ele){}) 方法 先 $(元素) 获取容器对象后使用
for(ele of 容器对象){} 方法 增强for 先 $(元素) 获取容器对象后使用
17.4. 选择器
基本选择器
- $(“元素名称”) 根据元素获取元素对象数组
- $(“#id的属性值”) 根据id获取元素对象
- $(“.class的属性值”) 根据class获取元素对象数组
层级选择器
- $(“A B”) 后代选择器 A元素下面所有的B元素 (包含B的子元素)
- $(“A > B”) 子代选择器 A下的所有B (不包含B的子级)
- $(“A + B”) 兄弟选择器 A下相邻最近的B
- $(“A ~ B”) 兄弟选择器 A相邻的所有B
属性选择器
- $(“A[属性名]”) 属性选择器 根据指定属性名获取元素对象数组
- $(“A[属性名]=属性值”) 根据指定属性名和值获取元素数组
过滤器选择器
表单属性选择器
- $(“A:enabled”) 获取可用元素
- $(“A:disable”) 获取不可用元素
- $(“A:checked”) 获取单选/复选框被选中的元素
- $(“A:selected”) 获取下拉框选中的元素
11. DOM
17.5.1. 操作文本
- html() 获取标签的文本
- html(value) 设置标签的文本内容, 解析标签
17.5.2. 操作对象
$(“元素”) 创建指定元素 如不存在则创建 如存在是获取元素
let span = $("<span>文本</span>")
append(element) 添加为最后一个子元素 添加对象为 element
appendTo(element) 添加为最后一个子元素 添加对象为 调用对象
prepend(element) 添加为第一个子元素 添加对象为 element
prependTo(element) 添加为第一个子元素 添加对象为 调用对象
before(element) 添加到当前元素的前面 由添加对象调用 兄弟关系
after(element) 添加到当前元素的后面 兄弟关系
remove() 删除指定元素 可自己删自己
empty() 清空指定元素的所有子元素 但调用对象还是存在的
17.5.3. 操作样式
- css(name) 根据样式名称获取css样式
- css(name,value) 设置css样式
- addClass(value) 添加类名
- removeClass(value) 移除类名
- toggleClass(value) 如没有指定类名则添加 如有则删除
- hide() 隐藏元素
- show() 显示元素
17.5.4. 操作属性
- attr(name,[value]) 获取/设置属性的值 如只传name则为获取
- prop(name,[value]) 获取/设置属性的值(checked,selected)
16. BOM
$(function(){}) 页面加载事件
$(windows) 获取当前窗口对象
- scroll() 鼠标滚动事件
- height() 当前窗口的高度
- scrollTop() 滚动条上下滚动的距离
- $(document).height() 当前文档的高度
18. AJAX
AJAX(Asynchronous JavaScript And XML) 异步的JavaScript和XML 是多个技术综合 用于快速创建动态网页的技术
18.1. JS实现AJAX
//创建 XMLHttpRequest核心对象let xmlHttp = new XMLHttpRequest()//打开链接 请求方式 url 是否异步xmlHttp.open('GET', 'userServlet', true)//发送请求xmlHttp.send()//处理响应xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState === 4 && xmlHttp.status === 200){//判断请求和响应是否成功}}
XMLHttpRequest 核心对象 用于在后台和服务器交换数据 可以在不重新加载整个网页的情况下,对网页的某部分进行更新
open(method,url,async) 打开链接
- method 请求的类型 GET或者POST
- url 请求资源的路径
- async true为异步 false为同步
send(String params) 发送请求
- params 请求的参数(POST请求专用)
- onreadystatechange 处理响应
readyState
- 0 -请求未初始化 1-服务器连接已建立 2-请求已接受 3-请求处理中 4-请求已完成,且响应已经就绪
status
- 200-响应已经全部OK
- responseText 获取字符串形式的响应数据
- responseXML 获取XML形式的响应数据
18.2. jQuery 实现AJAX
18.2.1. GET方式
$.get(url,[data],[callback],[type])
- url 请求的资源路径
- data 发送给服务器端的请求参数 可以是键值对 或 js对象
- callback 当请求成功后的回调函数 一般写逻辑代码
- type 预期的返回数据的类型 xml,html,js,json,text等
$('#username').blur(function () {$.get('url','username=' + username,function (data) {//data为服务端传回来的数据document.write(data)},'text')})
18.3. POST 方法
$.post(url,[data],[callback],[type])
- url 请求的资源路径
- data 发送给服务器端的请求参数 可以是键值对 或 js对象
- callback 当请求成功后的回调函数 一般写逻辑代码
- type 预期的返回数据的类型 xml,html,js,json,text等
18.4. 通用方式
$.ajax({name:value,name:value,…})
- url 请求的资源路径
- async 是否异步请求 默认为ture异步
- data 发送到服务器的数据
- type 请求方式 post或get 默认为get
- dataType 返回数据的类型
- success 请求成功的回调函数
- error 请求失败时的回调函数
$.ajax({url: 'url地址',async: true,data: 'username=' + username,type: 'get',dataType: 'text',success: function (data) {print(data)},error: function () {console.error()},})
若有收获，就点个赞吧
0 人点赞
