当前位置： 首页 > news >正文

前端_Javascript复习

news 2025/7/23 8:39:54

文章目录

    • Javascript复习
    • 如何在网页中引入js？
    • js语法介绍：
      • 一：定义变量和常量
      • 二：数据类型，原始数据类型和引用类型
      • 三.运算符
      • 四.表达式：
      • 五.流程控制
      • 六.数组
      • 七.函数 function
        • 函数定义：
        • 函数嵌套函数：
        • 函数表达式
        • 立即执行表达式
        • 箭头函数
      • 八.面向对象
      • 九.DOM
        • 查询DOM:
        • 新增DOM:
        • 修改DOM:
        • 删除DOM:
        • 四向遍历：很常见
      • 事件操作（事件处理）：
        • 事件类型：
      • 九.BOM
      • jQuery
        • 常用函数：

Javascript复习

js:负责行为交互，动态效果，逻辑语言
javascript 动态脚本语言,解释执行，单线程的语言
和java的关系？雷锋和雷峰塔的关系，也就是没关系。

如何在网页中引入js？

1.写在js标签内，在onxxxx事件中
2.页内js，可以放在head中，或者body内
3.引入外部js文件
以上三种形式都常见

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js</title><!-- 网页中引入js方式2 ：页内js，可以放在head中，或者body内--><script>console.log("ddd")// 定义变量使用letlet a =10;// a++  报异常console.log(a)// const是常量const b=10let c=null;//c定义了，但是值为空let d =undefined;//d未定义，相当于没有这句话console.log(c)console.log(d)console.log(null==undefined)</script><!-- 网页中引入js方式3 ：3.引入外部js文件--><script src="./js/index.js"></script></head>
<body><!--  网页中引入js方式1.写在js标签内，在onxxxx事件中--><input type="button" value="点我" onclick="alert('你好')"><input type="button" value="点我" onclick="console.log('你好')"><!-- 网页中引入js方式2 ：页内js，可以放在head中，或者body内--><script>let str="helloworld"str=trueconsole.log(str)</script></body>
</html>

js版本，发展史
目前流行数字版本：5和6（es5和es6----Ecma Script）

js语法介绍：

一：定义变量和常量

let,const
控制台输出：console.log

  // 定义变量使用letlet a =10;console.log(a)// const是常量const b=10// b++  报异常

二：数据类型，原始数据类型和引用类型

原始数据类型(primitive)：
number:数字类型，不分整数小数
string:
boolean：布尔值
null ：引用类型的一个值表示为指向任何对象。
undefined：表示未定义。

 let c=null;//c定义了，但是值为空let d =undefined;//d未定义，相当于没有这句话console.log(c)console.log(d)console.log(null==undefined)

symbol:es6提出的，使用频率低，

三.运算符

1.算法运算符： / %

    // 变量let a=30;let b=20;console.log(a/b);console.log(parseInt(a/b));//强制转为整数console.log(Math.floor(a/b))//小于结果的最大整数

在这里插入图片描述

2.比较运算符：===， !， ==
==值相等但忽略类型
===值和类型都相等

        a="30";b=30;console.log(a==b)//trueconsole.log(a===b)//false

3.逻辑运算符
4.赋值运算符
5.位运算符
6.条件运算符

四.表达式：

和java没区别

五.流程控制

和java没区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js</title>
</head>
<body><script>for(let i=1;i<=9;i++){let out = "";for(let j=1;j<=i;j++){out+=j+"*"+i+"="+j*i+"\t"}console.log(out)}for(let i=100;i<=999;i++){let flag=true;for(let j=2;j*j<i;j++){if(i%j==0){flag=false;break;}}if(flag){console.log(i+"i是素数");}}</script>
</body>
</html>

六.数组

在js中，数组是引用数据类型，在js里是万能数据结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let arr = [];//语法糖：对数据类型的简写，没有定义长度，你写多少扩展到多少// let a = new Array();//完整写法let arr2=[1,2,3,4,5];arr[4]=50;arr2[4]=50;console.log(arr[4]==arr2[4]);console.log(arr2);console.log(arr2.length);//数组长度，只读属性console.log("==========================================")arr2.push(6);//在arr2尾部压入一个元素6console.log(arr2);let t=arr2.pop();//在arr2尾部弹出一个元素console.log(t);console.log(arr2);console.log("==========================================")arr2.unshift(100);//在arr2头部压入一个元素100console.log(arr2);console.log("==========================================")t=arr2.shift();//arr2头部弹出一个元素console.log(t);console.log(arr2);arr2=[1,2,3,4,5];arr2=arr2.map(it=>it*it)//每个元素变成原来的平方console.log(arr2);</script>
</body>
</html>

七.函数 function

在js中函数是一等公民，在函数中可以嵌套定义函数

函数定义：
 // 函数function sum(a,b){return a+b;}
函数嵌套函数：
 let nums=[20,30,5,16,88]quickSort(nums);console.log(nums)
//函数嵌套函数function quickSort(nums){Sort(nums,0,nums.length-1)function Sort(array,low,high){if(low>=high){return;}let pl=low;let pr=high;let pivot =array[low];while(pl <pr){while(pl<pr && array[pr]>=pivot){pr--;}while(pl<pr && array[pl]<=pivot){pl++;}if(pl!==pr){const t = array[pl];array[pl]=array[pr]array[pr] = t;}}if(pl!=low){array[low]=array[pl];array[pl]=pivot;}Sort(array,low,pl-1);Sort(array,pl+1,high);}}
函数表达式

函数表达式是语句，有分号 -----顺序执行，传统不匿名函数定义，没有顺序

//函数表达式是语句，有分号  -----顺序执行// 匿名函数可以当作值let a =function(a,b){return a+b;};// a();console.log(a(10,20));//传统不匿名函数定义，没有顺序，function b(a,b){return a+b;}// b();console.log(b(10,20));// a()和b()效果一致

匿名函数可以当作值

 let a =function(a,b){return a+b;};// a();console.log(a(10,20));
立即执行表达式
 // 立即执行表达式(function(name){console.log("hello"+name);} )("张三")
箭头函数
  // 箭头函数，lambda表达式let fun =(a,b)=>a+bconsole.log(fun(10,20));

八.面向对象

js的面向对象是基于原型的，只有js这样。（有缺陷）
在js中，对象就是键值对的集合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>面向对象</title>
</head>
<body><script>let obj = new Object();//创建对象的完整写法let o = { };//语法糖，对上面创建对象的简写o.name="张三";o.age="20";o.sayHello=function(){console.log("ddd"+this.name);}  o.sayHello();  // es5中创建一个类型function Person(name,age){this.name=name;this.age=age;}let p = new Person("张三",20);console.log(p.name);//es6创建类用Class，但很少使用class Student{name ="a";}</script>
</body>
</html>

九.DOM

Document Object Model 文档对象模型。
js写的的一套函数库,默认继承到浏览器里
作用：操作html文档元素的
在js中，可以将任意一个元素当成对象来操作

查询DOM:

document.getElementById（）
document.querySelector（） 查找第一个满足css选择器的元素
document.querySelectorAll（） 查找所有满足css选择器的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM</title>
</head>
<body><div id="d1"><p>你好</p></div><script>// 查询DOM的第一种方式：document.getElementById（）// 根据元素id进行查询let dom1 = document.getElementById("d1");// console.dir(dom1);console.log(dom1.innerText);//获取对象纯文本内容也就是只获取元素的内容console.log(dom1.innerHTML);//返回元素内的所有 HTML 内容（包括元素的标签）dom1.innerText = "我今天很不好";//修改元素的值（内容）dom1.style.backgroundColor ="red";//修改该对象的背景颜色属性     // dom1.remove();//移除此元素// 查询DOM的第二种方式：document.querySelector（）  //查找第一个满足css选择器的元素let dom2 = document.querySelector("#d1");console.log(dom1===dom2);</script>
</body>
</html>
新增DOM:

let d1=document.createElement(“标记名”);
document.appendChild();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="outer"> </div><br><a href="#" target="_blank">1111</a><script>//创建一个元素let d1=document.createElement("a");//a是被创建元素的标签类型，a->超链接d1.innerText= "去百度";//a标签的内容d1.setAttribute("href","http://www.baidu.com");//设置href属性，跳转地址d1.setAttribute("target","_blank")//设置target属性，跳转链接在新页打开//获取被添加的元素let outer =document.querySelector(".outer");//把创建的元素添加到d1的孩子outer.appendChild(d1);</script>
</body>
</html>

2.父.insertBefore(要插入的元素，目标元素)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>// 创建插入元素let li =  document.createElement("li");li.innerText="2.5";//给插入元素赋值let li3 = document.querySelector("ul>li:nth-child(3)");//被插入元素// ul.appendChild(li);let ul = document.querySelector("ul");//父元素ul.insertBefore(li,li3);</script>
</body>
</html>
修改DOM:

innerText 修改元素的内容
ClassName

删除DOM:

dom.remove();
父.removeChild(dom);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>删除元素</title>
</head>
<body><div id="d1" class="outer">你好</div><script>let d1 =document.querySelector("#d1");d1.id="d2";d1.innerText="我也好";d1.innerHTML ="<b>今天好开心</b>"d1.className="mydiv";d1.classList.add("red");d1.setAttribute("a","b");//自定义属性，定义属性a="b"d1.style.fontSize="50px";// d1.remove();let body = document.body;//document.body 是JavaScript中访问文档body元素的标准方式console.log(body);body.removeChild(d1);</script>
</body>
</html>
四向遍历：很常见

1.上:dom.parentElment
2.下：children 返回值类数组（可以使用下标，有.length属性）
3.兄:
4.弟:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><div id="d1"><ul><li><a href="#">百度</a></li><li><a href="#">新浪</a></li><li><a href="#">网易</a></li><li><a href="#">谷歌</a></li></ul></div></div><script>let gg =document.querySelector("ul>li:first-child>a");console.log(gg);console.log(gg.parentElement);console.log(gg.parentElement.parentElement);console.log("=================================")let d1 = document.querySelector("#d1");let c = d1.children;//所有子元素console.log(c instanceof Array);//c是类数组console.log(c[0].children);console.log(c.length)//兄let b1 =gg.parentElement.previousElementSibling;console.log(b1);//弟let b2 =gg.parentElement.nextElementSibling;console.log(b2);
</script>
</body>
</html>

事件操作（事件处理）：

1.在标记内，使用onxxx绑定事件处理程序。同一类型的事件只能添加一次，再次添加则覆盖
2.使用js，手动添加事件，本质上等于第一种，同一类型的事件只能添加一次，再次添加则覆盖
3.使用addEventListenter来添加事件，可以添加多次。

事件类型：

1.click
2.keyDown
3.keyUp
4.keyPressed
5.mouseDown
6.mouseup
7.mouseMove
8.mouseLeave
9.mouseEbter
10.mouseOut

1.句末的分号是可选的，
2。js+dom+bom

九.BOM

BOM:browser object model浏览器对象模型

常见浏览器对象
window：一个window就是浏览器的一个会话窗口（一个选项卡）
location：href,reload函数
history:浏览访问历史记录对象 back(),forward(),go(n)
cookie:存储数据。本意是传输数据不是存储数据，如何出现下面两种专门存储数据的：
localStorage:本地存储,同一个域下，多个页面可以共享。setltem,getltem,removeltem
sessionStorage：会话存储，生命周期仅限一个会话之内。一般不操作，30分钟会话结束。

jQuery

一套js函数库。

1.起手式：
bash $(()=>{
//代码
});

2.函数如果以字符串为参数，则将参数理解为选择器。3.函数如果以字符串为参数，则将参数理解为选择器。 3.函数如果以字符串为参数，则将参数理解为选择器。3.(“selector”)会返回jquery对象，jquery对象有很多方便的函数
4.jQuery对象支持链式操作:$().a.c.b.xxx,一部分函数会返回对象自身，所以可以链式调用 5。jQuery相当于隐式迭代
6.jQuery一些函数同时具备获取和设置功能
7.jQuery对象和dom对象有什么关联，二者如何转换 jQuery对象是一个类数组，其中的元素是dom对象，一个jQuery对象包含多个dom对象
$ obj[x]即dom,或者$obj.get()即dom

$(dom)即可将dom对象转换成仅包含一个元素的jquery对象

8.jQuery的常见操作：("selector").xxx().xxx().xxx().xxx();9.("selector").xxx().xxx().xxx().xxx(); 9.("selector").xxx().xxx().xxx().xxx();9.(“selector”,a),可以有两个参数

10,jquery有一个length属性，用于表示jquery对象中dom元素的个数

11.选择器

12.三种不可见的元素：type=hidden的隐藏域，使用visibiliay:hiden样式的元素，使用display：none的元素

常用函数：

1.text:获取或设置文本内容
2css,获取或设置css内容
3.html获取或设置html内容
4.attr:获取或设置标记的属性
5.prop:获取设置表单元素的布尔属性
6.addClass,removeClass,toggleClass,hasClass
7.val：获取或设置表单元素value的值

二次筛选
：四向遍历
1.closest(x):找最近的祖先元素。
2.parent(x):找父元素。
3.parents(x):找祖先元素
4.parentsUnitl(x):找祖先元素，一直到x为止。

5.childen:子代元素
6,find：后代元素（包含子代）
7.perv(x)找兄元素
8.prevALl(x)：所有兄元素
9.prevUntil(x):找所有兄元素，直到x为止

10.next nextALl,nextUntil
11siblings：所有兄弟元素

事件处理：
1$obj.xxx(function(){
xxx
})

http://www.dtcms.com/a/292672.html

相关文章：

  • 【C++】第十八节—一文万字详解 | map和set的使用
  • 网络安全第三次作业
  • Java学习第六十六部分——分布式系统架构
  • days32 ：零基础学嵌入式之网络2.0
  • Coze智能体工作流：3分钟批量生成连贯人物一致的治愈图文
  • 远程调用图形浏览器（X11 转发）在 CentOS 7 上的安装操作
  • CentOS 7 安装nginx
  • 【LINUX】Centos 9使用nmcli更改IP
  • SpringBoot6-10（黑马）
  • linux-计划任务
  • 如何排查服务器 CPU 飙高
  • 本地大模型VRAM需求计算器：原理与实现详解
  • Spring Boot音乐服务器项目-上传音乐模块
  • [vue3] 自定义组件的v-model
  • Android ViewModel 深度解析：原理、使用与最佳实践
  • Android 中 实现日期选择功能(DatePickerDialog/MaterialDatePicker)
  • “鱼书”深度学习入门 笔记（2）第五章
  • MoonBit Meetup 杭州站丨 探讨AI基础软件的精彩回顾
  • API是什么，如何保障API安全？
  • 解决flex布局的元素高度超出父元素高度
  • AI网关是什么？为何而生？企业为什么需要AI网关？
  • 使用Kiro开发项目
  • SQL基础入门③ | 排序篇
  • 基于mysql云数据库创建和美化表格，对比分析Power BI和Quick BI的功能优劣
  • PACKET_HOST等宏定义介绍
  • 草稿！Linux网络系统总结！
  • 碰一碰发视频源码搭建：支持OEM
  • 10.Java中的反射
  • 深度学习-全连接神经网络2
  • 使用EasyExcel导出明细数据