js进阶

函数

可以把函数看成java里面的方法本质是一样的知识位置不一样

定义方式一

//绝对值函数function abs(x){	if(x>=0){		return x;	}else{		return -x;    }}abs(10)   //10abs(-10)   //10

一旦执行return就代表函数结束，返回结果！！！如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var   abs=function(x){	if(x>=0){		return x;	}else{		return -x;    }}

function(x){......}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！！！！ 两种方法等价

调用函数

abs(10)abs(-10)

**参数问题：js可以传递任意参数，也可以不传递参数 **

var   abs=function(x){    //手动抛出异常来判断     if(typeof x!='number'){    throw 'NOt a Number;'    }	if(x>=0){		return x;	}else{		return -x;    }}abs()NOt a Number;

argments

argments 是js免费赠送的一个关键字，代表传递进来的所有参数

	var   abs=function(x){	console.log("x=>"+x);	for(var i=0;i<argments.length;i++){		console.log(argments[i]); 	}	if(x>=0){		return x;	}else{		return -x;    }}abs(1,2,3,9,652598,56,24845)1=>12396525985624845

问题：arguments包含所有的参数，有时候想要使用多余的参数来进行附加的操作。需要排除前面已经定义的参数

rest

es6引入的新特性

//原来function aaa(a,b){    console.log("a=>"+a)    console.log("b=>"+b)	if(arguments.length>2){		for(var i=2;i<arguments;i++){		//........		}	}}aaa(1,2,3,6,9)//输入a=>1//输出b=>212369//es6新特性   获取除了已定义的所有参数function aaa(a,b,...rest){    console.log("a=>"+a)    console.log("b=>"+b)	console.log(rest)}aaa(1,2,3,6,9)//输入a=>1//输出b=>2[3,6,9]

rest参数只能写后面，且必须使用...表示

变量作用域

在javascript中var定义变量实际是有作用域的
假设在函数中声明，则在函数体外不可以使用（要想使用就得闭包）
如果两个函数使用了相同的变量名字，只要在函数内就不冲突，嵌套也不报错，里面的可以用外面的 ，外面的不能用里面的，和java的内部类思想一样


输出outerA
输出innerA

提升变量的作用域

function qj(){	var x="x"+y;	console.log(x);	var y='y';}xundefined//输出//上面代码相当于function qj2(){	var y;	var x="x"+y;	console.log(x);	y='y';}

说明：js执行引擎，自动提升了y的声明，但是不会提升y的赋值
这个是js建立的时候就存在的特性
js会自动在前面定义变量，所以以后游戏馆的在前面定义变量

全局变量

x=1;function f(){	console.log(x);}f();console.log(x);1//输出1

全局对象window！！！！！！重点

var x=’xxx‘;alert(x);alert(window.X);  //默认所有的全局变量都绑定window   

//alert也是默认绑定到window上的  alert是window的一个变量var x='x';window.alert(x);var a=window.alent;a(x)//弹窗打印xwindow.alert=function(){	//重写了alert}window.alert(123)//没有打印  发现失效了window.alert=a;//重新赋值回来window.alert(x)//打印x

js实际只有一个全局作用域，任何变量（函数也可以看做变量）假设没有在任何函数中找到变量，就会向外查找
规范：由于所有的全局变量都会绑定到window中，如果不同的js文件，使用了相同的全局变量，那么就会有冲突，如果能够减少冲突？？

//唯一全局变量var XuAPP={};//定义全局变量XuAPP.name='wozaierbenxuejava';XUapp.add=function(a,b){    return a+b;}

把自己的代码全部放到自己定义的全局唯一空间里面降低全局命名冲突问题f
框架Jqusery就是这么干的

局部作用域 let

function aaa(){	for(var i=0;i<100:i++){		console.log(i)	}	console.log(i+1)}console.log(i+1)//i出去了这个作用域之后还可以使用1//输出99101//输出i出去之后还会有作用域

es6 添加了let关键字，解决了局部作用域冲突问题！！

function aaa(){	for(let i=0;i<100;i++){		console.log(i)	}	console.log(i+1)}console.log(i+1)1//输出99//就会输出报错

建议使用let来定义局部作用域的变量

常量 const

在es6之前，怎么定义常量？就是用大写字母定义的就是常量这是规范

var PI='3.14';console.log(PI);PI='213';console.log(PI);//可以改变这个值

因为可以改变这些值所以就在es6的时候添加了新特性const关键字

const PI='3.14';//只读常量console.log(PI);PI='213';//更改会报错console.log(PI);

方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var Xusen={	name;'zhang';	bitch;2003;	age:function(){			//今年减去出生的年龄		var now=new Date().getFullyear();		return now-this.birth;	}}//属性调用Xusen.name//方法，一定要带（）调用Xusen.age()

function getAge(){    //今年减去出生的年龄    var now=new Date().getFullyear();    return now-this.birth;}var Xusen={	name;'zhang';	birth;2003;	age:getAge	}}Xusen.getAge()//22getAge()//NaN   要用this的话必须要调用要不然就不要用用传参  不调用的话相当于是用windows来调用了  windows自然没有birth这个属性

apply

this是无法指向的在java中，是默认指向调用者
可是在js中可以利用apply关键字来控制指向

function getAge(){    //今年减去出生的年龄    var now=new Date().getFullyear();    return now-this.birth;}var Xusen={	name;'zhang';	bitch;2003;	age:getAge()	}}getAge.apply(Xusen,[])//this指向了Xusen，参数为空

内部对象

基本使用

var now = new Date()//Thu Jul 17 2025 18:05:11 GMT+0800 (中国标准时间)now.getFullYear()//2025 年now.getMonth()//7 月now.getDate()//17 日now.getDay()//4 星期几now.getHours()//时now.getMinutes()//分now.getSeconds()//苗now.getTime();//时间戳   1752746711530

转换

now=new Date(1752746711530)//Thu Jul 17 2025 18:05:11 GMT+0800 (中国标准时间)now.toLocaleString//注意调用的是一个方式不是一个属性//ƒ toLocaleString() { [native code] }now.toLocaleString()//'2025/7/17 18:05:11'now.toGMTString()//'Thu, 17 Jul 2025 10:05:11 GMT'

json

json是什么

JSON: JavaScript Object Notation JS对象简谱 , 是一种轻量级的数据交换格式，是基于ECMAScript的一个子集设计的，是一种开放标准的文件格式和数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成

• 早期所有的数据传输习惯使用XML文件；
• 在js中一切都是对象，任何js支持的类型都可以用json来支持
• 格式：
• 对象都用{}
• 数组都用[]
• 所有的键值对都是用的key：value

json和对象的转换

这些转换都是最原生的东西 后面用的都是框架AJAX转换
stringify和parse

var user={	name: 'qinjiang',	age:3,	sex:'男'}//对象转化为json字符串var jsonUser=JSON.stringify(user)//'{"name":"qinjiang","age":3,"sex":"男"}'//json字符串解析成对象var a=JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}' )

JSON =>  "name":"qinjiang","age":3,"sex":"男"对象 =>  name:"qinjiang",age:3,"sex":"男"

Ajax

• 原生的js写法 xhr异步请求
• jQuey封装好的方法$("#name").ajax("地址")
• axios请求

面向对象编程

什么是面向对象

js，java，c# ·····都是面向对象。js有些区别
在面向对象中一般 类：模版 对象：具体的实例

继承

原型继承

在js中这个需要换一下思维方式=>原型=>继承
原型这个概念=>继承

var student ={    name:xusen,    age:3,    run:function(){        console.log(this.name+'run....')    }};var xiaoming={	name:xiaoming};xiaoming.__proto__=student//意思是小明的原型是学生相当于继承

class继承

es6引入的新特性

class Student{	constructor(name){//构造器		this.name=name;	}	hello(){		alert('hello');	}}var xiaoming=new Student('xiaoming');xiaoming.hello()   //弹窗helloxiaoming.name   //xiaomingvar xiaohong=new Student('xiaohong');//以后按照这个ES6的新特性写和java基本一样class xiaoStudent extends  Student{	constructor(name,grade){		super(name);		this.grade=grade;	}	myGrade(){		alert('我是一名小学生')	}}var xiaoming=new Student('xiaoming');var xiaohong=new xiaoStudent('xiaohong',1)xiaohong.myGrade()

BOM：浏览器对象模型

浏览器介绍

js和浏览器的关系，js的诞生就是为了能够在浏览器中运行！！

• IE 6-11 ------window
• Chrom ------常用
• Safari -------- 苹果
• FireFox
• Opera
  三方浏览器 就是内核是别人的 要考虑浏览器内核
• 请求浏览器
• 360浏览器

window

**window代表浏览器窗口 **

Navigator

封装了浏览器的信息

window.Navigator.appNameundefined   navigator.appName'Netscape'navigator.appVersion'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0'   //版本navigator.userAgent'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0'   //内核navigator.platform'Win32'     //系统版本

有什么用就是看用户适合不合适用这个网页
大多数时候不会使用这个navigator对象 因为会被人为修改！
不建议使用这些属性判断和编写对象

Screen

代表屏幕尺寸

Screen.width1920Screen.height1080

location（重要）

location代表当前页面

locationhost: "www.doubao.com"  //代表主机href: "https://www.*d*o*ubao.com/chat/12660173884120578" //当前页地址protocol: "https:"  //协议reload: ƒ reload()  //重新加载//设置新的地址location.assign('www.baidu.com')

document

document代表当前页面，HTML DOM文档树

document.title"火狐主页"document.title='重生之我在二本学java'"重生之我在二本学java" 

获取具体的文档数节点

<dl id='app'>	<dt>java<dt>	<dd>java<dd>	<dd>java<dd></dl><script>    var dl=document.getElementById('app')</script>

获取网页的cookie

document.cookie"Hm_lvt_dd4738b5fb302cb062ef19107df5d2e4=1750173959,1750386768,1752486198,1752748042; Hm_lpvt_dd4738b5fb302cb062ef19107df5d2e4=1752748042; HMACCOUNT=28E4089D7550528D" 

劫持cookie原理
登录www.taobao.com 之后发一段js代码截取你的cookis实现登录

<script src='aa.js'>//恶意人员获取你的cokkie上传到他的服务器</script> 

服务端可以设置cookie：只读模式 不能让别人获取
服务端设置 cookie 时添加HttpOnly属性，可禁止客户端 JS 访问 cookie，有效防止劫持。

history（一般不使用）

** 代表浏览器的历史记录**

history  //查看历史History { length: 2, scrollRestoration: "auto", state: {…} }history.back() //后退undefined history.forward()//前进undefined 

操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构

• 更新：更新Dom节点
• 遍历Dom节点：得到每一个DOM节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

获取dom节点

要操作一个Dom节点就先获得这个Dom节点

<div id="father">    <h1>标题1</h1>        <p id='p1'>p1</p>        <p class='p2'>p2</p></div>//类似css的选择器<script>    var h1=document.getElementsByTagName('h1')//标签名    var p1=document.getElementById('p1')//ID选择器    var p1=document.getElementsByClassName('p2')//类选择器    var father=document.getElementById('father')//ID选择器    var childrens=father.children;//获取所有子节点	//father.firstChild ;    //father.lastChild ;</script>

这全部是原生的代码以后全都要用框架来实现

更新dom元素

<div id="test">原始内容</div><script>  var test = document.getElementById('test');  // 1. 修改文本内容（推荐，会自动转义HTML）  test.textContent = '新内容<br/>不会解析标签';  // 输出：新内容<br/>不会解析标签  // 2. 修改HTML内容（可解析标签，慎用，有XSS风险）  test.innerHTML = '新内容<br/>会解析标签';  // 输出：新内容（换行）  // 3. 修改样式  test.style.color = 'red';  // 字体变红  test.style.fontSize = '20px';  // 字体大小20px（注意驼峰命名）  test.style.padding='2em'//内边框  // 4. 修改属性  test.id = 'newId';  // 修改id属性  test.className = 'active';  // 修改class属性（class是关键字，用className）        //修改百度一下的那个字    document.getElementById('su')    <input id="su" class="bg s_btn" type="submit" value="百度一下">    var ss=document.getElementById('su')    undefined    ss.style.padding='9em'    "9em"    ss.style.color='red'    "red"    ss.style.fontSize='80px' </script>

删除dom节点:removeChild

删除节点先获取父节点再用父节点删除自己

<div id="father">  <p id="p1">要删除的节点</p></div><script>  var p1 = document.getElementById('p1');  var father = document.getElementById('father');  // 方式1：通过父节点删除子节点  father.removeChild(p1);  // 注意：删除后p1变量仍存在，但已脱离DOM树  console.log(p1);  // 仍能打印，但页面中已不存在</script>

坑点：如果直接删除父节点的子节点集合中的元素，需注意索引变化（推荐先获取副本再遍历）。

father.removeChild(father.chilren[0]);  //先删除father.removeChild(father.chilren[1]);father.removeChild(father.chilren[2]); // 就会报错

添加 DOM 节点:appendChild

我们获得了某个Dom节点，假设这个节点是空的，我们通常添加
通常分两步：创建新节点 → 插入到已有节点中：

<div id="list">  <p>已有的节点</p></div><script>  var list = document.getElementById('list');//已经存在的  // 1. 创建新节点  var newP = document.createElement('p');  // 创建p标签  newP.textContent = '新添加的节点';  // 2. 插入到list的最后  list.appendChild(newP);    //添加css样式  // 3. 插入到指定位置（如插入到第一个子节点前）  var firstChild = list.firstChild;  // 获取第一个子节点  list.insertBefore(newP, firstChild);  // 在firstChild前插入newP        //创建一个标签节点（通过这个属性可以设置任意的值）	var htmlScriptElement = document.createElement('script');    htmlScriptElement.setAttribute('src', 'https://cdn.bo*ot*c*ss.com/jquery/3.2.1/jquery.min.js')	document.body.appendChild(htmlScriptElement);        //创建style标签    var a=document.createElement('style');    //设置标签内容    a.innerHTML='#a{background: red;}';    //插入到页面中    document.body.appendChild(a);</script>

操作表单（验证）

表单是什么 from Dom 以外

• 文本框 text
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 隐藏框 hidden
• 密码框 password
  获取要提交数据的表单和修改数据

<form action="post">    用户名：<input type="text" id="username">    性别：<input type="radio" name="sex" value="man" id="boy">男    <input type="radio" name="sex" value="woman"id="girg">女</form><script>    var a = document.getElementById("username");    var boy = document.getElementById("boy");    var girg = document.getElementById("girg");    //获取    a.value    //修改    a.value = "123"    //对于单选框多选框，只能获取选中的    boy.checked//查看是否选中如果选中为true，否则为false    girg.checked= true//设置选中女</script>

提交表单

MD5在线加密包

<form id="loginForm" action="#" method="post">    用户名：<input type="text" id="username" name="username">    密码：<input type="password" id="password">    <!-- 注意：这里将按钮类型改为button，避免默认提交 -->    <button type="button" onclick="aaa()">登录</button></form><script>    function aaa(){        var username = document.getElementById("username").value;        var password = document.getElementById("password").value;        var md5Password = md5(password);        // 创建隐藏输入框存储加密后的密码（用于提交）        var passwordInput = document.createElement("input");        passwordInput.type = "hidden";        passwordInput.name = "password";  // 后端接收的参数名        passwordInput.value = md5Password;        var form = document.getElementById("loginForm");        form.appendChild(passwordInput);  // 将隐藏输入框添加到表单        form.submit();  // 手动提交表单    }</script>

jQuery

js和jQuery关系

jQuery里面存在大量的js函数

获取Jquery

引入在线的cdn加速

选择器就是css选择器
公式=>$(selector).action()

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://code.j***query.com/jquery-3.6.0.min.js"></script></head><body id="a"><a href="https://www.b**ai*du.com" id="b">dfgf</a><script>    <!--    公式=>$(selector).action()    -->    //选择器就是css选择器    $('#b').click(function () {        alert('点击了')    });</script></body></html>

选择器

    $('p').action();//标签选择器    $('#id1').action();//id选择器    $('.class').action();//类选择器

事件

浏览器对用户操作（如点击、鼠标移动）的响应，称为事件。通过 JS 可以定义事件触发时的处理逻辑。

常见事件类型

• 鼠标事件：click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）、mousemove（鼠标移动）
• 键盘事件：keydown（按键按下）、keyup（按键抬起）
• 表单事件：submit（表单提交）、change（内容改变）、focus（获取焦点）、blur（失去焦点）
• 窗口事件：load（页面加载完成）、resize（窗口大小改变）、scroll（滚动）

//当网页元素加载完响应事件$(document).ready(funtion(){})简化$(funtion(){})<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://code.j***query.com/jquery-3.6.0.min.js"></script>    <style>        #divmove{            width: 500px;            height: 500px;            border: 1px solid yellow;            background-color: red;        }    </style></head><body id="a"><a href="https://www.b**ai*du.com" id="b">dfgf</a>mouse:<apan id="mouseMaove"></apan><div id="divmove">运动到这里试试</div><script>  $(function () {      $("#divmove").mousemove(function (e) {          $("#mouseMaove").text(e.pageX+","+e.pageY);      })  })</script></body></html>

操作dom

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://code.j***query.com/jquery-3.6.0.min.js"></script></head><body id="a"><ul id="b">    <li class="is">Home</li>    <li name="python">About</li></ul><script>    $("#b li[class=is]").text("Hello World")    $("#b li.is").text("Hello World1")    $("#b li[name=python]").text("Hello World2")    $("#b li[name=python]").css("color","red")    $("#b li[name=python]").show()//显示    $("#b li[name=python]").hide()//隐藏</script></body></html>