3.JavaScript快速入门

最新推荐文章于 2023-02-02 13:45:06 发布

Mercy_Wick

最新推荐文章于 2023-02-02 13:45:06 发布

阅读量633

点赞数 2

分类专栏： HTML+CSS+JS

本文链接：https://blog.csdn.net/m0_46110789/article/details/109010250

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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继承

定义一个类属性方法

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

继承

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();

小技巧

如何巩固JS (看jQuery源码看游戏)
巩固HTML CSS (扒网站全部down下来然后对应修改网站)

Mercy_Wick

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
3.JavaScript快速入门

1.什么是JavaScript1.概述是一门世界上最流行的脚本语言Java和 JavaScript一个合格的后端人员必须精通JavaScript2.历史ECMAScript是JavaScript的一个标准最新那本已经到ES6版本但是大部分浏览器只停留在ES5代码上开发环境线上环境版本不同2快速入门2.1引入JavaScript1.内部标签使用<script> alert("HelloWorld");</script>2.外部引入abs.js
复制链接

扫一扫