js进阶

函数

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

定义方式一

//绝对值函数
function abs(x){
	if(x>=0){
		return x;
	}else{
		return -x;
    }
}
abs(10)   //10
abs(-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=>1
2
3
9
652598
56
24845

问题：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=>2
1
2
3
6
9
//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定义变量实际是有作用域的
假设在函数中声明，则在函数体外不可以使用（要想使用就得闭包）图片[1]-js进阶-牛翰网
如果两个函数使用了相同的变量名字，只要在函数内就不冲突，嵌套也不报错，里面的可以用外面的，外面的不能用里面的，和java的内部类思想一样
图片[2]-js进阶-牛翰网
图片[3]-js进阶-牛翰网
输出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)//弹窗打印x
window.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//输出
99
101//输出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()//22
getAge()//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，参数为空

内部对象

## Date日期时间

基本使用

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()   //弹窗hello
xiaoming.name   //xiaoming
var 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()

图片[4]-js进阶-牛翰网 #### 原型链 **_ _proto__:关键字这是一个属性**
## 操作BOM对象（重点）

BOM：浏览器对象模型

浏览器介绍

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

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

window

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

Navigator

封装了浏览器的信息

window.Navigator.appName
undefined   
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.width
1920
Screen.height
1080

location（重要）

location代表当前页面

location
host: "www.doubao.com"  //代表主机
href: "https://www.doubao.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.bootcss.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.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body id="a">
<a href="https://www.baidu.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.jquery.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.baidu.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.jquery.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>

来源链接：https://www.cnblogs.com/zhangxusen/p/18992261

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END