JavaScript
‘use strict’ 严格检查模式,必须写在js第一行
引入
<!--html中-->
<body>
<script type="text/javascript">
alert('world');
</script>
<input type="button" onclick="javascript:" >
</body>
<!--外部引入-->
<head>
<script src="js/test.js"></script>
</head>
变量作用域
//全局变量,函数体内生效,函数内没有找到会向外查找
var a = 5,
b = 10,
//全局对象,所有全局变量绑定在window上
window.a
//唯一全局变量,把属性、方法放到自定义空间中,降低全局命名冲突
var Test = {};
Test.a = 1;
Test.add = function(a,b){
return a+b;
}
//局部变量,大括号内使用
let b = 6
//常量,只读变量
const c = 7;
基本语法
//流程控制 同java
//if、switch、for、while、break、continue
//网页输出
document.write(a);
//控制台输出
console.log(a);
console.info(a);
数据类型
typeof a
- number
- 不区分小数和整数
- NAN:不是一个数字,与所有数值都不相等,not a number
- Infinity:无限大
- 浮点数存在精度问题,(1/3) === (1-2/3) false
- Math.avs((1/3) === (1-2/3) )<0.00000000001 true
- string
- ‘abc’
- “abc”
- 转义:\ ':单引号 \n:换行 \t:tab
- ``:长字符串,可多行
- “hello ${world}”
- boolean
- undefined
- 不等于null
- object
转换:parseInt()
运算符
- 算数运算符
- – ++ + - * / %
- 赋值运算符
- += -= =
- 比较运算符
- < > >= <= != ?
- === //值一样,类型一样
- !== //不等值或不等型
- 逻辑运算符
- && || !
- 位运算符
- << //二进制数左移,空余补0,乘2
- .>> //二进制数右移,空余补0,除以2
- & //与,二进制数对位相与
- | //或,二进制数对位相或
- ^ //异或,二进制数对位相异或
数组
长度可变:arr.length=10;
创建方式
//创建
let arr = new Array(5);
let arr = new Array("01","02","03");
let arr = new Array("a","b","c");
var arr = [01,02,03];
//赋值
arr[0] = "a";
//输出
console.info(arr);
//forEach遍历,ES5.1
arr.forEach(
function(i){
document.write(i);
}
);
//for of
for(var i of arr){
console.info(i);
}
二维数组
//创建
var arr = new Array(5);
for(var i = 0; i < arr.length; i++){
arr[i] = new Array(3);
}
var arr = [[0,0],[1,1],[2,2]];
arr[0][0] = "a";
//遍历
//1.for循环嵌套
for(var j = 0; j < arr.length; j++){
for(var k = 0; k < arr[j].length; k++){
console.log(arr[j][k]);
}
}
//2.for in
for(var i in arr){
console.info(arr[i]);
}
//3.forEach
arr.forEach(
function(i){
console.info(arr[i]);
}
);
数组方法
方法 arr. | |
---|---|
length | 数组长度 |
join(str) | 返回以str分隔的字符串 |
toString() | 返回以逗号分隔的字符串 |
concat(arr[],arr[]) | 返回合并后的数组 |
reverse() | 返回反向数组 |
sort() | 排序,默认字母顺序 |
sort(mysort) | 排序,小→大 |
indexOf(str) | 返回字符的索引 |
slice(start,end) | 获取子数组 |
splice(start,delete,str,…) | 原数组添加并删除,返回删除的值 |
find(myfind) | 返回符合条件的第一个元素 |
filter(myfind) | 返回符合条件的所有元素 |
栈操作 arr. | |
---|---|
push(str,…) | 末端入栈,数组末尾插入值 |
pop() | 最后一个值出栈,删除并返回最后一个值 |
unshift(str,…) | 首端入栈,数组开头插入值 |
shift() | 第一个值出栈,删除并返回第一个值 |
函数
function mysort(a,b){
return a-b;
}
function myfind(a){
return a>10;
}
集合
map
//创建
var map = new Map([['张三',15],['李四',20]]);
//通过key获取值
var age = map.get('张三');
//添加值
map.set('Tom',18);
//删除
map.delete('张三');
//遍历iterator,ES6
for(let kev of map){
console.log(kev);
}
set
无序不重复集合
//创建
var set = new Set([1,2,3,4,5,1]);
//添加
set.add(6);
//删除
set.delete(1);
//是否包含
set.has(2);
//遍历
for(let kev of set){
console.log(kev);
}
函数
系统函数
parselnt
//字符串转换数字
var num = parselnt("30");
parseFloat、
//字符串转换浮点数
var num = parseFloat("3.14");
isNaN
/*是否为数字,is not a number*/
var b = isNaN(20) //f
eval
//执行字符串内容
var num = eval("2*2") //4
自定义函数
不支持函数重载
//方式一
function myfunction(a,b){
return a-b;
}
//方式二
var myfunction = function(a,b){
return a+b;
}
//调用
myfunction(1,2);
//手动抛出异常
throw 'not a number';
argument
//代表函数传进来的所有参数,是一个数组
function myf(){
for(let i = 0; i < argument.length; i++){
console.log(argument[i]);
}
}
myf("1","2","...");
rest
//获取已定义参数之后的所有参数。ES6
function myfunction(a,b,...rest){
return a-b;
}
apply
/*控制this指向*/
function getAge(){
var now = new Date().getFullYear();
return now-this.birth;
}
var person = {
name: "张三",
birth: 2000,
age: getAge
}
getAge.apply(person,[]); //指向person,参数为空
面向对象
对象
//创建
var person = {
name: "张三",
birth: 2000,
tags: [01,02,03]
age: function(){
var now = new Date().getFullYear();
return now-this.birth;
}
}
var stutent = new Object();
//使用
person.name;
person.age();
//删除属性值、添加属性
delete person.name;
stutent.name = "张三";
//判断属性是否在对象中
'age' in person;
//判断属性是否自身拥有
person.hasOwnProperty('age');
原型对象
var person = {
eat: function(){
console.log(this.name + 'eat...');
}
};
var student = {
name: "张三"
};
//原型对象
student.__proto__ = person;
student.eat();
//
function Student(name){
this.name = name;
}
//给student新增一个方法
Student.prototype.hello = function(){
alert('hello')
};
Class
class继承,ES6
//定义一个类
class Person{
//构造器
constructor(name){
this.name = name;
}
//方法
hello(){
alert('person')
}
}
//继承
class Student extends Person{
//构造器
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('student')
}
}
//使用
var tom = new Person("Tom");
tom.hello();
var tim = new Student("Tim",6);
tim.hello();
tim.myGrade();
原型链
继承
事件
状态事件
- onload:文档装载完毕
- onunload:推出文档
- onchange:值发生变化
- onfocus:获得焦点
- onblur:失去焦点
- onsubmit:标点提交
键盘事件
- onkeypress:按过键盘
- onkeydown:键盘按下
- onkeyup:键盘弹起
鼠标事件
onclick:单击
ondblclick:双击
onmousedown:鼠标按下
onmouseup:鼠标弹起
onmouseover:鼠标移入
onmouseout:鼠标移出
使用
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick() = function(){
alert("点击事件");
}
}
阻止冒泡事件
function f(event){
event.cancelBubble = true;
}
常用对象
String
方法 str. | |
---|---|
length | 字符串长度 |
toLowerCase() | 转换为小写 |
toUpperCase() | 转换为大写 |
charAt(index) | 返回索引所在字符 |
charCodeAt(index) | 返回索引所在字符的unicode |
indexOf(str,index) | 返回字符的索引,从index开始 |
lastIndexOf() | 反向查找,返回字符的索引 |
match() | 返回匹配到字符串 |
search() | 返回字符串首字母的索引 |
substr(start,length) | 截取 |
substring(start,end) | 截取,前闭后开 |
slice(start,end) | 同上,可写负值 |
replace(old,new) | 替换第一个字符 |
split(str) | 返回以str分割成的字符串数组 |
concat(str) | 字符串连接 |
Date
用于操作日期和时间
var now = new Date(); //返回当前时间
now.getFullYear(); //年
now.getMonth(); //月 0~11*
now.getDate(); //日 1~31
now.getDay(); //星期 0~6*
now.getHours(); //时 0~23
now.getMinutes(); //分 0~59
now.getSeconds(); //秒 0~59
now.getTime(); //时间戳
//转换
var now = new Date(1578106175991); //时间戳转换为时间
//本地时间
now.toLocaleString()
now.toLocaleDateString()
now.toLocaleTimeString()
//GMT时区
now.toGMTString()
//时间转字符串
now.toDateString()
now.toTimeString()
Math
用于执行常用的数学任务,它包含了若干个数字常量和函数
//小数向上舍入
Math.ceil()
//小数向下舍入
Math.floor()
//小数四舍五入
Math.round()
//随机数,同java
Math.random()
json
json是一种轻量级的数据交换格式
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
- 对象:{}
- 数组:[]
- 键值对:key : value
var user = {
name: "张三",
age: 5
}
//转化为json字符串
var jsonUser = JSON.Stringify(user);
//json转化为对象
var user = JSON.parse('{"name":"张三","age":5}')
Bom
浏览器对象模型 browser object model
- window
- history
- location
- document
- form
- …
window
代表浏览器窗口
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
window.location = "url"; //跳转页面
//window. 可省略
//警告弹窗
alert("hello");
//提示框,返回输入内容
var str = prompt("提示","默认值");
//确认框,返回true、false
var b = confirm();
//打开一个新的浏览器窗口,加载给定 URL 所指定的文档
open('url')
//关闭浏览器窗口
close()
//在指定的毫秒数后调用函数或计算表达式
var myTime = setTimeout('函数',3000)
//停止
clearTimeout('myTime')
//按照指定的周期(以毫秒计)来调用函数或表达式
var myTime = setInterval('函数',1000)
//停止
clearInterval('myTime')
history
浏览器的历史记录
history.back() //后退
history.forward() //前进
history.go(-1) //-1后退、1前进
location
当前页面的url信息
location.host //设置或返回主机名和当前URL的端口号
location.hostname //设置或返回当前URL的主机名
location.href //设置或返回完整的URL
//刷新网页
location.reload()
//定位到指定网址
location.assign('url')
//替换当前网址,不能返回
location.replace('url')
document
当前页面
document.referrer //返回前一页url
document.URL //返回当前页url
document.title //返回标题
document.cookie //返回cookie
//向文档写文本、HTML表达式或JavaScript代码
document.write()
//返回指定id的第一个对象的引用
var i = document.getElementById('id')
i.value //属性:值
i.innerHTML //属性:html文本
//返回指定名称的对象的集合
document.getElementsByName()
//返回指定标签名的对象的集合
document.getElementsByTagName()
//返回指定类名的对象的集合
document.getElementsByClassName()
//返回带有指定css选择器对象(数组)
document.querySelector("css选择器")
document.querySelectorAll("css选择器")
navigator
封装了浏览器信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigatorplatform
screen
屏幕尺寸
screen.width
screen.heigth
screen.availWidth
screen.availHeigth
Dom
文档对象模型 document object model
节点关系
<div id='d'>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
let d = document.getElementsById('d');
//返回当前节点的父节点、子结点
d.parentNode
d.childNode
//返回第一个子节点、最后一个子节点
d.firstChild
d.lastChild
//返回下一个节点、上一个节点
d.nextSibling
d.previousSibling
//返回元素节点(不包含回车)
d.parentElement
d.children
d.firstElementChild
d.lastElementChild
d.nextElementSibling
d.previousElementSibling
</script>
创建节点
//创建元素对象
var img = document.createElement("标签名称");
//设置属性、属性赋值、删除属性、获取属性
img.setAttribute("属性名","属性值");
img.width = "200";
img.removeAtttribute("属性名");
img.getAttribute("属性名");
添加节点
document.getElementById('div').
//追加a
appendChild(a)
//b前加a
insertBefore(a,b)
//a替换old
replaceChild(a,old)
更新节点
会产生覆盖
//获取(设置)值
d.getAttribute('属性名')
d.getAttribute('属性值','属性名')
//更新文本
d.innerText = '123'
d.innerHTML = '<h1>123<h1>'
//操作CSS
d.style.color = 'red'
d.style.fontSize = '20px'
d.style.padding = '10px'
删除节点
先获取父节点,再通过父节点删除自己
var s = document.getElementsById('id');
var f = self.parentElement;
f.removeChild(p1);
f.removeChild(f.children[0]);
表格操作
- 表格对象
- 属性:
- rows 获取表格中多有的行对象
- 方法:
- insertRow(“插入行的位置索引”)
- deleteRow(“行的位置索引”)
- 属性:
- 行对象
- 属性:
- cells 所有一行中所有的单元格对象
- rowIndex 获取行的位置索引
- 方法:
- insertCell(“位置”)
- deleteCell(“位置”)
- 属性:
- 单元格对象
- 属性:
- innerHTML
- align
- className
- cellIndex
- 属性:
属性
var tab_obj = document.getElementById("tab");
//表格行数
var rows = tab_obj.rows;
rows.length;
方法
tableRow、tableCell
//插入行,传入索引位置(0起始)
var row_obj = tab_obj.insertRow(rows.length);
//插入单元格
row_obj.insertCell(0).innerHTML = "张三";
row_obj.insertCell(1).innerHTML = "20";
//更新单元格内容
var cells = rows[1].cells;
cells[0].innerHTML = "李四";
cells[1].innerHTML = "19";
//删除单元格,传入索引位置(0起始)
row_obj.deleteCell(0)
//删除行,传入索引位置(0起始)
tab_obj.deleteRow(1)
表单验证
<from action="">
<p>
用户名:<input type="text" name="username" id="username"><br/>
密码:<input type="password" name="password" id="pwd">
</p>
</from>
<script>
var input_text = document.getElementById('username');
//修改输入框的值
input_text.value = '123';
</script>
jQuery
工具类,jQuery库javascript函数
导入:
<script src="jquery-3.6.0.js" type="text/javascript"></script>
使用:$(选择器).事件(函数)
jquery对象和js对象互转
//jquery→js
jquery对象[0]
jquery对象.get(0)
//js→jquery
$(js对象)
选择器
//基础选择器
$("同css选择器").事件
//li标签的第一个元素
$("li:first")
//li标签的最后一个元素
$("li:last")
//li标签的偶数元素(0开始)
$("li:even").test()
//li标签的奇数元素
$("li:odd")
//li标签索引为2的元素(0开始)
$("li:eq(2)")
//li标签索引大于2的元素
$("li:gt(2)")
//li标签索引小于2的元素
$("li:lt(2)")
//li标签索引不为2的元素
$("li:not(:eq(2))")
//div标签中为空的元素(回车也算)
$("div:empty")
//获取隐藏p标签的内容
$("p:hidden").html()
//属性选择器
$("[name]").val("admin")
$("[name=uname]").val()
/*等于=、包含*=、开头^=、结尾$=*/
//所有input元素
$("input")
//input标签下text(password)属性元素
$("input:text")
$("input:password")
//已选择的元素
$("select:option:selected")
$("input:checkbox:checked")
$("[name=hobby]:checked")
//子元素选择
$("ul li:nth-child(2)")
$("ul li:first-child")
//被选中的多选框
$(["type=checkbox]:checked")
//this是js对象不能使用jquery函数
this
$(this).val()
效果
//隐藏、显示、显示/隐藏(毫秒,函数)
hide(1000)
show(2000,function(){})
toggle(3000);
//淡入、淡出、切换(毫秒,函数)
fadeIn(1000);
fadeOut(2000,function(){});
fadeToggle(3000);
//滑动
sildeUp()
sildeDown()
sildeToggle()
//动画
animate({
left: '50px',
opacity: '0.5',
height: '100px',
width: '100px'
})
事件
状态事件
//onload
$(function(){
})
//失去焦点
blur()
//获得焦点
focus()
//改变
change()
鼠标事件
//点击
click()
//双击
dblclick()
//悬停
mouseover()
//离开
mouseout()
键盘事件
操作
dom操作
//设置或返回文本、超文本、值
text("123")
html()
val()
//结尾添加
append("<a href='http://www.baidu.com'>百度</a>")
//开头添加
prepend()
//被选元素之后添加
after()
//被选元素之前添加
before()
//删除被选元素和子元素(删除指定内容)
remove("tr")
//删除被选元素子元素
empty()
css
css("color","black").css("background-color","blue")
//添加、删除样式表
addClass("mycss")
removeClass("mycss")
.mycss{
color: pink
}
属性
//设置、获取attribute,src、href、width...
attr("src","/img/1.jpg")
attr("src")
//设置、获取property1.6+,checked、selected、disabled...
prop("checked","true")
prop("checked")
遍历
$("ul li").first()
$("ul li").last()
$("div").children()
$("span").parent()
$("span").parents()
next()
nextAll()
prev()
prevAll()
//遍历
$.each(list,function(index,element){
})
遍历表格数据
<table style="border-collapse: collapse;">
<tr">
<td>测试1</td>
<td>测试2</td>
<td>操作</td>
</tr>
<tbody id="tableData"></tbody>
</table>
$("#tableData").html("");
for (const obj of data.rows) {
let tbody = $("#tableData").get(0);
let row = tbody.insertRow();
row.innerHTML = "<td style='display: none'>" + obj.id + "</td>"
+ "<td>" + obj.test1 + "</td>"
+ "<td>" + obj.test2 + "</td>"
+ "<td><a href='javascript:void(0);' class='delete'>删除</a></td>"
}