一篇随笔学会JavaScript
JavaScript
1.helloWorld
- 是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，将文本格式的字符代码发送给浏览器进行解释运行，用于控制网页的行为，处理一些简单的动作和功能，代码是写在方法中，方法由一个个事件调用。
- 原生JS开发，按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持
- JavaScript框架
- jQuery：
- 简化了DOM操作
- DOM操作过于频繁，影响前端性能
- Angular：Google收购的前端框架
- 特点是将MVC模式搬到了前端并增加了模块化开发的理念，采用TypeScript语法
- 缺点是版本迭代不合理
- React：Facebook出品，高性能的JS框架
- 特点是提出了【虚拟DOM】用于减少真实DOM的操作，在内存中模拟DOM，有效提升渲染效率
- 缺点是使用复杂，需要额外学习【JSX】语言
- Vue：渐进式JS框架
- 逐步实现新特性
- 综合了Angular（模块化）和React（虚拟DOM）的优点
- Axios：因为Vue的边界很明确，就是为了处理DOM，所以不具备通信能力，需要一个额外使用的通信框架与服务器交互，或者是jQuery的AJAX通信功能
- jQuery：
- ant-design有很多好看的前端组件
- 引入JavaScript
- 内部标签使用
- 外部标签引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
在script标签内写js代码
-->
<!-- <script>-->
<!-- alert('hello world!') ;-->
<!-- </script>-->
<!-- 外部引入-->
<script src="js/helloWorld.js"></script>
</head>
<body>
</body>
</html>
2.浏览器控制台的使用
- 基本语法
//1.定义变量： 变量类型 变量名 = 变量值；
var score = 90;
name = "wch";
//alert(num);
//2.条件控制： 可以嵌套使用
if(score>60&&score<70){
alert("1");
}else if (score>70&&score<80){
}else {
alert("other")
}
//3.注释和多行注释： /* */
//JS严格区分大小写
//console.log(score)在浏览器控制台打印变量，sources里有源码，可以打断点调试
3.数据类型快速浏览
- 数据类型：数值、文本、图形、音频、视频……
- number类型，不区分小数整数
- ·······
//变量,不能以数字开头
var $a;
var s_q;
var 王者荣耀="倔强青铜";
//number类型
123//整数
123.1//浮点数
1.123e3//科学计数法
- 99//复数
NaN//not a number
Infinity//表示无限大
//字符串类型
'abc'
"abc"
//布尔值
true
false
// 逻辑运算
// &&
// ||
// !
// 比较运算符
// ==类型不一样可以，值一样就行
// ===完全绝对等于
// NaN===NaN（×），与所有数值都不相等，包括自己
// 只能通过isNaN（NaN）返回true
// （1/3）===（1-2/3）（×）不相等，存在精度损失
// 尽量避免使用浮点数进行运算
//null 空
//undefined 未定义
//数组类型
//数组下标如果越界就会报undefined错误，未定义
var arr=[1,2,3,4,5,'hello',null,true]
//对象
//数组是中括号，对象是大括号
//每个属性之间用，逗号隔开
//Person person = new Person(1,2,3,4,5);
var peron = {
name:"wch",
age:3,
tags:['js','java','web','...']
}
4.严格检查模式strict
- 预防js随意性导致产生的问题
//严格检查模式，会报错
'use strict'
//默认为全局变量，没有规范即可以执行，容易造成混乱
i = 1;
//局部变量
var a = 1;
//ES6后，局部变量用let定义
let b = 1;
5.字符串类型
- 正常字符串使用双引号单引号包裹都可以
- 注意转义字符 \
- 多行字符串
- 模板字符串 $
- 字符串长度
'use strict'
// \转义
console.log('a \n b');//换行
console.log("a \t");//table
console.log("a \u4e2d");//中 unicode字符
console.log("\x41");//Asc11字符 A
// ` `反引号
let msg1=`hello
world
你好
呀`;
let name='wch';
let age=3;
let msg2=`你好呀，${name}`;
let student='student';
//字符串长度student.length
//自动转换为数组student[0]=s
//student.toUpperCase()函数转换为大写
//student.toLowerCase()函数转换为小写
//student.indexOf（‘t’）获取t出现的位置：2
//student.substring(1,3)截取1-3位置的字符串：tu [),包含前，不包含后
6.数组类型
- Array可以包含任意数据类型
var arr=[1,2,3,4,5,6]
arr[0]
arr[0=1]
//通过下标取值、赋值
- .length长度
arr.length =10;
//假如给length赋值，数组大小会发生变化，多余的会变成空
arr.length=2;
//缩短，只剩下前两个元素
- indexOf
arr.indexOf(2);
//通过元素获得下标索引，arr.indexOf（2）=1
//字符串的"1"和数字的1是不同的
- slice()截取Array一部分，返回新数组
arr.slice(3);//从第三个开始往后所有
arr.slice(1,5);//截取2，3，4，5,包含前面不包含后面
- push、pop
arr.push('a','b')//在尾部压入
app.pop()//弹出尾部的一个元素
- unshift、shift
arr.unshift('a','b')//在首部压入
arr.shift()//去掉首部的元素
- sort()排序
arr.sort()
- reverse元素反转
arr.reverse()//倒序
- concat()拼接
(3)[a,b,c]
arr.concat(1,2,3)//拼接输出
(6)[a,b,c,1,2,3]
arr
(3)[a,b,c]
//concat没有修改数组，只是返回了一个新的数组
- join连接符
//打印拼接数组，使用特定的字符串链接
(3)[a,b,c]
arr.join('-')
a-b-c
- 多维数组
arr[][]={[1,2],[3,4]}
arr[1][1]
1
7.对象类型
- 若干个键值对,JavaScript中所有键都是字符串，值是任意多项
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值,
}
- 可以动态删减属性
delete person.name//删除person的name属性
- 可以动态添加属性
person.haha='haha'//直接赋值添加属性haha
- 判断属性是否在对象中
'age' in person//判断age是否在person中
true
//继承
'toString' in person
true
8.分支和循环
- if else
if(age>3){
alert('haha');
}else if(age>20){
alert('555')
}else{
alert('haihaihai')
}
- while
while(age<100){
age=age+1;
console.log(age);
}
- for
for(let i=0;i<100;i++){
console.log(i);
}
- do while
do{
age=age+1;
console.log(age);
}while(age<100)
- forEach循环(函数)
age.forEach(function (value)){
console.log(value)
}//遍历数组输出
- for in循环
for(var num in age){
console.log(age[num])//遍历数组，num是索引、下标
}
9.Map和Set集合
- ES6才出现的
- Map
var map=new Map([['tom',99],['jerry',80],['jack',90]]);
var name=map.get('tom');
console.log(name);
//通过名字就可以获得分数
map.set('admin',123456)
map.delete('tom')//删除
3.Set:无序不重复的集合
var set = new Set([3,1,1,1,1,1])
//set可以去重
console.log(set.has(3))//判断是否包含某个元素
10.iterable迭代
- ES6新特性
- 通过for of迭代数组
var arr=[3,4,5];
for(var x of arr){
console.log(x);
}
- 迭代遍历map，只能用for of
var map=new Map([['tom',99],['jerry',80],['jack',90]]);
for(let x of map){
console.log(x);
}
- 遍历迭代set，也可以用for of
var set = new Set([3,1,1,1,1,1])
for(let x of set){
console.log(x);
}
11.函数的定义和参数的获取
- function定义一个函数
- JavaScript在浏览器中每一行自动加分号
function abs(x){
if(x>=0) return x;
else return -x;
}
- 参数问题：可以传任意参数也可以不传递参数
- 异常判断,可以手动抛出异常
if(typeof x!='number'){
throw "not a number"
}
- arguments是一个Js免费赠送的关键词，代表传递进来的所有参数，是一个数组
arguments.length//自动获取数组的大小
//问题：arguments包含所有参数，有时想要使用多于参数操作需要排除已有参数
- …rest，ES6引入新特新，获取除了已定义的参数之外的所有参数
function aaa(a,b,...rest){
console.log("a=>"+a)
console.log("b=>"+b)
console.log(rest)
}
//rest参数只能在最后，用...标识
12.变量的作用域、let、const
- 变量的定义是有作用域的，想要在函数体外使用函数内局部变量，需要 闭包
'use strict'
function myFunc() {
let x = 1;
x = x + 1;
}
- 函数变量具有独立性
- 内部函数的变量可以访问外部函数变量
- 内外函数中两者局部变量重名，内部函数屏蔽外部函数变量，自己只关注于自身函数的操作
- 提升变量的作用域，先声明，后赋值
function qj(){
var x='x'+y;
console.log(x);
var y ='y';
}
//结果：xundefined
//说明：js执行了引擎，自动提升了y的声明，但不会提升变量y的赋值
//结论：先定义变量，再赋值
var a,b,c,d,r,f.....
- 全局变量
- 全局对象windows
var x='xxx';
alert(x);
alert(windows.x);
windows.alert（x）;
//所有全局变量都会绑定在windows下
//alert本身也绑定在windows下的成员函数
- JS只有一个全局作用域，任何全局变量、函数，都是windows的成员
- 所有全局变量都会绑定到windows中，所以在多个js文件中可能会有相同名字的全局变量，为了避免冲突，我们采用唯一全局变量
//唯一全局变量
var kuangAPP={};
//定义全局变量
kuangAPP.name='狂神'
//把自己的代码放进唯一命名空间中，降低命名冲突
- 局部作用域let，ES6新引出，解决局部作用域冲突的问题
- 常量const，ES6引出
const PI='3.14';//只读变量
13.方法的定义、调用、apply
- 函数放到对象中，就可以称之为方法
var kuangshen={
birth:2020;
//方法
age:function(){
//今年-出生的年
let now=new Date().getFullYear();//当前日期
return now-this.birth;
}
}
- 方法调用必须带（）
- this：默认指向调用它的对象
- apply：在js中控制this的指向
function()getAge{
//今年-出生的年
let now=new Date().getFullYear();//当前日期
return now-this.birth;
}
var kuangshen={
name:'qj'
birth:2000
}
getAge.apply(kuangshen,[]);
//代表this指向kuangshen这个对象，参数为空
14.Date日期对象
- 内部对象，日期和时间
var now=new Date();//当前时间
now.getFullYear()//当前年份
now.getMonth()//当前月份0-11月
now.getDate()//日
now.getDay()//星期
now.getHours()//时
now.getMinutes()//分
now.getSecond()//秒
now.getTime()//时间戳 1970.1.1.0：00：00到现在的毫秒数
now.toLocaleString()//本地实际
15.JSON对象
- json是主流，代替xml，javascript object notion，轻量级数据交换格式，简洁和清晰的层次结构使其易于阅读和理解，有效提高网络传输效率
- 在js中一切皆为对象，任何js支持的类型都可以用json来表示
- 格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都使用key:value
var user(){
name:"wch"
age:"3"
sex:"男"
}
//对象转换成json字符串
var jsonUser= JSON.stringify(user)//转换方法
//字符串转换成对象
var obj=JSON.parse({'"name":"wch","age":"3","sex":"男"'})
- json和js对象的区别
//对象
var user={name:"wch"，age:"3"，sex:"男"}
var json='{"name":"wch","age":"3","sex":"男"}'//字符串类型，单引号
- Ajax
- 原生js写法：xhr异步请求
- jQuery封装好的：$(”#name”).ajax(””)
- axios请求
16.面向对象原型继承
- js的面向对象
- 类：模板
- 对象：具体实例
- 类是对象的抽象，对象是类实例化后的具体表现
- 原型：类似于父类
//小明的原型是小刚，可以调用小刚里的成员方法，实际上就是继承
xiaoming._proto_=xiaogang;
17.面向对象class继承
- class关键字ES6才开始引用
//1.以前，定义一个类，给student新增一个方法
function Student(name){
this.name=name;
}
Student.prototype.hello=function (){
alert('hello')
};
//2.ES6之后利用class关键字
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello');
}
}
- 继承
//2.ES6之后利用class关键字
class Student{
//构造器为constructor
constructor(name) {
this.name=name;
}
hello(){
alert('hello');
}
}
var xiaoming=new Student("xiaoming");
var xiaohong=new Student("xiaohong");
xiaoming.name;//xiaoming
xiaoming.hello();//hello
//3.class继承，extends
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
}
myGrade(){
alert('我是小学生')
}
}
var xiaogang=new xiaoStudent("xiaogang",1);
//4.本质仍然是原型继承_proto_:Student
- 原型链：最终都会指向Object类，Object的构造器又是Object，形成一个原型环链
- js中每个函数都有一个prototype属性，指向函数原型对象
18.操作BOM对象
- B Of Model:浏览器对象模型
- js与浏览器的关系
- 设计js就是为了在浏览器中运行
- IE 6-11 已退役
- Chrome -Windows
- Safari -Apple
- FireFox -Linux
- 第三方浏览器
- QQ浏览器
- 360浏览器
- ······
- 内核仍然是三大浏览器
- window对象：代表浏览器窗口，可以得到一些浏览器的属性，width、height······
- navigator对象：封装了浏览器的信息，appname、appVersion、userAgent、platform······检测浏览器与主机是否适配、兼容，会被人为修改，很少使用
- screen对象代表全屏幕属性：width、height屏幕分辨率
- location对象代表当前页面的URL信息：host主机、href当前网页地址、protocol协议、reload()重新加载刷新（方法，前面的都是属性）、assign(新的url)跳转页面到新的url页面
- document文档对象代表当前页面文档信息，html dom文档树：title标题、getElementById(’app’)获取具体的文档树的节点（id=app的）、cookie
- 劫持cookie的原理：通过js文件get document.cookie上传到别的服务器，实例：网页登录淘宝，网页的天猫也会自动登录，通过服务器端设置cookie：httpOnly属性来增加安全性，设置为只读
- history对象：back返回上一个页面、forward下一个页面
19.获得DOM节点
- document of model：文档对象模型
- 操作DOM的核心：浏览器网页就是一个DOM树形结构
- 更新：更新DOM节点
- 遍历：得到DOM节点
- 通过id
- ······
- 删除：删除一个节点
- 添加一个新的节点
- 要操作dom节点，就必须先获得
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
<script>
//对应css的选择器，标签、id、类名
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
//获得父节点下的所有子节点
let children = father.children;
// father.firstChild
// father.lastChild
</script>
</html>
20.更新DOM节点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1"></div>
</body>
<script>
//1.操作文本
let id1 = document.getElementById('id1');
id1.innerTxet = '123';//修改文本的内容
id1.innerHTML = '<strong>123</strong>'//可以解析HTML文本标签
//2.可以修改CSS属性
id1.style.color='red';//修改颜色
id1.style.fontSize='200px';//修改字体大小
id1.style.padding='2em';//内边框
</script>
</html>
21.删除DOM节点
- 删除节点的步骤：
- 获取父节点
- 再通过父节点删除自己
<body>
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
<script>
//1.方法1：删除节点
let self = document.getElementById('p1');//p1的节点
let father = self.parentElement;//获取p1的父节点
father.removeChild(self);//利用父节点删除自己
//2.方法2：根据指定下标来移除
father.removeChild(father.children[0]);//注意动态删除，下标时刻在变化
</script>
22.创建和插入DOM节点
- 我们获得了某个DOM节点，假设这个节点为空，可以用innerHTML增加元素，若已经有元素，不可以使用，不然会覆盖
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let
js = document.getElementById('js');
list = document.getElementById('list');
//1.append追加子元素,将已存在标签移到别的标签中
list.appendChild(js);
//2.create创建新节点
let newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';//赋一个id
newP.innerText = 'hello,newP';//添加内容
//3.创建一些特殊的标签节点：script、link······
let myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');//设置节点里的所有属性
//4.创建style标签来更改css属性
let myStyle = document.createElement('style');
myStyle.setAttribute('type', 'text/css');//创建style标签
myStyle.innerHTML = 'body{background-color:green;}';//设置css属性
document.getElementsByTagName('head')[0].appendChild(myStyle);//把style标签追加到head后才能实现
//5.insertBefore新建节点插到前面
let
ee = document.getElementsByTagNameNS('ee');
js = document.getElementsByTagNameNS('js');
ee.insertBefore(js,ee);//把js插到ee前
</script>
</body>
23.获得和设置表单的值
- 操作表单涉及一个验证的问题
- 表单
- form
- 本是也是DOM树的一部分
- 文本框 text
- 密码框 password
- 下拉框 select
- 单选框 radio
- 复选框 checkbox
- 隐藏域 hidden
- ······
- 目的：提交信息
- 获得要提交的信息
<body>
<form action="post">
<span>用户名</span><input id="userName" type="text"><br>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</form>
<script>
let input_text = document.getElementById('userName')
//1.得到用户名输入的数据
input_text.value;
//2.修改用户名的数据
input_text.value='123';
//3.获得单选框、多选框当前的值
let
boy_radio=document.getElementById('boy');
girl_radio=document.getElementById('girl');
boy_radio.checked//为true则被选中
girl_radio.Checked=true//赋值，强行选择
</script>
</body>
24.表单提交验证及前端密码MD5加密
- MD5工具类：
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
1.表单绑定提交事件
onsubmit绑定一个提交检测的函数，true、false
将这个结果返回表单，用onsubmit、接受
-->
<form action="" method="post" onsubmit="aaa()">
<p>
<span>用户名</span><input id="userName" type="text">
</p>
<p>
<span>密码</span><input id="password" type="password">
</p>
<!-- 隐藏域加密-->
<input id="md5-password" name="password" type="hidden">
<!--
2.按钮绑定提交事件，绑定一些事件，
onclick，被点击时会发生
-->
<button onclick="aaa()" type="submit">提交</button>
</form>
<script>
function aaa() {
let pwd = document.getElementById('password');
let uname = document.getElementById('userName');
console.log(uname.value);
console.log(pwd.value);
//1.直接使用MD5加密算法
pwd.value = md5(pwd.value);//输入后将密码加密成字符串
console.log(pwd.value);
//2.hidden通过隐藏域加密
let md5pwd=document.getElementById('md5-password');
pwd.value=md5(pwd.value);
md5pwd.value = md5(pwd.value);
return true;//true通过提交、false阻止提交
}
</script>
</body>
25.jQuery公式
- js和jQuery的关系
- jQuery是一个库，存在大量的js函数和方法
- 获取jQuery
- jQuery.cuishifeng.cn
- jQuery.com
- 引入jQuery利用在线的cdn https://www.jq22.com/cdn/
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
- 公式：$(seleector).action()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="text-jQuery">点我</a>
<script>
document.getElementById('text-jQuery');
//选择器就是css的选择器
$('#text-jQuery').click(function (){
alert('hello,jQuery');
})
</script>
</body>
26.jQuery选择器
<script>
//原生js选择器
//标签选择器
document.getElementsByTagName()
//id选择器
document.getElementById()
//类选择器
document.getElementsByClassName()
//jQuery 包含所有css中的选择器
$('p').click();//标签选择器
$('#id1').click();//id选择器
$(".class1").click();//类选择器
</script>
27.jQuery事件
- 分类：
- 鼠标事件
- 键盘事件
- ······
- 鼠标事件：down按下、move移动常用
28.jQuery操作DOM元素
<script>
//操作dom获得值，到参数则设置值
$('#test li[name=py]').text();
$('#test').html();
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<ul id="test">
<li class="js">js</li>
<li name="py">python</li>
</ul>
<script>
//改css属性，传键值对
$('#test li[name=py]').css("color","red");
//元素隐藏和显示
$('#test li[name=py]').hide();//隐藏，本质display=none
$('#test li[name=py]').show();//显示
</script>
</body>
</html>
29.调试
- 笨方法：通过每一行输出一个0来一行行找错误
- 利用浏览器对源代码的预览界面，通过sources进行调试
30.案例
1. 点击即删除
// 点谁删谁
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
this.parentNode.removeChild(this);
}
}
}
2. confirm(提示信息)
确认框，用户点击控件上的确定或者取消按钮，返回一个Boolean值，确定为true，取消为false
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
// 确定框
if (confirm("确定删除吗？")) {
this.parentNode.removeChild(this);
}
}
}
}
确定删除xx吗
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
// 确定框
//确定删除的内容
var text = this.firstChild.nodeValue;
if (confirm("确定删除" + text + "吗？")) {
this.parentNode.removeChild(this);
}
}
}
}
3. 员工管理系统 添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
text-align: center;
}
table {
border-collapse: collapse;
margin: 0px auto;
}
table,
td,
th {
border: 1px solid black;
padding: 10px;
}
</style>
<script type="text/javascript">
function removeTr(aNode) {
var trNode = aNode.parentNode.parentNode;
var nameText = trNode.getElementsByTagName("td")[1].firstChild.nodeValue;
if (confirm("确定删除" + nameText + "的信息吗?")) {
trNode.parentNode.removeChild(trNode);
}
}
window.onload = function() {
var tab = document.getElementById("tab");
var aNodes = tab.getElementsByTagName("a");
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
removeTr(this);
}
}
document.getElementById("add").onclick = function() {
var empnoText = document.getElementById("empno").value;
var empnameText = document.getElementById("empname").value;
var empemailText = document.getElementById("empemail").value;
var empnoTextNode = document.createTextNode(empnoText);
var empnameTextNode = document.createTextNode(empnameText);
var empemailTextNode = document.createTextNode(empemailText);
var deleteText = document.createTextNode("删除");
var deleteaNode = document.createElement("a");
deleteaNode.appendChild(deleteText);
deleteaNode.href = "#";
deleteaNode.onclick = function() {
removeTr(this);
}
var empnoTdNode = document.createElement("td");
var empnameTdNode = document.createElement("td");
var empemailTdNode = document.createElement("td");
var deleteTdNode = document.createElement("td");
empnoTdNode.appendChild(empnoTextNode);
empnameTdNode.appendChild(empnameTextNode);
empemailTdNode.appendChild(empemailTextNode);
deleteTdNode.appendChild(deleteaNode);
var trNode = document.createElement("tr");
trNode.appendChild(empnoTdNode);
trNode.appendChild(empnameTdNode);
trNode.appendChild(empemailTdNode);
trNode.appendChild(deleteTdNode);
tab.appendChild(trNode);
}
}
</script>
</head>
<body>
<h3>员工管理系统</h3>
编号:<input type="text" id="empno" />
姓名:<input type="text" id="empname" />
邮箱:<input type="text" id="empemail" />
<br /><br />
<button id="add">添加</button>
<br /><br />
<hr />
<table id="tab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>abc@163.com</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>lisi@163.com</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>wangwu@163.com</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
31.隐藏和显示
元素节点.style.display可以控制该元素节点的隐藏或显示
值：none--------隐藏
list-item--------------以列表的方式显示
block----------------以块级元素的方式显示
window.onload = function() {
var dd = document.getElementsByTagName("dd");
for (var i = 0; i < dd.length; i++) {
dd[i].style.display = "none";
}
var dt = document.getElementsByTagName("dt");
for (var j = 0; j < dt.length; j++) {
dt[j].onclick = function() {
menu(this.parentNode);
}
}
}
function menu(o) {
var dd = o.getElementsByTagName("dd");
for (var i = 0; i < dd.length; i++) {
if (dd[i].style.display == "none") {
dd[i].style.display = "block";
} else {
dd[i].style.display = "none";
}
}
}
1. 置灰
disable属性：表示置灰，取值为boolean，true表示置灰，false表示可用
2. readOnly
表示是否只读，true表示只读，false表示可写
注意：disable与readOnly的区别，如果某控件是disable状态，则数据无法提交到后端，如果是readOnly状态，表示数据可以提交到后端
3. innerHTML
表示某个元素节点下的子元素的html代码
给其赋值还可以动态改变子元素的html代码
32. 外联接Js文件
<script type="text/javascript" src="./hello.js"></script>
33. 日期插件
调用My97DatePicker中WdatePicker.js的WdatePicker方法
<script type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script>
日期：<input type="text" onclick="WdatePicker()" />
34. jQuery常用
前端框架，几乎所有的项目都离不开jQuery框架
封装了大量的js代码，是一个流行的前端框架
我们将其导入html后即可使用
1. 语法
代码全都写在$()中
窗体加载事件:$(function(){})
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
alert("hello jquery!")
})
</script>
</head>
<body>
</body>
</html>
2. 选择器
1. 元素选择器
$("标签名")------选定所有指定标签的元素
2. id选择器
$("#id")--------选定所指定id的元素
3. 类选择器
$(".类名")-------选定所指定类名的元素
4. "*"通配符
选定所有的元素
注意：多个选择器用逗号分隔
5. 属性选择器
[属性]-------属性选择器
[属性名=属性值]-------指定属性值的选择器
注意：多个选择器中间如果没有逗号分隔，那么说明所有的条件都要满足
6. 派生选择器
选择器之间添加空格，表示在第一个选择器的子元素中按照第二个选择器的条件进行筛选
3. js转型jQuery
js对象不能调用jQuery的方法，必须要转型才能使用
注意：this也是js对象，也要转型为$(this)
var p1=document.getElementById("p1");
var $p1=$(p1)
//var $p=$("p");
alert($p1.text());
jQuery同样也可以转型成js对象---------jQuery对象.get(下标)或者jQuery对象[下标]
注意：jQuery对象是数组的形式
4. 常用方法
1. text()
获取某元素节点的文本内容
2. click()
点击事件，注意function写在（）中-------click(function{})
3. css()
改变css样式
例如：$("p").css("color","red")
4. change()
值改变事件，触发条件：值改变、失去焦点
change(function{$(this).css("background","yellow")})
5. mouseenter()
鼠标移上来事件方法
6. mouseleave()
鼠标离开
7. hide()
隐藏
8. show()
展示
9. find()
find(标签名)-----在当前标签中查找指定的子标签
10. is()
is("属性状态")---------判断当前元素节点是否处于某种属性
11. each()
循环遍历jQuery对象的数组
12. val()
获取jQuery对象的value值，如果传参，则表示修改它的value值
13. prop()
获取某个元素节点的属性值，或者是改变
传一个参数是获取值，传两个参数是改变值
<script src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#checkedall").click(function() {
$(":checkbox[name='hobby']").prop("checked", this.checked);
})
$(":checkbox[name='hobby']").click(function() {
$("#checkedall").prop("checked", $(":checkbox[name='hobby']").length
== $(":checkbox[name='hobby']:checked").length);
})
})
</script>
14. empty()
清空，元素节点保留，元素节点下的子元素全部删除
$("#btn1").click(function() {
$("#wz").empty();
})
15. remove()
删除某元素节点，包括所有的子元素
$("#btn2").click(function() {
$("#wz").remove();
})
16. 创建节点
$("html代码")---------括号中直接写html代码
-
appendTo(父节点)---------新节点挂在父节点下最后一个子节点
-
父节点.append(新节点)---------新节点挂在父节点下最后一个子节点
// 在结尾创建节点
$("#btn3").click(function(){
$("<li>西安</li>").appendTo("#city");
})
// 在结尾创建节点
$("#btn3").click(function(){
$("#city").append("<li>西安</li>");
})
-
prependTo(父节点)---------新节点挂在父节点第一个子节点
-
父节点.prepend(新节点)-------------新节点挂在父节点第一个子节点
//在最开头创建节点
$("#btn4").click(function(){
$("#city").prepend("<li>成都</li>");
})
-
兄弟节点.before(新节点)--------新节点挂在兄弟节点的前面
-
新节点.insertbrfore(兄弟节点)----------新节点挂在兄弟节点的前面
//在任意位置兄弟节点前面插入节点
//在广州前面添加武汉节点
$("#btn5").click(function(){
$("#gz").brfore("<li>武汉</li>");
})
- 同理，insertafter和after也是如此，表示将新节点挂在兄弟节点的后面
//在任意兄弟节点后面插入节点
//在广州后面添加天津节点
$("#btn5").click(function(){
$("#gz").after("<li>天津</li>");
})
- 例子：根据点击的是城市还是游戏，输入一个城市或者游戏，将其挂在父节点下
$(function() {
$("#sub").click(function() {
$("<li>" + $("#str").val() + "</li>").appendTo(
$("#" + $(":radio[name='type']:checked").val()));
})
})
17. parent()
parent()------向上找父节点
find(字节点).eq(0)---------向下找节点下的第0个
find(字节点).eq(1)---------向下找节点下的第1个
$(function(){
$("#t1").parent().parent().find("tr").eq(1).css("background-color","yellow");
})
18. $.trim()
$.trim(字符串)---------去除字符串的前后空格
var str=$.trim( $("#str").val() );
alert(str);
19. 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
text-align: center;
}
table {
border-collapse: collapse;
margin: 0px auto;
}
table,
td,
th {
border: 1px solid black;
padding: 10px;
}
</style>
<script src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// jQuery实现test022602.html
//删除方法
function removeTr(aNode) {
var trNode = $(aNode).parent().parent();
var str = trNode.find("td").eq(1).text();
if (confirm("确定删除" + str + "的信息吗？")) {
trNode.remove();
}
}
$(function() {
//删除
$("a").click(function() {
removeTr(this);
})
//新增
$("#add").click(function() {
$("<tr><td>" + $("#empno").val() + "</td><td>" + $("#empname").val() + "</td><td>" + $(
"#empemail").val() + "</td><td><a href='#'>删除</a></td></tr>")
.appendTo($("#tab")).find("a").click(function() {
removeTr(this);
});
})
})
</script>
</head>
<body>
<h3>员工管理系统</h3>
编号:<input type="text" id="empno" />
姓名:<input type="text" id="empname" />
邮箱:<input type="text" id="empemail" />
<br /><br />
<button id="add">添加</button>
<br /><br />
<hr />
<table id="tab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>abc@163.com</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>lisi@163.com</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>wangwu@163.com</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
35. 正则表达式
1 什么是正则表达式
用来校验一个字符串是否合法的工具
校验：邮箱地址、手机号码的格式规则称为正则，每个输入框都要有正则表达式
正则表达式不一定只在jQuery中，原生态的JavaScript也可以
2 在HTML中
在html中，可以利用pattern属性规定正则表达式
//pattern 正则表达式
<!--pattern可以通过脚本之家查找正则表达式-->
<p>自定义邮箱：
<input type="text"name="diymail"pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
3 在jQuery和JavaScript中
在jQuery和JavaScript中，正则表达式定义格式：
①var reg = /^ 正则表达式 $/
②new RegExp = ("^ 正则表达式 $")
校验使用test(字符串)方法，返回一个bool值
$(function() {
$("#btn1").click(function() {
var strtext = $("#str").val();
//定义正则
var reg = /^ 正则表达式 $/;
//或者new RegExp = ("^ 正则表达式 $")`
//校验，用test方法，返回布尔值
alert(reg.test(strtext));
})
})
4 正则的语法
1 "[ ]" 多选一
表示多选一，选一个为true，选多个为false
$("#btn1").click(function() {
var strtext = $("#str").val();
//定义正则
var reg = /^[ab]$/;
alert(reg.test(strtext));
})//a:true,b:true,ab:false
2 "-" 区间
横杠"-"表示一个区间
$("#btn1").click(function() {
var strtext = $("#str").val();
//定义正则
var reg = /^[a-zA-Z]$/;
alert(reg.test(strtext));
})
3 "^" 取反
"^"在中括号"[ ]"中表示取反,表示a-z和A-Z的字母都不行
$("#btn1").click(function() {
var strtext = $("#str").val();
//定义正则
var reg = /^[^a-zA-Z]$/;
alert(reg.test(strtext));
})
4 "\" 转义字符
特殊字符在正则中需要转义字符进行转义，如果特殊字符写在"[ ]" 中，则可以省略，"[ ]"除外
$("#btn1").click(function() {
var strtext = $("#str").val();
//定义正则
var reg = /^[^a-zA-Z$\[\]]$/;
alert(reg.test(strtext));
})//"\["和"\]"都是转义字符，而"$"在[]中无需转义
5 元字符
-
. ---------- 可以代表任意除了换行符（回车键）以外的其他任意单个字符
-
\w ------- 代表任意单个字母数字下划线
-
\W -------代表除了任意单个字母数字下划线的其他字符
-
\s --------单个空格
-
\S --------单个非空格
-
\d --------单个数字
-
\D --------单个非数字
//自定义邮箱
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
6 数量词
？----------------表示？前的字符出现0次或1次
+-----------------表示+前的字符出现1次或者多次
*----------------表示前的字符出现任意次数
{n}-------------表示出现只能n次
{n,}------------表示至少出现n次
{m,n}-----------表示至少出现m次，最多出现n次
$(function() {
$("#btn1").click(function() {
var strtext = $("#str").val();
//定义正则
var reg = /^a{2,5}$/;
alert(reg.test(strtext));
})
})
7 组合
( )-----------包含一个正则表达式，表示一个组合，在后面添加数量词表示组合出现的次数
//一个简易的ip地址的正则表达式
var reg = /^(\d{1,3}\.){3}\d{1,3}$/;
5 练习
编写正则，校验一个最多两位小数的正数或负数
$(function() {
$("#btn1").click(function() {
var strtext = $("#str").val();
var reg = /^\-?\d+(\.\d{1,2})?$/;
alert(reg.test(strtext));
})
})
6 校验相关
1 字符串长度
JavaScript中字符串.length表示字符串的长度
2 阻止默认行为
return false阻止默认行为
3 案例
非空校验
$(function() {
$("#btn1").click(function() {
var strtext = $("#str").val();
if ($.trim(strtext)length > 6) {
alert("长度不能超过6");
return false;
}else if($.trim(strtext)==null||$.trim(strtext)==""){
alert("字符串不能为空");
return false;
}
})
})
小说阅读网站完善登陆界面非空校验
$(function(){
$("#load").click(function(){
var strUername=$("#username").val();
var strPwd=$("#pwd").val();
strUername=$.trim(strUername);
strPwd=$.trim(strPwd);
if(strUername==null||strUername==""){
alert("请输入用户名！");
return false;
}else if(strPwd==null||strPwd==""){
alert("请输入密码！");
return false;
}
})
})
category.js
$(function() {
$("#submit").click(function() {
var categoryName = $("#categoryName").val();
var description = $("#description").val();
if ($.trim(categoryName) == null || $.trim(categoryName) == "") {
$("#message0").empty().html("请输入类别名称");
return false;
} else {
$("#message0").empty();
}
if ($.trim(description) == null || $.trim(description) == "") {
$("#message1").empty().html("请输入类别描述");
return false;
} else {
$("#message1").empty();
}
})
$("#categoryName").change(function() {
if ($(this).val().length > 15) {
$("#message0").html("类别名称长度不能超过15个字符");
$("#submit").prop("disabled", true);
} else {
$("#message0").empty();
checkedSpan();
}
})
$("#description").change(function() {
if ($(this).val().length > 30) {
$("#message1").html("类别描述长度不能超过30个字符");
$("#submit").prop("disabled", true);
} else {
$("#message1").empty();
checkedSpan();
}
})
})
// 统一判断是否将按钮亮起来
function checkSpan() {
var flag = $(".message").text();
if (flag.length == 0) {
$("#submit").prop("disabled", true);
}
}
fictionUser.js
// 统一判断是否将按钮亮起来
function checkSpan() {
var flag = $(".message").text();
if (flag.length == 0) {
$("#submit").prop("disabled", true);
}
}
$(function() {
//校验手机号码是否符合规范
$(":input[name='movephone']").change(function() {
var reg = /^1[345789]\d{9}$/;
if (reg.test(movephone)) {
$("#message").empty();
checkSpan();
} else {
$("#message").empty().html("d对不起，手机号输入不规范");
$(":input[name='submit']").attr("disabled", true);
}
});
})
manager.js
$(function() {
//校验两次密码是否一致
$(":input[name='password2']").change(function() {
var passwd2 = $(this).val();
passwd2 = $.trim(passwd2);
var passwd = $(":input[name='password']").val();
passwd = $.trim(passwd);
if (passwd != passwd2) {
$("#message2").empty().html("对不起，两次输入密码不一致").css("color", "red");
$(":input[name='submit']").attr("disabled", true);
} else {
$("#message2").empty();
checkSpan();
}
});
//检验邮箱地址是否符合规范
$(":input[name='email']").change(function() {
var email=$(this).val();
var reg = /^\w+@\w+\.\w+$/;
if (reg.test(email)) {
$("#emailmessage").empty();
checkSpan();
} else {
$("#emailmessage").empty().html("对不起，邮箱地址输入不规范");
$(":input[name='submit']").attr("disabled", true);
}
});
})
// 统一判断是否将按钮亮起来
function checkSpan() {
var flag = $(".message").text();
if (flag.length == 0) {
$("#submit").prop("disabled", true);
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！