JavaScript
引入JavaScript
-
内部标签，写在里面
-
外部引入js文件
<script src="js/javascript.js"> </script>
基本语法
-
严格检查模式：idea须设置为支持ES6语法，在JavaScript第一行加上'use strict'，预防JavaScript的随意性导致产生的一些随意性。局部变量建议都使用let去定义
-
数据类型
-
定义变量：变量类型（通用var/ let） 变量名 = 变量值
-
数值：js不区分小数和整数
- NaN===NaN为false，NaN 属性是代表非数字值的特殊值，与所有的数值都不相等，包括它自己，须使用isNaN（NaN）来判断。
- 浮点数问题：1/3===(1-2/3)为false，要尽量避免使用。或者使用差的绝对值小于自定义的精确度来判断是否相等
-
字符串
-
正常字符串使用单引号或双引号包裹
-
注意转义字符\
- \ ' 单引号
- \ n 换行
- \ t 制表符
- \ u#### 中文字符
- \ x xx Ascll字符
-
多行字符串编写：用tab上面那个键（英文）符号包裹
var msg = `helloworld 你好 xiaozhi` -
模板字符串
let name = 'xiaozhi'; let msg = `你好啊，${name}`; alert(msg); -
长度属性：str.length
-
字符串的不可变性，如str[0] = 1后不会发生改变
-
大小写转换：str.toUpperCase(),str.toLowerCase()
-
通过字符获取索引：str.indexOf('s')
-
字符串截取：
- str.substring(1) 从下标为1的字符串截取到最后一个
- str.substring(1,10) 从下标为1的字符串截取到下标为9，即[1,10)
-
-
布尔值：true false
- == 类型不一样，值一样，也会判断为true
- === 绝对等于，必须类型和值一样才会判断为true（推荐使用）
-
null 空，undefined（如数值下标越界） 未定义
-
数组：不限制数组内数据类型
-
长度：arr.length，长度可变
-
通过元素获取索引：str.indexOf('s'),字符'1'和数字1是不同的
-
截取：slice(),用法同字符串substring()
-
压入弹出（可一次性压入多个）
- push 压入到尾部
- pop 弹出尾部第一个元素
- unshift 压入到头部
- shift 弹出头部第一个元素
-
排序
- sort() 正序（如[a,b,c,d]）
- reverse() 反序
-
arr.concat([1,2,1]) 并没有修改arr数组，只是会返回一个新的数组
-
join 打印拼接数组，使用特定的字符串连接
let arr = [1,2,3,4,5]; arr.join('-'); //"1-2-3-4-5" -
多维数组
let arr = [[1,2],[3,4],["5","6"]]; arr[1][1] //4
-
-
对象：对象是大括号，每个属性之间用逗号隔开，最后一个不用
var person = { name: "xiaozhi", age:18, tags:['帅气'，'后浪','程序员'] }- 取对象值：person.name/person['age']
- 判断属性或方法(如tostring)是否在对象中：aaa in bbb，判断是否是自身拥有：hasOwnProperty(),tostring为false，age为true
-
Map
var map = new Map([['a',100],['b',66],['c',76]]); var name = map.get('a'); //通过key获得value map.set('d',84); //新增或修改 map.delete('a'); //删除 -
Set：无序不重复集合
var set = new Set([1,2,3,4,5,5,5]); set.add(2); //添加 set.delete(3); //删除 console.log(set.has(4)); //是否包含某个元素
-
-
流程控制：if、for、while与Java语法一样
-
forEach循环
var arr = [1,2,3,4,5,6] age.forEach(function(value){ console.log(value); }) -
for ... in ... (早期版本有漏洞，不推荐使用)
var arr = [1,2,3,4,5,6] for(var num in age){ //num是索引 console.log(age[num]); } -
for ... of ... （推荐使用）
var arr = [1,2,3,4,5,6] for(let x of arr){ console.log(X); }
-
函数
-
定义方式，以绝对值函数为例
一旦执行到return，代表函数结束，返回结果；如果没有执行return，函数执行完也会返回结果undefined
//第一种 function abs(x){ if(x>=0){ return x; }else{ return -x; } } //第二种,匿名函数，可以把结果赋值给abs，通过abs就可以调用函数 var abd = function(x){ if(x>=0){ return x; }else{ return -x; } } -
参数问题：JavaScript可以传任意个参数，也可以不传参数
-
假设不存在参数，如何规避
var abd = function(x){ //手动抛出异常来判断 if(typeof x!== 'number'){ throw 'Not a Number' } if(x>=0){ return x; }else{ return -x; } } -
多个参数的问题
-
arguments是一个JavaScript免费赠送的关键字，代表传递进来的所有参数，是一个数组
var abd = function(x){ console.log("x=>"+x); for(var i = 0;i < arguments.length;i++){ console.log(arguments[i]); } if(x>=0){ return x; }else{ return -x; } } -
rest：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，排除已有的参数
rest参数只能写在最后，必须使用...标识
function aaa(a,b,...rest){ console.log("a=>"+a); console.log("b=>"+b); console.log(rest); }
-
-
-
变量的作用域
-
在JavaScript中，var定义变量是有作用域的。
- 假设在函数体中声明，则在函数体外不可使用（闭包可实现）
- 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
- 内部函数可以访问外部函数的成员，反之则不行
- 函数查找变量是从自身函数开始，由内向外查找，即采用就近原则
- 默认规范：所有变量定义都放在函数头部，便于代码维护。
-
全局对象window，默认所有全局变量都会自动绑定在window对象下，alert()函数本身也是一个window变量
var x=10; alert(x); alert(window.x); var old_alert = window.alert; //old_alert(x)也可以弹出 window.alert = function(){}; //此时alert()失效了 window.alert = old_alert； //恢复 -
全局变量：由于所有的全局变量都会绑定在window上，如果不同的js文件，使用了相同的全局变量，如何减少冲突?把自己代码全部放入自己定义的为一空间名字中，降低全局命名冲突的问题
//为一全局变量 var jsApp = {}; //定义全局变量 jsApp.name = 'xiaozhi'; jsApp.add = function(a,b){ return a + b; } -
局部作用域let：解决局部作用域冲突的问题，推荐使用。
-
常量const：值不可变
-
-
方法：方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var xiaozhi = { name:'xiaozhi', birth:1998, age:function(){ var now = new Date().getFullYear(); return now - this.birth; } } //调用属性：user.name //调用方法：user.age-
this：默认指向调用它的那个对象，apply：方法重用
function getAge(){ var now = new Date().getFullYear(); return now - this.birth; } var user = { name:'xioazhi', birth:1998, age:getAge } //xiaozhi.age() 可以正常使用 //getAge() 指向的是window，会报错 //getAge().apply(user,[]); //user，参数为空
-
内部对象
-
标准对象：number（数值，NaN）,string（字符串）,boolean（布尔值）,object（{},[]）,function（Math.abs）,undefined（undefined）
-
Date
var now = new Date(); //中国标准时间 now.getFullYear();//年 now.getFullMonth();//月 0~11 now.getFullDate();//日 now.getFullDay();//星期几 now.getFullHours();//时 now.getFullMinutes();//秒 now.getFullSeconds();//分 now.getTime(); //时间戳，全球统一 now.toLocaleString() //"2021/2/4 上午12:46:54" -
JSON
-
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
-
在JavaScript里面一切皆为对象，任何js支持的类型都可以用JSON表示
-
对象都用{}
-
数组都用[]
-
所有键值对都用key:value
var user = { name:'xiaozhi', birth:1998, age:18 } //对象转json字符串 var jsonUser = JSON.stringify(user); //json字符串转对象 var user = JSON.parse('{"name":"xiaozhi","birth":18,"age":18}');
-
-
-
Ajax:异步请求
原型
在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
var student = {
name:'xaiozhi',
age:18,
run:function(){
console.log(this.name + "run...");
}
};
var xiaoming = {
name:'xiaoming'
}
//_proto_:这是每个对象(除null外)都会有的属性，这个属性会指向该对象的原型。
//设置xiaoming原型为student，有相同属性则修改，没有则继承
xiaoming._proto_ = student;
console.log(xiaoming); //name:xiaoming,age:18,run...
//给student新增一个方法
student.prototype.hello = function(){
console.log('hello');
}
//原型链：bject.prototype._proto_的值为null跟 Object.prototype 没有原型，所以查找属性的时候查到 Object.prototype 就可以停止查找了。
class继承
语法与Java继承类似，本质还是查看对象原型。
操作BOM对象
-
window：代表浏览器窗口
-
Navigate：封装了浏览器的信息（不建议使用这些属性）
-
screen：代表屏幕尺寸
-
location：代表当前页面的URL信息
host: "www.baidu.com" href: "https://www.baidu.com/" protocol: "https:" //协议 reload:reload() //刷新 location.assign('www.kuangstudy.com') //设置新的地址 -
document：代表当前页面
document.cookie //获取cookie -
history：代表浏览器的历史（不建议使用）
history.back() //后退 history.forward() //前进
操作DOM对象
-
核心：浏览器网页就是一个DOM树形结构。
-
获取节点（推荐使用JQuery）
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p name="p2">p2</p> </div> <script> var father = document.getElementById('father'); var children = father.children; //获取父节点下的所有子节点 var h1 = document.getElementsByTagName('h1'); //根据标签类型获取，结果是数组 var p1 = document.getElementById('p1'); //根据id获取 var p2 = document.getElementsByName('p2'); //根据name获取，结果是数组 </script> -
更新节点
p1.innerText='标题二'; //修改内容 p1.innerHTML='<strong>标题三</strong>'; //可以解析HTML文本标签 p1.style.color='red'; //修改样式，属性使用字符串包裹 -
删除节点：先获取父节点，再通过父节点删除自己。删除多个节点时，children是时刻变化的。
var father = p1.parentElement; father.removeChild(p1); -
插入节点：我们获得了某个节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，如果不为空则会覆盖原来的元素，应采用追加的方式
<p id="p3">p3</p> <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p name="p2">p2</p> </div> <script> //追加已有元素 var p3 = document.getElementById('p3'); var father = document.getElementById('father'); father.appendChild(p3); //创建一个新的节点添加 var newP = document.createElement('p'); //p标签 newP.id = 'newP'; newP.innerText = 'newP'; father.appendChild(newP); //创建一个标签节点（通过这个属性，可以设置任意的值） var newScript = document.createElement('script'); newScript.setAttribute('type','text/javascript'); father.appendChild(newScript); </script>
操作表单
- 基础操作
<form action="" method="">
<input type="text" id="username"><br/>
<input type="radio" name="sex" id="boy" value="boy">男
<input type="radio" name="sex" id="girl" value="girl">女
</form>
<script>
var username = document.getElementById('username');
username.value = 'xiaozhi'; //赋值
var boy = document.getElementById('boy');
boy.checked = true; //选中
</script>
-
MD5加密及表单验证
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script> //引入MD5js <form action="https://www.baidu.com" method="post" onsubmit="return a()"> <input type="password" name="pwd" id="pwd"><br/> <button type="submit">提交</button> </form> <script> var pwd = document.getElementById('pwd'); function a(){ if(pwd.value === ""){ // 验证密码不能为空 alert('密码不能为空'); return false; }else{ pwd.vaule = md5(pwd.vaule); //md5加密 alert(pwd.vaule); return true; } }
jQuery
-
jQuery库，里面存在大量的JavaScript的函数，API中文文档：https://jquery.cuishifeng.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //引入jQuery.js -
基础语法：$(selector).action()
-
jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
//简介写法
$(function(){
// 开始写 jQuery 代码...
});
-
JavaScript入口函数window.onload = function(){}与jQuery 入口函数的区别：
- 执行时间：onload必须等待网页全部加载完才执行，ready只需DOM结构加载完毕
- 执行次数：onload只能执行一次，多个只有写在最后的生效，ready可以执行多次
-
选择器,与CSS选择器相同，‘：’可以理解为种类的意思，如：p:first，p 的种类为第一个。‘[] ’可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。
- $('p').click() 标签选择器
- $('#btn').click() id选择器
- $('.p1').click() 类选择器
- $("*") 选取所有元素
- $(this) 选取当前 HTML 元素
- $("p.intro") 选取 class 为 intro 的p标签元素
- $("p:first") 选取第一个p标签元素
- $("ul li:first") 选取第一个ul标签元素的第一个li标签元素
- $("ul li:first-child") 选取每个ul标签元素的第一个li标签元素
- $("[href]") 选取带有 href 属性的元素
- $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的a标签元素
- $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的a标签元素
- $(":button") 选取所有type="button"的input标签元素和buttona标签元素,$("button")只能获取buttona标签元素
- $("tr:even") 选取偶数位置的 元素
- $("tr:odd") 选取奇数位置的 元素
- $("#id", ".class") 复合选择器
- $("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）
- $("div p:eq(2)") 索引选择器 div下的第三个p元素（索引是从0开始）
- $("a[href='www.baidu.com']") 属性选择器
- $("p:contains(test)") 内容过滤选择器，包含test内容的p元素
- $(":emtyp") 内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
- $(":hidden") 所有隐藏元素 visible
- $("input:enabled") 选取所有启用的表单元素
- $(":disabled") 所有不可用的元素
- $("input:checked") 获取所有选中的复选框单选按钮等
- $("select option:selected") 获取选中的选项元素
-
事件
-
鼠标事件
- click(); 单次点击元素
- dblclick() 双击元素
- mouseenter() 当鼠标指针穿过元素时
- mouseleave() 当鼠标指针离开元素时
- mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时
- mouseup() 当在元素上松开鼠标按钮时
- hover() 方法用于模拟光标悬停事件
- focus() 当元素获得焦点时
- blur() 当元素失去焦点时
-
键盘
- keydown() 按下未释放，在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- keyup() 释放
- keydown() 键按下并释放
<script> $(document).ready(function(){ $("input").keypress(function(event){ //event.which是获取ASCII码 alert(event.which); //转换成字符 alert(String.fromCharCode(event.which)); //从event对象中key属性获取字符 alert(event.key); }); }); </script> -
表单
- submit() 提交表单
- change() 当元素的值改变时，当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
-
文档/窗口事件
- resize() 当调整浏览器窗口大小时
- scroll 当用户滚动指定的元素时
-
-
jQuery效果
- hide()隐藏
- show()显示
- toggle()切换
-
jQuery链，下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000); //或者 $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); -
捕获
- text() 设置或返回所选元素的文本内容
- html() 设置或返回所选元素的内容（包括 HTML 标记）
- val() 设置或返回表单字段的值
- attr() prop () 获取属性，对于 HTML 元素本身就带有的固有属性，如 href、target、id 和 class在处理时，使用 prop 方法,没有相应的属性，返回值是空字符串。对于 HTML 元素我们自己自定义的 DOM 属性，如a标签里action属性，在处理时，使用 attr 方法,如果没有相应的属性，返回值是 undefined。
-
设置
- 通过 text()、html() 、val() 、attr()方法来设置内容
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("button").click(function(){ $("#runoob").attr({ "href" : "http://www.baidu.com", "title" : "百度" }); });- 通过回调函数
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); -
添加元素
- append() 在被选元素的结尾插入内容
- prepend() 在被选元素的开头插入内容
- after() 在被选元素之后插入内容
- before() 在被选元素之前插入内容
function appendText(){ var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } -
删除元素
- remove() 删除被选元素（及其子元素），remove() 方法也可接受一个参数，允许您对被删元素进行过滤，过滤器中条件只能作用于同级，不能作用于子元素。。
- empty() 从被选元素中删除子元素
-
操作CSS
- addClass() 向被选元素添加一个或多个类
- removeClass() 从被选元素删除一个或多个类
- toggleClass() 对被选元素进行添加/删除类的切换操作
- css() 设置或返回样式属性
$("button").click(function(){ $("h1,h2,p").addClass("blue"); }); -
CSS方法
- css() 返回CSS属性
$("p").css("background-color");//返回背景颜色- 设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"}); -
jQuery 尺寸
- width() 设置或返回元素的宽度（不包括内边距、边框或外边距）
- height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
- innerWidth() 方法返回元素的宽度（包括内边距）
- innerHeight() 方法返回元素的高度（包括内边距）
- outerWidth() 方法返回元素的宽度（包括内边距和边框）
- outerHeight() 方法返回元素的高度（包括内边距和边框）
-
遍历
- parent() 返回被选元素的直接父元素，只会向上一级对 DOM 树进行遍历
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
//返回介于 <span> 与 <div> 元素之间的所有祖先元素 $(document).ready(function(){ $("span").parentsUntil("div"); });- children() 方法返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历
- find() 返回被选元素的后代元素，一路向下直到最后一个后代，可加过滤参数
//返回属于 <div> 后代的所有 <span> 元素 $(document).ready(function(){ $("div").find("*"); }); //返回 <div> 的所有后代 $(document).ready(function(){ $("div").find("*"); });- siblings()返回被选元素的所有同胞元素
- next()返回被选元素的下一个同胞元素，prev()则相反
- nextAll()返回被选元素的所有跟随的同胞元素,即后面的元素，prevAll()则相反
- nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素，prevUntil()则相反
-
过滤
- 最基本的过滤方法是：first(), last() 和 eq()
- filter() 返回匹配的元素，not() 则相反，not 和 eq 可以实现反选的效果。
$("p").filter(".url").css("background-color","yellow");//等同于 $("p.url").css("background-color","yellow"); $("p").first().css("background-color","yellow");//等同于 $("p:first").ss("background-color","yellow"); $("p").not(".url");//等同于 $("p:not(.url)"); -
AJAX
- load()
- 语法：$(selector).load(URL,data,callback);
- 必需的 URL 参数规定您希望加载的 URL
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });- $.get()
- 语法：$.get(URL,callback);
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });- $.post()
- 语法：$.post(URL,data,callback);
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });- ajax() 用于执行 AJAX（异步 HTTP）请求
- 语法：$.ajax({name:value, name:value, ... })
- async 布尔值，表示请求是否异步处理。默认是 true。
- beforeSend(xhr) 发送请求前运行的函数。
- cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
- complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
- contentType 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
- context 为所有 AJAX 相关的回调函数规定 "this" 值。
- data 规定要发送到服务器的数据。
- dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
- dataType 预期的服务器响应的数据类型。
- error(xhr,status,error) 如果请求失败要运行的函数。
- global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
- ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
- jsonp 在一个 jsonp 中重写回调函数的字符串。
- jsonpCallback 在一个 jsonp 中规定回调函数的名称。
- password 规定在 HTTP 访问认证请求中使用的密码。
- processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
- scriptCharset 规定请求的字符集。
- success(result,status,xhr) 当请求成功时运行的函数。
- timeout 设置本地的请求超时时间（以毫秒计）。
- traditional 布尔值，规定是否使用参数序列化的传统样式。
- type 规定请求的类型（GET 或 POST）。
- url 规定发送请求的 URL。默认是当前页面。
- username 规定在 HTTP 访问认证请求中使用的用户名。
- xhr 用于创建 XMLHttpRequest 对象的函数。
$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); }); - load()
