javaScript中的语法和基本使用
javascript
JavaScript是一门世界上最流行的脚本语言！！
快速入门
方式一，运行在html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不要写成自闭合 -->
<script>
alert("hello,js");
</script>
</head>
<body>
</body>
</html>
方式二，运行单独的js文件
alert("hello,js");
引入在html中
注意类型不能直接为javascript，否则浏览器窗口无响应！
<script src="js/js1.js" type="application/javascript"></script>
数据类型快速预览
数字：123,12
字符串：‘ss’，"s"
布尔值：true，false
逻辑运算：&&，||，！
比较运算符：=，（数值相等，类型不相同也为true），=（类型和数值都相等结果为true）
数组：
//js中的数组可以存放各种数据：
var s=[1,2,"s",'f',true]
对象
var person={
name:"xiaoming ",
age:3,
tags:["js","java","linux"]
}
取值
person.name
>"xiaoming "
person.age
>3
严格检查模式
<script>
//严格检查模式
'use strict'
//这种定义也成功，并且为全局变量很危险
//i=1;
//上面开启了严格检查模式，所以这种用法将会在运行报错未定义
s="ss";
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JVeAPyWc-1657954818031)(../AppData/Roaming/Typora/typora-user-images/image-20220716080807719.png)]](https://img-blog.csdnimg.cn/8ed6b30a2ee04fbf8f5e150f1e6eba47.png)
数据类型
字符串
\'
\n
\t
\u4e2d \u#### unicode
\x41 ascll
s.length
s.indexOf(1)
s.indexOf('s')
s.constructor
数组
//常用方法
var arr=[1,2,3,4] //定义数组
arr.length //长度
arr.indexOf(2) //索引
arr.slice(3) //分割
arr.push('a','b') //尾插
arr.pop() //尾出
arr.shift(3)//头插
arr.sort() //排序
arr.join('-') //连接字符串
对象
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
……
}
动态的删除属性：
delete person.name
动态的添加属性：
person.name="hhh"
判断属性值是否在对象中：
name in person
判断属性是自己的还是父类的：
hasOwnProperty
流程控制
if判断：
var age=3;
if(age>3){
alert("3");
}
else if(age<3){
alert(1);
}
else
alert(2);
while判断：
while(age<100){
age+=1;
console.log(age);
}
for循环：
for(var i=0;i<100;i++){
console.log(i);
}
forEach循环：
var arr=[12,2,3,4,21,23]
arr.forEach(function (value) {
console.log(value)
})
for……in……循环：
map和set不能使用此方法遍历！！！
for(var num in arr){
console.log(arr[num]);
}
map：
var map = new Map([["tom",100],["jack",80],["haha",70]]);
var name=map.get("tom");//通过key获取value
console.log(name);
map.set("admin",123);//添加或者修改
map.delete("admin");//删除
set：
无序不重复
//会自动去重
var set = new Set([2,1,1,1]);
set.delete(1); //删除元素1
set.add(3);//添加3
set.has(3);//是否包含某个元素
for of遍历：
遍历数组：
var arr=[2,3,4,1,5];
for(let x of arr){
console.log(x);
}
遍历map
var map = new Map([
["tom",100],
["jack",80],
["haha",70]]);
for(let y of map){
console.log(y);
}
遍历set
var set = new Set([2,1,1,1]);
for(let z of set){
console.log(z);
}
函数
定义方式一：
function f(x) {
if(x>10){
return x;
}else
return 0;
}
定义方式二：
var res=function(x) {
if(x>10){
return x;
}else
return 0;
}
调用函数：
f(10);
f(22);
手动抛出异常：
function f(x) {
if(typeof x!=='numberm'){
throw "not a number";
}
if(x>10){
return x;
}else
return 0;
}
arguments关键字：
传递过来的所有参数为一个叫arguments的数组，可以拿到所有参数！
function f(x) {
for(var i=2;i<arguments.length;i++){
console.log(arguments[i]);
}
}
rest关键字：
当传递的的参数过多时，不必都定义定义，使用rest取出
function a(x,y,...rest) {
console.log("x==="+x);
console.log("y==="+y);
console.log(rest);
}
变量作用区域
1.var定义的变量，在函数体内，只能在函数体内有效。因此不同函数内可以定义相同名字的变量。
2.内部函数可以访问外部的成员，反之则不行。
3.内部和外部函数重名的时候，从自身变量开始，从内部到外部查找，重名后内部会屏蔽外部。
4.在定义之前引用，不会报错只会说没有赋值。因此所有的变量定义放在头部，可以不用赋值，规范统一定义。
5.window全局对象，全局变量都会绑定到它下面。
6.如果有多个js文件都要去绑定到window是会产生冲突和问题的，因此我们需要定义自己的全局对象绑定变量。
//解决window冲突问题
//定义自己的全局对象名，所有变量绑定给它
var pangApp={};
pangApp.name="panglili";
pangApp.add=function (a,b) {
return a+b;
}
7.局部作用变量定义为let。
8.常量用const定义。
方法
直接定义在对象内部的就是一个方法，但是通常在函数内部只写一个函数名，函数体放在外面，看起来更加规范。
function hobby() {
var h="sleep";
return h;
}
var person={
name:"tata",
age:18,
hobby:hobby
}
console.log(person.name+person.age+person.hobby());
apply方法：通常所有的函数都会有一个apply方法，可以指向具体调用者。
hobby.apply(person,[])//后面参数为空
Date使用
var date = new Date();
/*
date
Sat Jul 16 2022 10:15:24 GMT+0800 (中国标准时间)
date.getDate()
16 日
date.getHours()
10 //时
date.getMonth()
6 //月 从0-11
date.getDay()
6 //星期几并非当前日
*/
json对象
轻量级的数据交换格式。任何js的类型都可以用json表示。
- 对象都用{}
- 数组都用[]
- 键值对都用：key：value
var user={
name:"tata",
age:18,
sex:"nv"
}
//对象转换为json
var s = JSON.stringify(user);
console.log(s);
//json转换为对象
var parse = JSON.parse(s);
console.log(parse);
json格式：'{"name":"tata","age":18,"sex":"nv"}',本身是一个字符串
面向对象编程
类：模板
对象：具体的实例
继承方式一：原型继承
//一个学生对象，有名字有年龄，有跑步的方法
var Student={
name:"student",
age:4,
run:function () {
console.log(this.name+"run……")
}
};
Student.run();
//小明只有名字
var xiaoming={
name:"xiaoming"
};
//小明以原型的方式继承了students
//注意是有两个下划线……
xiaoming.__proto__=Student;
xiaoming.run();
继承方式二：class继承
class Student{
constructor(name){
this.name=name;
}
hello(){
alert("hello");
}
}
class s extends Student{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert("i is a xiao xue sheng")
}
}
var student = new Student("xioaming");
var s1 = new s("xiaoming",1);
本质还是查看对象原型。
操作BOM对象
BOM：浏览器对象模型。
window代表浏览器窗口
//浏览器窗口信息
window.alert
ƒ alert() { [native code] }
window.innerHeight
75
window.innerWidth
527
window.outerHeight
616
window.outerWidth
1069
screen:屏幕信息
screen.width
1536
screen.height
864
location
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/javaSE_01/base/com/javascript/demo13.html?_ijt=pp0bf3uuq413bgr2guo60ec6b5"
origin: "http://localhost:63342"
pathname: "/javaSE_01/base/com/javascript/demo13.html"
port: "63342"
protocol: "http:"
reload: ƒ reload() //刷新
location.assign('https://blog.csdn.net/weixin_48595687?type=blog')//跳转页面
document：代表当前页面
document.title //获得标题
'知乎 - 有问题，就会有答案'
document.title='塔塔是最棒的'
'塔塔是最棒的'
document.getElementById //通过id获得元素
ƒ getElementById() { [native code] }
document.cookie //获得cookie
''
history：前进后退
history.forward()；
history.back();
操作DOM
-
查找dom节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>h1</h1> <p id="p">p</p> <p class="p1">p1</p> <script> document.getElementsByTagName('h1'); document.getElementsByClassName('p1'); document.getElementById('p'); </script> </body> </html> -
更新dom节点
//给节点添加html属性 id1.innerHTML='<strong>123</strong>'; '<strong>123</strong>' //给节点添加文本 id1.innerText='456'; '456'//给节点添加样式 id1.style.color='yellow'; 'yellow' id1.style.fontSize='20px'; '20px' -
删除dom节点
步骤：1.获取父节点
2.通过父节点删除
var name1 = document.getElementById('father');name1.removeChild(id1); -
添加dom节点
在没有dom节点的时候，使用innerHtml已经可以实现插入一个节点了，但是有节点的时候就不可以了，会覆盖以前的节点。
追加
list.append(id1);
//创建标签
var myScript=document.createElement("script")
//加属性
myScript.setAttribute("type","text/JavaScript)
//插入
list.insertBefore('new','old')
操作dom中的表单
-
文本框
-
下拉框
-
单选框
-
多选框
……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" > <p>name:</p> <p><input type="text" id="username" ></p> <p>sex:</p> <p><input type="radio" checked="checked" id="boy" name="sex" value="nan"></p> <p><input type="radio" id="girl" name="sex" value="nv"></p> </form> <script> var byId = document.getElementById('username'); var boy = document.getElementById('boy'); var girl = document.getElementById('girl'); </script> </body> </html>
jquery
jQuery库存放大量的jar包。
使用：$（） 相当于jQuery.可以获取它的参数。
jQuery入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<a href="" id="text-jquery">dianwo</a>
<script>
$('#text-jquery').click(function () {
alert("1");
})
</script>
</body>
</html>
jquery选择器：$('selector').action()
<script>
//原生js选择
//id
document.getElementById();
//标签
document.getElementsByTagName();
//类
document.getElementsByClassName();
//jquery选择器 还有css中的选择器它也包含
$('p').click();//标签
$('.class1').click();//类
$('#id1').click();//id
</script>
鼠标事件
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpnveyuM-1657954818034)(../AppData/Roaming/Typora/typora-user-images/image-20220716141847918.png)]](https://img-blog.csdnimg.cn/218d3cc4dafd41959f28142f4c0a94f5.png)
jQuery操作dom
<ul>
<li id="java">java</li>
<li id="python">python</li>
<li class="li1">linux</li>
<li class="li">php</li>
</ul>
<script>
$('li[id=java]').text(); //获得值
$('li[id=python]').html();//获得html元素
$('li[id=python]').html('<strong>123123</strong>');//添加html属性
$('li[class*=li]').css({"color":"red"});//添加css属性
$('li[class*=li]').show(); //显示
$('li[class*=li]').hidden();//隐藏
</script>
