JavaScript

慢吞云雾缓吐愁  金牌会员 | 2022-8-9 14:42:39 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 911|帖子 911|积分 2733

JavaScript：
学习视频-狂神说JavaScript：视频链接
JavaScript

1、什么是JavaScript

1.1、概述


  • JavaScript是一门世界上最流行的脚本语言
  • Java，JavaScript 10天
  • 一个合格的后端人员，必须精通JavaScript
1.2、历史


  • JavaScript的起源故事
  • ECMAScript它可以理解为JavaScript的一个标准
  • 最新版本已经到es6版本~
  • 但是大部分浏览器还只停留在支持es5代码上！
  • 开发环境---线上环境，版本不一致
2、快速入门

2.1、引入JavaScript

1、内部标签
复制代码
测试代码
  5.   
  9.    Title
  13.   
  17.   
  21.   
  25.   
  29.   
  33.   
  37.   
  41.   
  45.   
  49.   
  53.   
复制代码
2.2、基本语法入门
  1. [/code]浏览器必备调试须知：
  2. [img]https://img2022.cnblogs.com/blog/2779887/202206/2779887-20220624003840373-1970616809.png[/img]
  3. [size=4]2.3、数据类型[/size]
  5. 数值，文本，图形，音频，视频
  6. [b]变量[/b]
  7. [code]var a_$w
复制代码
number
js不区分小树和整数，number
  1. 123//整数123
  2. 123.1//浮点数123.1
  3. 1.123e3//科学计数法
  4. -99//负数
  5. NaN //not a number
  6. Infinity // 表示无限大
复制代码
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
  1. && 两个都为真，结果为真
  2. || 一个为真，结果为真
  3. !  真即假，假即真
复制代码
比较运算符 ！！！重要！
  1. =
  2. 1,"1"
  3. == 等于（类型不一样，值一样，也会判断为true）
  4. === 绝对等于（类型一样，值一样，结果为true）
复制代码
这是一个JS的缺陷，坚持不要使用 == 比较
须知：

  • NaN === NaN，这个与所有的数值都不相等，包括自己
  • 只能通过isNaN(NaN) 来判断这个数是否是NaN
浮点数问题
  1. console.log((1/3) === (1-2/3))
复制代码
尽量避免使用浮点数进行运算，存在精度问题！
  1. Math.abs(1/3-(1-2/3))<0.00000001
复制代码
2.4、严格检查格式use strict

  5.   
  9.    Title
  13.   
  17.    
复制代码
3、数据类型

3.1、字符串

1、正常字符串我们使用单引号('a')，或者双引号("a")包裹

2、注意转义字符 \
  1. \'                        '\n                        换行\t                        tab\u4e2d
  5.           \u#### Unicode字符\x41
  9.           Ascall字符
复制代码
3、多行字符串编写
  1. 'use strict';//tab 上面 esc键下面let msg =
  5.   `hello
  9.   world
  13.   你好呀
  17.   糖果`
复制代码
4、模板字符串
  1. person.name
  2. > "TangGuo"
  3. person.age
  4. > 3
复制代码
5、字符串长度
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  8.    
  9. </head>
  10. <body>
  12. </body>
  13. </html>
复制代码
6、字符串不可变


7、大小写转换
  1. \'                        '
  2. \n                        换行
  3. \t                        tab
  4. \u4e2d            \u#### Unicode字符
  5. \x41            Ascall字符
复制代码
8、获取字符下标
  1. 'use strict';
  2. //tab 上面 esc键下面
  3. let msg =
  4.     `hello
  5.     world
  6.     你好呀
  7.     糖果`
复制代码
9、substring，截取字符串从0开始
  1. 'use strict';
  2. //tab 上面 esc键下面
  3. let name = "糖果";
  4. let age = 3;
  5. let msg =`你好呀，${name},${age}`
  6. console.log(msg);
复制代码
3.2、数组

Array可以包含任意的数据类型
  1. 'use strict';
  2. let str = 'abc';
  3. console.log(str.length);
复制代码
1、长度
  1. //注意，这里是方法，不是属性了
  2. student.toUpperCase();//大写
  3. student.toLowerCase();//小写
复制代码
注意：假如给//注意，这里是方法，不是属性了
student.toUpperCase();//大写
student.toLowerCase();//小写赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
  1. student.indexof('t');
复制代码
字符串的"1"和数字 1 是不同的
3、slice（）

截取Array的一部分，返回的一个新数组，类似于String中substring
4、push()，pop()尾部
  1. //前闭后开
  2. student.substring(1)//从第一个字符串截取到最后一个字符串
  3. student.substring(1,3)//[1,3)
复制代码
5、unshift(),shift() 头部
  1. var arr = [1,2,3,4,5,6];//通过下标取值和赋值
  2. arr[0];
  3. arr[0] = 1;
复制代码
6、排序sort()
  1. arr.length
复制代码
7、元素反转reverse()
  1. arr.indexOf(2)
  2. 1
复制代码
8、concat()
  1. push：压入到尾部
  2. pop：弹出尾部的一个元素
复制代码
注意：concat()并没有修改数组，只是会返回一个新的数组
9、连接符join

打印拼接数组，使用特定的字符串连接
  1. unshift：压入到头部
  2. shift：弹出头部的一个元素
复制代码
10、多维数组
  1. arr = ["B","C","A"]
  2. (3) ['B', 'C', 'A']
  3. arr.sort()
  4. (3) ['A', 'B', 'C']
复制代码
数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3、对象

若干个键值对
  1. (3) ['A', 'B', 'C']
  2. arr.reverse()
  3. (3) ['C', 'B', 'A']
复制代码
Js中对象，{…}表示一个对象，键值对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值
  1. arr = ["C","B","A"]
  2. (3) ['C', 'B', 'A']
  3. arr.concat([1,2,3])
  4. (6) ['C', 'B', 'A', 1, 2, 3]
  5. arr
  6. (3) ['C', 'B', 'A']
复制代码
2、使用一个不存在的对象属性，不会报错！
  1. (3) ['C', 'B', 'A']
  2. arr.join('-')
  3. 'C-B-A'
复制代码
3、动态的删减属性，通过delete删除对象的属性
  1. arr = [[1,2],[3,4],["5","6"]];
  2. arr[1][1]
  3. 4
复制代码
4、动态的添加，直接给新的属性添加值即可
  1. var 对象名 = {
  2.         属性名：属性值，
  3.         属性名：属性值，
  4.         属性名：属性值
  5. }
  6. //定义了一个person对象，它有四个属性
  7. var person = {
  8.         name: "TangGuo",
  9.         age: 3,
  10.         email: "123456798@QQ.com",
  11.         score: 66
  12. }
复制代码
5、判断属性值是否在这个对象中！xxx in xxx！
  1. person.name = "TangGuo"
  2. "TangGuo"
  3. person.name
  4. "TangGuo"
复制代码
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
  1. person.haha
  2. undefined
复制代码
3.4、流程控制

if判断
  1. var age = 3;if (age>3){ //第一个判断
  5.   alert("haha");}else if(age=0){
  9.   
  13.    return x;
  17.   }else{
  21.   
  25.    return -x;
  29.   }}
复制代码
</ul>arguments


  • arguments是一个JS免费赠送的关键字；
  • 代表，传递进来的所有参数，是一个数组！
  1. var abs = function(x){
  5.   
  9.    console.log("x=>"+x);
  13.   
  17.    for(var i=0;i=0){
  21.   
  25.    return x;
  29.   }else{
  33.   
  37.    return -x;
  41.   }}
复制代码
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest

以前：
  1. if (arguments.length>2){
  5.   for (let i = 2; i < arguments.length; i++) {
  9.   
  13.    //...
  17.   }}
复制代码
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…
  1. function aaa(a,b,...rest) {
  5.   console.log("a=>"+a);
  9.   console.log("b=>"+b);
  13.   console.log(rest);}
复制代码
rest参数只能写在最后面，必须用…标识。
4.2、变量的作用域

变量的作用域

在javascript中，var定义变量实际是有作用域的。
假设在函数体重声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）
  1. 'use strict';function tg() {
  5.   let x = 1;
  9.   x = x + 1;}x = x + 2; //Uncaught ReferenceError: x is not defined
复制代码
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
  1. 'use strict';function tg1() {
  5.   let x = 1;
  9.   x = x + 1;}function tg2() {
  13.   let x = 1;
  17.   x = x + 1;}
复制代码
内部函数可以访问外部函数的成员，反之则不行
  1. 'use strict';function tg() {
  5.   let x = 1;
  9.   //内部函数可以访问外部函数的成员，反之则不行
  13.   function tg2() {
  17.   
  21.    let y = x + 1;
  25.   }
  29.   var z = y + 1; //VM184:1 Uncaught ReferenceError: y is not defined}
复制代码
假设，内部函数变量和外部函数变量，重名！
  1. 'use strict';function tg() {
  5.   let x = 1;
  9.   //内部函数可以访问外部函数的成员，反之则不行
  13.   function tg2() {
  17.   
  21.    let x = 'A';
  25.   
  29.    console.log('inner'+x); //innerA
  33.   }
  37.   console.log('outer'+x); //outer1
  41.   tg2()}tg()
复制代码
假设在JavaScript中，函数查找变量从自身函数开始~， 由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域


  • 如果使用let，变量的作用域不会提升。
  1. function tg() {
  5.   var x = 'x'+y;
  9.   console.log(x);
  13.   var y = 'y';}
复制代码
结果：xundefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
  1. function tg2() {
  5.   var y;
  9.   
  13.    var x = 'x'+y;
  17.   console.log(x);
  21.   y = 'y';}
复制代码
这个是在javascript建立之初就存在的特性。 养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
  1. function tg2() {
  5.   var x = 1,
  9.   
  13.    y = x + 1,
  17.   
  21.    z,i,a; //undefined
  25.   
  29.    //之后随意用}
复制代码
全局变量
  1. 'use strict';//全局变量var x = 1;function f() {
  5.   console.log(x)}f();console.log(x);
复制代码
全局对象 window
  1. let map = new Map([['tom',100],['jack',90],['haha',80]])
  2. for (let x of map) {
  3.     console.log(x)
  4. }
复制代码
alert() 这个函数本身也是一个window的变量；
  1. var x = 'xxx';window.alert(x);var old_alert = window.alert;old_alert(111);window.alert = function () {
  5.   }//发现 alert() 失效了window.alert(222);//恢复window.alert = old_alert;window.alert(333);
复制代码
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 ReferenceError
规范

由于我们的所有变量都会绑定到window上。如果不同的js文件，使用了相同的全局变量，就会产生冲突→如何减少这样的冲突？
唯一全局变量
  1. //唯一一个全局变量var tangGuo = {};//定义全局变量tangGuo.name = 'tangGuo';tangGuo.add = function (a, b) {
  5.   return a+b;}
复制代码
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()
局部作用域 let
  1. function aaa() {
  5.   for (var i = 0; i < 100; i++) {
  9.   
  13.    console.log(i);
  17.   }
  21.   console.log(i+1); //问题？i 出了这个作用域还可以使用}
复制代码
let

ES6的let关键字，解决了局部作用域冲突的问题！
  1. function aaa() {
  5.   for (let i = 0; i < 100; i++) {
  9.   
  13.    console.log(i);
  17.   }
  21.   console.log(i+1); //Uncaught ReferenceError: i is not defined}
复制代码
建议大家都用let去定义局部作用域的变量；
常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。
  1. var abs = function(x){
  2.     //手动抛出异常来判断参数是否存在
  3.     if(typeof x!=='number'){
  4.         throw 'Not a Number';
  5.     }
  6.     if(x>=0){
  7.         return x;
  8.     }else{
  9.         return -x;
  10.     }
  11. }
复制代码
const

在ES6引入了常量关键字 const
  1. var abs = function(x){
  2.    
  3.     console.log("x=>"+x);
  4.    
  5.     for(var i=0;i<arguments.length;i++){
  6.         console.log(arguments[i]);
  7.     }
  8.    
  9.     if(x>=0){
  10.         return x;
  11.     }else{
  12.         return -x;
  13.     }
  14. }
复制代码
4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
  1. 'use strict';var tangguo = {
  5.   name: '糖果',
  9.   birth: 1997,
  13.   // 方法
  17.   age: function () {
  21.   
  25.    // 今年 - 出生的年
  29.   
  33.    let now = new Date().getFullYear();
  37.   
  41.    return now - this.birth;
  45.   }}//属性tangguo.name//方法，一定要带 ()tangguo.age()
复制代码
this.代表什么？拆开上main的代码看看~
  1. 'use strict';function getAge() {
  5.   // 今年 - 出生的年
  9.   let now = new Date().getFullYear();
  13.   return now - this.birth;}var tangguo = {
  17.   name: '糖果',
  21.   birth: 1997,
  25.   age: getAge}// tangguo.age() ok// getAge() NaN  window
复制代码
this是无法指向的，是默认指向调用它的那个对象的；
apply

在js中可以控制this指向
  1. 'use strict';function getAge() {
  5.   // 今年 - 出生的年
  9.   let now = new Date().getFullYear();
  13.   return now - this.birth;}var tangguo = {
  17.   name: '糖果',
  21.   birth: 1997,
  25.   age: getAge};// tangguo.age() okgetAge.apply(tangguo,[]); // this，指向了tangguo，参数为空
复制代码
5、内部对象

标准对象
  1. 'use strict';
  2. function tg1() {
  3.     let x = 1;
  4.     x = x + 1;
  5. }
  7. function tg2() {
  8.     let x = 1;
  9.     x = x + 1;
  10. }
复制代码
5.1、Date

基本使用
  1. 'use strict';
  2. function tg() {
  3.     let x = 1;
  4.     //内部函数可以访问外部函数的成员，反之则不行
  5.     function tg2() {
  6.         let y = x + 1;
  7.     }
  8.     var z = y + 1; //VM184:1 Uncaught ReferenceError: y is not defined
  9. }
复制代码
转换
  1. 'use strict';
  2. function tg() {
  3.     let x = 1;
  4.     //内部函数可以访问外部函数的成员，反之则不行
  5.     function tg2() {
  6.         let x = 'A';
  7.         console.log('inner'+x); //innerA
  8.     }
  9.     console.log('outer'+x); //outer1
  10.     tg2()
  11. }
  12. tg()
复制代码
5.2、JSON

JSON是什么
早期，所有数据传输习惯使用XML文件！

  • JSON是一种轻量级的数据交换格式
  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在javascript中，一切皆为对象，任何js支持的类型都可以用JSON来表示；number、string...
格式：


  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都是用key:value
JSON字符串和js对象转化
  1. var user = {
  5.   name:"tangguo",
  9.   age:3,
  13.   sex:'女'}//对象转化为json字符串{"name":"tangguo","age":3,"sex":"男"}var jsonUser = JSON.stringify(user);//json 字符串转化为对象，参数为json字符串var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
复制代码
很多人搞不清楚，JSON和JS对象的区别
  1. function tg2() {
  2.     var y;
  3.    
  4.     var x = 'x'+y;
  5.     console.log(x);
  6.     y = 'y';
  7. }
复制代码
5.3、Ajax


  • 原生的js写法 xhr异步请求
  • jQuery封装好的方法$("#name").ajax("")
  • axios请求
6、面向对象编程

原型对象

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

  • 类：模板 原型对象
  • 对象：具体实例
在javascript中，需要大家转换一下思维方式！
原型：
  1. var Student = {
  5.   name:"tangguo",
  9.   age:3,
  13.   sex:'女',
  17.   run: function () {
  21.   
  25.    console.log(this.name + "run...");
  29.   }};var xiaoming = {
  33.   name: 'xiaoming'};//原型对象xiaoming.__proto__ = Student;var Bird = {
  37.   fly: function () {
  41.   
  45.    console.log(this.name + "fly...");
  49.   }};//原型对象xiaoming.__proto__ = Bird;
复制代码
  1. function Student(name){
  5.   this.name = name;}//给student新增一个方法Student.prototype.hello = function () {
  9.   alert('Hello')};
复制代码
class继承

class关键字，是在ES6引入的
1、定义一个类、属性、方法
  1. //ES6 之后//定义一个学生的类class Student{
  5.   constructor(name) {
  9.   
  13.    this.name = name;
  17.   }
  21.   hello(){
  25.   
  29.    alert('Hello')
  33.   }}var xiaoming = new Student('xiaoming');var xiaohong = new Student('xiaohong');xiaoming.hello()
复制代码
2、继承
  1. //ES6 之后//定义一个学生的类class Student{
  5.   constructor(name) {
  9.   
  13.    this.name = name;
  17.   }
  21.   hello(){
  25.   
  29.    alert('Hello')
  33.   }}class XiaoStudent extends Student{
  37.   constructor(name,grade) {
  41.   
  45.    super(name);
  49.   
  53.    this.grade = grade;
  57.   }
  61.   myGrade(){
  65.   
  69.    alert('我是一名小学生')
  73.   }}var xiaoming = new Student('xiaoming');var xiaohong = new XiaoStudent('xiaohong',1);
复制代码
本质：查看对象原型

原型链

__ proto __:

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

  • JavaScript诞生就是为了能够在浏览器中运行！
BOM：浏览器对象模型

  • IE6~11
  • Chrome 谷歌
  • Safari 苹果
  • FireFox 火狐
  • Opera
三方

  • QQ浏览器
  • 360浏览器
window

window代表浏览器窗口
  1. //唯一一个全局变量
  2. var tangGuo = {};
  4. //定义全局变量
  5. tangGuo.name = 'tangGuo';
  6. tangGuo.add = function (a, b) {
  7.     return a+b;
  8. }
复制代码
Navigator（不建议使用）

Navigator，封装了浏览器的信息
  1. function aaa() {
  2.     for (var i = 0; i < 100; i++) {
  3.         console.log(i);
  4.     }
  5.     console.log(i+1); //问题？i 出了这个作用域还可以使用
  6. }
复制代码
大多数时候，我们不会使用navigator对象，因为会被人为修改!
不建议使用这些属性来判断和编写代码
screen

代表屏幕尺寸
  1. function aaa() {
  2.     for (let i = 0; i < 100; i++) {
  3.         console.log(i);
  4.     }
  5.     console.log(i+1); //Uncaught ReferenceError: i is not defined
  6. }
复制代码
location（重要）

location代表当前页面的URL信息
  1. var PI = '3.14';
  3. console.log(PI);
  4. PI = '213'; //可以改变这个值
  5. console.log(PI);
复制代码
document（内容；DOM）

document代表当前的页面，HTML DOM文档树
  1. const PI = '3.14'; //只读变量
  2. console.log(PI);
  3. //PI = '123'; // TypeError: Assignment to constant variable.
  4. console.log(PI);
复制代码
获取具体的文档树节点
  5.   Java
  9.   JavaSE
  13.   JavaEE
复制代码
获取cookie
  1. 'use strict';
  2. function getAge() {
  3.     // 今年 - 出生的年
  4.     let now = new Date().getFullYear();
  5.     return now - this.birth;
  6. }
  7. var tangguo = {
  8.     name: '糖果',
  9.     birth: 1997,
  10.     age: getAge
  11. }
  13. // tangguo.age() ok
  14. // getAge() NaN  window
复制代码
劫持cookie原理
  1. [/code]服务器端可以设置cookie为[b]httpOnly[/b]
  2. [size=4]history（不建议使用 ）[/size]
  4. history代表浏览器的历史记录
  5. [code]typeof 123
  6. 'number'
  7. typeof '123'
  8. 'string'
  9. typeof true
  10. 'boolean'
  11. typeof NaN
  12. 'number'
  13. typeof []
  14. 'object'
  15. typeof {}
  16. 'object'
  17. typeof Math.abs
  18. 'function'
  19. typeof undefined
  20. 'undefined'
复制代码
8、操作DOM对象（重点）

DOM：文档对象模型
核心

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

  • 更新：更新Dom节点
  • 遍历Dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得Dom节点
  1. let now = new Date(); //Tue Jun 21 2022 13:43:54 GMT+0800 (中国标准时间)
  2. now.getFullYear(); //年
  3. now.getMonth(); //月  0-11
  4. now.getDate(); //日
  5. now.getDay(); //星期几
  6. now.getHours(); //时
  7. now.getMinutes(); //分
  8. now.getSeconds(); //秒
  10. now.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
  12. console.log(new Date(1655790801571)) //时间戳转为时间
复制代码
这是原生代码，之后我们尽量都使用jQuery();
更新节点
  1. [/code]操作文本
  2. [list]
  3. [*]id1.innerText='value'修改文本的值
  4. [*]id1.innerHTML='[b]value[/b]'可以解析超文本标签
  5. [/list]操作css：
  6. [code]var user = {
  7.     name:"tangguo",
  8.     age:3,
  9.     sex:'女'
  10. }
  12. //对象转化为json字符串{"name":"tangguo","age":3,"sex":"男"}
  13. var jsonUser = JSON.stringify(user);
  15. //json 字符串转化为对象，参数为json字符串
  16. var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
复制代码
删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己
  5.   [size=6]标题一[/size]
  11.   p1
  16.   p2
复制代码
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。
插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了！会产生覆盖
追加：
  1. JavaScript
  6.   JavaSE
  11.   JavaEE
  16.   JavaME
复制代码
效果：

创建一个新的标签，实现插入
  1. [/code][size=4]insertBefore插到前面[/size]
  3. [code]//ES6 之后
  4. //定义一个学生的类
  5. class Student{
  6.     constructor(name) {
  7.         this.name = name;
  8.     }
  9.     hello(){
  10.         alert('Hello')
  11.     }
  12. }
  14. var xiaoming = new Student('xiaoming');
  15. var xiaohong = new Student('xiaohong');
  16. xiaoming.hello()
复制代码
jQuery 教程1
jQuery 教程2
jQuery API 3.5.1 速查表
9、操作表单form（验证）

表单是什么？form  DOM树


  • 文本框→text
  • 下拉框→select
  • 单选框→radio
  • 多选框→checkbox
  • 隐藏域→hidden
  • 密码框→password
  • …
表单的目的提交信息
获得要提交的信息
  5.   
  9.   
  13.   
  17. 用户名：
  21.   
  26.   
  30.   
  34.   
  38.   
  42.   性别：
  46.   
  50.    男
  54.   
  58.    女
  62.   
复制代码
提交表单

md5加密密码，表单优化
  5.   
  9.    Title
  13.   
  17.   
  21.   
  25.   
  29.   
  33.   
  37.   
  41. 用户名：
  45.   
  50.   
  54.   
  58.   
  62. 密码：
  66.   
  71.   
  75.   
  79.   
  83.   
  87.   提交
复制代码
input标签要实现抓取数据，必须通过name属性来实现

10、jQuery

javaScript和jQuery的关系？
jQuery库，里面存在大量的JavaScript函数
获取jQuery

jQuery官网
jQuery API 3.5.1 速查表
jQuery 教程1
jQuery 教程2

引入jQuery的方式

  1. [/code][size=4]公式：$(selector).action()[/size]
  3. [list]
  4. [*]$(选择器).事件(事件函数)
  5. [/list][code]
  9.   
  13.    Title
  17.   
  21.   
  25.   
  29. [url=https://www.cnblogs.com/]点我[/url]
复制代码
选择器
  1. host: "www.baidu.com"
  2. href: "https://www.baidu.com/"
  3. protocol: "https:"
  4. reload: ƒ reload() //刷新网页
  5. // 设置新的地址
  6. location.assign('https://blog.kuangstudy.com/')
复制代码
文档工具站：http://jquery.cuishifeng.cn/
事件
  1. document.title
  2. '百度一下，你就知道'
  3. document.title = '糖果'
  4. '糖果'
复制代码
获取鼠标当前的坐标
  5.   
  9.    Title
  13.   
  17.    mouse:
  21.    在这里移动鼠标试试
复制代码
操作DOM

节点文本操作
  2. [list]
  6.   
  7. [*]JavaScript
  11.   
  12. [*]Python
  13. [/list]
复制代码
CSS的操作
  1. [/code][size=1]元素的显示和隐藏[/size]
  3. [list]
  4. [*]本质display: none;
  5. [/list][code]history.back() //后退
  6. history.forward() //前进
复制代码
娱乐测试
  1. //对于 css 选择器
  2. let h1 = document.getElementsByTagName('h1');
  3. let p1 = document.getElementById('p1');
  4. let p2 = document.getElementsByClassName('p2');
  5. let father = document.getElementById('father');
  7. let children = father.children; //获取父节点下的所有子节点
  8. // father.firstChild;
  9. // father.children[index];
  10. // father.lastChild;
复制代码
未来ajax()；
  1. $('#form').ajax()  $.ajax({url:"test.html",context:document.body,success:function(){
  5.    $(this).addClass("done"); }})
复制代码
小技巧

源码之家 游戏源码
1、如何巩固JS（看jQuery源码，看游戏源码！）
2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）a
组件

IDEA快捷键


  • Ctrl+Alt+L：自动对齐

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

慢吞云雾缓吐愁

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表