JavaScript
1.什么是JavaScript
是全球最流行的脚本语言。
ECMAScript它可以理解为是JavaScript的一个标准最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持es5代码上!
2.快速入门
2.1引入方式
-
内部标签
-
外部引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <title>Title</title>--> <!-- <script>--> 内部标签 <!-- alert("hello,word!")--> <!--</script>--> <!-- 外部引入 script必须成对出现--> <script src="js.js"></script> </head> <body> <!--也能放这里--> </body> </html>
2.2基本语法
<script> // 定义变量 变量类型 变量名 =变量值； //严格区分大小写 //条件控制跟Java一样 //console.log();在浏览器的控制台打印变量 var num=1; alert(num); </script> </head> <body> </body> </html>
调试代码必备
2.3数据类型
-
number js中不区分小数和整数
-
字符串 "abc" 'abc'
-
布尔值 true false
-
逻辑运算 与 或 非
-
比较运算符 = 赋值 == 等于（类型不一样，值一样，也会判断为true） === 绝对等于类型一样值一样
注意
-
这是一个JS的缺陷，坚持不要使用==比较须知: ● NaN===NaN，这个与所有的数值都不相等，包括自 己
●只能通过isNaN(NaN)来判断这个数是否是NaN
-
浮点数问题: console.log((1/3) === (1-2/3)) 尽量避免使用浮点数进行运算，存在精度问题!
-
Math.abs(1/3-(1-2/3))<0.00000001 判断两个数是否相等
-
null和undefined null空 undefined未定义
-
数组 Java的数值必须是相同类型的对象~，JS中不需要这样!
var arr =[1,2,3,4,5, 'he11o' ,nu1l ,true]
取数组下标:如果越界了，就会 undefined
-
对象 对象是大括号，数组是中括号~~ ，每个属性之间使用逗号隔开，最后一个不需要添加
-
// Person person = new Person( 1,2,3,4,5);
var person = {
name:"落月",age: 3
tags: ['js ' ,'java ' , 'web" ,'... ']
}
2.4 严格检查模式
//前提是ideal，设置支持es6 //'use strict';严格检查模式，预防avascript的随意性导致产生的一些问题 //必须写在第一行 //局部变量建议都使用Let去定义~ "use strict"; let i=1;
3.数据类型
3.1 字符串
-
正常字符串我们使用单引号，或者双引号包裹
-
注意转义字符\
\ ' \n 换行 \t 空格 \u4e2d \u#### unicode字符 \x41 Ascll字符
3、多行字符串编写
//tab上面esc键下面 var msg = `he11o wor1d你好ya你好 javascript`
-
模板字符串
用美元符号实现拼接
let name = "luoyue"; let age = 3; let msg =`你好呀，${name}`
-
-
字符串长度
str.length
-
字符串的可变性
不可变
-
大小写转换
//是方法不是属性了 Console.log(studet.toUpperCase())//大写 toLowerCase//小写
-
studet.indeof(t);
获取下标
-
substring
[) student.substring(2)//从第二个字符开始截取到最后一个字符
3.2数组
-
Array可以包含任意的数据类型
var arr=[1,2,3,4,5];//通过下标取值和赋值 arr[1]; arr[3]=4;
-
长度
arr.length
注意:加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
-
indexOf，通过元素获得下标索引
arr.indexOf(2)
字符串的“1”和数字1是不同的
-
slice (),(方法)截取Array的一部分，返回一个新数组，类似于String中的substring
-
push()， pop()尾部
push:压入到尾部 pop:弹出尾部的一个元素
-
unshift() , shift()头部
unshift:压入到头部 shift:弹出头部的一个元素
-
排序sort();
["B"，"C"，"A"] arr.sort() ["A"，"B"，"C"]
-
元素反转 reverse（）
["B"，"C"，"A"] arr.reverse() ["A"，"B"，"C"]
-
拼接 concat（）
arr (3) ["d", "g", "a"] arr.concat(1) (4) ["d", "g", "a", 1] arr (5)["d", "g", "a"]
只是得到一个新数组不会改变原来的数组
-
连接符join
arr
(3) ["d", "g", "a"]
arr.join('-')
"d-g-a"
-
多位数组
var arr1=[[9,8],[7,6],['5','9']] console.log(arr1[1][1]) // 6 arr1[2][1] //"9"
数组:存储数据(如何存，如何取，方法都可以自己实现!
3.3对象
若干个键值对
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
//最后一个无需逗号
}
Js中对象，{....}表示一个对象，键值对描述属性xxXx: xXXx，多个属性之间使用逗号隔开，最后一个属性不加逗亏!。
JavaScript中的所有的键都是字符串，值是任意对象!
-
对象赋值
person. name = "落月" "落月" person.name "落月"
-
使用一个不存在的对象属性，不会报错! undefined
person. revice undefined
-
动态的删减属性，通过delete删除对象的属性
delete person. name true
-
动态的添加，直接给新的属性添加值即可
person.recive = "ha" "ha" person
-
判断属性值是否在这个对象中
//xxx in xxxx 'age' in person true //；继承 'toString' in person true
6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person. hasOwnProperty( 'tostring')
false
person.hasOwnProperty('age ')
true
3.4 流程控制
-
if判断
-
while循环
-
for循环
-
forEach循环
var num=[1,2,3,4,5,6,22,343,42,12];
num.forEach(function (value){
console.log(value);
//注意forEach写法 还有value的写法
})
-
for in 循环
var age=[1,2,3,4,5,6,22,343,42,12];
for (var num in age ){
if(age.hasOwnProperty(num)){
console.log("存在");
}
console.log(age[num]);
}
3.5 Map和Set
Es6型特性
-
Map
Map是一组键值对的结构，具有极快的查找速度。假设要根据同学的名字查找对应的成绩，如果用
Array实现，需要两个Array;给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。
//ES6 Map
//学生的成绩，学生的名字
// var names = "tom", "jack", "haha"";/
// /var scores = [100, 90,80];
var map = new Map([['tom' ,100], ['jack' ,90], ['haha' ,80]]);
var name = map.get('tom');
//通过key获得value
map.set( 'admin' ,123456);//新增或修改
map.delete("jack");//删除
console.log(name);
console.log(map);
-
Set
无序不重复的集合
var set=new Set([1,32,4,1,2,2,2,2,2]);
console.log(set);
set.delete(32);
set.add(45);//添加
console.log(set.has(1));//判断是否有某个值
3.6 iterator
-
打印数组
var arr=[4,5,2,1,435,45,];
for( var num of arr ){
console.log(num);
}//for of 值
//for in 下标
-
遍历Map
var map = new Map([['tom' ,100], ['jack' ,90], ['haha' ,80]]);
for( let num of map ){
console.log(num);
}
3.遍历Set
var set=new Set([1,32,4,1,2,2,2,2,2]);
for( let num of set ){
console.log(num);
}
4.函数
4.1创建函数
函数和方法是一样的只是位置不同
方式一
function a (x,y){
return x+y;
}
一旦执行到return代表函数结束，返回结果! 如果没有执行return，函数执行完也会返回结果，结果就是undefined
方式二
var abc =function (x,y){
return x+y;
}
function(x){ .....}这是一个匿名函数
参数问题
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)i
console.log( "x=>"+x);
for (var i = o; i<arguments.length;i++)
console. 1og(arguments[i]);
}
if(x>=0){
return x;
}else{
return -X;
}
}
问题: arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前
if (arguments.length>2){
for (var i = 2;i<arguments.1ength;i++){
//。。。。
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~...
function aaa(a,b, . . .rest) {
console. 1og("a=>"+a);
console.1og ("b=> "+b);
console.1og(rest);
}
rest参数只能写在最后面，必须用...标识。
变量的作用域
-
在javascript中,var定义变量实际是有作用域的。 假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，闭包）
function a(x){
var x=1;
x=x+1;
}
x=x+2;//undifined
-
内部函数能访问外部函数，反之则不能
function a(x){
var x=1;
x=x+1;
//内部函数能访问外部函数，反之则不能
function b(y){
y=x+1;
}
}
z=x+2;
-
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function a(x){
var x=1;
x=x+1;
//内部函数能访问外部函数，反之则不能
function b(y){
y=x+1;
}
}
function c(x){
var x=1;
x=x+1;
}
-
内部函数变量和外部函数的变量，重名!
function a(x){
var x=1;
//内部函数能访问外部函数，反之则不能
function b(x){
var x='a';
console.log("inner"+x);//outer1
}
console.log("outer"+x);//innera
b();
}
a();
假设在JavaScript中函数查找变量从自身函数开始~，由"内"向“外"查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量.
-
提升变量作用域
function c(x){
var x='x'+y;
console.log(x);
var y='y';
}
结果: xundefined 说明;js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值'; 这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部，不要乱放，便于代码维护;
-
全局函数
//全局变量
var x=2;
function a(x){
console.log(x);
}
a(x);
console.log(x);
-
全局对象 window
var x = 'xxx '; alert(x); alert(window.x);// 默认所有的全局变量，都会自动绑定在 window对象下 //;alert()这个函数本身也是一个window变量;
Javascript 实际上只有一个全局作用域，任何变量（函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
-
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突?
//唯一全局变量
var luoApp={};
//定义全局变量
luoApp.name="luoyue";
luoApp.add=function (a,b) {
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~jQuery库
-
局部作用域let
function aaa(){
for (var i = 0; i <100;i++) {
console.1og(i)
}
console. log(i+1);//问题?i出了这个作用域还可以使用 会输出101
}
ES6 let关键字，解决局部作用域冲突问题!
function aaa(){
for (let i = 0; i <100;i++) {
console.1og(i)
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
-
常量const
在ES6之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值
var PI=: '3.14 '; console.1og (PI); PI = '213';//可以改变这个值console.1og (PI);
在ES6引入了常量关键字const
const PI = '3.14';//只读变量 console.1og(PI); PI = '123';// TypeError: Assignment to constant variable.4console.1og (PI);
4.3 方法
1.定义方法
方法就是把函数放在对象的里面，对象只有两个东西:属性和方法
var luoyue = {
name : '落月'，
bitrh:1999,
//方法
age:function(){
//今年-出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
}
//属性
luoyue.name;
//方法调用
luoyue.age();
}
第二种方法
function getAge(){
//今年-出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
var luoyue = {
name : '落月'，
bitrh:1999,
age:getAge,
//方法
}
//属性
luoyue.name;
//方法调用
luoyue.age();
}
this是无法指向的，是默认指向调用它的那个对象;
-
apply
在js中能控制this指向！
getAge.apply(xiaoming,[]);// this，指向了 luoyue，参数为空
5 .内部对象
5.1 标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof[]
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.2 Date
基本使用
var now = new Date();//Tue Dec 28 2021 17:44:30 GMT+0800 (中国标准时间) now.getMonth();//月0~11 代表月 now.getDate();//日 now.getDay();//星期几 now.getHours();//时 now.getMinutes();//分 now. getseconds();//秒 now.getTime();//时间戳全世界统一1970 1.1 0:00:00毫秒数 1640684670058 console.log(new Date(1640684670058))//时间戳转为时间
转换
now = new Date(1640684670058)
Tue Dec 28 2021 17:44:30 GMT+0800 (中国标准时间)
now.toLocalestring // 注意，调用是一个方式，不是一个属性!
f toLocalestring {[native code] }
now.toLocalestring
"2020/1/4上午10:49:35"
now. toGMTStringO
"sat,04 Jan 2020 02:49:35GMT"
5.3 JSON
-
JSON是什么
-
早期，所有数据传输习惯使用XML文件!
-
JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
-
在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;
格式:
-
对象都用{}
-
数组都用[]
-
所有的键值对都是用key:value
json字符串和对象的转换
var person={
name:"luoyue",
age:21,
sex:'男'
}
//对象转化为json字符串
var jsonPerson=JSON.stringify(person);
//json字符串转化为对象
var res= JSON.parse('{"name":"luoyue","age":21,"sex":"男"}');
区别在于所有的键值对有无引号
var obj = {a: 'he1lo',b: 'he11ob '};
var json = '{"a": "he11o", "b" : "he11ob"}'
5.4 Ajax
6. 面向对象编程
6.1什么是面向对象编程
javascript、Java、c#。。。。面向对象;javascript有些区别!·
-
类:模板
-
对象:具体的实例 在JavaScript这个需要大家换一下思维方式!
-
类：原型对象
6.3原型继承（原型对象）
一个对象能使用另一个对象的属性和方法，自己有的属性和方法则不会变，一个对象继承另一个对象
var student={
name:"luoyue",
age:21,
run:function(){
console.log(this.name+".......run")
}
}
var zhangsan={
name:"zhangsan",
}
//原型继承
zhangsan.__proto__=student;
var bird={
name:"xiao",
fly:function (){
console.log(this.name+"............fly ");
}
}
// zhangsan.__proto__=bird;
6.4class继承
class关键字是在ES6引入的
-
定义一个类，类包括属性和方法。
//定义一个学生类 class Student { constructor(name) { this.name=name; } red(){ alert('我正在阅读'); } } //使用这个类 var xiaoming =new Student(xiaoming); -
继承
//定义一个学生类 class Student { constructor(name) { this.name=name; } red(){ alert('我正在阅读'); } } //使用这个类 var xiaoming =new Student(xiaoming); //继承 class Height extends Student{ constructor(name,grades){ super(name); this.grades=grades; } run(){ alert("跑起来"); } } var zhuzhu=new Height(zhuzhu,100);
本质还是原型
6.5原型链
原型：所有的函数都有一个特殊的属性prototype(原型)，prototype属性是一个指针，指向的是一个对象(原型对象)，原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象，这些对象实例都可以共享构造函数的原型的方法。
原型链：原型链是用于查找引用类型（对象）的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中。
6.6 闭包
概念：闭包就是能够读取其他函数内部变量的函数**。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
例子：函数b就是一个闭包函数，用于获取函数a内部的变量i。当函数a的内部函数b，被函数a外的一个变量c引用的时候，就创建了一个闭包。
作用：闭包可以用在许多地方。它的最大用处有两个
-
可以读取函数内部的变量
-
让这些变量的值始终保持在内
注意事项：
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
6.7 作用域链
作用域链的作用主要用于查找标识符，当作用域需要查询变量的时候会沿着作用域链依次查找，如果找到标识符就会停止搜索，否则将会沿着作用域链依次向后查找，直到作用域链的结尾。 原型链是用于查找引用类型的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。
内部环境可以通过作用域链来访问外部环境的属性和方法，但是，外部环境不能访问内部环境的任何属性和方法。注意，只能通过定义函数来延长作用域链条。
7. 操作BOM对象
-
BOM：浏览器对象模型
-
JavaScript和浏览器关系? JavaScript诞生就是为了能够让他在浏览器中运行!
7.1 window
window代表浏览器窗口
window.alert()//弹窗 window.innerHeight//内高 window.innerwidth//内宽 window.outerHeight//外高 window.outerwidth//外宽
7.2 Navigator
封装了浏览器的信息
navigator.appName "Netscape" navigator.appVersion "5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Mobile Safari/537.36" navigator.platform "Win32"
大多数时候，我们不会使用navigator对象，因为会被人人为修改
7.3 screen
代表屏幕
screen.width screen.height
7.4 location
location代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protoco1 : "https:"
reload:f reload()//刷新网页
//设置新的地址
location. assign('https://www.sougou.com/')
7.5 Document
document代表当前的页面
document.title document.title='hh'//修改页面标题
获取具体的文档树节点，然后可以进行增删查改节点，就能动态的修改网页
<dl id="app">
<dt>Java</dt>
<dd>JavasE</dd>
<dd>avaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie; " guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"
劫持cookie 原理 服务器端可以设置cookie: httpOnly
7.6 history
浏览器的历史纪录
history.back//返回 浏览器 history.forword//前进
可以用来登录跳转到首页（不建议）
8.操作Dom对象
浏览器网页就是一个Dom树形结构!操作树形结构就能增删查改网页内容
-
更新:更新Dom节点
-
遍历dom节点:得到Dom节点
-
删除:删除一个Dom节点
-
添加:添加一个新的节点
8.1获取节点
1.要操作一个Dom节点，就必须要先获得这个Dom节点
var b= document.getElementById('b');//获取id节点
var h1= document.getElementsByTagName('h1');//获取标签节点
var a= document.getElementsByClassName('a');//获取class节点
var father=document.getElementById('father');
//获取父节点下的所有子节点
var childrens=father.children;
//father.firstchild
//father.lastchild
8.2 更新节点
操作文本 只对没有内容的起作用
b.innerText='hhhhhh'//修改文本的值 b.innerHTML='<strong>123</strong>'//可以解析HTML文本标签
操作js
b.style.color='red' "red" b.style.fontSize='20px' "20px" b.style.padding='20px' "20px"//浏览器中操作
8.3 删除节点
先找到父节点然后通过父节点删除子节点
father.removeChild(b) <div id="b">luoyue sb</div> //这种删除是动态删除过程，要注意下标 father.removechild(father.chidren[o]) father.removechild(father.children[1]) father.removechild(father.children[2])
注意:删除多个节点的时候,children是在时刻变化的，删除节点的时候一定要注意!
8.4 插入节点
-
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖
-
追加
<p id="js">]avascript</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. getE1ementById('list'); list.appendChild(js);//将id=js追加到后面 </script>3.创建一个新标签插入
<p id="a">shasha</p>
<div id="b">
<p id="c">cccc</p>
<p id="d">dddd</p>
<p id="e">eeee</p>
</div>
<script>
var f = document.getElementById('b');
f.appendChild(a);
//创建一个新节点
var newp =document.createElement('p');//创建一个p标签
newp.id='newp';
newp.innerText='你是猪';
f.appendChild(newp);
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript')//<script type="text/javascript"></script>
-
insert
var ee = document.getElementById('ee');
var js = document.getElementById('js') ;
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
9.操作表单（验证）
9.1表单是什么
form Dom树
文本框：text
下拉框：<select >
单选框 : radio
多选框: checkbox
隐藏域: hidden
密码框: password 表单的目的：提交信息
获取修改值
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="post">
<p>
<span>用户名</span><input type="text" id="username"/>
</p>
<span>性别</span><input type="radio" name="sex" id="boy" value="man">男</input>
<input type="radio" name="sex" id="girl" value="woman">女</input>
</p>
</form>
<script>
var input_text =document.getElementById('username');
var man=document.getElementById('boy');
var woman=document.getElementById('girl');
input_text.value //得到输入框的值
//修改输入框的值
input_text.value='231';
//对于单选框,多选框等等固定的值，man.value只能取到当前的值
man.checked;//查看返回的结果，是否为true，如果为true，则被选中
man.checked='true';
</script>
9.2 提交表单和md5加密
<body>
<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true,false将这个结果返回给表单，使用onsubmit接收-->
<form action="https://www.baidu.com/" method="post" οnsubmit="return aa()">
<p>
<span>用户名</span><input type="text" id="username" name="username"/>
</p>
<span>密 码</span><input type="password" id="password" name="password"/>
</p>
<p>
<!-- <input type="submit" id="a" οnclick="aa()" >-->
<!--绑定事件onclick被点击-->
<button type="submit" id="b" >提交</button>
</p>
</form>
<script>
function aa() {
alert(1);
var uname =document.getElementById('username');
var pwd =document.getElementById('password');
pwd.value=md5(pwd.value);//md5加密使密码看不到
console.log(uname.value);
console.log(pwd.value);
//可以校验判断表单内容true通过提交false通过不了
return true;
}
<form action="post">
<p>
<span>用户名</span><input type="text" id="username" name="username"/>
</p>
<span>密 码</span><input type="password" id="inputpassword" />
</p>
<p>
<input type="hidden" id="md5password" name="password" >
</p>
<p>
<!-- <input type="submit" id="a" οnclick="aa()" >-->
<!--绑定事件onclick被点击-->
<button type="button" id="b" οnclick="aa()">提交</button>
</p>
</form>
<script>
function aa() {
var uname =document.getElementById('username');
var pwd =document.getElementById('inputpassword');
var md5pwd =document.getElementById('md5password');
md5pwd.value=md5(pwd.value);//md5加密使密码看不到
pwd.value= md5(pwd.value)
console.log(uname.value);
console.log(pwd.value);
}
</script>
10.jQuery
jQuery库，里面存在大量的Javascript函数
10.1获取jQuery
-
下载然后放到项目中
-
通过cdn引入
10.2公式
//jQuery使用公式
$('#a').click(function () {
alert(1);
})
$('选择器').
10.3选择器
//原生js，选择器少，麻烦不好记
document. getElementsByTagName();//标签
document. getElementById();//id
document.getElementsByc1assName();//类
//jQuery css 中的选择器它全部都能用!
$('p').c7ick();//标签选择器
$( '#id1').click();//id选择器
$('.c1ass1').click(); //class选择器
文档工具站: jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
10.4 事件
鼠标事件、键盘事件、其他事件
鼠标坐标<span id="mouse"></span>
<div id="a">请移动</div>
</body>
<script>
$(function () {
$('#a').mousemove(function (e){
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
10.5 操作DOM
-
节点文本操作
$('#test-ul li[name=python]').text();//获得值
$('#test-u1 li[name=python]').text('设置值');
$('#test-u1 ').htm1();//获得值
$('#test-u1 ').htm1('<strong>hewgfw</strong>');//设置值
-
css的操作
$('#test-ul li [name=python]').css({"color" , "red"}) 3.元素的显示和隐藏:本质display : none $('#test-u1 li[name=python] ') .show() $('#test-u1 li[name=python] ').hide()
element-ui
bootstrap
Ant-Design
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
