1、概述
ECMAScript可以理解为JavaScript的一个标准
1.1、引入JavaScript
1、内部标签
<script>
//....
</script>
2、外部引入
abc.js
<script src = "abc.js"> <script>
1.2、基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
// 1.定义变量 变量类型 变量名 = 变量值
// var全局变量啊 let局部变量 const常量
var num = 1;
// alert(num);
// 2.条件控制
if (2>1){
alert("ture");
}
//console.log(score) 在浏览器的控制台打印变量
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知
13、数据类型
数值、文本、图形、音频、视频
变量
var 全局变量、 let 局部变量、 const 常量
number
js不区分小数和整数
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无限大
字符串
‘abc’,“abc”
布尔值
ture,false
逻辑运算
&& | 两个都为真,结果为真 |
l l | 一个为真,结果为真 |
! | 真即假,假即真 |
比较运算符
= | 赋值 |
---|---|
== | 等于(类型不一样、值一样,也会判断为true) |
=== | 绝对等于(类型一样、值一样,结果为ture) |
须知:
- NaN===NaN,这个与所有的数值都不相等,包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否是NaN
浮点数问题:
- console.lon(1/3) === (1-2/3)
尽量避免使用浮点数进行运算,存在精度问题
<script>
console.log(Math.abs(1/3-(1-2/3))<0.00001);
</script>`
null 和 undefined
- null空
- undefined未定义
数组
Java的数组必须是类型相同的一组数据、JavaScript不需要
//保证代码的可读性,尽量使用 []
<script>
var arr = [1,2,3,"小莫", 'abc'];
new Array(1,56,'hello' );
</script>
取数组下标如果越界了,就会 undefined
对象
对象是大括号,数组是中括号 [ ]
- 每个属性之间使用逗号隔开,最后一个不用
<script>
//Person person = new Person
var person = {
name:"小莫",
age : 3,
tags:["可爱",17,'java']
}
</script>
取对象的值
person.age
3
person.tags
(3) ["可爱", 17, "java"]
1.4、严格检查模式strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IEDA 需要设置支持ES6语法
'use strict';严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在Javascript的第一行
局部变量建议都使用 let 去定义
-->
<script>
'use strict';
i=1;
</script>
</head>
<body>
</body>
</html>
2、数据类型
2.1、字符串
- 正常字符串使用 单引号or双引号 包裹
- 注意转义字符 \
序列 | 代表字符 |
---|---|
\0 | Null字符(\u0000) |
\b | 退格符(\u0008) |
\t | 水平制表符(\u0009) |
\n | 换行符(\u000A) |
\v | 垂直制表符(\u000B) |
\f | 换页符(\u000C) |
\r | 回车符(\u000D) |
" | 双引号(\u0022) |
’ | 撇号或单引号(\u0027) |
\ | 反斜杠(\u005C) |
\xXX | 由 2 位十六进制数值 XX 指定的 Latin-1 字符 |
\uXXXX | 由 4 位十六进制数值 XXXX 指定的 Unicode 字符 |
\XXX | 由 1~3 位八进制数值(000 到 377)指定的 Latin-1 字符,可表示 256个 字符。如 \251 表示版本符号。注意,ECMAScript 3.0 不支持,考虑到兼容性不建议使用。 |
- 多行字符串编写
多行字符串编写,tab上面 esc下面
<script>
'use strict';
//多行字符串编写
//tab上面 esc下面
var msg = `你
好
呀`
</script>
- 模板字符串
<script>
'use strict';
//多行字符串编写
//tab上面 esc下面
let name = "小莫";
var msg = `你好呀,${name}`;
</script>
-
字符串长度
str.length
通过字符串下标访问 -
字符串的可变性:不可变
-
大小写转换
//注意:这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()
- student.indexOf(‘t’)
- substring
[ )
student.substring(1) //从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)截取1(包含)~3(不包含)
2.2、数组
用于存储数据(如何存、如何取,方法都可以自己实现),Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0] = 1
- 长度
arr.length
注意:假如给arr.length赋值,数组大小就会发生变化,如果赋值国小,元素就会丢失
- indexOf 通过元素获得下标索引
arr.length(2) //返回元素2的下标
arr.length("1") //返回元素 "1" 的下标
//字符串 和 数字 是不同的
- slice() 截取Array的一部分,返回一个新数组,类似与String中的substring(包头不包尾)
- push()、pop() 尾部弹出压入
push: 压入到尾部
pop: 弹出尾部的一个元素
- unshift()、shfit()头部压入弹出
unshift: 压入到头部
shift: 弹出头部的一个元素
- 排序sort()
["B", "C", "A"]
arr.sort()
["A", "B", "C"]
- 元素反转reverse()
["A", "B", "C"]
arr.reverse()
["C", "B", "A"]
- 链接concat()
注意:concat()并没有修改数组,只是会返回一个新的数组
["C", "B", "A"]
arr.concat([1,2,3])
["C", "B", "A", 1, 2, 3]
arr
["C", "B", "A"]
- 连接符join()
打印拼接数组,使用特定的字符串连接
["C", "B", "A"]
join()
"C-B-A"
- 多维数组
arr = [[1,2],[3,4],[5,6]]
arr[1][1]
4
2.3、对象
若干个键值对
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
//定义了一个person对象 它有3个属性
<script>
'usr strict';
var person = {
name: "小莫",
age: 17,
hobby: "singing"
}
</script>
Js中对象,{……}表示一个对象,键值对描述属性 xxx: xxx,多个属性之间使用逗号隔开,最后一个属性不加逗号。Javascript中所有的键都是字符串,值是任意对象
- 对象赋值
person.name = "kk"
"kk"
person.name
"kk"
- 使用一个不存在的对象属性,不会报错。undefined
person.hah
undefined
- 动态的删减属性,通过delete删除对象的属性
delete person.name
true
person
{age: 17, hobby: "singing"}
- 动态的添加
person.name = "小莫"
"小莫"
person
{age: 17, hobby: "singing", name: "小莫"}
- 判断属性值是否在这个对象中 xxx in xxx
'age' in person
true
//继承
'toString' in person
true
- 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true
2.4、流程控制
- if判断
- while循环
- for循环
'use strict';
let age = 4;
if(age>3){
alert("haha");
}else if(age<5){
alert("123456")
}else{
alert("5555")
}
- forEach循环
let age = [12, 5, 1, 5, 51, 51, 21];
//函数
age.forEach(function (value) {
console.log(value);
})
- for…in
for(变量 in 对象){
在此执行代码
}
//"变量" 可以用来指定变量,指定的变量可以是数组元素,也可以是对象的属性
let age = [12, 5, 1, 5, 51, 51, 21];
//for(let index in object){}
for(let num in age){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num])
}
}
for(let num in age){
console.log(age[num])
}
//num 是下标
2.5、Map和Set
ES6新特性
Map:
'use strict';
//学生的成绩与学生的名字
let map=new Map([['tom',80],['jock',90]]);
let name = map.get('tom'); //通过key获得value
map.set('admin',100); //新增
map.delete('tom'); // 删除
console.log(name);
Set:无序不重复的集合
let set = new Set([3, 1, 1, 1, 1]);//Set可以去重
set.add(4); //添加
set.delete(2); //删除
console.log(set.has(3)); //是否包含某个元素!
2.6、iterator
遍历数组
//通过 for(xxx of xxx) 输出数组值
//for(xxx in xxx) 输出下标
let arr = [3,4,5];
for(let x of arr){
console.log(x)
}
遍历Map
let map = new Map([['a', 100], ['b', 90]]);
for (let x of map) {
console.log(x)
}
遍历Set
let set = new Set([2, 3, 4,]);
for (let y of set) {
console.log(y)
}
3、函数
对象(属性,方法)
函数丢进对象里就成了方法
3.1、定义函数
方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束,返回结果。如果没有执行return,函数执行完也会返回结果,结果就是undefined
方式二
let abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
- function(x){….} 这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数
- 调用函数
abs(10) ;//10
abs(-1); //1
参数问题:
- javaScript可以传递任意个参数,也可以不传递参数
- 参数进来是否存在的问题? 假设不存在参数,如何规避
let abs = function (x) {
//手动抛出异常来判断
if (typeof x !== 'Number') {
throw 'not a number';
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
- arguments
arguments是一个JS免费赠送的关键字;代表传递进来的所有的参数,是一个数组
let abs = function (x){
console.log('x>='+x);
for(let i =0; i<arguments.length; i++){
console.log(arguments[i]);
}
abs(2,3,5)
x>=2
2
3
5
问题:
arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数。
3.2、变量的作用域
在javascript中,var定义的变量实际是有作用域的。
- 变量在函数体中声明,在函数体外不可以使用(非要想实现的话,后面可以研究用:闭包)
'use strict';
function a() {
var x = 1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not define
- 如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function a() {
let x = 1;
x = x + 1;
}
function b() {
let x = 'A';
x = x + 2;
}
- 可以在两个不同函数内部使用了相同的变量名,不冲突
function a() {
let x = 1;
x = x + 1;
}
function b() {
let x = 'A';
x = x + 2;
}
- 内部函数可以访问外部函数的成员,反之不行
function a() {
let x = 1;
//内部函数可以访问外部函数的成员,反之则不行
function b() {
let y = x+1; //2
}
let z = y+1; //错误:Uncaught ReferenceError: z is not defined
}
- 内部函数变量和外部函数的变量重名时,若内部变量没有再给此变量赋值,则此时内部变量的值为外部变量的值;若重新赋值,则为新值
function a() {
let x = 1;
function b() {
let x='A';
console.log('inner'+x); //outer1
}
console.log('outer'+x); //innerA
b();
}
a();
- 提升变量的作用域
function a(){
let x="x"+y;
console.log(x);
let y='y'
}
结果:Uncaught ReferenceError: q is not defined
at <anonymous>:1:1
JS执行引擎,自动提升了y的声明,但是不会提升变量y的赋值。
等价于
function b(){
let y;
let x="x"+y;
console.log(x)
y='y';
}
- 所有的变量定义都放在函数的头部,不要乱放,便于代码的维护
function a(){
let x=1,
y=x+1,
z,i,a; //undefined
//之后随意用
}
- 全部函数可使用
'use strict';
let x = 1; //全局变量
function f() {
console.log(x)
}
function k{
console.log(x)
}
- 全局对象window,默认所有的全局变量,都会自动绑定在window对象下
var x='xxx';
alert(x);
alert(window.x);
alert()这个函数本身也是一个window的变量;
var x='xxx';
window.alert(x);
var old_alert=window.alert;
//old.alert(x);
window.alert=function(){
};
//发现alert()失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(456)
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有再函数作用内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
- 由于我们所以的全局变量都会绑定到我们的window上,如果不同的JS文件,使用了相同的全局变量,冲突了。
如何能够减少冲突?
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
// 唯一全局变量
var liapp ={};
//定义全局变量
liapp.name='mo';
liapp.add = function (a,b){
return a+b;
}
- ES6 let关键字,解决局部作用域冲突问题,使用let取定义局部变量
function a(){
for(var i = 0;i<100;i++){
console.log(i)
}
console.log(i+1);
//i出了这个作用域还可以使用
}
function a(){
for(let i = 0;i<100;i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
- 常量 const
const PI = '3.14'; //只读变量
console.log(PI);
PI = '541' //报错TypeError:Assignment to constant variable.
3.3、方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法;
var Mo={
name:'小莫',
birth:2000,
//方法
age:function (){
// 今天-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
Mo.name
//方法,一定要带()
Mo.age()
this.代表什么?this是无法指向的,是默认指向调用它的那个对象;
function getage(){
// 今天-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
var Mo={
name:"小莫",
birth:2000,
age:getage
}
//Mo.age() OK
//getage() Nan window对象
apply
在JS中可以控制this指向
function getage() {
// 今天-出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var Mo = {
name: "小莫",
birth: 2000,
age: getage
}
// Mo.age() OK
getage.apply(Mo, []); //this,指向了Mo,参数为空。
4、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
4.1、Date
基本使用
let now = new Date();
now.getFullYear(); //年
now.getMonth();//月 0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours()//时
now.getTime(); //时间戳 全世界统一 1970 1. 12 0:00:00 毫秒数
console.log(new Date(1607158351693)) //时间戳转为时间
转换
now.getTime()
1607158644346
now = new Date(1607158644346)
Sat Mar 13 2021 04:52:52 GMT-0800 (GMT-08:00)
now.toLocaleString()
"2021/3/13上午4:51:05"
now.toGMTString()
"Sat, 13 Mar 2021 12:51:05 GMT"
4.2、JSON
JSON是什么
- Json(JavaScript Object Notation,js对象简谱)是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
- JSON就是一串字符串 只不过元素会使用特定的符号标注。
在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对 都使用 key:value
JSON字符串和JS对象的转换
var user={
name:"小莫",
age:3,
sex:'女'
}
//对象转化为json字符串
//{"name":"小莫","age":3,"sex":"女"}
var jsonuser=JSON.stringify(user)
// json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"小莫","age":3,"sex":"女"}')
JSON和JS对象的区别
var obj = {a:'hello',b:'hellob'};
var json = '{"a":'hello',"b":'hellob'}'
4.3、Ajax
- 原生的js写法,xhr异步请求
- jQuey封装好的方法$(“#name”).ajax(“”)
- axios请求
5、面向对象编程
什么是面向对象
- 类:模板 原型对象
- 对象:具体的实例
在Javascript这个需要换一下思维方式!
- 原型对象
var Student = {
name:'lijin',
age:3,
run:function () {
console.log(this.name+"runing....");
}
};
var xiaoming={
name:'xiaoming'
};
var Bird={
fly:function () {
console.log(this.name+"fly...");
}
};
//原型对象
xiaoming.__proto__=Student; //小明的原型是Student
xiaoming.__proto__=Bird; //小明的原型是 Bird
- class继承
class关键字在ES6引入,定义一个类,属性,方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello');
}
}
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('小红');
//控制台
xiaoming.hello()
- 继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
class xiaoStudent extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert('i am a student');
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new xiaoStudent('小红', 100);
- 原型链
__proto__
6、操作BOM对象(重点)
JavaScript和浏览器的关系?
- javascript诞生就是为了能够让他在浏览器中运行
BOM:浏览器对象模型(在浏览器里操作)
- IE 6
- Chrome
- Safari
- FireFox
第三方浏览器
- QQ浏览器
- 360浏览器
- window代表浏览器窗口
在这里插入代window.alert(1525)
undefined
window.innerHeight
474
window.innerHeight
507
window.innerWidth
845
//可以调整浏览器窗口再试试码片
- Navigator
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 Edg/87.0.664.55"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 Edg/87.0.664.55"
navigator.platform
"Win32"
- Navigator,封装了浏览器的信息
- 大多数时候,我们不会使用navigator对象,因为会被人修改。不建议使用这些属性来判断和编写代码。
- screen 屏幕尺寸像素
screen.width
1920 px
screen.height
1080 px
- location(重要)
host: "www.baidu.com" //主机
hostname: "www.baidu.com" //
protocol: "https:" //协议
href: "https://wwww.baidu.com/" //当前指向的位置
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('www.xxx.com') //跳转页面
- document (内容:DOM)
document代表当前的页面,HTML DOM文档树
document.title
"新建标签页"
document,title='李'
"李"
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
<script>
var dl = document.getElementById('app')
</script>
获取cookie
document.cookie
"UM_distinctid=175b28ea52d3b-024d49a6993e2b-c7d6957-1fa400-175b28ea52e2b8; CNZZDATA155540=cnzz_eid%3D1738546486-1605016482-%26ntime%3D1605016482"
劫持cookie原理
<script src="a.js"></script>
<!--恶意人员:获取你的cookie上传到他的服务器->
服务器端可以设置cookie:httpOnly
- history
history代表浏览器的历史记录
history.back()//后退
history.forward() //前进
7、操作DOM对象
DOM:文档对象模型
(浏览器网页就是一个Dom树形结构)
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
- 要操作一个Dom节点,就必须要先获得这个Dom节点
- 获得DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/1.js"></script>
</head>
<body>
<div id="father">
<h1>标签一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>
<script>
var h1 = document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2')
var father=document.getElementById('father')
var childrens=father.children; //获取父节点下的所有子节点
var childrens=father.children[index]; //获取具体第几个节点
</script>
在控制台输入
father.firstChild
father.lastChild
- 更新节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1">o1</div>
</body>
</html>
<script>
let id1 = document.getElementById('id1');
</script>
控制台输入
id1.innerText='456'修改文本的值为456
id1=innerHTML='<strong>123</strong>'相当于HTML的文本标签,可以修改等(解析HTML文本标签)
//属性使用 字符串 包裹
id1.style.color='red' // 字变为红色
id1.style.fontSize='30px' // - 转 驼峰命名问题
id1.style.padding='50px'
- 删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标签一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self=document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self);
</script>
//删除是一个动态的过程:
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意。就比如(删除了第一个,那么第二个就变成了第一个)。
- 插入节点(比较复杂)
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个Dmo节点已经存在元素了,我们就不能这样做了! 这样会产生覆盖,把原来已有的覆盖掉。
追加操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
var js = document.getElementById('js');
var list = document.getElementById('list' );
</script>
</body>
</html>
控制台输入
list.appendChild(js); //追加到后面
创建一个新的标签,实现插入
let newp=document.createElement('p');//创建一个p标签
newp.id='newp';
newp.innerText='hello world';
list.append(newp);
//创建一个标签节点(通过这个属性,可以设置任意的值)
let myScripte = document.createElement('script');
myScripte.setAttribute('type', 'text/javascript');
list.appendChild('myScript')
//创建一个style标签
var myStyle = document.createElement('style'); //创建一个空标签style
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{backgeound-color:green;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendchild(myStyle);
- insertBefore
<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>
var ee = document.getElementById('EE');
var js = document.getElementById('js');
var lsit = document.getElementById('list');
//要包含的节点,insertBefore(nowNode,targetNode)
lsit.insertBefore(js, ee);
</script>
8、操作表单
8.1、表单是什么
form DOM树
- 文本框:text
- 下拉框:
- 单选框:radio
- 多选框:checkbox
- 隐藏域:hidden
- 密码框:password
- ……
表单的目的:提交信息
8.2、获得要提交的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<!-- 多选框的值,就是定义好的value值-->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
</body>
</html>
<script>
'use strict';
let input_text = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');
</script>
在控制台输入
//得到输入框的值:
input_text.value
//修改输入框的值
input_text.value = 'xxx';
//对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回结果,是否为true,如果为true,则被选中~
boy_radio.checked = true; //用代码来手动选中(赋值)
8.3、提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="password" name="password">
</p>
<!-- 绑定事件 onclick被点击时..-->
<button type="submit" onclick="a()">提交</button>
</form>
</body>
</html>
<script>
function a() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
console.log(uname.value);
//MD5算法:
pwd.value = md5(pwd.value);
console.log(pwd.value);
}
</script>
8.4、提交表单(MD5加密密码+表单优化)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单绑定提交事件
onsubmit=绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接收
-->
<form action="https://www.taobao.com/" method="post" onsubmit=" return a()">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="input-password">
</p>
<input type="hidden" id="'md5-password" name="password">
<!-- 绑定事件 onclick被点击时..-->
<button type="submit">提交</button>
</form>
</body>
</html>
<script>
function a() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
9、jQuery
jQuery库,里面存在大量的javascript函数
获取JQuery:
- $(选择器).action(); 【选择器就是css选择器】
- 百度搜索 cdn jQuery 复制到htm文件
- 下载导入到lib包
百度复制jQuery引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<!--
公式:$(选择器).action();
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是Css的选择器
$('#test-jquery').click(function () {
alert('hello,world');
})
</script>
</body>
</html>
9.1、选择器
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器全都能用
$('p').click();//标签选择器
$('#id').click(); //ID选择器
$('.class').click(); //类选择器
文档工具站:http://jquery.cuishifeng.cn/
9.1、事件
鼠标事件、键盘事件
- 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
#divMove {
width: 200px;
height: 300px;
border: #b1ff62 solid 2px;
}
</style>
</head>
<body>
<!--要求:获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
移动鼠标
</div>
<script>
//当网页元素加载完毕之后,响应事件
// $(document).ready(function (){})
$(function () { //就绪函数简写
$('#divMove').mousemove(function (e) { //选择id为divMove的东西.当mousemove时,执行f
$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
})
});
</script>
</body>
</html>
- 操作DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
<li id="js">JavaScript</li>
<li id="python">Pythom</li>
</ul>
</body>
</html>
在控制台输入
$('#test-ul li[id=js]').text(); //获得值 //若想获得子类,必须先获得父类
$('#test-ul li[id=js]').text('xxx');//设置值
$('test-ul').html();
$('test-ul').html('<strong>123</strong>');
- 元素的显示和隐藏
本质:display=none
在控制台输入
$('#test-ul li[id=js]').show();
$('#test-ul li[id=js]').hide();
娱乐测试
$(window).width();
$(window).height();
$('#test-ul li[id=js]').toggle(); //显示隐藏切换
如何巩固
- 看jQuery源码,看游戏源码
- 巩固HTML。CSS(扒网站,全部down下来,然后对应修改看效果)