可以直接在HTML文件中写script进行写JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 第一种方法 内部标签使用 -->
<!-- <script>
alert("Hello,World");
</script> -->
<script src="../JS/A001.js"></script>
</head>
<body>
</body>
</html>也可以在JS文件中写JS代码，然后通过src进行引入
alert('Hello,World');
// 第二种方法 外部引入JS中没有复杂的定义变量的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 定义变量 变量类型 变量名 = 变量的值
var num=1;
// alert(num);
var name="xiaowang";
if(2>1){
// alert('true');
}
var age=75;
if(age>60&&age<70){
alert("60~70");
}else if(age>70&&age<80){
alert("70~80");
}else{
alert("other");
}
// console.log(num); 在浏览器的控制台打印一个变量
// 可以在控制台打断点，然后直接在控制台直接进行调试，
// 源代码-->打开后直接可以进行打断点调试
</script>
</head>
<body>
</body>
</html>在百度可以直接进行调试
元素位置可以看源代码
控制台可以进行打印一些数据
在源代码的地方可以进行打断点调试
在网络的位置可以进行网络抓包
在应用的位置可以查看Cookie等一些保存在本地浏览器的东西
JS不区分小数和整数
123// 整数
123.1//浮点数
1.123e3//科学计数法
-99 //负数
NaN //not a number 表示不是一个数字
Infinity // 表示无限大 大到一定程度 无限大字符串
‘abc’
"abc"
布尔值
true
false
逻辑运算
&& //两个都是真，结果为真
|| //一个为真，结果为真
! //真即假，假即真
比较运算符
= 赋值，不是比较运算符
== 等于（类型不一样，值一样，也会判断为true） 例如 数字1和字符串"1"也会判定相等，所以一般使用绝对等于
=== 绝对等于（类型一样，值一样，结果true）
这是一个js的缺陷，坚持不要使用==比较
注意：
NaN===NaN，结果为false
这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN浮点数问题
console.log((1/3)===(1-2/3))
结果为false
尽量避免使用浮点数进行运算，存在精度问题
// Math.abs 取绝对值
console.log(Math.abs((1/3)-(1-2/3))<0.00000000001)
结果为true,可以用这种方式运算null和undefined
- null // 表示为空
- undefined //表示未定义
数组：
java的数组中必须是相同的类型的对象，
js中不需要这样，JS中数组中可以随便存储一些数据
//保证代码的可读性，尽量使用 [] 定义
var arr = [12,3,'hello',null, true];
// 尽量不适用下面这种方式
new Array(1,2,3,'hello',null, true);
取数据下标，如果越界了，就会`undefined`未定义
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
var person = {
name : 'zyy',
age : 18,
tags : ['java', 'css']}
取对象的值
person.age
18取值：直接点
严格检查模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 'use strict';使用严格检查模式
//这一句 use strict 必须写在第一行
h=1;// 在正常情况下，可以这样定义，但是在严格检查模式下，这样定义是错误的，网页的控制台会报错
//这样定义的是全局变量，在写网页的时候，多个JS网页之间，这样写容易出现问题，所以，不建议这样写
let o=1;// 定义为局部变量，在写JS中，一般建议这样定义，不容易报错。
var i=1;// 定义为全局变量，不建议这样写
</script>
</head>
<body>
</body>
</html>1. 正常字符串使用单引号或者双引号包裹
2. 注意转义字符
\' '
\n 换行
\t tab键
\u4e2d \u#### unicode字符 中
\x41 Ascll字符 A
3. 多行字符串编写
<script>
let msg=`
hello
world
nihao
`
</script>
4. 模板字符串
let name="xiaowang";
let age=18;
let a=`你好呀！${name}`
5. 字符串长度
let str = "student";
console.log(str.length); // 76.字符串的可变性，不可变
字符串确定后，不可以再对字符串中的那个位置的字符赋值，
字符串一旦确定就不可以在变了
转换为大写
转换为小写
1. 找字符的对应字符串中的下标
//str = "student"
console.log(str.indexOf('s')) //0
2. 截取字符串
// [) str = "student"
//包含前面不好含后面
console.log(str.substring(0)) //student
console.log(str.substring(1)) //tudent
console.log(str.substring(1,2)) //t
str.substring(1,2) 截取指定位置的字符串
创建一个数组，给这个数组赋值。
赋值后，给数组第一个位置的值赋予一个新的值发现，可以给其赋予一个新的值，
说明，和字符串不同，字符串不能给某个位置的元素赋值
由这一步可知，定义的数组的长度也是可以被定义的
打印后，后面空出来的会用空属性填充
给arr.length赋值，会发现数组长度可变
变长可以，变小也可以，但是数据会丢失
通过元素获得下标索引
//arr = [1, 2, 3, 4, "1", "5"]
arr.indexOf(1) //0
arr.indexOf("1") //4
字符串“1”和数字1是不同的slice() 截取Array的一部分，返回一个新的数组，类似于string的substring
arr.slice(1,3)
(2) [2, 3]push() pop() 在数组尾部操作
//push 压入到尾部
//pop 弹出尾部的一个元素
//arr = [1, 2, 3, 4, "1", "5"]
arr.push(6) //[1, 2, 3, 4, "1", "5", 6]
arr.pop() // [1, 2, 3, 4, "1", "5"]unshift() shift() 在数组头部操作
//unshift 压入到头部
//shift 弹出头部的一个元素
//arr = [1, 2, 3, 4, "1", "5"]
arr.unshift(0) //[0, 1, 2, 3, 4, "1", "5"]
arr.shift() //[1, 2, 3, 4, "1", "5"]1. 排序sort()
//arr = [4, 3, 2, 1]
arr.sort() //[1, 2, 3, 4]
2. 元素反转 reverse()
//arr = [1, 2, 3, 4]
arr.reverse() //[4, 3, 2, 1]
3. concat()
并没有修改原数组，只是返回一个新的数组
//arr = [4, 3, 2, 1]
arr.concat(6,7)//[4, 3, 2, 1, 6, 7]
arr//[4, 3, 2, 1]
4. 连接符join
打印拼接数组，使用特定的字符串连接
//arr = [4, 3, 2, 1]
arr.join(',')//"4,3,2,1"
arr //[4, 3, 2, 1]
5. 多维数组
arr2 = [[1,2],[3,4]]
arr2[0][0]//1数组：存储数据（如何存，如何取，方法都可以自己实现！）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
'use strict';
/*
定义对象
var 对象名 ={
属性名：属性值，
属性名：属性值，
属性名：属性值，
属性名：属性值
}
属性结束时用逗号分隔开
最后一个属性不加逗号，
*/
var person={
name:"xiaowang",
age:18,
email:"2601605001@qq.com",
score:0
}
</script>
</head>
<body>
</body>
</html>使用一个不存在的对象属性，不会报错！undefined
//person = {name: "zyy", age: 18, sex: "男"}
person.haha //undefined动态的删减属性
delete person.sex删除person对象中的sex这个属性
//person = {name: "zyy", age: 18, sex: "男"}
delete person.sex //person = {name: "zyy", age: 20}动态的添加,直接给新的属性添加值即可
//person = {name: "zyy", age: 20}
person.sex = "男" //person = {name: "zyy", age: 18, sex: "男"}判断属性值是否在这个对象中 xxx in xxx
//person = {name: "zyy", age: 18, sex: "男"}
"name" in person //true
'toString' in person // true
'hah' in person //false判断一个属性是由是这个对象自身拥有的hasOwnProperty
//person = {name: "zyy", age: 18, sex: "男"}
person.hasOwnProperty('toString') //false
person.hasOwnProperty('name') // true流程控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
'use strict';
let i=5;
// if判断
if(i>10){
console.log(i);
}else{
console.log("i小于10")
}
// while 循环
while(i<10){
i++;
console.log(i);
}
// forEach循环
// 遍历
let arr=[1,2,3,4,"5","6"];
arr.forEach(function(value){
console.log(value);
}
)
// function函数 需要注意
console.log("------------------");
// forEach 里面利用gunction函数来遍历这个数组
// for in 循环
// for(var index in Object){} 这里的index 其实就是一个索引，可以通过这个索引输出这 //个数组的对应的元素
for(var num in arr){
console.log(arr[num]);
}
console.log("------------------");
</script>
</head>
<body>
</body>
</html>Map和Set
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
'use strict';
// let name = ["tom","jack","back"];
// let score = [100,90,80];
let map=new Map([["tom",100],["jack",90],["back",80]]);
let grade=map.get("tom"); // 通过key 获得其value值
map.set("admin",123456);
// Map(4) {'tom' => 100, 'jack' => 90, 'back' => 80, 'admin' => 123456}
console.log(grade);
//map中也可以删除某个值
map.delete("tom");
// Map(3) {'jack' => 90, 'back' => 80, 'admin' => 123456}\
console.log("----------------------")
// new Set();
// Set 无序且不重复的集合
let set=new Set([1,5,5,5,5]);
// Set(5) {1, 5}
// set 可以去重
// 在set 集合中添加一个值
set.add(9); // 给set集合中添加一个值
// Set(3) {1, 5, 9}
set.delete(9);//删除某个值
// Set(2) {1, 5} 删除某个值
// 判断是否包含某个值
console.log(set.has(5));// 结果返回true
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
'use strict';
let arr=[3,4,5];
for(let x in arr){
console.log(x);
//这样打印出来的是数组的下标
}
console.log("-------------");
// 通过for ...of实现 遍历数组
for(let x of arr){
console.log(x);
//这样打印出来的是数组中具体的值
}
// 遍历map集合
let map=new Map([["tom",100],["jack",90],["back",80]]);
for(let x of map){
console.log(x);
}
// 这样可以实现对map集合的遍历
// 遍历set集合中的值
let set=new Set([5,6,7]);
for(let x of set){
console.log(x);
}
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
'use strict';
/*
定义函数：
funcation 函数名（）{
函数体
return 返回值
}
建议这样定义，也可以使用下面的定义方法
let abs=function(x){
函数体
return 返回值
}
*/
/*
function abs(x){
// 为了防止传递的参数出现异常，我们可以手动加判断
// 判断如果不是一个数字，就抛出一个异常并输出：Not a Namber
if(typeof x!=='numbre'){
throw 'Not a Namber';
}
if(x>=0){
return x;
}else{
return -x;
}
}
*/
// let abs=function(x){
// if(x>=0){
// return x;
// }else{
// return -x;
// }
// }
function abs(x){
console.log("x->"+x);
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
/*
JavaScript中，调用函数时，参数可以随便传递，可以传递一个也可以传递多个，JS不报错
arguments[i] 结果返回调用函数时输入的所有函数
*/
}
function aaa(a,b,...rest){
//rest 只能写在最后面且必须用...标识
console.log("a="+a);
console.log("b="+b);
console.log(rest);
}
}
</script>
</head>
<body>
</body>
</html>变量的作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 函数的作用域
function f(){
var x=1;
x=x+1;
//在函数体内用var生命的变量也是局部变量
}
function f(){
var x=1;
x=x+1;
}
//这样在不同的函数体内，可以这样定义
function A(){
var y=1;
B();
function B(){
var y=2;
console.log(y)//2
}
var z=y+1;
console.log(y)//1
// 类似于内部类，内部函数可以调用外部函数的数据，外部数据不能调用内部数据
}
A();
C();
function C(){
var x='x'+y;
console.log(x);// xundefined 说明，js在执行的时候会默认把y的声明提升到前面，但是赋值不会
var y='y';
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var x="xxx";
alert(x);
window.alert(x);
// 这两种默认是等价的 所有的全局变量，都默认绑定在window对象下
// alert（）这个函数本身也是window变量
// 定义全局变量
var wang={};
// 下面把所有的操作都绑定到这个全局变量上 定义全局变量
wang.name="xiaowang";
wang.add=function add(a,b){
return a+b;
}
// 这样把自己定义的代码变量放到自己定义的这个空间中
// 就可以降低全局命名冲突的问题
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 局部作用域 let
function aaa(){
for(let i=0;i<100;i++){
console.log(i); // 1~99
}
console.log(i+1);// 101
// 用var定义的i就可以在下面输出101，但是用let定义的i就无法在下面输出
}
// 结果发现，上面定义的i除了这个作用域还可以使用
// 定义常量 const
const PI=3.14;
// PI=123; 定义为常量后，下面就无法再次更改了
</script>
</body>
</html>方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function A(){
var now =new Date().getFullYear();
return now-this.birth;
}
var xiaowang={
name:xiaowang,
birth:2002,
age : /*A*/
function(){
var now =new Date().getFullYear();
return now-this.birth;
}
}
// 调用方法一定要带括号,
// 调用时，只能调用xiaowang 不能调用A 因为A中this函数指向调用它的方法
// 直接在控制台调用A（）时，此时，this指向的是window
A.apply(xiaowang,[]);//在控制台用这一句，也可以实现调用
// A的this指向xiaowang这个方法
</script>
</body>
</html>
Date
标准对象
typeof 123
"number"
typeof '12'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Date -->
</head>
<body>
<script>
var now =new Date();
/*
console.log(now);
VM100:1 Sat Feb 18 2023 10:08:23 GMT+0800 (中国标准时间) */
now.getFullYear();//年 2021
now.getMonth();//月 0-11
now.getDate();//日
now.getDay();//星期几 0-6 0：星期天
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一 1970 1.1 00:00:00 毫秒数
//console.log(new Date(1676686563090));//时间戳转为时间 '2023/2/18 10:16:03'
</script>
</body>
</html>JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- JSON -->
</head>
<body>
<script>
var user = {
name: "xiaowang",
age: 18,
sex:'男'
};
//{name: 'xiaowang', age: 18, sex: '男'}
var jsonuser=JSON.stringify(user);
//{"name":"xiaowang","age":18,"sex":"男"}
// 再转换过来
var obj=JSON.parse('{"name":"xiaowang","age":18,"sex":"男"}');
// 重新转换为对象
</script>
</body>
</html>面向对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 面向对象 -->
</head>
<body>
<script>
var student={
name:"xiaowang",
age:3,
run:function(){
console.log(this.name+"running");
}
};
var xiaoming={
name:xiaoming,
//此时，xiaoming这个对象是无法使用student这个方法的
};
//xiaoming.__proto__ = student
xiaoming.__proto__=student;//proto两边是两个下划线
// xiaoming.run();此时就可以调用了，
//用小明这个方法，创建了一个student对象
// xiaoming._proto_=student;
</script>
</body>
</html>class类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- class继承 -->
</head>
<body>
<script>
// 定义一个类
class student{
constructor(name){
// 构造器
this.name=name;
}
hello(){//定义一个方法
alert("hello");
}
}
var xiaoming=new student("xiaoming");
var xiaohong =new student("xiaohong");
class xiaostudent extends student{
constructor(name,grade){
super(name);
this.grade=grade;
}
xiaoxuesheng(){
alert("我是一个小学生");
}
}
var xiaoliu =new xiaostudent("xiaoliu",6);
</script>
</body>
</html>BOM
window.alert(1)
undefined
window.innerHeight
936
window.innerWidth
150
window.outerHeight
1056<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
window.innerHeigh
screen 代表屏幕
screen.width 屏幕宽度
1536
screen.height 屏幕高度
864
location 代表当前页面的url页面信息
location.assign("url") 页面跳转
documennt 代表当前页面，HTML，ＤＯＭ文档树
document.title="小王"
-->
<!--
document
-->
</head>
<body>
<dl id="app">
<dt>java</dt>
<dt>javascript</dt>
</dl>
<script>
var a=document.getElementById("app");
//document.cookie可以通过这个直接获取网页的cookie 可能会出现恶意劫持cookie
// history 浏览器的历史浏览记录
// history.back() 后退
// history.forward() 前进
</script>
</body>
</html>操作DOM节点
操DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
操作DOM对象
获得DOM节点
-->
<div id="father">
<h1>标题一</h1>
<p id="p1">
p1
</p>
<p class="p2">
p2
</p>
</div>
<script>
var h1=document.getElementsByTagName("h1")
// 标签选择器，通过标签名来定位这个标签
var h2=document.getElementById("p1");
// id选择器 通过id名字来定位
var h3=document.getElementsByClassName("p2");
// 通过class名来定位
var h4=document.getElementById("father");
var h5=h4.children;// 获取这个father 的div下面的所有子节点
// 和css学习的选择器类似，也可以通过一个节点找相邻的上一个节点或者下一个节点
</script>
</body>
</html>更新节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="p1">
</div>
<script>
// 更新节点
var p1=document.getElementById("p1");
// 获得这个对象后 p1.innerText="xiaowangshuo"; 可以通过这种方式赋值
// p1.innerHTML="<strong>123</strong>"; 通过这种方法可以在对应的
//位置写入一些HTML语言，类似于标签啊什么之类的
// 不仅可以写入一些HTML语言，JS还能操作CSS语言
// 首先在div中写入一些文字
/*
p1.innerText="123";
通过p1获取对应的style属性，然后就可以操作做修改颜色之类的操作
p1.style.color="red";
直接 p1.style然后点出来一些，注意： 应该使用驼峰命名法
*/
</script>
</body>
</html>删除DOM节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">
p1
</p>
<p class="p2">
p2
</p>
</div>
<script>
// 删除DOM节点
/*
步骤： 先找到它的父节点，通过它的父节点实现对它的删除
*/
/*
var fa=document.getElementById("father");
var p1 = document.getElementById("p1");// 通过它的父节点可以实现删除这个节点
*/
// 正常情况下：
var p1 = document.getElementById("p1");
var father=p1.parentElement;
// 在页面控制台通过 father.removeChild(p1);可以实现删除节点
// 无法自己删除自己，找到它的父类，通过父类进行删除子节点
/*
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
可以这样删除，但是删除是一个动态的过程
删除第0个后，第一个就变成第0个
*/
</script>
</body>
</html>插入节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
插入节点
我们获得了某个DOM节点，假设这个DOM是空的
，我们通过innerHTML就可以增加一个元素，
但是这个DOM节点已经存在元素了，我们就不
能这么干了！会产生覆盖。
-->
<!-- 追加 -->
<p id="js">
javsScript
</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById("js");
var list = document.getElementById("list");
// list.appendChild(js); 追加
/* 追加后效果 直接追加到后面
追加的是已经存在的节点
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
<p id="js">
javsScript
</p>
</div>
*/
</script>
</body>
</html>创建一个新的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
插入节点
我们获得了某个DOM节点，假设这个DOM是空的
，我们通过innerHTML就可以增加一个元素，
但是这个DOM节点已经存在元素了，我们就不
能这么干了！会产生覆盖。
-->
<!-- 追加 -->
<p id="js">
javsScript
</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById("js");
var list = document.getElementById("list");
// list.appendChild(js); 追加
/* 追加后效果 直接追加到后面
追加的是已经存在的节点
// 新建一个标签
var newp=document.createElement("p");
//给这个p节点赋予一个ID
newp.id="newp";
// 给这个节点追加一些内容
newp.innerText="hello,xiaowang";
// list.appendChild(newp); 最后通过这一句进行追加为子节点
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
插入节点
我们获得了某个DOM节点，假设这个DOM是空的
，我们通过innerHTML就可以增加一个元素，
但是这个DOM节点已经存在元素了，我们就不
能这么干了！会产生覆盖。
-->
<!-- 追加 -->
<p id="js">
javsScript
</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById("js");
var list = document.getElementById("list");
// list.appendChild(js); 追加
/* 追加后效果 直接追加到后面
追加的是已经存在的节点
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
<p id="js">
javsScript
</p>
</div>
*/
// 新建一个标签
var newp=document.createElement("p");
//给这个p节点赋予一个ID
newp.id="newp";
// 给这个节点追加一些内容
newp.innerText="hello,xiaowang";
// list.appendChild(newp); 最后通过这一句进行追加为子节点
var myScript = document.createElement("script");
myScript.setAttribute("type","text/javascript");
list.appendChild(myScript);// 通过这个可以把这个script程序也追加进去
/*
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
<script type="text/javascript"> /script>
</div>
*/
var mystyle = document.createElement("style");
// 创建一个style节点
mystyle.setAttribute("type","text/css");
// 给这个节点设置type属性
mystyle.innerHTML="body{background-color:yellow}";
// 给这个节点设置一个HTML属性，颜色为黄色
document.getElementsByTagName("head")[0].appendChild(mystyle);
// 在第0个head下追加一个子节点
</script>
</body>
</html>在前面插入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="js">javsScript</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list");
var ee = document.getElementById("ee");
// 插入到前面
list.insertBefore(js,ee);
// list.replaceChild() 替换当前子节点
</script>
</body>
</html>操作表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<span>用户名：</span>
<input type="text" id="username">
<p>
<span>性别：</span>
<input type="radio" name="sex" value="男" id="boy"> 男
<input type="radio" name="sex" value="女" id="girl"> 女
</p>
</form>
<script>
var username = document.getElementById("username");
// username.value 获取客户写入的值
// username.value="旺旺旺" 给文本框添加值
var boy = document.getElementById("boy");
var girl = document.getElementById("girl");
/**
* boy.checked 判断是否为true 为true则代表选中了
* false 则代表未选中
* boy.checked="true"; 给这个值设置为true 强行选中
*//
</script>
</body>
</html>
提交表单
1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<body>
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<!-- 提交表单 -->
<form action="#" method="GET">
<p>
<span>账号：</span>
<input type="text" name="username" id="username">
</p>
<p>
<span>密码：</span>
<input type="password" name="password" id="input_password">
<input type="hidden" id="md5-password" name="password">
</p>
<p>
<input type="submit" onclick="f()" value="登陆">
</p>
</form>
<script>
function f(){
// alert("提交成功");
var username = document.getElementById("username");
var password = document.getElementById("input_password");
var md5_password = document.getElementById("password")
// 一般用MD5加密
console.log(password.value);
password.value=md5("password.value");
console.log(username.value);
console.log(password.value);
/**
* username: 456
* password: e45539b01cb3bb47ae237588b281d9f9
* 加密成功
*/
/
}
</script>
</body>
</html>再优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<!-- 提交表单 -->
<form action="#" method="GET" onsubmit="f()">
<p>
<span>账号：</span>
<input type="text" name="username" id="username">
</p>
<p>
<span>密码：</span>
<input type="password" id="input_password">
<input type="hidden" id="md5-password" name="password">
</p>
<p>
<input type="submit" value="登陆">
</p>
</form>
<script>
function f(){
// alert("提交成功");
var username = document.getElementById("username");
var password = document.getElementById("input_password");
var md5_password = document.getElementById("md5-password")
// 一般用MD5加密
md5_password.value=md5(password.value);
/**
* username: 123
* password: 250cf8b51c773f3f8dc8b4be867a9a02
* 这样也可以加密成功
*/
/
}
</script>
</body>
</html>jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.3.js"></script>
</head>
<body>
<a href="" id="text-jQuery">点我</a>
<script>
// 公式： $（选择器，类似于css中的选择器）.方法（）
$("#text-jQuery").click(function (){
alert("hello,jQuery");
})
</script>
</body>
</html>选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 选择器 -->
<script>
/*
// 原生的JS 选择器比较少
// 标签
document.getElementsByTagName();
// id选择器
document.getElementById();
// 类选择器
document.getElementsByClassName();
*/
$("p").click(); // 标签选择器
$("#id1").click(); // id选择器
$(".class1").click(); // class选择器
// css选择器jQuery都能用
</script>
</body>
</html>jQuery事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.3.js"></script>
<style>
#d1{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- jQuery事件 -->
<span id="sp1"></span>
<div id="d1">
</div>
<script>
$(function (){ // 页面加载完毕后要做的事，类似于onload
$("#d1").mousemove(function (e){ // 设置鼠标移动事件，通过e来传递鼠标的移动事件
$("#sp1").text("鼠标的坐标为："+"x:"+e.pageX+"Y:"+e.pageY);
})
})
</script>
</body>
</html>jQuery操作DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.3.js"></script>
</head>
<body>
<!-- 用jQuery操作DOM元素 -->
<ul id="test">
<li id="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
/**
* $("#test li[name=python]").text();
* 'python'
* $("#test li[name=python]").text("123");
* jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
*/
// $("#test li[name=python]").text("");
// 操作css
// $("#test li[name=python]").css("key",value);
$("#test li[name=python]").css("color","red"); // 设置css代码
$("#test li[name=python]").hide();// 让这个属性消失隐藏 本质上：display：none
$("#test li[name=python]").show(); // 显示
</script>
</body>
</html>多练习！！！
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
