【前端基础2 -JavaScript】

最新推荐文章于 2024-07-08 10:29:00 发布

唯时

最新推荐文章于 2024-07-08 10:29:00 发布

阅读量273

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言经验分享

本文链接：https://blog.csdn.net/weixin_45483322/article/details/126866417

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3 JavaScript

3.1 什么是JavaScript

3.1 概述

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

一个合格的后端人员，必须要精通JavaScript

JavaScript教程文档：JavaScript 教程 (w3school.com.cn)

3.2 历史

JavaScript的起源故事_杨校的博客-CSDN博客_javascript 的故事

ECMAScript可以理解为Javascript的一个标准，最新版本已经到了ES6版本

但是大部分浏览器只停留在ES5代码上（开发环境与线上环境不一致）–>使用webpack打包

3.2 快速入门

3.2.1 引入JavaScript

内部标签
外部引入
- script 标签必须成对出现
- 不用显示定义type，也默认就是JavaScript

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签内，写JavaScript代码 -->
<!--    <script>-->
<!--        alert('Hello World!');-->
<!--    </script>-->
    <!--外部引入 -->
<!--    注意：script 标签必须成对出现-->
    <script src="js/hello.js"></script>

<!--    不用显示定义type，也默认就是JavaScript-->
    <script type="text/javascript">
        
    </script>
</head>
<body>


<!--这里也可以存放avaScript代码-->
</body>
</html>

hello.js

alert('Hello World!');

3.2.2 基本语法入门

IDEA设置JS的执行标准，文件-设置-语言&边框-JavaScript-JavaScript language version ：ECMAScript6+
单行注释 //，多行注释/** */
定义变量变量类型var 变量名 = 变量值；var num = 1;
条件控制同Java/C++
JavaScript严格区分大小写
浏览器控制台使用
- console.log(num)在浏览器的控制台打印变量！同System.out.println();
- alert(num);弹出警告框！
- 调试必备须知：

在这里插入图片描述

3.2.3 数据类型

数值，文本，图形，音频，视频······

变量

var

规范：

不能数字开头
可以_或$符号开头

number

js不区分小数和整数

123 //整数
123.2 //小数
1.234e3 //科学计数法1234
-99 //负数
NaN //not a number
Infinity //无限大

字符串

‘abc’

布尔值

true, false

逻辑运算

&& 与
|| 或
! 非

比较运算符

= 赋值
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）
- 这是JS的一个缺陷，一般不用 == 比较
NaN === NaN，返回false，这个与所有的数值都不相等，包括它自己
- 只能使用isNaN(NaN)判断这个数是否事NaN

浮点数问题：

尽量避免使用浮点数进行运算，存在精度问题！

console.log((1/3) === (1 - 2/3));//返回false

Math.abs(1/3 - (1-2/3)) < 0.000000001; //返回true

null和undefined

null 空
undefined 未定义

数组

Java的数组必须事相同类型的对象，JS中不需要这样!
若取数组下标越界，则输出undefined

var array = [1,2,3,null,'abd',true];

new Array(1,2,3,null,'abd',true);
//保证代码的可读性，尽量使用[]
//输出
console.log(array[3]);

对象

对象是大括号{}，数组是中括号[]
每个属性之间使用逗号隔开，最后一个不需要添加

<script>
        //Person person = new Person(1,2,3,4,5);
        var person = {
            name:"张三",
            age:3,
            tags:['js','java','web']
        }
</script>

对象取值：

> person.name
< '张三'
> person.age
< 3

3.2.4 严格检查模式strict

'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题,必须写在JavaScript的第一行

局部变量建议都使用 let 定义，ES6标准

在这里插入图片描述

3.3 数据类型详解

1）字符串

正常字符串使用单引号或双引号包裹

注意转义字符 \

\' //单引号
\n //行号
\t //制表
\u4e2d	\u#### Unicode字符
\x41	\x## 	Ascll字符
//都在字符串包裹内

多行字符串编写
- tab键上的``
- ```
var msg = `hello 
world
q
e `
```

模板字符串

拼接字符串

let name = "李四";
let age = 3;
let info = `你好，${name},年龄: ${age}`;

字符串长度
- console.log(str.length);
字符串的可变性，不可变
大小写转换
- 调用的方法，而不是属性
- ```
str.toUpperCase();
str.toLowerCase();
```
获取制定字符的下标
- str.indexOf('a');

截取制定区域的字符串

包含前面不包含后面 [)

str.substring(1,3);//包含第1个，不包含第3个
str.substring(1);//从第1个，到最后

2）数组

Array可以包含任意的数据类型
长度
- array.length;
- 注意：给array.length 赋值，数组大小会发生变化，但对应数组仍是undefined
- 如果赋值过小，元素会丢失
通过元素获得下标索引
- indexOf
- 字符串的"1"和数字1 是不同的
切片
- slic()，类似于String中的substring
- 截取array的一部分，返回一个新的数组
数组–栈(尾部)
- push(); //压入到尾部
- pop()//弹出尾部的一个元素
- ```
array.push('a','b');
array.pop();
```
数组–栈(头部)
- unshift(); //压入到头部
- shift()//弹出头部的一个元素
- ```
array.unshift('a','b');
array.shift();
```
排序
- array.sort()
元素反转
- array.reverse()
数组拼接
- concat()
- ```
arr1 = arr.concat([1,2,3]);
//将arr与[1,2,3] 拼接，并返回一个新数组
```
- 注意：concat()没有修改数组，只是返回一个新的数组

连接符

join()
打印拼接数组，使用特定的字符串连接

var arr = ["a","b","c"];
console.log(arr.join("-"));
//输出："a-b-c"

多维数组
- var arr = [ [1,2],[3,4],["5","6"]];
- arr[0][0];
数组：存储数据（如何存，如何取）

3）对象

若干个键值对

JavaScript中的所有的键都是字符串，值是任意对象！

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

//定义了person对象，有3个属性
var person = {
            name:"张三",
            age:3,
            tags:['js','java','web']
        }

JS中对象，{······}表示一个对象，键值对描述属性xxx: xxx, 多个属性之前使用逗号隔开，最后一个属性不加逗号！
- 可以对对象赋值
- 使用一个不存在的属性，不会报错！会出现undefined
- 动态的删减属性，通过delete删除对象的属性
- 动态添加，直接给新的属性添加值即可
- 判断属性值是否在这个对象中！ xxx in xxx，也可以判断继承父类的属性是否也在
- 判断一个属性是否是这个对象自身拥有的用hasOwnProperty()

4）流程控制

if 判断

// if 判断
if(条件){
    //语句
}
else if(条件){
    //语句
}else{
    //语句
}

while 循环，要避免程序死循环

// while 循环
while(条件){
    //语句
}

do{
    //语句
}while(条件)

for 循环

// for 循环
for( 初始值; 结束条件; 步长 ){
    //语句
}

//for···in···   （数值的下标）
for(var index in object){
    //语句
    console.log(object[index]);
}

//for···of···   （数值的值）
for(var x of object){
    //语句
    console.log(x);
}

forEach循环 – 5.1引入

var array = [1,2,3,4,67,3];
array.forEach(function(value){
    console.log(value);
})

5）Map 和 Set集合

ES6 新特性；Map：存储键值对；Set：无序不重复的集合

new Map();
new Set();

var map = new Map([['Mary',100],['Bob',90],['Tom',95]]);
var name = map.get('Bob');//通过key获得value
map.set('admin',12345);//添加或修改 键值对
map.delete('Tom');//删除 某个键值对

var set = new Set([1,1,1,3]);//set可以去重
set.add(2);//添加
set.delete(1);//删除
set.has(3);//判断是否含有

6）迭代器iterator

ES6新特性
遍历数组：

//for···of···   （数值的值）
var arr = [1,2,3];
for(let x of arr){
    //语句
    console.log(x);
}

遍历map：

var map = new Map([['Mary',100],['Bob',90],['Tom',95]]);
for(let x of map){
    //语句
    console.log(x);
}

遍历set：

var set = new Set([1,1,1,3,4]);//set可以去重
for(let x of set){
    //语句
    console.log(x);
}

3.4 函数

方法：对象（属性，方法）

函数：对象（属性，函数）

3.4.1 定义函数

定义方式一：

//java
public 返回值类型 方法名(参数){
    return 返回值;
}

//javascript
function 函数名(参数){
    return 返回值;
}

//调用函数
函数名(值);

一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二：

var 函数名 = function(参数){
    return 返回值
}

//调用函数
函数名(参数);

function(x){···} 是一个匿名函数，但是可以吧结果赋值给函数名，通过函数名就可以调用！
方式一和方式二等价！

参数问题：JavaScript可以传任意个参数，也可以不传参数！

规避不正常参数：手动定义异常

function abs(x){
    //抛出异常
    if(typeof x != 'number'){
        throw 'Not a number';
    }
    //处理数据
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments 关键字

arguments 代表，传递进来的所有的参数，是一个数组！

function abs(x){
    //抛出异常
    if(typeof x != 'number'){
        throw 'Not a number';
    }
    for(var i=0; i<arguments.length; i++){
        console.log(arguments[i]);//打印
    }
    //处理数据
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}
//调用
abs(1,2,3,54,6567,7,87,67);

利用arguments 可以拿到所有输入的参数
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数。

rest

以前：

if(arguments.length > 2){
    for(var i=2; i<arguments.length; i++){
        //语句
    }
}

ES6引入的新特性，获取除了已经定义的参数之外的所以有参数。

function abc(a,b,...rest){
    console.log("a="+a);
    console.log("b="+b);
    console.log(rest);
}

rest参数只能写下最后面，必须用 … 标识。

3.4.2 变量的作用域

在JavaScript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用（非要实现，可是利用闭包）

function abc() {
    var x = 1; 
    x= x + 1;
}  
x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。
内部函数可以访问外部函数的成员，反之则不行。
假设，内部函数变量和外部函数的变量重名，函数查找变量从自身函数开始！（由内向外查找）
假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function ab(){
    var x = 'x'+ y;
    console.1og(x); 
    var y = 'y';
}

结果：x undefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护。

全局函数

//全局变量
X = 1;
function f(){
    console.1og(x);
}
f();
console.1og(x);

全局对象window
默认所有的全局变量，都会自动绑定在window对象下。

var x = 'asd';
alter(x);
alter(window.x);//两者等价

alter()函数本身也是window变量；

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefreenceError

JavaScript规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~> 如何减少冲突？

//唯一全局变量
var abc = {};

//定义全局变量
abc.name ='ac'; 
abc.add = function(a,b){
    return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
常用jQuery , jQuery 等价于 $

局部作用域 let

function aaa(){
    for(var i = 0;i < 100;i++){
        console.1og(i);
    } 
} 
console.1og(i+1);//能输出101 存在问题? i出了这个作用域还可以使用

function aaa(){
    for(let i = 0;i < 100;i++){
        console.1og(i);
    } 
} 
console.1og(i+1);///uncaught ReferenceError:i is not defined

ES6 let关键字，解决局部作用域冲突问题！

常量

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量：建议不要修改这样的值
但是仍然可以手动去改变

var PI=3.14;
console.1og(PI);
PI='213';//可以改变这个值console.1og(PI);

在ES6 引入了常量关键字const

const PI ='3.14';//只读变量
console.1og(PI);
PI='123';//TypeError:Assignment to constant variable.
console.1og(PI);

3.4.3 方法

定义方法

方法就是把函数放在对象的里面，对象：属性和方法

var ps ={
    name:'ps',
    bitrh:2000,
    //方法
    age:function(){
        //今年-出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
    } 
}
//属性
ps.name
//方法,一定要带 ()
ps.age()

this. 代表什么？拆开上面的代码

function getAge(){
    //今年-出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
}
var ps ={
    name:'ps',
    bitrh:2000,
    //方法
    age:getAge 
}
ps.age()  //ok
getAge() //NaN

this 是无法指向的，是默认的指向调用它的那个对象；

apply 可以重新确认指向

在js中可以控制this 的指向

function getAge(){
    //今年-出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
}
var ps ={
    name:'ps',
    bitrh:2000,
    //方法
    age:getAge 
}
ps.age()  //ok
getAge().apply(ps,[]);//this 指向了ps，参数为空

3.5 内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math. abs
"function"
typeof undefined
"undefined"-

3.5.1 Date对象

基本使用：

var now = new Date()://Sat Jan 04 2020 10:47:06 GMT+0800(中国标准时间)
now.getFu11Year();//年
now.getMonth();//月
0~11 代表月
now.getDate();//日
now.getoay();//星期n now.getHoursC);//时
now.getMinutes();//分
now.getseconds();//秒
now.getTime();//时间戮 全世界统-1970 1.1 0:00:00 毫秒数
console.1og(new Date(1578106175991))//时间截转为时间

转换：

now new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800(中国标准时间)
now.toLocalestring//注意,调用是一个方式,不是一个属性!
f toLocalestring(){[native code]}
now.toLocalestring()
"2020/1/4 上午10:49:35"
now.toGMTString()
"sat,04 Jan 2020 02:49:35 GMT"

3.5.2 JSON对象

JSON_百度百科 (baidu.com)

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示(number、string···)

对象用 {}
数组用 []
所有键值对用 key: value

JSON字符串和 JS 对象的转化：

var user ={
    name:"xiaoming",
    age:3,
    sex:'男'
}

//对象转化为json字符  {"name":"xiaoming","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"xiaoming","age":3,"sex":"男"}');

JSON 和 JS 对象的区别：

var obj = {a:'hello',b:'world'};
var json = '{"a":"hello","b":"world"}';

3.5.3 Ajax

AJAX ASP/PHP | 菜鸟教程 (runoob.com)

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

JQuery 封装好的方法 $("#name").ajax("")
目前一般使用axios 请求axios中文文档|axios中文网 | axios (axios-js.com)

3.6 面向对象编程

3.6.1 原型对象

JavaScript、Java、c#······

常规下：

面向对象：类与对象

类：模板

对象：具体的实例

在 JavaScript 中有区别，原型 _proto_

var Student = {
    name:'',
    age:,
    run:function(){
        console.log(this.name + 'run···');
    }
}

var lisi = {
    name = "lisi"
}
//原型对象,lisi的原型是Student
lisi._proto_ = Student;

//调用
lisi.run();

var Bird = {
    fly:function(){
        console.log(this.name + 'fly···');
    }
}
//原型对象,lisi的原型是Bird
lisi._proto_ = Bird;
//调用
lisi.fly();

class 继承

class 关键字，是在ES6引入的

ES6之前：

function Student(name){
    this.name= name;
} 
//给Student新增一个方法
Student.prototype.he1lo = function(){
    alert('Hel1o')
};

ES6之后：

定义一个类，属性，方法

//定义一个学生的类
class Student{
    constructor(name){
       this.name = name; 
    }
    hello(){
        aLert('hello')
    }
} 

//实例化对象
var xiaowang = new Student("xiaowang");
xiaowang.hello();

继承

//定义一个学生的类
class Student{
    constructor(name){
       this.name = name; 
    }
    hello(){
        aLert('hello')
    }
} 
//继承
class pStuednt extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alter('我是一名小学生！');
    }
}

//实例化对象
var xiaohua = new pStudent("xiaohua",1);
xiaohua.myGrade();

本质：查看原型

原型链

原型及原型链详解_yyuand的博客-CSDN博客_原型链

3.7 操作BOM对象（重点）

BOM：浏览器对象模型

3.7.1 浏览器介绍

JavaScript 和浏览器的关系：JavaScript就是为了能够让他在浏览器中运行！

IE 6~11
Chrome
Safari
FirFox（Linix 系统自带）
其他浏览器

3.7.2 window（重要）

window代表浏览器窗口

window.alert(1)
undefined window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试,

3.7.3 Navigator（不建议使用）

Navigator 封装了浏览器的信息

navigator. appName
"Netscape"
navigator. appversion
"5.0 (windows NT 10.0; woW64) App1ewebkit/537.36 (KHTML, like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator. userAgent
"Mozi11a/5.0 (windows NT 10.0; woW64) Applewebkit/537.36 (KHTML, 1ike Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator. platform
"win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码

3.7.4 screen

screen代表屏幕尺寸

screen, width
1920 px screen,height
1080 px

3.7.5 location(重要)

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload C)//刷新网页
//设置新的地址
1ocation.assign('https://blog.kuangstudy.com/')

3.7.6 document(网页内容，DOM)

document 代表当前的页面，HTML DOM文档树

document.title
"百度一下,你就知道"
document.title='百度'
"百度"

获取具体的文档树节点

<d1 id="app">
    <dt>Java</dt>
    <dd> JavaSE</dd>
    <dd> JavaEE</dd>
</d1>
<script>
    var d1=document.getElementById('app');
</script>

获取cookie

document.cookie
"guid=111872281.88375976493059340.1578110638877.133;monitor_count=1"

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员:获取你的cookie上传到他的服务器-->

解决方案：服务器可以设置cookie为httpOnly

3.7.7 history

history 代表浏览器的历史纪录

history.back() //后退
history.forward() //前进

3.8 操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构！

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

3.8.1 获得DOM节点

此处为原生代码，尽量使用jQuery()。

//对应css选择器
var h1=document.getElementsByTagName('h1');
var pl=document.getElementById('p1');
var p2=document.getElementsByClas sName('p2');
var father=document.getElementsyId('father');

var childrens=father.children;//获取父节点下的所有子节点
//father.firstchild
//father.1astchild

3.8.2 更新DOM节点

<div id="id1">
    
</div>
<script>
	var id1 = document.getElementById('id1');//获得DOM节点
</script>

操作文本：

id1.innerText='123' 修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML 文本标签

操作JS：

id1.style.color='yellow'; //属性使用 字符串 包裹
id1.style.fontSize='20px'; //驼峰命名
id1.style.padding='2em';

3.8.3 删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <pid="p1">p1</p>
    <pclass="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
	father.removeChild(self);
    
    //删除是一个动态的过程:
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);//会删除失败
    
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！

3.8.4 创建及插入DOM节点

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是若DOM节点已经存在元素了，会产生覆盖！

追加appendChild(Node)

<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('1ist');
	1ist.appendChild(js);//追加到后面
</script>

效果：

在这里插入图片描述

创建一个新的标签，实现插入

<script>
	var js = document.getElementById('js');//获取已经存在的节点
    var list = document.getElementByrd('list');
	//通过JS创建一个新的节点
	var newp = document.createElement('p');//创建一个pj标签
    newp.id='newp';
    newp.innerText='Hello,World!';
    
    //插入 
    1ist.appendChild(newp);
    
    //创建一个标签节点
	var myscript=document.createElement('script');
    myscript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
	var myStyle=document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color:chartreuse;}';//设置标签内容
    document.getElementsByTagName("head')[0].appendchi1d(mySty1e);
</script>

insertBefore

var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

3.9 操作表单（验证）

表单：form DOM树···

文本框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

<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>
<script>
    var input text=document.getElementById('username');
    var boy radio=document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value='123'
    //对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中
    girl_radio.checked=true;//赋值
</script>

提交表单，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>
     <!--
        表单绑定提交事件
        οnsubmit=绑定一个提交检测的函数,true,false将这个结果返回给表单,使用onsubmit接收!
        οnsubmit="return aaa()"
    -->
    <form action="https://ww.baidu.com/" method="post" onsubmit="return aaa()">
        <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>

    <script>
        function aaa){
            alert(1);
            var uname=document.getElementById('username');
            var pwd=document.getElementById('input-password');
            var md5pwd=document.getElementById('md5-password');

            md5pwd.value = md5(pwd.value);
            //可以校验判断表单内容,true就是通过提交,false,阻止提交
            return true;
    </script>
</body>

3.10 jQuery

jQuery库，里面存在大量的JavaScript函数

官网：jQuery

详细学习地址：jQuery 选择器 | 菜鸟教程 (runoob.com)

文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

CDN jQuery，在线CDN引入

获取 jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--CDN引入-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <!--本地导入-->
    <!-- script src="lib/jquery-3.6.1.js"></script> -->
</head>
<body>
    <a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('id');
    //选择器就是css的选择器
    $('#test-jquery').click(function(){
    alert('hel1o,jQuery');
    })
</script>

</body>
</html>

jQuery 公式：$(选择器).事件(事件函数)

$(selector).action()

selector 表示ccs选择器，id->#
action 表示事件

选择器

原生JS，选择器少

标签，document.getElementByTagName();
id，document.getElementById();
类，document.getElementByClassName();

jQuery

$('p').click();，标签选择器
$('#id1').click();，id选择器
$('.class1').click();，class选择器

文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

鼠标事件、键盘事件···

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="1ib/jquery-3.4.1. js"></script>
    <style>
    # divMove{
    	width:500px; 
        height:500px; 
        border:1px solid red;
    }
    </style>
</head>
<body>
    
<!--要求:获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="diwove">
	在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后,响应事件
    // $(document).ready(function(){}) 
    //简写
    $(function){
		 $('#divMove').mousemove(function(e){
    		$('#mouseMove').text('x:'+e.pagex+'y:'+e.pageY)
    	})
    });
</script>
    
</body>
</html>

操作DOM

节点文本操作

$('#test-ul 1i[name=python]').text);//获得值
$('#test-u1 1i[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

CSS操作

$('# test-ul 1i[ name=python]').css({"color","red"})

元素的显示和隐藏：本质display:none

$('#test-u1 1i[ name=python]').show()
$('#test-u1 1i[ name=python]').hide()

巩固小技巧

巩固JS，看jQuery源码，看游戏源码
巩固HTML，CSS ，扒网站，下载下来然后对应修改看效果

资料整理来源：狂神视频

唯时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【前端基础2 -JavaScript】

3 JavaScript

3.1 什么是JavaScript

3.1 概述

3.2 历史

3.2 快速入门

3.2.1 引入JavaScript

3.2.2 基本语法入门

3.2.3 数据类型

3.2.4 严格检查模式strict

3.3 数据类型详解

1）字符串

2）数组

3） 对象

4）流程控制

5）Map 和 Set集合

6）迭代器iterator

3.4 函数

3.4.1 定义函数

3.4.2 变量的作用域

3.4.3 方法

3.5 内部对象

3.5.1 Date对象

3.5.2 JSON对象

3.5.3 Ajax

3.6 面向对象编程

3.6.1 原型对象

3.7 操作BOM对象（重点）

3.7.1 浏览器介绍

3.7.2 window（重要）

3.7.3 Navigator（不建议使用）

3.7.4 screen

3.7.5 location(重要)

3.7.6 document(网页内容，DOM)

3.7.7 history

3.8 操作DOM对象（重点）

3.8.1 获得DOM节点

3.8.2 更新DOM节点

3.8.3 删除DOM节点

3.8.4 创建及插入DOM节点

3.9 操作表单（验证）

3.10 jQuery

3）对象