javascript中常用方法练习 javascript运用

转载

mob64ca13f87273 2024-07-04 21:51:01

文章标签 javascript中常用方法练习 javascript dom 数组字符串 文章分类 JavaScript 前端开发

一.什么是javascript
1.1.概述
javaScript是一门世界上最流行的脚本语言
java javascript
一个合格的后端人员必须精通javaScript
1.2.历史
ECMAScript 它可以理解是JavaScript的一个标准
最新版本技惊倒了es6版本
但是大部分浏览器还只停留在支持es5代码上
开发环境—线上环境，版本不一致
二.快速入门
2.1引入JavaScript
1.内部标签

2.外部引入

qj.js
alert('hello,world');

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的第一个JavaScript</title>
	<!-- 外部引入 -->
	<!-- 注意：script标签必成对出现 -->
	<script src="js/qj.js">
		
	</script>
	<!-- 不用写也默认是 -->
	<script type="text/javascript"> </script>
</head>
<body>
	<!-- 这里也可以放JavaScript -->
	
</body>
</html>

2.2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的第一个JavaScript</title>

	

<script type="text/javascript"> 
		// 1.定义变量 变量类型 变量名 = 变量值；
		var num = 1;
		var name = "wangxin";
		alert(num);
		// 条件控制
		var score = 1;
		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>
	<!-- 这里也可以放JavaScript -->
	
</body>
</html>

浏览器必备调试须知：

2.3.数据类型
数值，文本，图形，音频，视频
变量

var $1

Number
Js不区分小数和整数，统一都用number

整数浮点数科学计数法负数 NaN不是一个数字 Infinity表示无穷的大
字符串

‘abc’   ”abc”

布尔值

True  false

逻辑运算
&& 两个都为真结果为真
|| 一个为真则结果为真
！真就是假假就是真取反
比较运算符
=赋值符号
==等于（类型不一样值一样也会判断为true）
===绝对等于（类型一样值也一样结果为TRUE）
这是一个JS的缺陷，坚持不要使用比较
须知：NaN=NaN与所有数值都不相等包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：

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

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

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

null和undefined
null空
Undefined未定义
数组
Java的数组必须是相同类型的对象，而js不需要
保证代码的可读性尽量使用[]

var arr = [1,2,3,4,5,"hello",null,true]

一系列相同类型的对象
取数组下标：如果越界了就会undefined
==对象
对象是大括号数组是中括号–
每个属性都用逗号隔开，最后一个不需要添加

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

取对象的值

person.name
>"wangxin"
person.age
>3

2.4.严格检查格式

<!-- 
		'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题
		必须写在第一行
		局部变量建议都使用let去定义

	 -->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的第一个JavaScript</title>
	<!-- 
		'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题
		必须写在第一行
		局部变量建议都使用let去定义

	 -->

	<script type="text/javascript"> 
		'use strict';
		var i = 1;
		console.log(i);


	</script>
</head>
<body>
	<!-- 这里也可以放JavaScript -->
	
</body>
</html>

三.数据类型
3.1.字符串
1.正常字符串我们使用单引号’ ’或者双引号包裹” ”
2.注意转义字符\

\’字符串

\n换行
\t TAB键
\u4e2d 中  \u#####  Unicode字符
\x41   Ascll字符

3.多行字符串编写

var mag = `
		hello,world
		nihao

		`

4.模板字符串

let name = "wangxin";
		let age = 3;
		var mag = `
		你好啊,${name}`
		console.log(mag);

5.字符串长度

str.length

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

7.大小写转换

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

8.console.log(student.indexOf('u')) 9.

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

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

var arr = [1,2,3,4,5]
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() //  弹出尾部的一个元素

unshift(),shift() //头部
Unshift()  //压入到头部
Shift()   // 弹出头部一个元素

6.排序 sort() 7.元素反转reverse() 8.Concat() 拼接数组注意：并没有修改数组，只是会返回一个新的数组
9.连接符join 打印拼接数组，使用特定的字符串链接

arr.join('-')
"1-2-3-4-5-a"

10.多维数组

数组：储存数据（如何存，如何取，方法都可以自己实现）
3.3.对象
若干个键值对
var 对象名 = {
属性名 : 属性值 ,
属性名 : 属性值 ,
属性名 : 属性值
}

//定义了一个person对象 它有四个属性
var person = {
			name: "wangxin",
			age: 3,
			email: "232312312@qq.com",
			score: 0

		}

js中对象，{…}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
javascript中的所有的键都是字符串,值是任意对象！
1.对象赋值

person.name
"wangxin"
person.age=4
4

2.使用一个不存在的对象属性，不会报错！Undefined
3.动态的删减属性通过delete删除对象属性

delete person.name
true
person.name
undefined
person
{age: 4, email: "232312312@qq.com", score: 0}

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

person.name = "wangxin"
"wangxin"
person
{age: 4, email: "232312312@qq.com", score: 0, name: "wangxin"}

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

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

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

person.hasOwnProperty('toString')
False

3.4.流程控制
If判断

var age = 3;
		if(age > 3){
			alert("haha");
		}else{
			alert("kuwa~");
		}

while循环,避免死循环

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

for循环

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

forEach循环 5.1引入的

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

for…in循环

for(var num in arr)
var arr = [1,2,3,4];
		/**/
		for(var num in arr){
			console.log(num)

		}

3.5.Map 和 Set
ES6新特性
Map集合

var map = new Map([['tom',100],['jack',40],['haha',80]]);
	    var name = map.get('tom');//通过key获得value
	    map.set('admin',12234);
	    console.log(name);

Set集合无序不重复的集合

var set = new Set([1,2,3,444,1,,1,1]);//set可以去重
	    set.add(100);//添加
        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",122],["JACK",666],["HAHAH",009]]);
		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.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包含所有参数我们有时候想使用多余的参数进行附加操作，需要排除已有的参数~~~

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参数只能写在最后面必须用…标识。
4.2变量的作用域

在javascript中 var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可以使用(非要想实现的话，后面可以研究一下闭包)

function wx() {
			var x = 1;
			x = x + 1; 
		}
		x = x + 2;  //index.html:18 Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名 只要在函数内部就不冲突
function wx() {
			var x = 1;
			x = x + 1; 
		}
		function wx1 (){
			var x = 1;
			x = x + 1; 
		}

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

function wx() {
			var x = 1;
			//内部函数可以访问外部函数的成员，反正不行
			function wx1 (){
			var y = x + 1;
			}
			var z = y + 1;
		}
   假设内部函数变量和外部函数变量重名 
function wx() {
			var x = 1;
			function wx1 (){
			var x = 'A'
			console.log('inner'+x);
			}
			console.log('outer'+x);
			wx1();
		}
		wx();

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

提升变量的作用域

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

		}
		wx();

结果xundefined
说明；js执行引擎自动提升了y的声明但是不会提升变量y的赋值
一般来说JavaScript变量的声明写在开头把所有变量提到最前面统一定义。
这个是在JavaScript建立之初就存在的特性，养成规范所有的变量定义都放在函数的头部不要乱放便于代码的维护。

全局函数

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

全局对象window

var x = "xxx";
		alert(x);
		alert(window.x); //默认所有的全局变量 都会自动绑定window对象下
Alert() //这个函数本身也是一个window的变量
var x = "xxx";
		window.alert(x);
		var old_alert = window.alert;
		//old_alert(x);
		window.alert = function () {

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

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

规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件使用了相同的全局变量冲突->如何能减少冲突？

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

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

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

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

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

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

在ES6引入常量关键字const

const PI = "3.14"; //只读常量
		console.log(PI);
		PI = 233;
		console.log(PI); //Uncaught TypeError: Assignment to constant variable

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

var wangxin = {
			name: '王欣',
			bitrh: 2020,
			//方法
			age: function () {
				// 今年 - 出生的年
				var now = new Date().getFullYear();
				return now-this.bitrh;
			}
		}
//属性 wangxin.name
//方法，一定要带() wangxin.agr()
this.代表什么？ 拆开上面的代码看
function getAge() {
			var now = new Date().getFullYear();
			return now-this.bitrh;
		}
		var wangxin = {
			name: 'was',
			bitrh: 2000,
			age: getAge
		}
		//wangxin.age() ok
		//getAge() NaN window

this 是无法指向的，是默认指向调用它的哪个方法
Apply
在js中可以控制this的指向

function getAge() {
			var now = new Date().getFullYear();
			return now-this.bitrh;
		}
		var wangxin = {
			name: 'was',
			bitrh: 2000,
			age: getAge
		};
		//wangxin.age() ok
		//getAge() NaN window
		getAge.apply(wangxin,[]); //this,指向了wangxin 参数为空

五.内部对象
标准对象
typeof 123
“number”
typeof ‘123’
“string”
typeof[]
“object”
5.1.Date
基本使用

var now = new Date();
		now.getFullYear(); //年
		now.getMonth(); //月
		now.getDate(); //日
		now.getDay(); //星期几
		now.getHours(); //时
		now.getMinutes();//分
		now.getSeconds();//秒
		now.getTime();// 时间戳 全世界统一 1970 1.1 0：00：00 毫秒数
		console.log(new Date(1611280834474)); //时间戳转时间

转换

console.log(new Date(1611280834474));

VM176:1 Fri Jan 22 2021 10:00:34 GMT+0800 (中国标准时间)
undefined
now = new Date(1611280834474);
Fri Jan 22 2021 10:00:34 GMT+0800 (中国标准时间)
now.toLocaleString()
“2021/1/22 上午10:00:34”
5.2.JsoN
json是什么
早期，所有数据传输习惯使用XML文件！
JSON(JavaScriptObject Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript 一切皆为对象任何JS支持的类型都可以用JSON来表示
格式：
对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和JS对象的转化

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

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

Var obj = {a: ‘hello’, b: ‘hello’};
Var json = ‘{“a”: “hello”, “b”: “hello”}’;

5.3.Ajax
原生js写法 xhr异步请求
jQuey 封装好的方法 $(“#name”).ajax(“”)
axios请求
6.面向对象编程
原型对象
Java JavaScript c#… 面向对象 JavaScript有些区别
类 :模板原型对象
对象 :具体的实例
在JavaScript这个需要大家换一下思维方式！
原型:

var student = {
			name:"wangxin",
			age: 4,
			sexx:'男',
			run: function() {
				console.log(this.name + "run...");

			}
		};
		var xiaoming = {
			name:"xiaoming"
		};
		// 原型对象
		xiaoming.__proto__ = student;
		var Bird = {
			fly: function () {
				console.log(this.name + "fly...");
			}
		}
		// 小明的原型是student
		xiaoming.__proto__ = Bird;



// 给student新增一个方法
student.prototype.hello = function () {
alert('hello')
}

class继承
Class关键字是在ES6引入的
1.定义一个类，属性，方法

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

		}
		var xiaoming = new Student("xiaoming");
		var xiaohong = new Student("xiaoming");
 		xiaoming.hello()

2.继承

class Student{
			constructor(name){
				this.name = name;
			}
			hello(){
				alert('hello')
			}

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

本质:查看对象原型

原型链
proto__:

七.操作BOM对象(重点)
浏览器介绍
JavaScript 和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
B:浏览器对象模型
IE6~11
Chrome
Safari
Firefox
第三方浏览器
QQ浏览器
360浏览器
Window
Window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
732
window.innerWidth
746
window.outerHeight
680
window.outerWidth
1280
//内部高度 和外部高度

Navigator (不建议使用)
Navigator ,封装了浏览器的信息

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

大多数时候我们不会使用Navigator对象因为会被人为修改
不建议使用这些属性来判断和编写代码
Screen
代表屏幕的尺寸

screen.width
1280
screen.height
720

Location(重要)
Location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=90823477_hao_pg"
protocol: "https:"
reload: ƒ reload() //重新加载(刷新网页) 是一个方法 
//设置新的地址
location.assign('https://microsoftnews.msn.cn/')

Document(内容)
Document 代表当前的页面 HTML DOM文档树
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
""

劫持cookie原理
www.taobao.com

<script src=”aa.js”><script>

恶意人员，获取你的cookie上传到他的服务器
服务器端可以设置cookie：httpOnly
History：代表浏览器的历史记录 (不建议使用)
histort.back()//后退
history.forward()//前进
八.操作DOM对象(难点)
DOM:文档对象模型
核心
浏览器网页就是一个Dom树形结构！
更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作一个Dom节点就必须要先获的这个Dom节点
获得DOM节点

<div id="father">
	   <h1>标题1</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.firstChild
		//father.lastChild

	</script>

这是原生代码，之后我们尽量都是用jQuery();
更新节点
操作文本

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

操作css

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

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

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

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

//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>

注意删除多个节点的时候 children是在时刻变化的，删除节点的时候一定要注意
插入节点
我们获得了某个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="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.setAttribute('id','newP');
		newP.id = 'newP';
		newP.innerText = 'hello,world';
//创建一个标签节点(通过这个属性，可以设置任意的值)
		list.appendChild(newP);
		var myScript = document.createElement('script');
		myScript.setAttribute('type','text/javascript');

	</script>

InsertBefore

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

九.操作表单(验证)
表单是什么 form DOM树
文本框 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="women" id="girl"> 女

        </p>


	</form>
	<script>
		var input_text = document.getElementById('username');
		//得到用户框的值
		// input_text.value
		// 修改输入框的值
		// input_text.value = '123'
		var boy_radio = document.getElementById('boy');
		var girl_radio = document.getElementById('girl');



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

		 */
		


	</script>

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

<!-- 表单绑定提交事件 
         onsubmit=" aaa()"  绑定一个提交检测的函数 true false
         得到这个结果返回给表单，使用onsubmit接收
         onsubmit="return aaa()"
	-->
    <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
		<p>
			<span>用户名:</span><input type="text" id="username" name="username">
        </p>
        
        <p>
        	<span>密码:</span><input type="password" id="input-password">
        </p>
        <input type="hidden" id="md5-password" 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('md5-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>

十.jQuery
JavaScript
jQuery库 : 里面存在大量的javaScript函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
</head>
<body>
	<a href="" id="test-jQuery">点我</a>


	<script>
		//公式 $(selector).action()
		var id = document.getElementById('id');
		$('#test-jQuery').click(function () {
			alert('hello,world');
		})

	</script>
	
</body>
</html>

选择器

<script>
		// 原生js  选择器少麻烦不好记
		//标签
		document.getElementByTagName()
		//id
		document.getElementById()
		//类
		document.getElementByClassName()

		// jQuery
		$('p').click();//标签选择器
		$('#id1').click();//id选择器



	</script>

最好是查帮助文档 https://jquery.cuishifeng.cn/

事件

鼠标事件 mousedown() 鼠标按下 mousemove()鼠标移动
键盘事件

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

    </style>
</head>
<body>
	<!-- 要求：获取鼠标当前的一个坐标 -->
	mouse: <span id="mouseMove"></span>
	<div id="divMove">
		在这里移动鼠标试试
	</div>
	<script>
		// 当网页元素加载完毕之后响应事件
		$(function () {
			$('#divMove').mousemove(function (e) {
				$('#mouseMove').text('x:'+e.pageX + 'y'+e.pageY)
			})
		})

	</script>

</body>
</html>

操作DOM

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

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

$('test-ul li[name=python]').show()
$('test-ul li[name=python]').hide()

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：JavaScript Math的立方函数 js立方怎么写

下一篇：ACCESS怎么打开GIS文件 access数据怎么导入到arcgis

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

javascript中常用方法练习 javascript运用

javascript中常用方法练习 javascript运用

51CTO博客