JS基础

最新推荐文章于 2021-11-02 11:42:03 发布
最新推荐文章于 2021-11-02 11:42:03 发布
阅读量275 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ponrt/article/details/116069863
版权

1.什么是JavaScript

1.1概述

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

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

1.2历史

ECMAScript他可以理解为JavaScript的一个标准最新版本已经到es6版本~

但是大部分浏览器还只停留在支持es5代码上！

开发环境–线上环境，版本不一致

2.快速入门

2.1引入JavaScript

1.内部标签

<script>
    //....
</script>

2.外部引入

abc.js

//...

test.html

<script src="abc.js"></script>
2.2基本语法入门

注意JavaScript严格要求大小写！

*console.log()====sout*

在浏览器的控制台打印变量！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义变量
        var score=1;
        //2.条件控制
        if(score>60 && score<70){
            alert("60~70")
        }else if (score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }
    //console.log(score)  使用浏览器的控制台打印变量！
    </script>
</head>
<body>

</body>
</html>
2.3数据类型

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

变量

var 王者荣耀="倔强青铜“

number

js不区分小数和整数，Number

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
NaN  、、不是一个数字

字符串

’abc‘ “abc”

布尔值

true false

逻辑运算

&&  两个都为真，结果为真
||  一个为真，结果为真
！  真即假，假即真

比较运算符

=   赋值
==  等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果才为true）

这是一个JS的缺陷，坚持不要使用==比较，一定要使用三个=

须知：

  • NaN===NaN，这个与所有的数值都不相等，包括自己
  • 只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题：

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

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

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

null和undefined

  • null空
  • undefined 未定义

数组

JAVA的数组是一系列类型相同的对象------JS中不需要这样！

//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true];

new Array(1,2.2,334,4,5,'hello');

取数组下标；如果越界了，就会

undefined

对象

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

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

//Person person = new Person(1,2,3,4,5)
var person = {
    name:"xuzhenbin";
    age:44,
    tage:['js','java','web','...']
}

取对象的值

person.name
"xuzhenbin"
person.age
44
person.tage
(4) ["js", "java", "web", "..."]
2.4严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    'use strict';严格检查格式，运放JavaScript的随意性导致产生的一些问题

    局部变量建议都使用 let 来定义

    必须写在JavaScript的第一行
    -->
    <script>
        'use strict';
        // i=1;  全局变量   报错
        let number = 1;//局部变量都建议使用let来定义
    </script>
</head>
<body>

</body>
</html>

3，数据类型

3.1字符串

1.正常字符串我们都是使用单引号，双引号包裹

2.注意转义字符 \

\'
\n
\t
\u#### Unicode编码
\x41   Ascll编码

3.多行字符串编写

   //tab  上边那个符号
        var msg=`
            xu
            zhen
bin


        `

4.模板字符串

let name = "xuzhenbin";
let age= 18;


let msg=`你好啊，${name}`

5.字符串长度

console.log(str.length)

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nsPrk6Ss-1619180706010)(C:\Users\xzb\AppData\Roaming\Typora\typora-user-images\image-20210408162422729.png)]

7.大小写转换

//注意，这里是方法，不是属性了
console.log(student.toLocaleUpperCase())
console.log(student.toLowerCase())

8.获取指定下标

student.indexOf('u')

9.substring

[) //包头不包尾
 student.substring(1)//从第一个字符串截取到最后一个字符串
 student.substring(1，3)//[1,3)
3.2数组

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

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

1.长度

arr.length

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

2.indexOf，通过元素获得下标索引

console.log(arr.indexOf(1))
0

console.log(arr.indexOf("1"))
5

字符串的”1“和数字1是不同的

**3.slice（）**截取Array的一部分，返回一个新数组，类似于String中的substring

4.push（） ， pop（） 尾部

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

5.unshift（） ，shift（） 头部

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

6.排序sort（）

(3) ["B", "C", "A"]
arr.sort()
(3) ["A", "B", "C"]

7.元素反转 reverse()

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

8.拼接 concat（）

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

注意：concat（）并没有修改数组，只是会返回一个新的数组

9.连接join

打印拼接数组，使用特定的字符连接

arr
(3) ["C", "B", "A"]
arr.join("-")
"C-B-A"

10.多维数组

var arr=[[1,2],[3,4],["5","6"]]
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都可以自己实现！）

3.3对象

若干个键值对

var 对象名={
    属性：属性值
    属性：属性值
    属性：属性值
}


//定义了一个person对象，它有四个属性
var person={

            name:"xuzhenbin",
            age:18,
            email:"sssss@qq.com",
            score:0

 }

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

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

1.对象赋值

person.name = "xzb"
"xzb"
person.name
"xzb"

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

person.haha
undefined

3.动态的删减属性

delete person.name
true
person
{age: 18, email: "sssss@qq.com", score: 0}

4.动态的添加 ，直接给新的属性添加值即可

person.haha="hah"
"hah"
person
{age: 18, email: "sssss@qq.com", score: 0, haha: "hah"}

5.判断属性值是否存在这个对象中！‘xx’ in xx

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

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

hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4流程控制

if判断

let age=3;
if (age>3){
    alert("hahaha")
}else{
    alert("wuwuww")
}

while循环，避免程序死循环

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

for循环

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

forEach循环

5.1引入的

函数，重点看

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

for…in

//for(var index in object){}
for (var num in age){
    if(age.hasOwnProperty(num)){
        console.log(age[num])
    }
}
3.5 Map和Set

ES6新特性

Map：

//ES6  出现的Map
 //学生的成绩
 //var names =["tom","jack","sss"];
 //var scores = [100,90,85];
 var map = new Map([['TOM',100],['JACK',90],['NIDIE',99]]);
 var name=map.get('TOM');//通过key获得value
 map.set('admin',10000);
 console.log(name);

Set：无需不重复的集合

var set = new Set([3,1,1,1,1,1]);//set可以去重
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//判断是否包含某个元素
3.6 iterator

ES6新特性

遍历数组：

//通过for of来遍历值  / for in是遍历下标
var arr = [3,4,5];
 for (var x of arr) {
     console.log(x)
 }

遍历map：

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

遍历Set：

var set=new Set([5,6,7]);
for (let 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可以传任意个参数，也可以不传递参数

参数进来是否存在的问题？

假设不存在参数，如何规避？

 var abs = function (x){
            //手动抛出异常
            if ( typeof 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对象和Funtion是分不开的

==问题：==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变量的作用域

在JS中，var定义变量实际上是由作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要想是现实的话，后面可以研究一下闭包）

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

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

function xzb(){
    var x = 1;
    x = x+1;
}
function xzb1(){
    var x = 'A';
    x = x+1;
}

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

function xzb(){
        var x = 1;

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

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

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

function xzb(){
        var x = 1;

        function xzb1(){
           var x ='A';
           console.log('inner'+x);//innerA
        }
        console.log('outer'+x);//outer1
        xzb1();

     }
xzb();

假设在JS中函数查找变量从自身函数开始~，由“内“向"外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

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

结果：xundefined

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

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

两段代码等价！

这个是在JS建立之初就存在的特性。

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

全局函数

var x =1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象windows

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

alert（）这个函数本身也是一个windows变量；

var x = "xxx";
window.alert(x);

var old_alert = window.alert;

window.alert= function (){

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

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

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

规范

由于我们所有的全局变量都会绑定到我们的windows上。如果不同的js文件，使用了相同的全局变量，会发生冲突-》如何能够减少冲突？

//唯一全局变量
var Xuzhenbin  =  {};
//定义全局变量
Xuzhenbin.name = 'dududu';
Xuzhenbin.add = function (a,b){
    return a + b;
}

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

局部作用域 let

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

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

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

建议使用let去定义局部作用域的变量；

常量const

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

var PI = '3.14';
console.log(PI);
PI = '1233';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字:const

const PI = '3.14';
console.log(PI);
PI = '1233';
console.log(PI);//TypeError: Assignment to constant variable.
4.3 方法

定义方法

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

var xuzhenbin= {
    name:'你爹',
    bitrh:2000,
    //方法
    age:function (){
        var now=new Date().getFullYear();
        return now - this.bitrh;
    }
}
//属性
xuzhenbin.name
//方法，一定要带（）
xuzhenbin.age()

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

function getAge(){
    var now=new Date().getFullYear();
    return now - this.bitrh;
}

var xuzhenbin= {
    name:'你爹',
    bitrh:2000,
    //方法
    age:getAge
}
//xuzhenbin.age()    ok
//getAge()   NaN

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

apply

在JS中可以控制this指向

function getAge(){
var now=new Date().getFullYear();
return now - this.bitrh;
}

var xuzhenbin= {
    name:'你爹',
    bitrh:2000,
    //方法
    age:getAge
}
//xuzhenbin.age()    ok
//getAge()   NaN
getAge.apply(xuzhenbin,[]);//this指向xuzhenbin对象，参数为空

5.内部对象

标准对象

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

基本使用

var now = new Date();//Tue Apr 13 2021 11:22:39 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月  0-11
now.getDay();//星期几
now.getDate();//日
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳  全世界统一 1970 1.1 0：00：00 到现在的毫秒数
console.log(new Date(1618284159681));//时间戳转为时间

转换

now = new Date(1618284159681)
Tue Apr 13 2021 11:22:39 GMT+0800 (中国标准时间)
now.toLocaleString
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/4/13上午11:22:39"
5.2 JSON

JSON是什么

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

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

格式：

  • 对象都用{}

  • 数组都用[]

  • 所有的键值对都使用key:value

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

var user = {
    name:"xzb",
    age:9,
    sex:"安安"
}
//对象转换为JSON字符串   {"name":"xzb","age":9,"sex":"安安"}
var jsonUser=JSON.stringify(user);
//JSON字符串转换为对象   参数为JSON字符串
var obj=JSON.parse(`{"name":"xzb","age":9,"sex":"安安"}`);

很多人搞不清楚，JSON与JS对象的区别

var obj = {a:"hellow",b:"heelw"};
var json = '{"a":"hellow","b":"heelw"}';
5.3 Ajax(简单了解)
  • 原生的JS写法 xhr 异步请求
  • jQuey封装好的方法 $("#name").ajax("")
  • axios请求

6、面向对象编程

原型对象

javascript、java、c#。。。面向对象；javascript有些区别！

  • 类：模板 （原型对象）
  • 对象：具体的实例

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

原型：

var student = {
        name:"xzb",
        age:9,
        sex:"安安",
        run:function (){
            console.log(this.name+"run......");
        }
    };
    var xiaoming = {
        name:"小明"
    };
    //原型对象
    xiaoming.__proto__=student;
    var Bird={
        fly:function (){
            console.log(this.name+"fly......");
        }
    };
    xiaoming.__proto__=Bird;

Class继承

class关键字，是在ES6引入的

1、定义一个类，属性，方法

//定义一个学生的类
class Student{
    constructor(name) {
        this.name= name;
    }
    hellow(){
        alert('hellow');
    }
}
var xiaoming = new Student("xiaoming");
xiaoming.hellow();

2、继承

//定义一个学生的类
class Student{
    constructor(name) {
        this.name= name;
    }
    hellow(){
        alert('hellow');
    }
}
class xiaoStudent extends Student{
    constructor(name,grad) {
        super(name);
        this.grad=grad;
    }
    myGrad(){
        alert('我是一名小学生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaohong",1);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0sgf8xf6-1619180706012)(C:\Users\xzb\AppData\Roaming\Typora\typora-user-images\image-20210413152939456.png)]

本质：查看对象原型，发现还是最初的那个原型

原型链

__ proto __:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dPglYSsL-1619180706014)(C:\Users\xzb\AppData\Roaming\Typora\typora-user-images\image-20210413153431796.png)]

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

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

BOM：浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • FireFox

三方

  • QQ浏览器
  • 360浏览器

window（重要）

window代表浏览器窗口

window.innerHeight
757
window.innerWidth
598
window.outerHeight
844
window.outerWidth
1167

Navigator（不建议使用）

Navigator封装了浏览器的信息

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

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

screen

代表屏幕尺寸

screen.width
1549
screen.height
872

location(定位) 重要

locattion代表当前页面的URL信息

host: "www.baidu.com" //主机
href: "https://www.baidu.com/?tn=44048691_1_oem_dg"  //
protocol: "https:"  //协议
reload: ƒ reload()  //重新刷新
location.assign("自己的网站、/跳转")

document

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

document.title
"百度一下，你就知道"
document.title="xxx"
"xxx"

获取具体的文档树节点

<dl id="xu">
    <dt>JAVA</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>
    var dl = document.getElementById("xu");
</script>

获取cookie

document.cookie
"本地代码"

劫持cookie原理

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

服务器端可以设置 cooike:httpOnly

history (历史)（不建议使用）

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

history代表浏览器的历史记录

8、操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得Dom节点

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

var childrens = father.children[index];//获取父节点下的所有子节点
//father.firstchild
//father.lastchild

这是原生代码，之后会学习jQuery

更新节点

<div id="id1">

</div>
<script>
    var id1=document.getElementById("id1");
</script>

操作文本

  • ==id1.innerText=‘abc’;==修改文本的值
  • ==id1.innerHTML=‘123’==可以解析HTML文本标签

操作css

id1.style.color='red';//属性使用 字符串包裹
id1.style.padding='20px';
id1.style.fontSize='70px';//驼峰命名规则

删除节点

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

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

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

插入节点（重点）

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

追加

<p id="js">java script</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');
    
    js.appendChild(list)
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwWE6eeL-1619180706015)(C:\Users\xzb\Desktop\JS\JS基础.assets\image-20210414171914219.png)]

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

<script>
    var js=document.getElementById('js');//已经存在的节点
    var list=document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText="woshinidei";
    //创建一个标签节点（通过这个属性，可以设任意的值）
    var myScript=document.createElement('script');
    mySript.setAttribute('type','text/javascript');    
    js.appendChild(newP);
  
     //可以创建一个Style标签
    var mystyle=document.createElement('style');
    mystyle.setAttribute('type','text/css');
    mystyle.innerHTML = 'body{background-color:red;}';
    document.getElementsByTagName('head')[0].appendChild(mystyle);

</script>

insertBefore

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

9、操作表单（验证）

表单是什么

  • 文本框 text
  • 下拉框
  • 单选框 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="woman" 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 = 'aaa';

    //对于多选框，单选框等等固定的值。boy_radio只能取到当前的值
    boy_radio.checked;//产看返回的结果是否为true，如果为true则被选中
    boy_radio.checked = true;//赋值

</script>

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

表单级别：onsubmit

按钮级别：type=‘submit’

10、jQuery

JavaScript

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

获取jQuery


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入   在线-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <!--导入lib目录下的jq-->
    <script src="lib/jquery-3.6.0.js" ></script>
</head>
<body>
<a href="" id="text-jquery">点我</a>
<script>
    //选择器就是css的选择器
    $('#text-jquery').click(function (){
        alert('woshinidie!')
    })


</script>
</body>

只有一个公式：$(selector).action()

选择器就是css的选择器：

1.类别选择器

类选择器根据类名来选择

前面以”.”来标志

2.标签选择器

3.ID选择器

前面以”#”号来标志

https://baike.baidu.com/item/css%E9%80%89%E6%8B%A9%E5%99%A8/2819686?fr=aladdin

选择器

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

//jQuery  css中的选择器她都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//类选择器

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

事件

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tYAjoHs7-1619180706017)(C:\Users\xzb\Desktop\JS\JS基础.assets\image-20210415114839148.png)]

<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

节点文本操作

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

css的操作

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

（常用）元素的显示和隐藏：本质display：none

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

娱乐测试

$(window).width();
$(window).height();
$('#text-ul li[name=python]').toggle();//显示与隐藏切换

小技巧

1、如何巩固JS（看jQuery源码，看游戏源码）

2、巩固HTML。CSS（扒网站，全部down下来，然后对应修改看效果）

Layer 弹窗组件

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

//jQuery css中的选择器她都能用
$(‘p’).click();//标签选择器
$(’#id1’).click();//id选择器
$(’.class1’).click();//类选择器


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



> 事件

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

[外链图片转存中...(img-tYAjoHs7-1619180706017)]

```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

节点文本操作

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

css的操作

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

（常用）元素的显示和隐藏：本质display：none

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

娱乐测试

$(window).width();
$(window).height();
$('#text-ul li[name=python]').toggle();//显示与隐藏切换

小技巧

1、如何巩固JS（看jQuery源码，看游戏源码）

2、巩固HTML。CSS（扒网站，全部down下来，然后对应修改看效果）

Layer 弹窗组件

Element-ui

UNlmy
关注
专栏目录
buildSrc使用kotlin开发plugin配置
lkl22的专栏
03-01 1531
buildSrc使用kotlin开发plugin配置 配置 apply plugin: 'java-gradle-plugin' apply plugin: 'kotlin' buildscript { repositories { mavenLocal() maven { url uri("${rootProject.rootDir}/.repo") } maven { url 'https://maven.
js基础知识点思维导图
11-29
以上是JavaScript基础知识点的部分概述，理解并掌握这些概念是成为合格的JS开发者的基础。通过持续学习和实践，可以深入探索更高级的主题，如AJAX、前端框架（如React、Vue）、Node.js后端开发等。
JavaScript--04 JavaScript基础&DOM 中
静静燃烧的雪的专栏
07-06 309
04 JavaScript基础&DOM 中             innerHTML()、innerText()、big()、fontcolor()、bold()、charAt()、Math.random()、Math.floor、Math.ceil()、onload、onclick、setTimeout、substring、substr        
读书笔记：锋利的JQuery
weixin_34358092的博客
08-27 110
本文首发于我的个人博客：cherryblog.site/最近开启了阅读源码之旅，有兴趣的童靴可以持续关注，这几天再看 Zepto.js 的源码，估计博文过几天就会出来~另外，买的十几本书陆陆续续的在看，立志每本书都写一本读书笔记（相当于这本书的浓缩版 + 个人见解） 前一段在当当和京东上趁着打折买了十几本编程的书，励志要全部看完！在此立一个 flag，最近也是一直在读书，发现书中更能深入的学到...
JavaScript
qq_33977080的博客
03-23 406
1.JavaScript 1.1 概述 JavaScript是一门使用广泛的前端语言 2. 快速入门 2.1 引入Javascript 1.内部标签 <script> //...... </script> 2.外部引入 2.2 数据类型 变量 所有变量都是用var定义即可 js不区分小数和整数 Number 123 ///123 123.1 ///123.1 1.123e3 ///1123 -99 //负数 NaN ///not a number Infinity
Open edX数据结构Mysql edxapp
热门推荐
一个有趣、有料、有内涵的地方!
12-04 6万+
原文出处：http://wiki.edustack.org/doku.php?id=edx:edxapp%E6%95%B0%E6%8D%AE%E5%BA%93%E7%BB%93%E6%9E%84 CREATE DATABASE IF NOT EXISTS `edxapp` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `edxapp`; -- MySQ
JavaScript js基础用法 示例代码
06-07
本资源主要是关于js基础用法的示例代码 内容包含了js变量定义 js输入输出 js转义符 js注释和编码规范 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种...
JavaScript js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
Javascript基础.xmind
07-31
JavaScript基础三天总结
软件测试 基础班 JavaScript JS基础.ppt
10-03
软件测试基础班 JavaScript JS基础是软件测试的一门重要课程，本节课将对 JavaScript 的基础知识进行详细的介绍。 一、JavaScript 简介 JavaScript 是一种高级的、动态的、基于原型的编程语言，主要用于客户端的...
jQuery数据类型
weixin_34124939的博客
08-30 89
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaWeb-03
Mr.Rop的博客
03-29 100
3、Tomcat 3.1、安装Tomcat https://tomcat.apache.org/ 3.2、Tomcat启动和配置 文件夹作用： 启动、关闭Tomcat 访问测试：http://localhost:8080/ 可能遇到的问题： Java环境变量没有配置 闪退问题：需要配置兼容性 乱码问题：配置文件中设置 3.3、配置 高难度面试题： 请你谈谈网站是如何进行访问的？ 输入一个域名；回车 检查本机的C:\Windows\System32\drivers\etc\hosts配置
JS中的注意点
qq_48739475的博客
11-02 133
一、JS数据类型 (1). NaN、Infinity、parseInt()、isNaN() NaN: 表示一个非数字（当一个数学表达式运算结果本该返回个数字却没有返回）Infinity: 无穷大（除数是0时计算结果）pareInt()函数: 将字符串转换成数字，且只取整数位（注意: 123.45啊啊 也可以取，但中文在前就不行）isNaN()函数: 返回布尔类型，验证是否为一个数字（特点,首先会尝试将"数据"转换成数字） console.log(2/0) //Infinity con
javaScript基础编程
zzz323666的博客
09-13 300
第1章 javaScript概述 1.1 javaScript的作用 HTML 用于创建网页的结构 CSS 对页面进行美化 javaScript 用于与用户进行 1.2 javaScript初体验 案例演示： 使用javaScript可以对表单进行验证。例如：我们注册京东或者网易邮箱的时候，当输入的手机号或者用户名为空的时候，会提示手机号或者用...
监听器、过滤器
Ponrt的博客
09-12 100
实现一个监听器的接口；（有N种） 编写一个监听器 实现监听器的接口 //统计网站在线人数：统计session public class OnlineCountListener implements HttpSessionListener { //创建session监听：看你的一举一动 //一旦创建一个session就会触发一次这个事件！ public void sessionCreated(HttpSessionEvent se) { ServletContext
Session，Cookie
Ponrt的博客
09-12 107
7.1、会话 **会话：**用户打开一个浏览器，点开了很多超链接，访问多个web资源，关闭浏览器，这个过程可以称之为会话 **有状态会话：**一个同学来过教室，下次再来教室那我们会知道这个同学，曾经来过，称之为有状态会话； 一个网站，怎么证明你来过？ 客户端 服务端 客户端给服务端一个信件，客户端下次访问服务端带上信件就可以了；cookie 服务器登记你来过了，下次你来的时候我来匹配你；session 7.2、保存会话的两种技术 cookie 客户端技术（响应，请求） 记住密码 sess
HTTP
Ponrt的博客
04-23 198
JavaWeb 4、Http 4.1、什么是HTTP HTTP（超文本传输协议）是一个简单的请求-响应协议，它通常运行在TCP之上。 文本：html，字符串。。。。。 超文本：图片，音乐，视频。。。。。 80端口 HTTPs：安全的 443 4.2、两个时代 http1.0 HTTP/1.0:客户端可以与web服务器连接后，只能获得一个web资源，断开连接 http2.0 HTTP/1.1:客户端可以与web服务器连接后，可以获得多个web资源。 4.3、Http请求 客户端---
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
JavaScript 中的 `Array.prototype.filter` 方法全解析
09-15
在 JavaScript 编程中，处理数组是一项基本而重要的任务。数组的过滤操作是其中的一个常见需求，Array.prototype.filter 方法为此提供了强大的支持。本文将深入探讨 Array.prototype.filter 方法的工作原理、使用场景、代码示例以及与其他数组方法的比较。 Array.prototype.filter 是 JavaScript 中处理数组的强大工具，它允许开发者以声明式的方式轻松筛选出符合特定条件的元素。通过结合使用 Array.prototype.filter 和其他数组方法，可以解决各种复杂的数据筛选问题。 通过本文的详细介绍和示例代码，你应该能够掌握 Array.prototype.filter 的工作原理，并能够在实际开发中灵活运用它来处理数组数据。此外，了解其与 Array.prototype.map 和 Array.prototype.reduce 的结合使用，可以帮助你更好地编写高效且易于维护的代码。
JavaScript基础入门教程
"这是一份面向初学者的JavaScript基础教程，旨在帮助没有JavaScript经验的人掌握这门语言的基本概念。教程虽然不涉及动态网页的高级技术，但覆盖了JavaScript的基础知识，包括语法、对象和事件等。它采用了参考教程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值