javaScript

老婆韩雪莲

于 2022-05-21 09:59:51 发布

阅读量201

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45456100/article/details/124894744

版权

typora-copy-images-to: code

1.什么是javaScript

1.1概述

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

java. javaScript

10天

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

1.2历史

ECMAScripet可以理解为是JAVAScripet的一个标准

2 快速入门

2.1 引入javaScripet

内部标签

    <!--   script标签内写js代码 -->
    <script>
        alert("hellO  word");
    </script>

外部引用

abc.js

//...

test.html

<!--    外部引入  尽量不要加自闭合标签  script 必须承兑出现-->
    <script src="abc.js"></script>

测试代码

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

<!--两个存放js的位置头部或者body的尾部-->
    <!--   script标签内写js代码 -->
    <script>
        alert("hellO  word");
    </script>

<!--    外部引入  尽量不要加自闭合标签  script 必须承兑出现-->
<!--    外部引入  尽量不要加自闭合标签  script 必须承兑出现-->
    <script src="js/qj.js"></script>

<!--    不用显示定义type,默认就是javascript-->
    <script type="text/javascript"></script>

</head>
<body>

```

2.2基本语法入门

<!--    javaScript 严格区分大小写-->
    <script>
        // 1.定义变量  变量类型 变量名 = 变量值;
        var num = 1;
        var name = "zls";
        "helloword";
        // 2.条件控制
        var score = 71;
        if (score>60 && score<70){
            alert("60-70");
        }else if (score>70 && score<80){
            alert("70-80");
        }else {
            alert("other");
        }

        //console.log(score)  在浏览器的控制台打印变量  System.out.println(();
        /*
        多行注释
         */

    </script>

浏览器必备调试须知：

在这里插入图片描述

2.3数据类型

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

变量

var $1 = 1;
var _1 = 1;
var 王者1 = 1;

number

js不区分小数跟整数 number

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

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

&&  两个为真结果为真
||   一个为真结果为真
!    取反,真就是假,,假就是真

比较运算符非常重要

=
==   等于(类型不一样,值一样,也会判断为true)
===  绝对等于(类型一样,值一样结果未true)

这是js的一个缺陷,坚持不要使用==比较

须知:

NaN===NaN 这个与所有的数值都不想等,包括他自己
只能通过isNaN(NaN)来判断这个数是NaN

浮点数问题’’

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

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

console.log( Math.abs(1/3-(1-2/3)<0.00000001) );

null 和undefined

null 空
undefined未定义

数组

一系列相同类型的对象

java的数值必须是相同类型的对象,js中不需要这样

//保证代码的可读性尽量用上面那种
        var arr = [1,2,3,4,5,null,true,'hello',"hello2"];

        new Array(1,2,3,4,5,null,true,'hello',"hello2");

去数组下标:如果越界了就会

undefined

对象

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

每个属性使用","隔开最后不需要

//new Persion  persion  = new Persion(1,2,3,4,5);
var persion = {
    name: "zls",
    age: 3,
    tags: ['js','java','web','...']
}

取对象的值

persion.age
>"3"

2.4 严格检查模式

<!--
前提idea需要设置支持es6语法
'use strict'; 代表严格检查模式,预防js的随意性导致产生一些问题
局部变量都建议使用let定义
必须写在javaScript的第一行
-->
    <script>
        'use strict';  //代表严格检查模式,预防js的随意性导致产生一些问题
        //默认是全局变量
        //i = 1;
        //var i = 1;

        //es6  let 局部变量
        let i = 1;

    </script>

在这里插入图片描述

3 数据类型

3.1 字符串

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

注意转义字符 \

\'
\n
\t
\u4e2d    \u###  unicode字符
"\x41"     AscII字符

多行字符串编写

//tab piao ~
var msg =
    `hello
    word
    你好
    你好呀`;

模板字符串

let name = "zls";
let age = 3;
//是飘`
let msg = `你好呀, ${name}`

字符串长度
```
console.log(student.length);
```
字符串的可变性,不可变

在这里插入图片描述

大小写转换

//注意这里是方法不是属性了
student.toUpperCase()
student.toLowerCase()

student.indexOf(‘t’)

substring

[)
student.substring(1,3)//从第一个字符串截取到第三字符串
student.substring(1)//从第一个字符串截取到最后

3.2 数组

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

var arr =[1,2,3,4,5];
arr[0];
arr[0] = 1;

长度
```
arr.length
```
注意:加入给arr.length 赋值数组大小就会发生变化,如果赋值过小元素就会丢失
indexOf ,通过元素获得下标索引
```
 arr.indexOf(2)
```
字符串的"1"与数字1是不同的
slice() 截取Array的一部分,返回一个新数组类似于String中的subString

push , pop 尾部

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

unshift() shift() 头部

unshift ; 压入到头部
shift;    弹出头部的一个元素

排序 sort()

arr=['B','A','C'];
(3) ['B', 'A', 'C']
arr.sort();
(3) ['A', 'B', 'C']

元素反转 reverse()

arr
(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']

concat()

arr.concat(1,2,3);
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']

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

连接符join

打印拼接数组使用特定的字符串连接
```
arr
(3) ['C', 'B', 'A']
arr.join("-")
'C-B-A'
```
多维数组

arr =[[1,2],[3,4]];
arr[1][1];
4

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

3.3 对象

若干个键值对

 var 对象名 = {
       属性名: 属性值,  
       属性名: 属性值,  
       属性名: 属性值,  
       属性名: 属性值
        }
 
  //定义了一个persion对象
        var persion = {
            name: "zls",
            age: 3,
            email:"444444@qq.com",
            score: 0
        }

js中的对象{…}表示一个对象 , 键值对描述属性xxxx: xxxx,多个属性之间用逗号隔开,最后一个属性不要加逗号

js中的所有建都是字符串,值是任意值

对象赋值

persion
{name: 'zls', age: 3, email: '444444@qq.com', score: 0}
persion.name = "wangbagaozi";
'wangbagaozi'
persion
{name: 'wangbagaozi', age: 3, email: '444444@qq.com', score: 0}

使用一个不存在的对象属性,不会报错 undefined
```
persion.sddfdsds
undefined
```

动态的删减属性,通过delete删除对象的属性

delete persion.name 
true
persion
{age: 3, email: '444444@qq.com', score: 0}

动态的添加,直接给新的属性添加值即可

persion.hhhhh="hahahahahah";
'hahahahahah'
persion
{age: 3, email: '444444@qq.com', score: 0, hhhhh: 'hahahahahah'}

判断属性值是否在这个对象中 xxx in xxx!

'age' in persion
true
//继承
'toString' in persion
true

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

persion.hasOwnProperty("toString");
false
persion.hasOwnProperty("age");
true

3.4 流程控制

if判断

var age = 3;
if (age>3){
    alert("hahaha");
}else {
    alert("哭唧唧");
}

while循环避免死循环

var age = 3;
while (age<100){
    age = age+1;
    console.log(age);
}

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

for循环

var age = 3;

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

数组循环

for in 取下标索引

for of 取值

var age = [2,5,6,8,9,8,7,4,2];
for (let number of age) {
    console.log(number);
}

forEach循环

5.1

var age = [2,5,6,8,9,8,7,4,2];

age.forEach(function (value) {
    console.log(value);
});

3.5 map 和 Set

Es6的新特性~

map:

//es6  学生的成绩,学生的名字
// new Map();
// new Set();
//var name = ["tom","jack"];
var map = new Map([["tom",100],["jack",86]]);
var name= map.get("tom");//通过key 获得value
map.set("admin",66);  //新增或者修改
console.log(name);  //删除

set:无序不重复的集合

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

3.6 iterator

es6新特性

作业:使用iterator遍历迭代我们的map set

通过for  of 来实现

遍历map

var map = new Map(["tom",100],["jack",89]);
for (let mapElement of map) {
    console.log(mapElement);
}

遍历set

var set = new Set([5,6,9]);
for (let number of set) {
    console.log(number);
}

4函数

方法: 对象(属性 ,方法)

函数:

4.1定义函数

定义方式1

public 返回值类型 方法名(){
  return 返回值;
}

绝对值函数

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

一旦执行return代表函数结束,返回结果!

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

定义方式二
var abd = function(x){
   if(x>0){
    return x;
  }else{
    return -x;
  }
}
function(x){…} 这是个匿名内部类,但是可以把结果赋值给abs 通过abs就可以调用函数!

方式一与方式二等价

调用函数

abs(10)  //返回10
abs(-10)  //返回10

参数问题:js可以传递任意各参数,可可以不穿参数

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

 var abs = function(x){
            //手动抛出异常来判断
            if (x !== 'number'){
                throw 'Not a number';
            }
            if(x>0){
                return x;
            }else{
                return -x;
            }
        }

arguments

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

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

var abs = function(x){

    console.log("x=>"+x);

    for (var i = 0; i<arguments.length ; i++){
        console.log(arguments[i]);
    }
    
    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 (let i = 2; i < arguments.length; i++) {
					//....
                }
            }
        }

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

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

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

4.2变量的作用域

在js中,var定义变量实际上是有作用域的

假设在函数体内声明,这在函数体外不可以使用(非要想实现的话,在后面可以学习避包)

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

x += 2; //Unresolved variable or type x

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

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

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

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

function qj(){
    var x = 1;

    //内部函数可以访问外部函数的成员
    function qj2(){
        var y =x+ 1;  //2
    }

    var  z = y+1 //  y为定义
}

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

function qj(){
            var x = 1;

            //内部函数可以访问外部函数的成员
            function qj2(){
                var x = 'a';
               console.log('inner'+x);//outer1
            }
            console.log('outer'+x);  //innerA
            qj2();
        }

qj();

假设javaScript中函数查找从自身函数开始,从内->外查找内部变量屏蔽外部变量

假设外部存在同名函数变量,择内部函数屏蔽外部函数的变量

提升变量的作用域

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

结果: xundefined

说明: js执行引擎 ,自动提升y的声明,但是不会提升y的赋值

function qj2() {
    // var  x,y,z..... ;
    var  x,y;
    x = "x" +y;
    console.log(x);
    y= "y";
}

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

function qj2() {
    var  x=1,
        y = x+1,
        z,i,a;
  //之后随意用
}

全局函数

 //全局变量
        var 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;//默认所有的全局变量都会自动绑定window对象下

//old_alert(x);

window.alert = function () {

};
//发现window.alert失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

js实际上只有一个全局作用域,任何变量(函数也可以看做变量) 假设没有在函数作用范围内找到,就会往外找 ,如果在全局做用域都没找到,报错ReferenceError

Uncaught ReferenceError: x is not defined

规范

由于我们的所有的全局变量都会绑定到我们的window上 ,如果不同的js文件使用了相同的全局变量,冲突–>如果能够减少冲突?

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

        //定义全局变量
        zlsApp.name = 'zls';
        zlsApp.add = function (a, v) {
            return a+v;
        }

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

jQuery ===$

局部定义域 let

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

ES6 let关键字解决作用域冲突问题

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

建议大家都使用let 去定义局部作用域的变量

常量 const

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

var PI = 3.14;
console.log(PI);
PI = '2222';
console.log(PI);

在ES6引入了常量关键字 const

const  PI = 3.14;
console.log(PI);
PI = 12.36;  //Attempt to assign to const or readonly variable
//Uncaught TypeError: Assignment to constant variable.

4.3 方法

定义方法

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

var  zls = {
    name: '张立帅',
    bitrh: 2000,
    //方法
    age: function (){
        //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitrh;
    }
}

//属性
zls.name;
//方法  ,  一定要有()
zls.age();

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

//方法
function getAge(){
    //今年-出生的年
    var now = new Date().getFullYear();
    return now - this.bitrh;

var  zls = {
    name: '张立帅',
    bitrh: 2000,
    age: getAge
    }
}
//zls.age();  ok
//getAge();   NaN   window

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

apply

在js中可以控制this指向

//方法
function getAge(){
    //今年-出生的年
    var now = new Date().getFullYear();
    return now - this.bitrh;

var  zls = {
    name: '张立帅',
    bitrh: 2000,
    age: getAge
    }
}

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

5 内部对象

标准对象

5.1 Date

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hj8q07E6-1653097639217)(code/1651127793084.png)]

基本使用

var now = new Date();//当前时间
now.getFullYear();//年
now.getMonth();//月  0-11代表月份
now.getDate();//日
now.getDay();//星期几
now.getHours();//小时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳   全世界统一1970.1.1.0
var time= new Date(now.getTime());//获得当前时间

转换

time

Thu Apr 28 2022 14:55:56 GMT+0800 (中国标准时间)

time.toLocaleString   //是一个方法不是属性

ƒ toLocaleString() { [native code] }

time.toLocaleString()

'2022/4/28 14:55:56'

time.toGMTString

ƒ toUTCString() { [native code] }

time.toGMTString()

'Thu, 28 Apr 2022 06:55:56 GMT'

5.2json

json是什么

在这里插入图片描述

在js中一切都是对象,任何js文件支持的类型都可以用json来表示; number String

格式:

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

json字符串和js对象的转化

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

       //json字符串转化为对象
       var user2 = JSON.parse(jsonUser.toString());

很多人都搞不清楚,json与js对象的区别

 var obj = {a:'hello',b:'hello'};  //对象
 var json = '{"a":"hello","b":"hello"}';  //对象

5.3 ajax

原生的js写法 xhr异步请求
jQuey封装好的方法$(“#name”).ajax(“”)
axios请求

6面向对象编程

6.1原型对象

js , JAVA , c# …面向对象 js有些区别

类 : 模板原型对象
对象 : 具体的实例

在js中需要换一下思维

原型:

var Student =  {
    name: " 张立帅",
     age: 3,
    sex: "男",
    run :function (){
         console.log(this.name+"run...");
    }
}

var xiaoming = {
     name: "小明"
}

//小明的原型是Student
xiaoming.__proto__ = Student;

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


xiaoming.__proto__ = Bird;

class继承

以前的

       function Student(name){
          this.name = name;
       }

       //给Student新增一个方法
        Student.prototype.helo = function (){
            alert("Hello");
        };

class关键字是在ES6引入的

定义一个类属性,方法

//ES6之后
//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert("Hello");
    }
}

var xiaoming = new Student("小明");
var xiaohong = new Student("小红");
xiaoming.hello();

继承

//ES6之后
        //定义一个学生的类
        class Student{
            constructor(name) {
                this.name = name;
            }

            hello(){
                alert("Hello");
            }
        }

        class SemllStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;
            }

                myGrade(){
                    alert("我是一名小学生");

            }
        }

        var xiaoming = new Student("小明");
        var xiaohong = new SemllStudent("小红",1);

本质:查看对象原型

在这里插入图片描述

6.2 原型链

proto

在这里插入图片描述

7操作BOM对象(重点)

B/S

浏览器介绍

javaScript和浏览器的关系?

js为了能够在浏览器中运行

BOM:浏览器对象模型

IE 6-11
Chrome
Safari
FireFox
Opera

三方浏览器:

qq浏览器
360浏览器

window

window代表浏览器窗口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yXoNV5rg-1653097639220)(C:\Users\LS-z\Desktop\MarkDown\html\code\image-20220429102409370.png)]

//大家可以调整浏览器窗口试试

Navigator (不建议使用)

Navigator ,封装了浏览器的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PFkR0H6m-1653097639221)(C:\Users\LS-z\Desktop\MarkDown\html\code\image-20220429102903747.png)]

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

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

screen

代表屏幕的尺寸

在这里插入图片描述

location (重要)

location 代表当前的页面url信息

host: "www.bilibili.com"
href: "https://www.bilibili.com/account/history?spm_id_from=333.1007.0.0"
protocol: "https:"
reload: ƒ reload()  //刷新网页
//设置新的地址
location.assign("https://www.baidu.com");

document (内容)

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

document.title
'Title'
document.title = "张立帅";
'张立帅'
document.title
'张立帅'

<di id="app">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</di>

<script>
   var dl =   document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie原理

www.taobao.com

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

服务器可以设置cookie: httpOnly

history (不建议使用)

浏览器的历史记录

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

8操作DOM对象 (重点)

核心

DOM: 文档对象模型

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

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

要操作一个dom节点 , 就必须要先获得这个Don节点

获得DOM节点

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

var childrens = father.children;  //获取父节点下的所有子节点
 // father.firstChild
 // father.lastChild

这是原生代码之后用jquery

更新节点

<div id="id1">

</div>

<script>
    let id1 = document.getElementById('id1');
</script>

id1.innerText = 'dddddddddddddddddd'; //修改文本的值
‘dddddddddddddddddd’

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

操作js

id1.style.color = 'red';    //属性使用字符串包裹
id1.style.fontSize = '200px' //_ 转  驼峰命名问题
id1.style.padding = '2em'

删除节点

删除节点的步骤:

先获取父节点
通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
   
  	var self =  document.getElementById('p1');
	var father =  self.parentElement;
	father.removeChild(self);

   //删除是一个动态的过程
father.removeChild(father.chilldren[0]);
father.removeChild(father.chilldren[1]);
father.removeChild(father.chilldren[2]);

</script>

注意哦:删除多个节点的时候,chilldren是在时刻变化的删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点,假设这个Dom节点是空的我们通过innerHTML就可以添加元素了但是这个DOM已经存在元素了,我们就不能这么干了,因为会产生覆盖

追加

<p id="js">javaScript</p>
<div id="list">
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
</div>

<script>

    let js = document.getElementById("js");
    let list = document.getElementById("list");
	list.appendChild(js);//追加到后面

</script>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LILtu5am-1653097639222)(C:\Users\LS-z\Desktop\MarkDown\html\code\image-20220505100634181.png)]

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

<script>

    let js = document.getElementById("js"); //已经存在的节点
    let list = document.getElementById("list");
    //通过js创建新的节点
    var newP = document.createElement("p");//创建一个p标签
    newP.id = "newP";
    newP.innerText = "hello  张立帅";
    //list.appendChild(newP);
    //创建标签节点
    let myScript = document.createElement("script");
    myScript.setAttribute("type",'text/javascript');
    //
    // let body = document.getElementsByTagName("body");
    // body[0].style.background = '#1877d7';

    //可以创建一个Style标签
    let myStyle = document.createElement('style');//创建了一个空的style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);

</script>

insert

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

9操作表单(验证)

表单是什么 from Dom树

文本框 test
下拉框
复选框 checkbox
单选框 radio
隐藏域 hidden
密码框 password
…

表单的本来目的:提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名</span><input type="text" id="username">
    </p>

<!--    多选框的值,就是定义好的value值-->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="1" id="boy">男
        <input type="radio" name="sex" value="0" id="gril">女
    </p>
</form>

<script>
    let text = document.getElementById(`username`);
    let boy = document.getElementById(`boy`);
    let gril = document.getElementById(`gril`);
    // 得到输入框的值
    text.value
    //修改输入框的值
    text.value = 'adassdasdadadasdas'

    //对于单选框或者多选框boy.value 只能取到当前的值
    boy.checked ; //查看返回的结果是否为true   如果为true择被选中
    gril.checked = true;//赋值


</script>

提交表单 md5加密密码 ,表单优化

<!DOCTYPE html>
<html lang="en">
<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>
<!--
表单绑定提交实践
绑定一个提交检测的函数  true  , false
讲这个结果返回给表单,使用onsubmit 接受
οnsubmit="return aaa()"
-->
<form action="https://www.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">

<!--    绑定事件onclick  被点击-->
    <button type='submit' onclick='aaa()'>提交</button>
</form>

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

       md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容,true通过过提交,false组织提交
       return false;
    }
</script>

</body>
</html>

10 jQuery

javaScript 和jQuery库 : 工具类

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

jQuery库里面存在大量的javaScipt函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.js"></script>
    <!--    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
</head>
<body>

<!--
公式  $(selecttor).action()
-->

<a href="" id="test-jquery">点我</a>


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

</body>
</html>

选择器

//原生的js选择器少,而且麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jquery  css中选择器全部都能用
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//class选择器

文档工具站:https://jquery.cuishifeng.cn/index.html

事件

鼠标事件, 键盘事件 , 其他事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyhp6vUT-1653097639223)(C:\Users\LS-z\Desktop\MarkDown\html\code\image-20220520103149604.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--获取鼠标当前的坐标-->
mouse  : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

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

</body>
</html>

操作dom

节点文本操作

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

css的操作

$('#test-ul li[name=python]').css({"color","red"});//多个的话用键值对

元素的显示和隐藏本质display = none ;

$('#test-ul li[name=python]').hide();//隐藏
$('#test-ul li[name=python]').show();//显示

娱乐测试

$(window).width();
$(window).height();
$('#test-ul li[name=python]').toggle();//切换

为了ajax

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

小技巧

如何巩固看jquery源码 ,看游戏源码
巩固html , css (八网站全部down下来,然后对应修改看效果)

Layer 弹窗组件

Element-ui

老婆韩雪莲

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javaScript

typora-copy-images-to: code1.什么是javaScript1.1概述是世界上最流行的脚本语言java. javaScript10天一个合格的后端人员必须精通javaScripet1.2历史ECMAScripet可以理解为是JAVAScripet的一个标准最新已经到6了大部分浏览器只支持es5代码上开发环境与线上环境不一致关键字 ,变量 ,流程控制 ,对象,数组,结构2 快速入门2.1 引入javaScripet内部标签 <.
复制链接

扫一扫