3.JavaScript快速入门

1.什么是JavaScript

1.概述

是一门世界上最流行的脚本语言

Java和 JavaScript

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

2.历史

ECMAScript是JavaScript的一个标准

最新那本已经到ES6版本

但是大部分浏览器只停留在ES5代码上

开发环境 线上环境 版本不同

2快速入门

2.1引入JavaScript

1.内部标签使用

<script>
	alert("HelloWorld");
</script>

2.外部引入

abs.js

//....

test.html

    <script src="js/js.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内 写JavaScript-->
    <!--    <script>-->
    <!--        alert("HelloWorld");-->
    <!--    </script>-->
<!--    外部引入-->
<!--    script必须成对出现 -->
    <script src="js/js.js"></script>

    <script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>

2.2基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--JS严格区分大小写-->
    <script>
        //1. 定义变量 变量类型 变量名 =变量值
        var score = 80;
        var name = "林宏程";

        //2.条件控制
        if (score > 60 && score < 70) {
            alert("60~70")
        } else if (score >= 70) {
            alert("70~100")
        } else {
            alert("other")
        }
        //console.log()在浏览器的控制台打印变量  System.out.println()

    </script>
</head>
<body>

</body>
</html>

浏览器必须调试须知

在这里插入图片描述

2.3数据类型

数值 文本 图形 音频 视频…

变量

var la 命名方法和Java一样

number

JS不区分小数和整数 Number

123 //整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN// not a number
Infinity//表示无限大

String

‘abc’,“abc”

Boolean

true false

逻辑运算

&&  两个都为真 结果为真

||  一个为真 结果为真

!取反

比较运算符(重要)

=赋值

==等于(类型不一样 值一样 也会判断为true)

===绝对等于(类型一样 值一样 结果为true)

这是一个JS的缺陷 坚持不要使用 ==

  • 须知 NaN 这个与所有的数值都不相等 包括自己
  • 只能通过isNaN(NaN)来判断这个数是不是NaN

浮点数的问题

console.log((1/3)===(1-2/3));//flase

尽量不要使用浮点数 存在精度问题

console.log(Math.abs(1/3-(1-2/3))<0.00001)//true

使用Math类型可以判断

null和undefined

  • null 空
  • undefined 未定义

数组

Java的数组需要相同类型的对象 JS中不需要这样

var array=[1,2,3,4,5,"hhh",null,true]

取数组下表 如果越界了 就会

undefined

对象

对象是大括号 数组是中括号

每个属性之间使用逗号隔开 最后一个不需要

//Person person= new Person(1,2,3,4,5);
var person={
    name:"林宏程",
    age:3,
    tags:['js','java','web']
}

取对象的值

person.name
>'林宏程'

2.4严格检查模式

保证环境一致

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 必须写在第一行
        // 必须写在第一行
        // 必须写在第一行
        'use strict';
        //严格检查模式 'use strict';预防JavaScript的随意性导致一些问题
        //全局变量
        a=1;//此处就会报错
        
        //ES6 let 局部变量建议使用let去定义
        let b=0;
    </script>
</head>
<body>

</body>
</html>

3.数据类型

3.1字符串

1.正常字符串我们使用单引号 或者 双引号包裹

2.注意转移字符 \

\' 
\n 换行
\t 空格
\u4e2d /u#### Unicode字符 
\x41   Asc11字符

3.多行字符串编写 ``

        // 波浪号键 可以长字符
        var msg=`你号
                你是谁
                 忘记了
        `

4.模板字符串

此处用的还是波浪线的字符串``

let name="林宏程";
let age=3;
let msg=`你好呀 ${name}`

console.log(msg)

5.字符串长度

console.log(str.length)

6.字符串的可变性 不可变

在这里插入图片描述

7.大小写转换

//这里是方法 不是属性
student.toUpperCase() 大写
student.tolowerCase() 小写

8.str.indexOf(‘t’)

锁定

9.str.substring(1)

str.substring(1) 从第一个字符串截取到最后一个字符串
str.substring(1,3)从第一个字符串截取到第3个字符串

3.2数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5]//通过下标取值和赋值

1.长度

arr.length

注意:假如给arr.length赋值 数组大小就会发生变化 如果赋值过小 元素就会丢失

2.indexOf

下标索引

字符串的"1"和数字1 是不一样的

3.slice()

可以截取Array的一部分 返回一个新数组 相当于String中的subString()

4.push pop

push 压入一个元素到尾部
pop  弹出尾部的一个元素

5.unshift() shitf()

unshift() 压入一个元素到头部
shitf()	  弹出头部的一个元素

6.排序 sort()

在这里插入图片描述

arr=[2,3,1]
(3) [2, 3, 1]
arr.sort()
(3) [1, 2, 3]

7.元素反转

在这里插入图片描述

arr.sort()
(3) [1, 2, 3]
arr.reverse()
(3) [3, 2, 1]

8.concat()

注意 concat()没有修改数组 只是会返回一个新的数组

arr.concat([1,2,3])
(6) [3, 2, 1, 1, 2, 3]
arr
(3) [3, 2, 1]

9.连接符join

打印拼接数组 使用特定的字符串连接 也不会修改arr本身

arr.join('-')
"3-2-1"
arr
(3) [3, 2, 1]

10.多维数组

arr=[[1,2],[3,4],["5","6"]]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) ["5", "6"]
length: 3
__proto__: Array(0)

数组:存储数据 如何存 如何取值 (方法都可以自己实现)

3.3对象

若干个键值对

格式:

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

//定义了一个person对象 他有
        var person={
            name:"林宏程",
            age:3,
            email:"1025993689@qq.com"
        }

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

1.对象赋值

person.name
>'林宏程'

2.使用一个不存在的对象属性 不会报错 undefined

person.haha
undefined

3.动态的删减属性

delete person.name
true
person

4.动态的添加

person.haha=haha
"哈哈"
person

5.判断属性值存在与否

`age` in person
true
//继承
'toString' in person
true

6.判断这一个属性是否是这个对象自身拥有的

person.hasOwnProperty("toString")
false
person.hasOwnProperty("age")
true

3.4流程控制

1.if判断

var age=3;

if (age>3){//第一个判断
    alert('haha')
}else {//第二个判断
    alert('xixi')
}

2.while循环 避免程序死循环

while(age<100){
    age++;
    console.log(age)
}

do {
    age++;
    console.log(age)
}while(age<100)

3.for循环

var age=3;
for (let i = 0; i < 100; i++) {
    console.log(i)
}

4.forEach循环

let arr=[1,2,3,4,5];
arr.forEach(function (value) {
    console.log(value)
})

3.5Map和Set

ES6的新特性~

Map:

"use strict";
// 学生的成绩 学生的名字
var map=new Map([["tom",100],["jack",90],["haha",80]]);
var name= map.get("tom");//通过key获得value
map.set("admin",123456);
map.delete("tom");
console.log(name);

Set: 无序不重复的集合

var set=new Set([3,1,1,1,1,1]);//Set可以去重复
set.delete(2)
set.add(1)
console.log(set.has(3))

3.6iterator迭代器

ES6新特性

遍历数组

"use strict";
var arr=[3,4,5];
for (var x of arr){
    console.log(x)
}

遍历Map

var map=new Map([["tom",100],["jack",90],["haha",80]]);
for (var x of map){
    console.log(x)
}

遍历Set

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

4.函数

4.1定义一个函数

​ 定义方式一

function abs(x){
    if(x>=0){
         return x;
    }else{
         return -x;
    }
}

一旦执行到return函数结束 返回结果!

如果没执行return 函数执行完也会返回结果 结果就是undefined

​ 定义方式二

var abs=function (x){
    if(x>=0){
         return x;
    }else{
         return -x;
    }
}

function(x){…} 这是一个匿名函数 但是可以把结果赋值给abs 通过abs就可以调用函数

方式一和方式二等价!

调用函数

abs(10)//10
abs(-10)//10

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

参数进来是否存在的问题 假设不存在参数 如何规避

"use strict"

function abs(x) {
    if (typeof x!=='number'){
        //手动抛出异常
        throw 'not a number';
    }
    if (x >= 0) {
        return x;
    }
    else
    {
        return -x;
    }
}

​ arguments

arguments是一个JS免费赠送的关键字

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

function abs(x) {

    for (let argument of arguments) {
        console.log(argument)
    }

    if (arguments.length>1){
        arguments[1];
    }
    
    if (x >= 0) {
        return x;
    }
    else
    {
        return -x;
    }
}

问题 arguments会包含所有的参数 我们有时候想使用多余的参数来进行附加操作

rest

以前:

function aaa(a,b) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    
    if (arguments.length>2){
        for (var i=2;i<arguments.length;i++){
            
        }
    }
}

ES6引用的新特性 获取了已经定义的参数之外的所有参数…

function aaa(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);

}

rest参数只能写在最后面 必须用…标识.

4.2变量的作用域

JavaScript中 var定义变量实际上是有作用域的

假设在函数体重声明 则在函数体外不可以使用(非要想是想的话 后面必须学 闭包)

"use strict"

function qj() {
    var x=1;
    x++;
}

x=x+1;//Uncaught ReferenceError x is not defined

如果两个函数使用的相同的变量名 只要在函数内部 就不会冲突

function qj(){
    var x=1;
    x=x+1;
}
function qj2(){
    var x='a';
    x=x+1;
}

内部函数可以访问外部函数的成员 反之则不行

function qj() {
    var x = 1;

    function qj2() {
        var y = x + 1;//2
    }

    var z = y + 1;//Uncaught ReferenceError: z is not defined
}

假设 内部函数变量 和外部函数的变量 重名

    function qj() {
        var x = 1;

        function qj2() {
            var x = x + 1;
            console.log(x);//1
        }

        console.log(x)//1
        qj2();//1
        
    }

在JavaScript中 函数查找变量从自身函数开始 由内向外查找

1提升变量的作用域

function qj() {
    var x="x"+y;
    console.log(x);
    var y="y";
}

结果 y undefined

说明 JS执行引擎 自动提升了Y的声明 但是不会提升变量Y的赋值

    function qj2() {
        var y
        var x="x"+y;

        console.log(x);
        y="y";
    }

这个是在JavaScript简历之初就存在的特性 养成规范 声明放在开头 便于维护代码

    function qj2() {
        var y="y"
        var x="x"+y;

        console.log(x);

    }

2全局函数

//全局变量
let x = 1;

function f() {
    console.log(x)
}
f();
console.log(x);

全局对象 window

var x = 'xxx'
alert(x)
alert(window.x)//默认所有的全局变量都会自动绑定在window对象下

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;
alert(456)//456

JavaScript 实际上只有一个全局作用域(函数也可以视为变量)假设没有在函数作用范围内找到 就会向外查找 如果在全局作用域,报错 ReferenceError

3规范

由于我们所有的全局变量 都会绑定到我们的window 如果不同的JS文件 使用了相同的全局变量就会冲突 如何能减少冲突

var KuangApp={}

//定义全局变量
KuangApp.name='kuangshen'

KuangApp.add=function (a,b) {
    return a+b
}

吧自己的代码全部放入自己定义的唯一空间名字中 降低全局命名冲突的问题~

JQuery

4局部作用域

"use strict"
function aaa() {
    for (var i = 0; i <100 ; i++) {
        console.log(i)
    }
    console.log(i+1)//i出了作用域 还可以使用
}

5let

ES6 let关键字 解决局部作用域冲突!

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

6常量 const

在ES6之前 怎么定义常量 只有用全部大写的字母命名的变量就是常量 建议不要修改这样的值

    var PI='3.14'
    console.log(PI)
    
    PI='213'
    console.log(PI)
</script>

在ES6引入了常量关键字

const PI='3.14'
console.log(PI)

PI='213'//Assignment to constant variable.
console.log(PI)

4.3方法

1.定义方法

方法就是把函数放在对象的里面 对象只有两个东西 属性和方法

var person={
    name:'林宏程',
    birth:1997,
    //方法
    age:function(){
        //今年-出生的年
        let now = new Date().getFullYear();
        return now-this.birth;
    }
}

//属性
person.name
//方法 一定要带()
person.age()

this

代表什么 拆开上面的代码看看

function getAge() {
    //今年-出生的年
    let now = new Date().getFullYear();
    return now-this.birth;
}

var person={
    name:'林宏程',
    birth:1997,
    //方法
    age:getAge
}
//person.age() ok
//getAge() NaN window

this 是无法指向的 是默认执行调用它的对象

apply

指定一个函数指向的对象

function getAge() {
    //今年-出生的年
    let now = new Date().getFullYear();
    return now-this.birth;
}

var person={
    name:'林宏程',
    birth:1997,
    //方法
    age:getAge
}

getAge().apply(person,[])//空参 指向了person这个对象 参数为空

5内部对象

标准对象

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

1.Date

基本使用

    let now =new Date();
    now.getFullYear();//年
    now.getMonth()//月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳 全世界统一 1970.1.1 0:00:00到现在本机的毫秒时间

2.JSON

json是什么

早期 所有的数据传输使用XML文件

(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

在JavaScript中 一切皆为对象 任何JS支持的类型 都可以用JSON来表示

格式

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

JSON字符串和JS对象的转换

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

//对象转换成json字符串
var jsonUser=JSON.stringify(user)//{"name":"lhc","age":3,"sex":"男"}

//json 字符串转换成字符串
var obj=JSON.parse(jsonUser)//{name: "lhc", age: 3, sex: "男"}

JSON和JS对象的区别

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

3Ajax

  • 元素的JS写法 xhr异步请求
  • jQuery封装好的 方法 #(#name).ajax("")
  • axios 请求

6.面向对象

1.什么是面向对象

JavaScript Java c# …面向对象 JavaScript有些区别!

类:模板 ------>原型

对象:具体的实例

在JavaScript中 这个需要大家换一下思维方式

原型:

var user={
    name:"lhc",
    age:3,
    sex:"男",
    run:function () {
        console.log(this.name+"run......")
    }
}

var bird={
    fly:function () {
        console.log(this.name+"fly......")
    }
}

var xiaoming={
    name:"xiaoming"
}

xiaoming.__proto__=bird;//user和bird是小明的原型

2.Class继承

  1. 定义一个类 属性 方法

    class Student{
        constructor(name) {
            this.name=name;
        }
        hello(){
            alert("hello")
        }
    }
    
  2. 继承

    class Pupil extends Student{
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }
        myGrade(){
            alert("我是个小学生");
        }
    }
    

在这里插入图片描述

本质还是对原型修改 但是写法对有Java基础的人更加友好

原型链

​ __ proto__

7操作BOM对象(重点)

浏览器介绍

JavaScript和浏览器的关系

JavaScript诞生就是为了能够让他在浏览器中运行

BOM:浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • FireFox(Linux)
  • Opera (塞班系统)

三方

  • QQ浏览器
  • 360浏览器

1.window(重点)

window代表 浏览器窗口

windos.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919

2.Navigator

Navigator 封装浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36"
navigator.platform
"Win32"

大多数时候 不会使用Navigator 对象 因为会被人人修改

不建议用这些属性来判断和编写代码

3.screen

代表屏幕尺寸

screen.width
1920
screen.height
1080

4.location(重点)

location代表当前页面的URL信息

host: "www.bilibili.com"
href:"https://www.bilibili.com/video/BV1JJ41177di?p=19"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign(https://www.baidu.com)

5.document(文档内容 )

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

document.title
"【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"
document.title='xixi'
"xixi"

获取具体的文档数节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    let dl = document.getElementById(`app`);
</script>
</body>
</html>

6.cookie

获取cookie

document.cookie
"finger=1571944565; _uuid=1B672423-A829-D31E-5237-19797765275A61078infoc; buvid3=79564B33-CA5C-4C1E-9779-DFE9ADCD3A38138386infoc; sid=biys0q9d; DedeUserID=830089; DedeUserID__ckMd5=f7db4c54651d390e; bili_jct=9ff089763c8989a865c30b6ede038bee; CURRENT_FNVAL=80; blackside_state=1; rpdid=|(u|JmklRR)Y0J'uY||~Rm~)Y; CURRENT_QUALITY=80; bp_video_offset_830089=439304880131946099; PVID=2"

劫持cookie的原理

www.taobao.com

<script src='aa.js'></script>
<!-- 恶意获取你的cookie 上传到它的服务器-->

服务器端可以设置 cookie: httpOnly

history

history 代表浏览器的历史记录

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

8操作DOM对象(重点)

DOM: 文档对象模型

核心

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

  • 更新: 更新Dom节点
  • 遍历dom节点 得到Dom节点
  • 删除 删除一个Dom节点
  • 添加:添加一个新的节点

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

获得dom节点

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

这是元素代码 之后我们都尽量使用jQuery

1.更新节点

操作文本

id1.innerText='456' 修改文本的值

id1.innerHTML='<strong>123</strong>' 可以解析html文本标签

操作JS

id1.style.color='red'//使用字符串包裹
"red"
id1.style.fontSize='20px'//驼峰命名问题
"20px"

2.删除节点

删除节点的步骤 先删除父节点 再通过父节点删除自己

    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father=document.getElementById('father');


    father.removeChild('p1');//删除p1
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
    // father.firstChild
    // father.lastChild

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

3插入节点

我们获得了某Dom节点 假设这个dom是空的 我们通过innerHTML 但是这个DOM节点已经存在元素了 我们就不能这样干 会产生覆盖

追加操作

<!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="JavaSE">JavaSE</p>
    <p id="JavaEE">JavaEE</p>
    <p id="JavaME">JavaME</p>

</div>
<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');

    list.appendChild(js)//追加到后面

</script>

</body>
</html>

效果

在这里插入图片描述

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

<!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="JavaSE">JavaSE</p>
    <p id="JavaEE">JavaEE</p>
    <p id="JavaME">JavaME</p>

</div>
<script>
    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');

    //通过js创建一个新的节点
    let newP = document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='hello';

    list.appendChild(newP)//追加到div中

</script>

</body>
</html>

9操作表单

表单

form DOM树

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

表单的目的

提交信息

获得要提交的信息

<!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="woman" id="girl"></p>


</form>

<script>
    let input_text = document.getElementById("username");
    let boy_radio = document.getElementById("boy");
    let girl_radio = document.getElementById("girl");
    //得到输入框的值

    //修改输入框的值
    input_text.value = '1111';

    //对于单选框 多选框等等固定的值 只能取到当前的值 所以用下面
    girl_radio.checked=true//操作选中的是 女 默认
</script>
</body>
</html>

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名:</span><input type="text" id="username">
    </p>
    <!--多选框的值 就是定义好的value的值-->
    <p>
        <span>密码:</span><input type="text" id="password">
    </p>

    <input type="hidden" id="md5-password" name="md5pwd">
    <!--    绑定事件 onclick被点击-->
    <button type="button" onclick="">提交</button>

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


            md5pwd.value=md5(pwd.value)

            //可以校验判断表单内容 true就是通过提交 false就是阻止提交
            return true

        }
    </script>
</form>
</body>
</html>

10jQuery

JavaScript 和

jQuery 工具类 里面存在大量的JavaScript函数

1.获取 jQuery

<!DOCTYPE html>
<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>

</body>
</html>

测试

<!DOCTYPE html>
<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>
<!--
公式:$(selector)
-->

<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('id')
    //选择器 就是css的选择器
    $(
        '#test-jquery'.click(
            function () {
                alert('hello')
            }
        )
    )
</script>

</body>
</html>

2.选择器

公式:$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //原生js  选择器少 麻烦不好记
    //标签
    document.getElementsByTagName()
    //id
    document.getElementById()
    //类
    document.getElementsByClassName()

    //jQuery  css中的选择器全部都可以用
    $('p').click()//标签选择器
    $('#id1').click()//id选择器
    $('.class1').click()//类选择器

</script>
</body>
</html>

3.事件

鼠标事件 键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<!--要求 获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标
</div>

<script>
    //当网页元素加载完毕之后 响应事件
    $(document).ready(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

4.操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//选择text
$('#test-ul li[name=python]').text('111');//修改text
$('#test-ul').html();//选择html
$('#test-ul').html('<strong>123</strong>');//html修改

css的操作

$('#test-ul li[name=python]').css("color","red")

元素的显示和隐藏

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

本质是 display=none;

未来的ajax();

$(#form).ajax();

小技巧

  1. 如何巩固JS (看jQuery源码 看游戏)
  2. 巩固HTML CSS (扒网站 全部down下来 然后对应修改网站)
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值