当前位置： 首页 > news >正文

Day 21

news 来源：原创 2024/9/20 2:52:53

Java Script

1.什么是JavaScript

概述

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

Java、JavaScript

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

历史

JavaScript 的历史_javascript历史-CSDN博客

ECMAScript它可以理解为是JavaScript的一个标准

2.基本使用及HelloWorld

引入JavaScript

1、内部标签

<script>//……
</script>

2、外部引入

abc.js

//...

test.html

<script src="abc.js"></script>

测试代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--script标签内，写JavaScript代码-->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>--><!--外部引入--><!--注意：script标签必须成对出现--><script src="js/jb.js"></script><!--不用显示定义type，也默认就是javascript--><script type="text/javascript "></script></head>
<body><!--这里也可以存放-->
</body>
</html>

3.浏览器控制台使用

基本语法入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--JavaScript严格区分大小写！--><script>//1.定义变量     变量类型  变量名  =  变量值;var score = 71;var name = "李骏";//alert(num);//2.条件控制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();/*asdfghjkl*/</script></head>
<body></body>
</html>

浏览器必备调试须知：

元素 控制台 源代码 网络 应用

4.数据类型快速浏览

数据类型

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

变量

var 王者荣耀 = "永恒钻石";

number

js不区分小数和整数，Number

123 //整数123
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((1/3) === (1-2/3))console.log(Math.abs(1/3-(1-2/3))<0.000001)

null 和 undefined 

  • null 空
  • undefined 未定义

数组 

Java的数组必须是相同类型的对象，js中不需要这样！

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

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

undefined

对象 

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

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

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

取对象的值

person.name
>'jibu'
person.age
>3

5.严格检查模式strict 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--前提：IDEA 需要设置支持ES6语法'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！局部变量建议都使用 let 去定义~--><script>'use strict';//全局变量let i = 1;// ES6 let</script></head>
<body></body>
</html>

6.字符串类型详解

字符串

1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符 \

\'
\n
\t
\u4e2d  \u####  Unicode字符
\x41   Ascll字符

3、多行字符串编写

        //tab键上面 esc键下面 ``var msg = `helloworld你好世界`console.log(msg);

4、模板字符串

        let name = "jibu";let age = 3;let msg = `你好，${name}`console.log(msg)

5、字符串长度 

str.length

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

 

 7、大小写转换

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

8、 student.indexOf('t') 

 

9、 substring

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

 

7.数组类型详解 

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

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

1、长度

arr.length

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

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

arr.indexOf(2)
1

字符串的 "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()

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

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

9、连接符join

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

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

 10、多维数组

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

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

 8.对象类型详解

若干个键值对

  var 对象名= {属性名: 属性值,属性名: 属性值,属性名: 属性值}//定义了一个person对象，它有4个属性
var person = {name: "jibu",age: 3,email: "3277528005@qq.com",score: 0}

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

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

1、对象赋值

person.name = "lijun"
'lijun'
person.name
'lijun'

2、使用一个不存在的对象属性，不会报错

person.haha
undefined

3、动态的删减属性，通过delete删除对象的属性

person
{name: 'lijun', age: 3, email: '3277528005@qq.com', score: 0}
delete person.name
true
person
{age: 3, email: '3277528005@qq.com', score: 0}

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

person
{age: 3, email: '3277528005@qq.com', score: 0}
person.haha = "haha"
'haha'
person
{age: 3, email: '3277528005@qq.com', score: 0, haha: 'haha'}

5、判断属性值是否在这个对象中！ xxx in xxx

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

 6、判断一个属性是否是这个对象自身拥有的  hasOwnProperty()

person. hasOwnProperty('toString')
false
person. hasOwnProperty('age')
true

9.分支和循环详解 

流程控制

if判断

var age = 3;if (age>3){ //第一个判断alert("haha")} else if(age<5){ //第二个判断alert("kuwa")}else{           //否则alert("kuwa~")}

while循环，避免程序死循环

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

for 循环

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

forEach循环

5.1 引入的

var age = [1,2,3,4,5,6,7,8,9,10];//函数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("存在")console.log(age[num])}}

10. Map和Set集合

ES6的新特性

Map：

    //ES6 Map//学生的成绩，学生的名字// var names = ["tom","rose","jack"];// var score = [100,90,80];var map = new Map([['tom',100],['rose',90],['jack',80]]);var name = map.get('tom'); //通过key获得valuemap.set('admin',123456); //新增或修改console.log(name);map.delete("tom");        //删除

Set：无序不重复的集合 

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

 11.Iterable迭代

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],["haha",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)}

12.函数的定义和参数获取

定义函数

定义方式一

绝对值函数

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;}}

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

rest 

以前：

 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参数只能写在最后面，必须用 ... 标识

13.变量的作用域、let、const详解

变量的作用域

在JavaScript中，var定义的变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用  （非要想实现，可以研究 闭包）

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

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

  function lj(){var x = 1;x = x + 1;}function lj2(){var x = 'A';x = x + 1;}

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

function lj(){var x = 1;//内部函数可以访问外部函数的成员，反之则不行function lj2(){var y = x + 1; //2}var z = y + 1; //ReferenceError: y is not defined}

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

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

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

提升变量的作用域

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

结果：xundefined

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

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

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

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

全局函数

  //全局变量var x = 1;function lj(){console.log(x);}lj()console.log(x);

全局对象 window 

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

alert()这个函数本身也是一个window变量；

  var x = 'xxx';window.alert(x);var old_alert =  window.alert;// old_alert(x);window.alert = function (){};//发现alert()失效了window.alert(123);//恢复window.alert = old_alert;window.alert(456);

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

规范：

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

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

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

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); //ReferenceError: i is not defined}

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

常量 const

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

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

在ES6引入了常量关键字 const

  const PI = 3.14; //只读变量console.log(PI);PI = '123'; //TypeError: Assignment to constant variable.console.log(PI);

14.方法的定义和调用、apply 

定义方法

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

var jibu = {name: '李骏',birth:2002,//方法age:function (){//今年-出生的年var now = new Date().getFullYear();return now - this.birth;}}//属性
jibu.name
//方法,一定要带 ()
jibu.age()

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

    function getAge(){//今年-出生的年var now = new Date().getFullYear();return now - this.birth;}var jibu = {name: '李骏',birth:2002,//方法age:getAge}// jibu.age()  22//getAge()   NaN  window

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

apply 

在js中可以控制this的指向

function getAge(){//今年-出生的年var now = new Date().getFullYear();return now - this.birth;}var jibu = {name: '李骏',birth:2002,//方法age:getAge};var xiaoming = {name: '小明',birth:2002,//方法age:getAge};// jibu.age()  22getAge.apply(xiaoming ,[]); //this,指向了xiaoming ，参数为空

内部对象 

标准对象

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

15.Date日期对象 

基本使用

var now = new Date();//Sat Aug 03 2024 15:13:09 GMT+0800 (中国标准时间)now.getFullYear();//年now.getMonth();//月 0~11 代表月now.getDate();//日now.getDay();//星期几now.getHours()//时now.getMinutes();//分now.getSeconds();//秒now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00 毫秒数console.log(new Date(1722669837806))//时间戳转为时间

转换 

now = new Date(1722669837806)
Sat Aug 03 2024 15:23:57 GMT+0800 (中国标准时间)
now.toLocaleString //注意，调用是一个方法，不是一个属性！
ƒ toLocaleString() { [native code] }
now.toLocaleString()
'2024/8/3 15:23:57'
now.toGMTString()
'Sat, 03 Aug 2024 07:23:57 GMT'

16.JSON对象 

json是什么

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

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

在JavaScript中一切皆为对象、任何js支持的类型都可以用JSON来表示；number，string……

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对都使用kry:value

JSON字符串和JS对象的转化

  var user = {name:"jibu",age: 3,sex:"男"}//对象转化为json字符串 {"name":"jibu","age":3,"sex":"男"}var jsonUser = JSON.stringify(user)//json字符串转化为对象 参数为 json 字符串var obj = JSON.parse('{"name":"jibu","age":3,"sex":"男"}')

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

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

Ajax 

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

面向对象编程

原型对象

17.面向对象原型继承

什么是面向对象

JavaScript、Java、c#.... 面向对象；JavaScript有些区别！

类：模板 原型对象

对象：具体的实例

类是对象的抽象，对象是类的一个具体表现

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

原型：

  var Student = {name:"jibu",age: 3,sex:"男",run: function (){console.log(this.name + "run...");}}var xiaoming = {name: "xiaoming"}//原型对象xiaoming.__proto__=Student;var Bird = {fly:function (){console.log(this.name + "fly...")}}//小明的原型 是 Birdxiaoming.__proto__=Bird;
    function Student(name){this.name = name;}//给Student新增一个方法Student.prototype.hello = function (){alert("hello")}

18.面向对象class继承

class关键字，是在ES6引入的

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

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

2、继承 

    class Student{constructor(name) {this.name = name;}hello(){alert('hello')}}class XiaoStudent extends Student{constructor(name,grage) {super(name);this.grade = grage;}myGrade(){alert('我是一名小学生')}}var xiaoming = new Student("xiaoming");var xiaohong = new XiaoStudent("xiaohong",1);

本质：查看对象原型 

 

原型链 

__proto__:

19.操作BOM对象

浏览器介绍

JavaScript和浏览器关系：
JavaScript诞生就是为了能够让他在浏览器中运行
 

BOM:浏览器对象模型

  • IE6~11
  • Chrome
  • Safari
  • FireFox  Linux

三方

  • QQ浏览器
  • 360浏览器

window  （重要）

window代表 浏览器窗口

window.alert(1)
undefined
window.innerHeight
798
window.innerWidth
150
window.outerHeight
892
window.outerWidth
794

 Navigator （不建议使用）

Navigator，封装了浏览器的信息

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

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

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

screen

代表屏幕尺寸

screen.width
1494
screen.height
934

location  （重要）

location代表当前页面的URL信息

host:"www.baidu.com" //主机
href:"https://www.baidu.com/?tn=15007414_20_dg" //当前指向的位置
protocol:"https:" //协议
reload:ƒ reload() //方法 重新加载  刷新网页
//设置新的地址
location.assign('网站地址')

document （内容；DOM）

document 当前的页面， HTML DOM文档树

document.title
'百度一下，你就知道'
document.title = '棘布'
'棘布'

获取具体的文档树节点

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl><script>var dl = document.getElementById('app')
</script>

 获取cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

劫持cookie原理

www.tabao.com

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

服务器端可以设置 cookie:httpOnly

history （不建议使用）

history 代表浏览器的历史记录

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

操作DOM对象（重点） 

20.获得DOM节点 

DOM：文档对象模型

核心：

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

  • 更新：更新DOM对象
  • 遍历dom节点：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的节点 

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

获得dom节点

<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; //获取父节点下的所有子节点// father.firstElementChild// father.lastElementChild</script>

这是原生代码，之后我们尽量都是使用jQuery();

21.更新DOM节点

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

操作文本 

  • id1.innerText = '456'   修改文本的值
  • id1.innerHTML = '<strong>123</strong>'   可以解析HTML文本标签

操作JS

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

22.删除DOM节点 

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

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

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

23.创建和插入DOM节点

插入节点

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

追加

<p id="js">JavaScript</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); //追加到后面</script>

效果： 

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

<!--<p id="newP">hello jibu</p>--><p id="js">JavaScript</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创建一个新的节点var newP = document.createElement('p');// 创建一个p标签newP.id = 'newP';newP.innerText = 'hello jibu';// 创建一个标签节点 （通过这个属性，可以设置任意的值）var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript')list.appendChild(newP);// 可以创建一个style标签var myStyle = document.createElement('style');//创建一个空style标签myStyle.setAttribute('type','text/css');myStyle.innerHTML = 'body{background-color: greenyellow;}';// 设置标签内容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);

操作表单 （验证）

 24.获得和设置表单的值

表单是什么   form DOM树

  • 文本框  text
  • 下拉框  <select>
  • 单选框  radio
  • 多选框  checkbox
  • 隐藏域  hidden
  • 密码框  password
  • ……

表单的目的：提交信息

获得要提交的信息

<form method="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="women" 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 = '123'//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值boy_radio.checked; // 查看返回的结果是否为true，如果为true，则被选中girl_radio.checked = 'true'; // 赋值
</script>

25.表单提交验证及前端代码MD5加密

提交表单，MD5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body><!--表单绑定提交事件
onsubmit= 绑定一个提交检测的函数， true false
将这个结果返回给表单，使用onsubmit 接收
--><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" name="password"><!--绑定事件 onclick 被点击--><button type="submit">提交</button>
</form><script>function aaa(){alert(1)var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('password');md5pwd.value = md5(pwd.value);//可以校验判断表单内容，true就是通过提交，false就是阻止提交return true;// console.log(uname.value);// console.log(pwd.value);// //MD5 算法// pwd.value = md5(pwd.value)// console.log(pwd.value);}
</script></body>
</html>

jQuery 

26.初始jQuery及公式

JavaScript

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

获取jQuery 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--CDN引入--><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head>
<body><!--
公式： $(selector).action()
--><a href="" id="test-jquery">点我</a><script>document.getElementById('id');//选择器就是css的选择器$('#test-jquery').click(function (){alert('hello');})
</script></body>
</html>

27.jQuery选择器

    //原生js，选择器少，麻烦不好记//标签选择器document.getElementsByTagName();//iddocument.getElementById();//类document.getElementsByClassName();//jQuery  css 中的选择器它全部都能用！$('p').click()   // 标签选择器$('#id').click()   // id选择器$('.class').click()   // class选择器

28.jQuery事件

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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>//当网页元素加载完毕之后，响应事件$(document).ready(function (){})//简化$(function (){$('#divMove').mousemove(function (e){$('#mouseMove').text('x:'+e.pageX +'y:'+e.pageY)})})
</script></body>
</html>

29.jQuery操作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()

 

 

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 智慧农场数字港系统设计与实现
  • fastDDS-gen编译
  • 生成订单幂等性（防止订单重复提交）
  • 职场上，不想受气，就要气场强大，以下三招见效
  • Java哈希算法
  • 【RTOS面试题】ISR中可以使用互斥锁和信号量吗？
  • 21. 合并两个有序链表(递归)
  • 代码随想录算法训练营Day22 | Leetcode 77 组合 Leetcode 216 组合总和Ⅲ Leetcode17 电话号码的字母组合
  • 基于内地城市生活垃圾收运场景的路线规划算法
  • 服务器 Linux 的网络信息
  • 【网络安全】探索AI 聊天机器人工作流程实现RCE
  • Unity补完计划 之 SpriteEditer SingleMode
  • 【C++】C++入门基础【类与对象】
  • HslCommunicationDemo各品牌Plc通信测试软件工具
  • 常见cms漏洞之dedecms
  • 2017届校招提前批面试回顾
  • C语言笔记（第一章：C语言编程）
  • HTTP--网络协议分层，http历史(二)
  • Java-详解HashMap
  • JAVA之继承和多态
  • Laravel 中的一个后期静态绑定
  • npx命令介绍
  • PHP CLI应用的调试原理
  • React Native移动开发实战-3-实现页面间的数据传递
  • React-Native - 收藏集 - 掘金
  • Redis字符串类型内部编码剖析
  • Spark学习笔记之相关记录
  • 给Prometheus造假数据的方法
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 深入浏览器事件循环的本质
  • 思否第一天
  • 探索 JS 中的模块化
  • 微信小程序--------语音识别（前端自己也能玩）
  • 我这样减少了26.5M Java内存！
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • ​queue --- 一个同步的队列类​
  • #mysql 8.0 踩坑日记
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • #ubuntu# #git# repository git config --global --add safe.directory
  • #职场发展#其他
  • $.type 怎么精确判断对象类型的 --（源码学习2）
  • （1）Jupyter Notebook 下载及安装
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (C#)获取字符编码的类
  • （Redis使用系列） Springboot 使用redis实现接口幂等性拦截 十一
  • （附源码）基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (回溯) LeetCode 77. 组合
  • (解决办法)ASP.NET导出Excel，打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (免费领源码）Java#Springboot#mysql农产品销售管理系统47627-计算机毕业设计项目选题推荐
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • （七）c52学习之旅-中断
  • （七）理解angular中的module和injector，即依赖注入
  • （数据大屏）（Hadoop）基于SSM框架的学院校友管理系统的设计与实现+文档
  • （推荐）叮当——中文语音对话机器人
  • (转载)Linux 多线程条件变量同步