JavaScript(基础)
1、什么是JavaScript
1、1概要
JavaScript是一门世界上最流行的脚本语言
10天设计出来的
一个后端人员,必须警惕JavaScript。
1、2历史
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分游览器还是停留在支持es5代码之上
开发环境—线上环境,版本不一致
2、快速入门
2、1引入script项目
1、内部引入
<script>//....</script>
2、外部引入
abc
alert("我是弹窗")
<script src="abc.js"></script>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- script内部写法--><!-- <script>alert("我是一个弹窗");</script>--><!--外部引入--><script src="js/js1.js"></script><!-- 注意:script必须成对出现--><!--定义script时不要写type,因为默认就是JavaScript--><script type="text/javascript "></script></head><body><!--也可以吧script写到这里--></body></html>
2、2基本语法
1、定义变量: 变量类型 变量名 = 变量值;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//1、定义变量 变量类型 变量名 = 变量值var score = 1;//2、条件控制if(score>60&&score<=70){}else if(score>70&&score<=80){}else if(score>70&&score<=80){}else {alert(score);}/*3、多行注释* 4、严格区分大小写* */</script>
</head>
<body>
</body>
</html>
代码调试区:
2、3数据类型
数值、文本、图形、音频、视频。。。
变量
var a = 1;
var 王者荣耀 = “青铜”
number
- js不区分小数和整数
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
字符串
'abc' "abc"
布尔值
true flase
逻辑运算符
&& 两个都为真时取真
|| 两个都为假时取假
! 真即假,假即真
比较运算符
= 赋值
== 等于(类型不一样,值一样为true)
=== 绝对等于(类型一样,值一样为true)
这是一个js的缺陷,坚持不要用==比较
须知:
N-AN,这个与所有数值都不相等,包括它自己。
只能通过isNaN(NaN)来判断这个数是否等于NaN
浮点数问题:
console.log((1/3)===(1-2/3))
尽量避免使用浮点数
Math.abs(1/3-(1-2/3))<0.0000001
null 为空
undefined 没有定义
数组
java的数据类型必须想让,js可以是任意的类型。
var arr=[1,2,3,4,5,'hello',true,null]
new array(1,12,3,45,true)
取数组下标,如果越界了,就会undefined
对象
对象是大括号,数组是中括号
每一个属性之间使用逗号隔开,最后一个不需要逗号
//Person person = new Person();var person ={name: "冰凝",age: 12,id: "girl"}
取对象的值
2、4严格检查模式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//前提:idea需要设置支持ES6语法/* ’use strict‘; 严格检查模式,预防JavaScript随意性导致产生的问题必须放在第一行。局部变量建议都是要let去定义* */'use strict';let i = 1;</script>
</head>
<body></body>
</html>
3、数据类型
3、1字符串
1、正常字符串我们使用单引号,或者双引号。
2、注意转义字符\
\`
\n
\t
\u4e2d unicode编码
\x41 Ascll字符
3、多行字符串编码 用``包裹(pao)
var person = `你是一个大笨蛋`
4、模板字符串
var name = '冰凝';
var stu = `你好呀, ${name}`
5、字符串长度
str.length
6、字符串的可变性:不可变
7、大小写转换。
student.toUpperCase() //大写
student.toLowerCase() //小写
8、获取字符串的下标
student.indexOf('t')
9、substring
[ )
student.substring(1) //从第一个字符开始一直到最后一个,
student.substring(1,3) //从第一个到第三个,包含第一个,不包含第三个
3、2数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6]
1、长度
arr.length()
6
注意:给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失。
arr.length=8
8
arr.sort()
(8) [1, 2, 3, 4, 5, 6, empty × 2]
arr.sort()
(3) [1, 2, 3]
2、indexOf通过元素获得下标索引
arr.sort()
(3) [1, 2, 3]
arr.indexOf(1)
0
arr.indexOf("1")
-1
//字符串的“1”和数字的1是不一样的
3、slice截取Array的一部分,返回一个新的数组,类似于string中的substring
- 截取的数组是一个新的数组,但不改变原数组的值。
arr.slice(1) //截取的是第一个到最后一个
(5) [2, 3, empty × 3]
arr.sort()
(6) [1, 2, 3, empty × 3]
4、push、pop尾部
- 这两个方法会改变原数组
arr.push(1) //压入尾部
7
arr.join()
"1,2,3,,,,1"
arr.pop() //弹出尾部的一个元素
1
arr.join()
"1,2,3,,,"
5、unshift、shift头部
- 这两个方法会改变原数组
arr.unshift(9) //压入头部
7
arr.join()
"9,1,2,3,,,"
arr.shift() //弹出一个头部的元素
9
arr.join()
"1,2,3,,,"
6、sort()排序
var a=['a','c','b']
a.sort()
(3) ["a", "b", "c"]
7、reverse()元素反转
a.sort()
(3) ["a", "b", "c"]
a.reverse()
(3) ["c", "b", "a"]
8、concat()拼接
- 返回一个新的数组,但不改变原数组
a.concat(['e','g','g'])
(6) ["c", "b", "a", "e", "g", "g"]
a.sort()
(3) ["a", "b", "c"]
9、join()连接符
- 打印拼接数组,使用特定的字符串连接。
a.sort()
(3) ["a", "b", "c"]
a.join("-")
"a-b-c"
10、多维数组
var arr1=[[1,2],[2,3],[3,4]]
arr1.join()
"1,2,2,3,3,4"
arr[1][1]
3、3对象
若干个键位时
var 对象名 = {属性名:属性值, …}
JS中对象{…}表示已给对象,键值对描述属性:xx:xx,多个属性之间用逗号隔开,最后一个属性不用逗号。
- JavaScript中的所有键都是字符串,值是任意对象。
var 对象名={属性名,属性值;属性名,属性值;属性名,属性值;属性名,属性值;}var person={name:"bingning",age:13,id:"girl",score:65,}
1、对象赋值
var person={name:"bingning",age:13,id:"girl",score:65,}
undefined
person.name="wuhan"
"wuhan"
person
{name: "wuhan", age: 13, id: "girl", score: 65}
2、使用一个不存在的属性,不会报错!undefined
person.wo
undefined
3、动态的删除属性,通过delete删除对象的属性。
delete person.age
true
person
{name: "wuhan", id: "girl", score: 65}
4、动态的增加属性,直接给新的属性添加即可。
person.ha="decation"
"decation"
person
{name: "wuhan", id: "girl", score: 65, ha: "decation"}
5、判断属性是否在这个对象中!xxx in xxx
"name"in person
true
"toString" in person
true
6、hasOwnProperty()判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty("toString")
false
person.hasOwnProperty("name")
true
3、4流程控制
if判断
var age=15;if(age>3){alert("hhh")
}else if(age>10){alert("woda")
}else{alert("wan")}
while循环:避免死循环
while(age<100){age++;alert(age);
}
**do…while循环
do{age++;alert(age);
}while(age<100)
for循环
for (let i = 0; i < 10; i++) {alert(i);
}
forEach循环(函数)
var arr=[12,32,45,465,76,87,34,5,3];
arr.forEach(function (value) {console.log(value);
})
for…in循环(索引)
for (let arrKey in arr) {console.log(arr[arrKey])
}
3、5Map和Set
Es6新特性
Map
var map=new Map([["name","bingn"],["age",16],["id","boy"]]);
var name = map.get("name"); //通过key获取value
map.set("wan","hao"); //通过value增加值,如果第一个属性一样,就是修改值了
map.delete("name"); //删除
Set
无序不重复的集合,所以set可以去重
var set=new Set([1,23,4,1,1]);
set.add(5); //增加值
set.delete(1); //删除值
console.log(set.has(5)); //判断Set里面是否拥有该value
3、6Iterator
Es6新特性
遍历数组
var arr1=[1,23,4,5,6];
for (let i in arr1) {console.log(i);
}
遍历Map
var map=new Map([["name","bingn"],["age",16],["id","boy"]]);
for (let x of map) {console.log(x);
}
遍历Set
var set=new Set([1,23,4,1,1]);
for (let x of map) {console.log(x);
}
4、函数
4、1定义函数
第一种方式
function abs(x){if(x>=0){return x;}else if(x<0){return -x;}
}
一旦执行到return代表函数结束,返回结果。如果没有执行到return,函数执行也会结束,就是undefined。
第二种定义方式
var abs1=function(x){if(x>=0){return x;}else if(x<0){return -x;}
}
这是一个匿名函数,但是可以把结果赋值给abs1,通过abs1就可以调用函数
参数问题,JavaScript可以传递任意参数,也可以不传递参数,参数进来是否有问题?
假设有问题,我们应该抛出异常去规避
var abs1=function(x){//手动抛出异常if(typeof x!=='number'){throw 'this is not number';}if(x>=0){return x;}else if(x<0){return -x;}
}
arguments
是一个JavaScript免费赠送的关键字。
代表传递进来的所有的参数,是一个数组
function abs3(x){console.log(x);for (let i = 0; i < arguments.length; i++) {console.log(arguments[i]);}
}
问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有的参数。
rest
以前
if(arguments.length>2){for (let i = 2; i <arguments.length; i++) {console.log(arguments[i]);}
}
现在
Es6引入新的特性,获取除了已经定义的参数外的所有参数。
function abs4(a,b,...rest){console.log("a->"+a);console.log("b->"+b);console.log(rest);
}
rest参数只能放在最后面,必须用…标识。
4、2变量的作用域
在JavaScript中,var定义变量实际上是有作用域的
var score=1; //这个是有作用域的
假设在函数体中申明,则在函数外不可以使用(非要想实现的话,后面可以研究一下闭包)
console.log(a); //Uncaught ReferenceError: a is not defined
function abs(x){var a=1;
}
内部函数可以访问外部函数的成员,外部不能。
var score=300;
console.log(a); //Uncaught ReferenceError: a is not defined
function abs(x){var a=1;a=a+score;console.log(a)
}
两个函数定义相同的变量,是没有问题的。
function abs(x){var a=1;
}
function abs1(x){var a=1;
}
函数外部与函数内部重名
var a=3;
function abs(x){var a=1;console.log(a);
}
在JavaScript中函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量
提升变量的作用域
var x = 'x'+y; //undefined
console.log(x);
var y='y';
结果:undefined
说明:JavaScript执行引擎,自动提升了y的申明,但是不会给提升了的y赋值。
var y; //undefinedvar x = 'x'+y; console.log(x);y='y';
这个是在JavaScript建立之初就有的特性。养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码的维护。
var x=1,
y =x+1,
u,z,i; //undefined
全局函数
var a =10;
abs(10);
function abs(x){console.log(x);
}
abs(a);
console.log(a);
全局对象window
var a =10;
console.log(a);
console.log(window.a); //默认所有的全局变量,都会自己绑定在window下
alert函数也是window下的一个变量
var a = 10;
window.alert(10);var A_alert=window.alert;
A_alert(a);
//失效
window.alert=function (){}
//发现alert失效了
window.alert(10);
//重新有效
window.alert=A_alert;
window.alert('ad');
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果全局作用域都没有找到,就会报错RefrenceError
规范:
由于我们所有的全部变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,冲突–>如何能够减少冲突
//唯一全局变量
var kuang={};
//定义全局变量
kuang.name='bingning';
kuang.add=function (a, b) {return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,减低全局命名的冲入问题。
局部作用域let
function abs(x){for (var i = 0; i < 100; i++) {console.log(i);}console.log(i++);
}
ES6 let
关键字,解决了局部作用域的问题。
function abs(x){for (let i = 0; i < 100; i++) {console.log(i);}console.log(i++); //Uncaught ReferenceError: i is not defined
}
建议大家都使用let去定义局部作用域的变量
常量const
在SE6之前怎么定义常量:只有用大写字母命名的变量就是常量,建议不要修改
var MAX=19;
MAX=19; //可以改变这个值
console.log(MAX);
SE6引入了常量关键字:const
const MAX = 19;
MAX = 10; //Uncaught TypeError: Assignment to constant variable.
4、3方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:方法和属性
var bingNing={name: "冰凝",birth: 2000,age: function (){var now=new Date().getFullYear();return (now-this.birth);}
}
bingNing.name
bingNing.age()
this代表什么?上面的拆开看看
function age1() {var now=new Date().getFullYear();return (now-this.birth);
}
var bingNing={name: "冰凝",birth: 2000,age: age1
}
bingNing.age()
bingNing.name
this是无法指向的,默认指向被调用的对象。
apply
可以控制this指向的方向
function getage() {var now=new Date().getFullYear();return (now-this.birth);
}
var bingNing={name: "冰凝",birth: 2000,age: getage
}
getage.apply(bingNing,[]); //默认指向bingNing , []代表参数为空
5、内部对象
标准对象
typeof 123
"number"
typeof 'naem'
"string"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof true
"boolean"
typeof Math.abs
"function"
5、1Date()
基本使用
var now = new Date(); //Tue Mar 23 2021 19:53:14 GMT+0800 (中国标准时间)now.getFullYear(); //获取年now.getMonth(); //获取月 0-11now.getDate(); //获取日now.getDay(); //星期几now.getHours(); //获取小时now.getMinutes(); //获取分now.getSeconds(); //获取秒now.getTime(); //获取时间戳 全世界同意console.log(new Date(1616500577024)); //时间戳转化为时间
转换
now = new Date(1616500577024)
Tue Mar 23 2021 19:56:17 GMT+0800 (中国标准时间)
now.toLocaleString //注意:调用的是一个方式,不是属性
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/3/23 下午7:56:17"
now.toGMTString()
"Tue, 23 Mar 2021 11:56:17 GMT"
5、2JSON
JSON是什么
早期,所有数据传输习惯使用XML文件!
JSON是一种轻量级的数据交换格式
简介和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写,同时也易机器解析和生产,并有效的提升网络传输的效率
在JavaScript一切皆为对象,任何js
支持的类型都可以用JSON
来表示:
格式:
- 对象都用 {}
- 数组都用 []
- 所有的键值对都用: key:value
JSON字符串和JS对象的转化
var date={name:"bingning",age:13,sex:"boy"}//对象转化为JSON字符串 {"name":"bingning","age":13,"sex":"boy"}var strJSON=JSON.stringify(date);//JSON转化为对象var nwJSON=JSON.parse('{"name":"bingning","age":13,"sex":"boy"}')
JSON与JS对象的区别
var date={name:"bingning",age:13,sex:"boy"};
var json='{"name":"bingning","age":13,"sex":"boy"}';
5、3Ajax (以后在填充这块内容)
- 原本的js写法,xhr异步请求
- jQuey封装好的方法 $("#name").ajax(“”)
- axios请求
6、面向对象编程
6、1什么是面向对象
原型对象
JavaScript、java、c#…向对象,JavaScript有些区别
- 类:模板
- 对象:具体的实例
在JavaScript中需要换中思维方式
原型
var kuang={name:'bingning',age:14,sex:'girl',kuan:function () {console.log("name" + this.name);}};var wName={name:'daming'};wName._Proto_=kuang; //原型,相当于指向父类var Bird={fly:function (){console.log("name is fly");}};wName._Proto_=Bird; //原型,转换指向的对象
class继承
之前
function Student(name) {this.name=name;
}
//给student新增方法。
Student.prototype.hello=function () {alert("hello");
}
class
·关键字,是在SE6中引入的
1、定义一个类:属性,方法
class Student1{constructor(name) {this.name=name;}hello1(){alert("fddf");}
}
var xiaoHong=new Student1("xiaohong");
xiaoHong.hello1();
2、继承
本质,查看对象原型
class Student1{constructor(name) {this.name=name;}hello1(){alert("fddf");}
}
class XiaoStudent extends Student1{ //继承了Student1constructor(name,myGrade) {super(name); this.myGrade=myGrade;}myGride1(){alert(this.myGrade);}
}
var xiaoHong=new Student1("xiaohong");
var xiaoQinag=new XiaoStudent("xiaoqinag",10);
xiaoHong.hello1();
xiaoQinag.myGrade1();
原型链
7、操作BOM对象
游览器介绍
JavaScript和游览器的关系
JavaScript诞生就是为了能够让他在游览器中运行。
BOM:游览器对象模型:
- IE;9-11
- Chrome
- Safari
- FireFox
三方:
- QQ游览器
- 360游览器
window
window代表游览器的窗口
window.outerHeight
680
window.innerHeight
309
window.innerWidth
1280
window.outerWidth
1280
window.Infinity
Infinity
window.AnimationEvent
ƒ AnimationEvent() { [native code] }
Navigator(不建议使用)
Navigator,封装了游览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"
navigator.platform
"Win32"
大多数时候,我们不会使用navigator
对象,因为会会被人为修改
screen
代表屏幕尺寸
screen.width
1280
screen.height
720
location
代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:
//设置新的地址
location.assign("https://www.2345.com/?30308")
doucument
当前页面, HTML、DOM文档树
document.title
"百度一下,你就知道"
document.title="bingnn"
"bingnn"
获取具体的文档树节点。
<dl id="first"><dt>java</dt><dd>javase</dd><dd>javaee</dd>
</dl>
<script>var sum=document.getElementById("first");
</script>
获取Cookic
document.cookie
"BAIDUID_BFESS=BCEFD4B4CF746B2321446F4CF68C4574:FG=1; BAIDUID=BCEFD4B4CF746B23EE7FED4141F7BD4A:FG=1; BIDUPSID=BCEFD4B4CF746B23EE7FED4141F7BD4A; PSTM=1615857737; BD_UPN=12314753; COOKIE_SESSION=3_1_2_3_0_2_0_0_1_1_4_1_0_0_0_2_0_1615857990_1615857988%7C3%230_1_1615857988%7C1; BD_HOME=1; H_PS_PSSID=33241_33750_33273_31253_33676_33392_33713_26350_22160; BA_HECTOR=05agah2k01042184901g5lo7r0r"
劫持cookie原理
www.taobao.com
<script src="java.js"></script>
//恶意人员,获取你的cookie上传到他的服务器上
服务端可以设置cookic:httpOnly
history
代表游览器的访问记录
history.back() //后退
history.forward() //前进
8、操作DOM对象
核心
游览器网页就是一个DOM树形结构
- 更新:更新DOM节点
- 遍历:得到DOM节点
- 删除:删除DOM节点
- 添加:添加DOM节点
要操作这个节点,就必须获得这个节点·
var s1 = document.getElementsByTagName('h1');
var s2 = document.getElementById('father');
var s3=document.getElementsByClassName('first');
//获取父节点下的所有子节点
var childer = s2.children;
这是原生代码,之后我们都是使用JQuery
更新节点
<div class="first"></div><script>var s1=document.getElementsByClassName("first");
</script>
操作文本
s1.innerText='test' //修改文本的值
s1.innerHTML='<strong>first</strong>'
操作CSS
s1.style.color='yellow'; //属性使用,字符串 包裹
s1.style.fontSize='23px'; //转为驼峰命名
s1.style.padding='100px';
删除节点
步骤:先获取父节点,在通过父节点删除子节点,删除是一个动态的节点。
<div class="first"><h1 class="lay">主标题</h1><p class="p1">附表福</p><p class="p2">附表福</p>
</div><script>var lay = document.getElementsByClassName('p1');var father = lay.parentElement;father.removeChild(lay);//删除是一个动态的过程father.removeChild(father.children[0]);father.removeChild(father.children[1]);father.removeChild(father.children[2]);
</script>
注意:删除多个节点的时候,children是时候变化的,删除节点的时候一定要注意
插入节点
我们获得了某个DOM节点,假设这个节点是空的,我们通过innerHTML就可以添加元素了,但是这个DOM节点已经存在,我们就不能这么干,会产生覆盖
追加:
<p id="js">javascript</p>
<div id="first"><p class="ee">javaee</p><p class="se">javase</p><p class="me">javame</p>
</div>
<script>var js1=document.getElementById("js");var first1=document.getElementById("first");
</script>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DScQgpxZ-1616683201341)(C:\Users\15531\AppData\Roaming\Typora\typora-user-images\image-20210324225929897.png)]
创建一个新的标签
<script>var js1=document.getElementById("js"); //已经存在的节点var first1=document.getElementById("first");//创建一个新的节点var few=document.createElement('p');few.id='few'; //设置idfew.innerText='继续加油'; //设置文本few.style.color='#85FFBD';//创建一个标签节点var myScript=document.createElement('script');myScript.setAttribute('type','text/script');//创建一个style标签节点。var myStyle=document.createElement('style'); myStyle.setAttribute('type','text/css'); myStyle.innerHTML='body{background:#85FFBD}'; //设置css样式document.getElementsByTagName('head')[0].appendChild(myStyle); //追加到head里面
</script>
insertBefore
<p id="js">javascript</p>
<div id="first"><p id="ee">javaee</p><p id="se">javase</p><p id="me">javame</p>
</div>
<script>var js1=document.getElementById("js");var se=document.getElementById("se");var first1=document.getElementById('first');first1.insertBefore(js1,se);
</script>
9、操作表单(验证)
表单是什么 form
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的:提交信息
获得重要提交的信息
<form action="post"><p><span>账号:</span><input type="text" id="first"></p><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 text_input=document.getElementById('first');text_input.value; //获取表单的值text_input.value='1242'; //修改表单的值var text_girl=document.getElementById('girl');var text_boy=document.getElementById('boy');//对于单选框或者多选框等,我们只能获得它默认设置的当前值,不能获得已选中的值。text_girl.checked; //判断当前返回值为什么,如果为true,则选中了text_girl.checked='true'; // 设置是否选中。
</script>
提交表单
MD5算法,来解决提交问题。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
</head>
<body>
<!--表单绑定事件利用onsubmit来绑定一个检测函数:true或flase函数将结果返回给表单;οnsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()"><p><span>账号:</span><input type="text" id="first" name="name"></p><p><span>密码:</span><input type="password" id="text_input"></p><input type="hidden" id="md_input" name="password">
<!-- 提交绑定点击事件: οnclick="aaa()"--><button type="submit">提交</button>
</form>
<script>function aaa(){alert('1');var usename=document.getElementById('first');var mdtext=document.getElementById('text_input');var mdf=document.getElementById('md_input');//mdtext.value=md5(mdtext.value);mdf.value=mdtext.value.md5(mdtext.value);//可以校检表单内容,true就是提交,false就是不提交。return false;}
</script>
</body>
</html>
10、jQuery
JavaScript
jQuery库,里面含有大量的JavaScript函数
获取jQuery
获取在线链接
https://www.bootcdn.cn/jquery/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eNcqEvgt-1616683201344)(C:\Users\15531\AppData\Roaming\Typora\typora-user-images\image-20210325171941090.png)]
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a href="#" id="first">点击我</a>
<script>$('#first').click(function () {alert('ha');});
</script>
</body>
</html>
10、1选择器
jQuery文档工具站:https://jquery.cuishifeng.cn/
选择器公式:$(selector).action()
<script>/*原生选择器 js 少,不好记*///标签选择器document.getElementsByTagName();//id选择器document.getElementById();//class选择器document.getElementsByClassName();//jQuery js中的选择器全部都能用$('p').click(); //标签选择器$('id').click(); //id选择器$('.class').click(); //class选择器$(selector).action(); //公式
</script>
10、2事件
鼠标事件
鼠标拥有的一些事件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5QINaUk-1616683201346)(C:\Users\15531\AppData\Roaming\Typora\typora-user-images\image-20210325191521455.png)]
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><style>#mouseMove{width: 500px;height: 500px;border: 2px solid red;}</style>
</head>
<body>
<div id="mouseTion"><span>鼠标位置:</span></div>
<div id="mouseMove">在这里移动试试
</div>
<script>//当前页面加载完毕后,响应事件 $((document).ready(function(){}))//简写$(function () {alert('232');$('#mouseMove').mousemove(function(e){$("span").text(e.pageX + ", " + e.pageY);});});</script>
</body>
</html>
10、3操作DOOM
节点文本操作
$('ul #first').text (); //设置值$('ul #first').text ('3e434'); //获得值$('ul #first').HTML(); //设置值$('ul #first').HTML('<Strong>3321</Strong>'); //获得值
CSS操作
$('ul #first').css({ "color": "#ff0011", "background": "blue" });
元素的显示和隐藏
$('ul #first').show(); //显示$('ul #first').hide(); //隐藏
其它一些
$(window).width()
$(window).height()
$(document).width()
$(document).height()
$('ul #first').toggle()
小技巧:
1、如何巩固JS(看jQuery源码,看游戏源码)
2、巩固HTML,CSS(扒网站,全部down下来,然后对应修改看效果)
$(selector).action(); //公式
#### 10、2事件> 鼠标事件鼠标拥有的一些事件。[外链图片转存中...(img-y5QINaUk-1616683201346)]```htm;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><style>#mouseMove{width: 500px;height: 500px;border: 2px solid red;}</style>
</head>
<body>
<div id="mouseTion"><span>鼠标位置:</span></div>
<div id="mouseMove">在这里移动试试
</div>
<script>//当前页面加载完毕后,响应事件 $((document).ready(function(){}))//简写$(function () {alert('232');$('#mouseMove').mousemove(function(e){$("span").text(e.pageX + ", " + e.pageY);});});</script>
</body>
</html>
10、3操作DOOM
节点文本操作
$('ul #first').text (); //设置值$('ul #first').text ('3e434'); //获得值$('ul #first').HTML(); //设置值$('ul #first').HTML('<Strong>3321</Strong>'); //获得值
CSS操作
$('ul #first').css({ "color": "#ff0011", "background": "blue" });
元素的显示和隐藏
$('ul #first').show(); //显示$('ul #first').hide(); //隐藏
其它一些
$(window).width()
$(window).height()
$(document).width()
$(document).height()
$('ul #first').toggle()
小技巧:
1、如何巩固JS(看jQuery源码,看游戏源码)
2、巩固HTML,CSS(扒网站,全部down下来,然后对应修改看效果)
Layer弹窗
JavaScript(基础)相关推荐
- JavaScript基础笔记集合(转)
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
- javascript基础语法——表达式
前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
- Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
- javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
- JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
- 夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...
- JavaScript基础,Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
- JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- JavaScript基础---语言基础(1)
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
最新文章
- 测绘技术设计规定_1:2000地形图项目测绘(航测)技术设计书(文档可下载)
- 比特币周一盘中数秒内闪跌 80%
- 小余学调度:学习记录2021年9月
- 首届腾讯运维技术开放日!对外报名正式启动!
- 使用 Exceptionless 作为 Log Server 搭配 NLog 记录系统日志
- restful get不传参数404_你知道什么是 Restful 风格吗?SpringMVC 带我们实现它!
- python常用的库有哪些餐厅_这十个Python常用库,学习Python的你必须要知道!
- python用一行代码编写一个回声程序_Python源码分析2 - 一个简单的Python程序的执行...
- GitHub优秀移动开源项目大集合
- vue element序号翻页连续排序
- 敬业签电脑手机云同步便签及安卓手机和苹果手机云同步桌面便签
- cookie,session与token的真正区别
- 用java怎么让时间走动起来,java脚本实现时间刷新
- 容器监控cadvisor
- 用python批量发送短信_秒嘀云发送短信Python实现
- Ubuntu压缩视频
- 知识关联视角下金融证券知识图谱构建与相关股票发现
- 实现Android手机之间在局域网下传输任意文件
- 安装Office InfoPath 2007
- mysql数据中包含不间断空格(ascii值为194和160)解决办法
热门文章
- python二级第四套答案
- java76-GUL单选按钮和复选按钮
- “燕云十六将”之Lorna(14)
- POJ3069 萨鲁曼的大军(重庆一中高2018级信息学竞赛测验3) 解题报告
- 使用百度云主机的GPU主机教程_第一部分
- ERROR: cannot download default sources list from: https://raw.githubusercontent.com/ros/rosdistro/ma
- 深信服上网行为管理设备登录方法、恢复出厂、恢复控制台密码
- CTFshow_终极考核_个人WP
- 百万级 QPS 业务新宠,金山办公携手 Apache APISIX 打造网关实践新体验
- 途客圈见面会-要点总结