JavaSricpt学习（基础）
JavaScript
JavaScript简称为js，简单来说就是运⾏在浏览器上的脚本语⾔。ps：虽然带有Java，但是js跟java没有关系，当时只是想借助java的名⽓，不过学习Java后，再学习js相对容易⼀些。
1，使⽹页具有交互性，例如响应⽤户点击，给⽤户提供更好的体验
2，可以处理表单，检验⽤户的输⼊，并提供及时反馈节省⽤户时间。例如，表单中要你输⼊电⼦邮箱⽽你却输⼊⼀个⼿机号，那么应该给你⼀个提醒。
3，还可以根据⽤户的操作，动态的创建页⾯。例如，发邮件时，添加附件操作。
4，设置cookie，cookie是存储在浏览器上的⼀些临时信息，例如你浏览过的⽹站地址，使⽤过的⽤户名
书写⽅式：
1.可以在HTML⾥⾯书写，⽽且js的书写很随意，只要在⽹页⾥⾯就可以实现。
2.也可以像css⼀样单独写⼀个js⽂件，然后链接到HTML⾥⾯
<script src="js⽂件路径">⽆</script>
js变量：
规范：
1.只能由字母、数字、_（下划线）、$（美元符号）组成。
2.不能以数字开头。
3.命名中不能出现-（js会理解成减号进⾏减法的操作），不能和关键字冲突。
<!--JavaScript严格区分⼤⼩写-->
<script>
// 定义变量：类型（var）变量 = 变量值;
var a =12;
//函数体中声明的变量，则在函数体外不能使⽤
/
/两个函数使⽤了相同的变量名，只要在函数内部就不冲突
//内部函数可以访问外部函数的成员，反之不⾏
//内外部函数变量重名，则由内向外查，外部存在，则内部函数屏蔽外部这个重名变量
//养成规范：所有变量定义都放在函数的头部，便于维护代码
//全局对象window。其中alert的本⾝也是⼀个window变量
//减少不同js⽂件相同的全局变量可以⾃⼰设置如：var Wang ={};
//局部作⽤域 let /常量关键字 const
</script>
js不像Java⼀样要注重类型的定义，js是弱类型语⾔，不重视类型的定义，但js会根据为变量赋值的情况⾃定判断该变量是何种类型。
检测数据类型：
/* typeof(value); 或者typeof value;    返回这个变量的类型.
表⽰同⼀个变量, 可以进⾏不同类型的数据赋值. 如下代码
*/
<script type="text/javascript">
var a =777;
alert(typeof a);// 输出结果：number
a ="英雄联盟";
alert(typeof a);// 输出结果：string
a =true;
alert(typeof a);// 输出结果：boolean
a=hhh;
alert(typeof a);// 输出结果：undefined
</script>
严格检查模式：
/*使⽤ "use strict"
IDEA需要ES6的⽀持
"use strict"防⽌⼀些因为js的随意性导致的错误
该语句要放在JavaScript的第⼀⾏
局部变量⼀般使⽤let关键字
*/
<script>
"use strict";
let i =2;
</script>
操作字符串：
<script>
'use strict';
//d多⾏字符串的编写书写：`⽂字`
let msg =`
蓝蓝的天空
青青的湖⽔
`
//字符串模板书写：字符串${指定变量} 【和Java中字符串中“+”类似】
let name ="⼩⼼";
let age =7;
let mag =`faker${name}${age}`//输出结果：faker⼩⼼7
//字符切割 substring（2，3）前闭后开
</script>
数组：
定义数组
<script>
'use strict';
var arr =[1,3,4,5,6,'1'];
</script>
⽅法 ：
1.indexOf() 查询索引
2.slice() 截取数组的⼀部分，返回⼀个新的数组 和string中的substring⼀样
arr.slice(2,4)
(2)[4,3]
3.尾部插⼊push() 尾部弹出⼀个元素pop()
4.头部插⼊unshift() 头部弹出⼀个元素shift()
5.排序sort() 元素反转reverse()
arr.sort()
[1,"1",3,4,5,6]
(6)[6,5,4,3,"1",1]
7.join()连接符，使⽤特定的字符串打印拼接数组
arr.join('-')
"1-3-4-5-6-1"jquery字符串截取
js中的对象:
js对象中属性都是键值对来描述，每个属性之间以逗号隔开，最后⼀个属性不加逗号。同时，所有的键都是字符串，值是任意对象。
<script>
'use strict';
/*创建对象
var 对象名 = {
属性名：属性值，
属性名：属性值
*/}
var person ={
name:"xiaohu",
age:20,
score:2200
}
//1.赋值和Java中差不多
//2.可以使⽤⼀个不存在的对象，⽽且不会报错。会显⽰undefind
//3.动态删减和添加属性，delete person.name/person.hh="hh"
//4.判断属性是否在这个对象中 xxx in xxx （'age' in person）
/
/5.判断⼀个属性是否属于对象⾃⾝拥有的hasOwnProperty()/person.hasOwnProperty('age')--》true
let arr =[1,3,5,6,345,23,5,2];
arr.forEach(function(n){//forEach遍历数组元素
console.log(n)
})
</script>
函数：
function函数名(形式参数){函数体}
调⽤函数：函数名(实际参数);
<script>
//⼀个数的绝对值
'use strict';
function absoluteValue(x){
if(typeof x !=='number'){
throw'not a number';
}
if(x >=0){
return x;
}else{
return-x;
}
}
</script>
function(形式参数){函数体}
调⽤⽅式：将匿名函数赋值给⼀个变量，通过变量名调⽤函数
定义函数并赋值给变量：var fn=function(形式参数){函数体}
调⽤函数：fn(实际参数);
<script>
// 匿名函数 : 没有名称的函数
var lol=function(x, y){
alert(x +"和"+ y +"五五开");
}
// 调⽤函数 :
lol("faker","lbw");//弹窗出现：faker和lbw五五开
</script>
原型链
简单的回顾⼀下构造函数、原型和实例的关系：每个构造函数都有⼀个原型对象，原型对象都包含⼀个指向构造函数的指针，⽽实例都包含⼀个指向原型对象的内部指针。那么假如我们让原型对象等于另⼀个类型的实例，结果会怎样？显然，此时的原型对象将包含⼀个指向另⼀个原型的指针，相应地，另⼀个原型中也包含着⼀个指向另⼀个构造函数的指针。假如另⼀个原型⼜是另⼀个类型的实例，那么上述关系依然成⽴。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。
来⾃《javascript⾼级程序设计》
原型对象就是通过 Object 构造函数⽣成的，结合之前所讲，实例的 proto 指向构造函数的 prototype ，如关系图：
BOM和DOM
BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提⽰框、浏览器地址栏输⼊⽹址跳转等操作等。
<script>
//BOM：浏览器对象模型
//获取浏览器外窗⼝属性：window.outerHeight  window.outerWidth
//获取浏览器内窗⼝属性：window.innerWidth  window.innerHeight
//屏幕尺⼨screen.width  screen.height
//location代表当前⽹页URL信息  location.assign()刷新⽹页
//document代表当前⽹页可以获得具体的⽂档树节点如：ElementById()
</script>
DOM：Document Object Model（⽂档对象模型），此处的⽂档暂且理解为html，html加载到浏览器的内存中，可以使⽤js的DOM技术对内存中的html节点进⾏修改，⽤户从浏览器看到的是js动态修改后的页⾯。（增删改查）
<script>
//获得Dom节点
var h2 = ElementsByTagName('h2');
var father = ElementById('father');
var p1 =ElementById('p1');
var p2 = ElementsByClassName('p2');
var child = father.children;//获取⽗节点下的所有节点
//修改⽂本
father.innerText ='gggg';
//innerHTML可以解析HTML⽂本标签
father.innerHTML ='<em>3434</em>';
//操作css
lor ='red';
</script>
<script>
//删除节点过程：先获取⽗节点，在通过⽗级节点删除⾃⼰
var self = ElementById('id');
let father = self.parentElement;
//删除是⼀个动态的过程
//删除多个节点的时候要注意children[]的值
</script>
JQuery
jQuery是⼀个快速、简洁的JavaScript框架，是继Prototype之后⼜⼀个优秀的avaScript框架。jQuery设计的宗旨是“write Less，Do More”，它封装JavaScript常⽤的功能代码，提供⼀种简便的JavaScript设计模式，优化HTML⽂档操作、事件处理、动画设计和Ajax交互。
简单来说：
jQuery 是⼀个 JavaScript 库，⽤很少的代码做更多的事。
jQuery 极⼤地简化了 JavaScript 编程。
<head>
<meta charset="UTF-8">
<title>Title</title>
//引⼊jQuery
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="testJquery">点我呀</a>
<script>
//jQuer语法：  $(选择器).action()
$('#testJquery').click(function(){
alert(3)
});
</script>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。