开水，送服JavaScript

x86bit

已于 2022-10-24 16:53:19 修改

阅读量508

点赞数

文章标签： 1024程序员节 javascript

于 2022-10-24 11:57:23 首次发布

本文链接：https://blog.csdn.net/weixin_47198051/article/details/127489718

版权

Js基础知识

1.基本语法

 'use strict' //使用严格类型
var  name = 3;//定义变量
let name = 3;

2.数据类型

number

不区分小数和整数’

123 //整数
123.1 //浮点数
1.223e //科学计数法
-99 //复数
NaN //不是一个数
Infinity//无限大

2.1字符串

"aba" 
'dfas'//正常字符串  
\'
\n  换行
\t tab键
\Uniucode字符
\AscII字符

多行字符串编写,ES6新特性模板字符串

<script type="text/javascript">
			var meg = "hello";
			let name = "i am gym";
			let m = `bro,${meg},${name}`//ES6新特性 模板字符串
		</script>

在这里插入图片描述

字符串操作

str.toUpperCase //大小写转换
str.indexOf('s')//获取下标 
str.substring()//截取第几个到第一个  包含前面不包含后面 [）
str.length//字符串长度

字符串不可变

在这里插入图片描述

2.2布尔值

true false

逻辑运算

&& 

||

！

比较运算符

= 
==
=== //常用这个  绝对等于 类型一样，值也一样

2.3 浮点数问题

console.log()  //尽量避免浮点数进行运算  存在精度问题！

null和undefined

undefined //未定义
null 空

对象

对象是大括号，数组是中括号//注意，对象的属性之间，用逗号隔开
取对象的值
<script type="text/javascript">
			var person = {
				name:"de",
				id:3,
				tags: ['dd','js',4,2]
			}
		</script>

在这里插入图片描述

2.4数组

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

var arr = [4,23,"d"]
arr.length //数组大小是可变的 变长，变短

2、常用方法

indexOf//下表索引
//字符串和数字1是不同的  “1”  和  1

3、slice() 截取array的一部分类似于String的Substring

4、压入弹出

尾部：push压入  pop弹出   
头部：unshift()压入  shift()弹出

在这里插入图片描述
5、排序

sort()

6、元素反转

reverse()

7、concat()

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

8、连接join

join()

9.多维数组

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

在这里插入图片描述
10 特殊属性

数组将始终保留顺序，这意味着它们将记住您添加或定义事物的顺序。并非 JavaScript 中的所有内容都保留顺序，因此请记住数组的这个特殊属性！

2.5对象

若干个键值对

永远不能相信对象中键的顺序。如果你想真正花哨，你可以制作一个充满对象的数组，或者一个充满数组的对象！

var moodLog = [
  {
    date: "10/20/2012",
    mood: "catnipped"
  }, 
  {
    date: "10/21/2012",
    mood: "nonplussed"
  },
  {
    date: "10/22/2012",
    mood: "purring"
  }
]

// ordered from least to most favorite
var favorites = {
  treats: ["bird sighting", "belly rub", "catnip"],
  napSpots: ["couch", "planter box", "human face"]
}

1 对象是大括号，数组是中括号//注意，对象的属性之间，用逗号隔开
取对象的值
<script type="text/javascript">
			var person = {
				name:"de",
				id:3,
				tags: ['dd','js',4,2]
			}
		</script>

2 使用一个不存在的对象属性，不会报错，希纳是undefined

3 删除属性
delete person.name
4 添加属性
person.name = "dengzhh"
5 js中所有键都是字符串 
6 判断一个属性是否是这个对象拥有的
person.hasOwnProperty('toString')
false
person.hasOwnProperty('id')
true

3.流程控制

判断

if( ){

}else if

else

循环

while

<script type="text/javascript">
			 'use strict';
			var student = "dengzhihao";
			while(true){
				alert("你关不掉我！")
			}
		</script>

for

和Java一样

for…of ES6新特性

let ranks = ['A', 'B', 'C'];

for(let rank of ranks) {
	console.log(rank);
}

for each
在这里插入图片描述

for in

<script type="text/javascript">
			var age = [23,3,3455,6,7,8,4];
			for (var num in age) {//num是索引  
				if (age.hasOwnProperty(num)){
					console.log("存在！")
					console.log(age[num])
				}
			}
		</script>


for (var num in age){if(age.hasOwnProperty(num)) console.log(age[num])}

1.5 Map 和 Set ES6新特性

Map
在这里插入图片描述

map.set("admin",dzh)//添加元素进Map集合
map.delete()//删除

Set

var set = new Set([3,22,34,5])
set.add()
set.delete()

在这里插入图片描述
for…of 也可以遍历Map Set

iterator遍历和迭代Map,Set** ES6新特性

4.函数

4.1定义函数

在这里插入图片描述

http://underscorejs.org/underscore-esm.js

绝对值函数的定义

定义方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        函数的定义
    </title>
    <script>
        function abs(x){
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }
    </script>
</head>

在这里插入图片描述

一旦执行了return，说明函数结束，如果没有执行return,函数执行完也会返回结果！

定义方式二

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

调用函数

abs()
          //参数问题：js可以传入任意个参数，也不会报错
          //如果不是number数字类型的，手动抛出一下异常

参数问题：typeof 获取参数类型,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        函数的定义
    </title>
    <script>
        function abs(x){
            //参数问题：js可以传入任意个参数，也不会报错
            //如果不是number数字类型的，手动抛出一下异常
            if (typeof x!== 'number' ){
                throw 'Not a Number'
            }
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }
    </script>
</head>

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

argumenyts 是JS免费赠送的参数

argumeyts可以遍历传入的所以参数，代表传入的所有参数是一个数组

问题:arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数

ES6新特性 rest：获取以及国内定义的参数之外的所有参数，只能写在最后面，…后面

对比

//以前想要获取传入的定义的参数之外的所有参数，这样来实现
function aaa(a,b){
                console.log("a=="+a);
                console.log("b=="+b);
                for (var i = 2;i<arguments.length;i++){//需要排除已有的参数，可以看到i是从2开始的
                    console.log(arguments[i]);
                }

现在

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

在这里插入图片描述

function abs(x){
            //参数问题：js可以传入任意个参数，也不会报错
            //如果不是number数字类型的，手动抛出一下异常
            console.log("x=="+x);
            for (var i = 0; i<arguments.length; i++){
                console.log(arguments[i])
            }
            if (typeof x!== 'number' ){
                throw 'Not a Number'
            }
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }

4.2在 Array上循环

这段代码使用 Underscore 的times方法，它接受 1 个数字和 1 个函数，然后从 0 开始，每 10 步递增 1，每一步调用带有数字的函数。

function logANumber(someNumber) {
  console.log(someNumber)
}
_.times(10, logANumber)

logANumber(0)
logANumber(1)
logANumber(2)
logANumber(3)
logANumber(4)
logANumber(5)
logANumber(6)
logANumber(7)
logANumber(8)
logANumber(9)

输出
在这里插入图片描述

4.2变量的作用域

假设在函数体中声明，则在函数体外不可以使用。（如果要实现，研究一下闭包）

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

局部函数存在作用域

内部函数可以访问外部函数的成员，外部成员不能访问内部成员

function dz() {
    let x = 2;
    x = x + 1;
}
x = x + 2;
//多个函数使用同名的变量，不影响，因为只在局部生效
function dh() {
    let x = 5;
    function zh() {//内部函数
        let a = x + 3;
    }
    z = x + a;
    console.log(z);
}
//  dh()-> Uncaught ReferenceError: a is not defined
// zh() ->

多个函数使用同名的变量，不影响，因为只在局部生效

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

 function dz() {
            let x = 2;
            x = x + 1;
        }
     
        //多个函数使用同名的变量，不影响，因为只在局部生效
       function dh(){
           let x = 5;
           x = x + 5;
       }

变量重名

假设函数查找从自身函数开始，由内向外查找，假设外部有和内部同名的变量，内部屏蔽外部

function dh() {//外部函数
    let x = 5;
    function zh() {//内部函数
        let x = 'AA';
        console.log("内部："+x);
    }
    console.log("外部："+ x);
    zh();
}

在这里插入图片描述

提升变量的作用域

只要定义了变量，如果没赋值，也不会报错,结果：undefined

function dd(){
    var y;
    var x = x + y;
    console.log(x);//y未赋值
}

在这里插入图片描述

js:执行引擎：自动提升了未赋值变量的声明，不会提升赋值,导致->把所有变量的声明，都放在函数的头部，不能乱放，便于维护。

全局函数
全局变量(定义在函数外的变量)

		var x = 2;
        function da(){
            console.log(x);
        }

在这里插入图片描述

全局对象window

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

alert() 本身也一样，自动绑定在window对象下

var x = 'SSSS000SSS'
window.alert(x)
window.alert(window.x)
var old_alert = window.alert;
old_alert(x);// window.alert()失效了
//恢复
window.alert = old_alert;
alert(x)

由于我们所有的全局变量都会绑定在我们的window上，如果不同的js文件，使用了相同的全局变量命名，就会产生冲突，如何解决冲突？ -> 规范化

规范：把自己的代码全部放入自定义的唯一空间名字中，降低全局命名冲突的问题 jQuery $ 就是这么做的

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

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

let

局部作用域，Es6关键字，解决let定义局部作用域冲突的问题

常量关键字 const

以前，定义了还能改变其值

常量关键字 const 定义后，不能改变

4.3方法

定义方法

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

var deng = {
    name: 'AA',
    birth: 1998,
    age: function (){
        //今年-出生
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
deng.name
deng.birth
deng.age()//调用方法

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

this，代表什么？默认是指向调用它的对象的

上述代码拆开写：

function getAge(){
    //今年-出生
    var now = new Date().getFullYear();
    return now - this.birth;
}
var deng = {
    name: 'AA',
    birth: 1998,
    age: getAge
}

getAge() : NAN 此时，this 指向的是调用它的对象，即:window,window里面没有绑定birth这个属性，是在deng里面才有

deng.age() : OK的 this 指向的是调用它的对象，即：deng

apply

可以控制this指向，需要传递参数，当需要this指向其他的对象时，传递的参数要指明！

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

function getAge(){
    //今年-出生
    var now = new Date().getFullYear();
    return now - this.birth;
}
var deng = {
    name: 'AA',
    birth: 1998,
    age: getAge
}
getAge.apply(deng,[])//this指向了 deng，参数为空
var zhi = {
    name: 'AA',
    birth: 2000,
    age: getAge
}

在这里插入图片描述

5.内部对象

5.1Date

Date基本使用

//Date 对象
var n = new Date();
n.getFullYear();//年
n.getMonth();//月
n.getDate();//日
n.getDay();//星期几
n.getHours();//时
n.getMinutes();//分
n.getSeconds();//秒
n.getTime()//时间戳 全世界统一的，表示
//从1970年1.1 00:00:00 到现在的时间的毫秒值

在这里插入图片描述

5.2JSON

介绍json

JSON

在js中，一切皆为对象

对象都用{}

数组都用[]

所有的键值对都是key:value

js对象与JSON的相互转化

 var person = {
     name: "dengzhh",
     age: 24,
     sex: '男'
 }
 //对象转化为json字符串
 var jsonPerson = JSON.stringify(person);
 //json字符串转化为对象
 var obj = JSON.parse('{"name":"dengzhh","age":24,"sex":"男"}')//单引号括起来

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

js与json的区别

var obj = '{"name":"dengzhh","age":24,"sex":"男"}';
var jsonPerson = {"name":"dengzhh", "age":24, "sex":"男"};

5.3Ajax

原生的js写法， xhr异步请求
jQuery封装好的方法 $("#name").ajax("")
axios请求

6.面向对象编程

6.1什么是面向对象

诸如：JavaScript、c#、Java… 这些语言都有，但是javascript有些区别

类：模板
对象：具体的实例

在JavaScript中需要转变一下思维方式！

6.2原型对象

面向对象原型继承

//创建对象  包含方法和属性
var student = {//属性
    name: "deng",
    age: 23,
    eat: function (){//方法
        console.log(this.name + " eating...");
    }
};
var s1 = {
    name: "xiaolan"
}
// s1的原型指向的是student
s1.__proto__ = student;

在这里插入图片描述

6.3class继承

面向对象class继承：在ES6引入的

通过原型对象添加一个方法原生的方式

function student(name){
    this.name = name;
}
//给student新增一个方法，采用原生的方式
student.prototype.hello  = function (){
   console.log("d");
}

Es6后添加一个方法

//定义一个类，包含属性和方法
class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello!!')
    }
}

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

继承

class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello!!')
    }
}
var xiao = new Student('xiaolan');
class smallStudent extends Student{
    constructor(name,grade) {
        super(name);//继承父类的
        this.grade = grade;//自己的属性
    }
        myGrade(){//自己的方法
            console.log("i am a small student!")
        }
}
var xiaolv = new smallStudent("xiaolv",4);//创建对象

在这里插入图片描述

7.操作BOM对象（重点）

JavaScript和浏览器的关系？

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

BOM：浏览器对象模型（以下是浏览器内核）

IE6-11
Chrome
Safari
FireFox

第三方浏览器（可切换内核）

QQ浏览器
360浏览器

7.1window对象

window(重点)：代表浏览器窗口

window.alert(2);
var a = window.innerHeight;//innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度
console.log(a);
window.innerWidth;//innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度
window.outerHeight;//outerHeight 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）
window.outerWidth;//outerWidth 属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）
注意：outerWidth 和 outerHeight,innerWidth 和 innerHeight都是只读属性

7.2Navigator对象

Navigator: 封装了浏览器的信息

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

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

7.3screen&location对象

screen:代表屏幕尺寸

screen.width
2048
screen.height
1152

location:代表当前页面的url信息

location.reload();//重新加载
location.assign(www.taobao.com)//重定向，设置新的定位

7.4Document对象

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

document.title//获取当前网页的标题
document.getElementById('aaa');//获取具体的文档树节点->能动态的删除节点和增加节点

<body>
    <dl id="aaa">
        <dt>java</dt>
        <dd>javase</dd>
        <dd>javaee</dd>
    </dl>
<script>
    var dl = document.getElementById('aaa');
</script>
</body>

在这里插入图片描述

获取cookie

document.cookie
'discount_free_trigger=; freePromorunningtmr=; isfreeretainend=; isvipretainend=; vipPromorunningtmr=; googtrans=/zh-CN/zh-CN'

劫持cookie原理：植入恶意的js代码，获取到你的cookie上传到他的服务器。

比方说：在网页中登录了淘宝账号，天猫账号也会自动登录上了（单点登录），利用的是保存在浏览器的cookie。

服务端可以设置cookie: httponly 只读

history:代表浏览器的历史记录(不建议使用)

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

8.操作DOM对象

核心

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

更新
遍历DOM节点：获取DOM节点
删除：删除一个DOM节点
添加：添加一个新的DOM节点

要操作DOM节点，必须先获得DOM节点！

8.1获取DOM节点

获取DOM节点：原生代码，之后尽量使用jquery()

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

    <script>
        //对应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[index];//获取父节点下的所有子节点
        //father.firstChild
        //father.lastChild
</script>
</body>

在这里插入图片描述

8.2 更新DOM节点

首先,获取任意DOM节点:

<body>
    <div id="father">
        <h1>
            标题一
        </h1>
        <p id="p1">
            p1
        </p>
        <p class="p2">
            p2
        </p>
    </div>
     <script>//获取dom节点
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
         </script>
</body>

操作文本

p1.innerText='文本p1'//方法1是直接修改文本
'文本p1'
p1.innerHTML='<strong>wenben</strong>'//方法2是修改html超文本，自动解析
'<strong>wenben</strong>'

在这里插入图片描述

操作css

p1.style.fontSize='24px'
p1.style.color='red'

8.3删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点删除自己 removeChild()方法

方法一：

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

<script>
 var father = document.getElementById('father');//获取父节点
 var self = document.getElementById('p1');//获取要删除的节点
 father.removeChild(self)//通过父节点删除子节点
</script>
</body>

方法二：

father.removechild(father.children[0])//即删除第一个子节点
但是要注意：删除节点的过程是动态的，即children是时刻在变化的，下标会动态变化

8.4插入DOM节点

方式一：appendChild 追加已有的标签

当我们获得了某个DOM节点，假设这个DOM节点是空的，我们可以通过innerHTML就可以增加一个元素了（或者innerText），但是假如DOM节点已经存在元素了，我们就不能这样新增了，会产生覆盖，导致原来的节点没有了！

因此，我们采用追加的方式！

<body>
<p id = 'js'>Java技术栈</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');
     list.appendChild(js);//追加到JavaME后面
    </script>
</body>

追加前：
在这里插入图片描述
追加后：

方式二：通过js创建一个新的节点，再追加

关注setAttribute(key,value)的使用！可以设置任意的值，比较方便。

<body>
<p id = 'js'>Java技术栈</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');
     list.appendChild(js);//追加到JavaME后面
     //创建一个p标签 （节点）
     var newP = document.createElement('p');//创建一个p标签
     // 给p标签这个节点设置一个id
     newP.id = 'newP';//相当于：<p id='newP'></p>  
	//也可以这样设置id：    
    newP.setAttribute('id','newP');

     //插入文本
     newP.innerText = 'Hello';//相当于：<p id='newP'>'Hello'</p>
    //追加到div后
     list.appendChild(newP);

在这里插入图片描述

创建一个带有属性的标签，比如script,再追加

 //创建一个有属性的标签 比如script
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
 list.appendChild(myscript);

在这里插入图片描述

创建一个style标签，插入到head后

//可以创建一个style标签
     var mystyle = document.createElement('style');
     mystyle.setAttribute('type','text/css');//style默认的属性
     mystyle.innerHTML = 'body{background-color:red;}';
     //到这就写好了style标签以及里面的body属性值，接下来追加到head标签的后面
     //先获取到head的DOM节点并追加
 document.getElementsByTagName
 ('head'[0].appendChild(mystyle);//注意：第0个才是head

在这里插入图片描述

方式三：inserBefore(newNode,targetNode)把一个新的节点插入到目标节点的前面：例如将存在的js插入到ee节点前面

    //inser把一个新的节点插入到目标节点的前面：例如 将存在的js插入到	`ee节点前面
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
   //要找一个包含的节点，这里是list
    list.insertBefore(js,ee);

在这里插入图片描述

9.操作表单（验证）

表单是什么： from DOM树

文本框 text
下拉框
单选框
多选框
隐藏域
密码框

9.1获得表单提交信息

<body>
    <form action="post">
        <p>
            <span>用户名: </span><input type="text" id="username">
        </p>
<!--         多选框的值，就是定义好的value值，需要将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');
        //得到输入框的值
        input_text.value;
        //修改输入框的值
        input_text.value = '2020'
        // 多选框取值
        var boyradio = document.getElementById('boy');
        var girlradio = document.getElementById('girl');
        
        boyradio.value;
        girlradio.value;
    </script>
</body>

在这里插入图片描述

对于单选框或多选框，我们只能获取到当前的值；对于多选框，我们可以使用：

boyradio.checked;
girlradio.checked;
//进而判断该复选框是否被选中，然后再通过：
boyradio.value;
girlradio.value;
//来获取相应的值！
//也可以通过：
boyradio.checked = 'true';
girlradio.checked = 'true';
//来选择相应的复选框

在这里插入图片描述

9.2提交表单信息

按钮绑定事件，触发弹窗

<body>
    <form action="#" method="post">
        <p>
            <span>用户名: </span><input type="text" id="user
        </p>
<!--         多选框的值，就是定义好的value值，需要将value提前定义好-->
        <p>
            <span>
                  性别：
            </span>
            <input type="radio" name="sex" value="man" id
            <input type="radio" name="sex" value="woman" 
        </p>
        <p>
            <span>
                密码：
            </span>
            <input type="text" id="password">
        </p>
<!--<input type="submit">-->
<!--绑定事件 checking() -->
        <button type="button" onclick="checking()">
            提交
        </button>
        <script>
            function checking(){
                alert('1');//触发一个弹窗
            }
        </script>
    </form>

在这里插入图片描述

进一步的，我们把触发函数里面改一改，就能修改到表单的值了

<script>
    function checking(){
        // alert('1');
        //进一步的，可以修改表单的值
        var username = document.getElementById('username');
        var password = document.getElementById('password');
     //打印出来    
        console.log(username.value);
        if (boyradio.checked){
            console.log(boyradio.value);
        }else console.log(girlradio.value);
        console.log(password.value);
    }
username.value = '4566754';//修改用户名
password.value = '555';//修改密码
</script>

在这里插入图片描述

发现修改密码其实是没有用的，被别人抓个包就暴露密码了，可以采用MD5加密，变得更安全。

<head>
    <meta charset="UTF-8">
    <title>操作表单</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">

    </script>
</head>

<body>
    <form action="#" method="post">
        <p>
            <span>用户名: </span>
            <!--            要设置name属性，确保浏览器能抓到这个值-->
            <input type="text" id="username" name="username">
        </p>
<!--         多选框的值，就是定义好的value值，需要将value提前定义好-->
        <p>
            <span>
                  性别：
            </span>
            <input type="radio" name="sex" value="man" id="boy">男
            <input type="radio" name="sex" value="woman" id="girl">女
        </p>
        <p>
            <span>密码：</span>
            <!--            要设置name属性，确保浏览器能抓到这个值-->
            <input type="text" id="password" name="password">
        </p>
<!--        <input type="submit">-->
<!--       按钮绑定提交事件 绑定事件-->
        <button type="button" onclick="checking()">
            提交
        </button>
        
<script>
    function checking(){
        // alert('1');
        //进一步的，可以修改表单的值
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        //打印出来
        console.log(username.value);
        if (boyradio.checked){
            console.log(boyradio.value);
        }else console.log(girlradio.value);
        console.log("原来的密码："+password.value);
        // username.value = '4566754';//修改用户名
        // password.value = '555';//修改密码
        //采用MD5加密算法
        password.value = md5(password.value);
        console.log("加密后："+password.value);
        return true;
    }
</script>

在这里插入图片描述

进一步的，我们让抓包也抓不到我们的密码，显示不出来。即：不设置name属性，让抓包的时候看不到设置的密码,再设置一个隐藏输入框并设置name！这样提交到抓包界面的就是password的空的属性值了。

<!--不设置name属性，让抓包的时候看不到设置的密码！-->
            <input type="password" id="inputpwd">
        </p>
        <input type="hidden" id="md5pwd" name="password">//只在这里设置name，显示的是隐藏的md5

表单绑定提交事件

onsumbit = 绑定一个提交检测的函数，true，false

将这个结果返回给表单，使用onsumit接收想拦截表单，returen一个函数就行，这个函数内部return 一个false

最终版玩法：输入密码的时候，密码框不会变长，即通过隐藏来提交了

<!--表单绑定提交事件-->
    <form action="https://www.zhihu.com/" method="post" onsubmit=" return checking2()">
        <p>
            <span>用户名: </span>
            <!--            要设置name属性，确保浏览器能抓到这个值-->
            <input type="text" id="username" name="username">
        </p>
<!--         多选框的值，就是定义好的value值，需要将value提前定义好-->
        <p>
            <span>
                  性别：
            </span>
            <input type="radio" name="sex" value="man" id="boy">男
            <input type="radio" name="sex" value="woman" id="girl">女
        </p>
        <p>
            <span>密码：</span>
            <!--            要设置name属性，确保浏览器能抓到这个值-->
<!--            <input type="password" id="password" name="password">-->

            <!--不设置name属性，让抓包的时候看不到设置的密码！-->
            <input type="password" id="inputpwd">
        </p>
<!--        //再添加一个隐藏的密码-->
        <input type="hidden" id="md5pwd" name="password">
<!--        <input type="submit">-->
<!--        按钮绑定提交事件-->
        <button type="submit">
            提交
        </button>
        <script>
           
            function checking2(){
                var username = document.getElementById('username');
                var pwd = document.getElementById('inputpwd');
                var md5pwd = document.getElementById('md5pwd');
                md5pwd.value = md5(pwd.value)//加密
                //这里可以校验表单的内容，if....return ture or false
                return true;
            }
		</script>

10.初识jQuery

10.1jQuery公式

获取jquery库：里面存在大量的JavaScript函数

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

在线CDN引入
导入项目(先下载，再导入)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线引入jquery cdn-->
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!--下载到项目后导入-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>

公式

$(selector).action()

selector 就是css的选择器 action就代表事件比如：click()

<a href="" id="testJquery">
    点我！
</a>
<script>
    $("#testJquery").click(function (){
        alert("nihao!");
    })
</script>

在这里插入图片描述

10.2选择器

推荐jquery工具站：https://jquery.cuishifeng.cn/

js与JavaScript对比

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


    /*jquery写法:一一对应，另外，css中的选择器他全部都能用，都能通过这一公式写出来*/
    $('p').click();
    $('#id1').click();
    $('.class1').click();

选择器总结

1.基本选择器
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器
2.层次选择器
 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器
3.过滤选择器(重点)
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素
3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素
3.4属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
4.表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

10.3事件

演示：任务是获取鼠标当前的坐标！

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--下载到项目后导入-->
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #moving{
            width: 400px;
            height: 400px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>

<!--任务:获取鼠标当前的坐标！-->
mouse: <span id="mouseMove"></span>
<div id="moving">
    在此范围内移动鼠标试试！！
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    $(function (){ //获取鼠标的移动事件，传入并参数显示坐标
        $('#moving').mousemove(function (e){
            //显示到mouse：的后面
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>
</body>

10.4jQurey操作DOM

操作DOM

节点文本操作

<body>
    <ul id="test">
        <li class="js">
            javascript!
        </li>
        <li name="java">
            java!
        </li>
    </ul>

<script> 
    // $('#test li[class=js]').text('JavaScript!');//修改
    $('#test li[class=js]').text();//查看
    $('#test li[name=java]').html('<strong>Java!</strong>')
    $('#test li[name=java]').hide();//隐藏
    $('#test li[name=java]').show();//显示
    $('#test li[name=java]').toggle()//取反来显示或隐藏

测试window和document

    //测试
    $(window).width();
    $(window).height();
    $(document).height();

在这里插入图片描述
ajax:

11.前端技巧

看jQuery 源码
巩固HTML、CSS （扒网站（选择需要的页面，打开元素审查，一点点删除，把对该页面没有影响的代码删掉，其他的另存为html，就比较干净的扒下来了），全部down下来，对应着修改看效果！）

好看的前端界面可以扒:

docsify博客
Ant Design首页
Vue.js首页

前端组件：

Ant Design首页
layui
ElementUi

以上是个人学习总结，暂且写到这里，暑假学的，现在有点忘了，放到这随时复习复习！

完结撒花！完结撒花！完结撒花！

x86bit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开水，送服JavaScript

Java和JavaScript可能有半毛钱的关系
复制链接

扫一扫

开水，送服JavaScript

文章目录

Js基础知识

1.基本语法

2.数据类型

2.1字符串

2.2布尔值

2.3 浮点数问题

2.4数组

2.5对象

3.流程控制

4.函数

4.1定义函数

4.2变量的作用域

4.3方法

5.内部对象

5.1Date

5.2JSON

5.3Ajax

6.面向对象编程

6.1什么是面向对象

6.2原型对象

6.3class继承

7.操作BOM对象（重点）

7.1window对象

7.2Navigator对象

7.3screen&location对象

7.4Document对象

8.操作DOM对象

8.1获取DOM节点

8.2 更新DOM节点

8.3删除DOM节点

8.4插入DOM节点

9.操作表单（验证）

9.1获得表单提交信息

9.2提交表单信息

10.初识jQuery

10.1jQuery公式

10.2选择器

10.3事件

10.4jQurey操作DOM

11.前端技巧