JavaScript
引入JavaScript
基本语法
-
严格检查模式:idea须设置为支持ES6语法,在JavaScript第一行加上'use strict',预防JavaScript的随意性导致产生的一些随意性。局部变量建议都使用let去定义
-
数据类型
-
定义变量:变量类型(通用var/ let) 变量名 = 变量值
-
数值:js不区分小数和整数
-
字符串
-
正常字符串使用单引号或双引号包裹
-
注意转义字符\
- \ ' 单引号
- \ 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')
-
字符串截取:
-
-
布尔值:true false
- == 类型不一样,值一样,也会判断为true
- === 绝对等于,必须类型和值一样才会判断为true(推荐使用)
-
null 空,undefined(如数值下标越界) 未定义
-
数组:不限制数组内数据类型
-
长度:arr.length,长度可变
-
通过元素获取索引:str.indexOf('s'),字符'1'和数字1是不同的
-
压入弹出(可一次性压入多个)
-
排序
- sort() 正序(如[a,b,c,d])
- reverse() 反序
-
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
内部对象
-
标准对象: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);
-
捕获
-
设置
$("#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"; }); });
-
添加元素
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); // 追加新元素 }
-
删除元素
-
操作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 尺寸
-
遍历
- parent() 返回被选元素的直接父元素,只会向上一级对 DOM 树进行遍历
- parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
//返回介于 <span> 与 <div> 元素之间的所有祖先元素 $(document).ready(function(){ $("span").parentsUntil("div"); });
//返回属于 <div> 后代的所有 <span> 元素 $(document).ready(function(){ $("div").find("*"); }); //返回 <div> 的所有后代 $(document).ready(function(){ $("div").find("*"); });
-
过滤
$("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()
$("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); }}); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。