js进阶

碧海晴空 發表於 2025-7-18 22:33:00

<h1 id="js进阶">js进阶</h1>
<h2 id="函数">函数</h2>
<p>可以把函数看成java里面的方法本质是一样的知识位置不一样</p>
<blockquote>
<p><strong>定义方式一</strong></p>
</blockquote>
<pre><code class="language-js">//绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(10) //10
abs(-10) //10

</code></pre>
<p>一旦执行return就代表函数结束，返回结果！！！如果没有执行return，函数执行完也会返回结果，结果就是undefined</p>
<blockquote>
<p><strong>定义方式二</strong></p>
</blockquote>
<pre><code class="language-js">var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
</code></pre>
<p>function(x){......}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！！！！两种方法等价</p>
<h3 id="调用函数">调用函数</h3>
<pre><code class="language-js">abs(10)
abs(-10)
</code></pre>
<p>**参数问题：js可以传递任意参数，也可以不传递参数 **</p>
<pre><code class="language-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;
</code></pre>
<h4 id="argments">argments</h4>
<p><strong>argments 是js免费赠送的一个关键字，代表传递进来的所有参数</strong></p>
<pre><code class="language-js"> var abs=function(x){
console.log("x=>"+x);
for(var i=0;i<argments.length;i++){
console.log(argments);
}
if(x>=0){
return x;
}else{
return -x;
}
}
abs(1,2,3,9,652598,56,24845)
1=>1
2
3
9
652598
56
24845
</code></pre>
<p><strong>问题：arguments包含所有的参数，有时候想要使用多余的参数来进行附加的操作。需要排除前面已经定义的参数</strong></p>
<h4 id="rest">rest</h4>
<p>es6引入的新特性</p>
<pre><code class="language-js">//原来
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

</code></pre>
<p><strong>rest参数只能写后面，且必须使用...表示</strong></p>
<h2 id="变量作用域">变量作用域</h2>
<p><strong>在javascript中var定义变量实际是有作用域的</strong><br>
假设在函数中声明，则在函数体外不可以使用（要想使用就得闭包）<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250717155034761.png" alt="image-20250717155034761" loading="lazy"><br>
如果两个函数使用了相同的变量名字，只要在函数内就不冲突，嵌套也不报错，里面的可以用外面的，外面的不能用里面的，和java的内部类思想一样<br>
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250717155506933.png" alt="image-20250717155506933" loading="lazy"><br>
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250717155802892.png" alt="image-20250717155802892" loading="lazy"><br>
输出outerA<br>
输出innerA</p>
<h3 id="提升变量的作用域">提升变量的作用域</h3>
<pre><code class="language-js">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';
}
</code></pre>
<p>说明：js执行引擎，自动提升了y的声明，但是不会提升y的赋值<br>
这个是js建立的时候就存在的特性<br>
js会自动在前面定义变量，所以以后游戏馆的在前面定义变量</p>
<h3 id="全局变量">全局变量</h3>
<pre><code class="language-js">x=1;
function f(){
console.log(x);
}
f();
console.log(x);
1//输出
1
</code></pre>
<h3 id="全局对象window重点">全局对象window！！！！！！重点</h3>
<pre><code class="language-js">var x=’xxx‘;
alert(x);
alert(window.X);//默认所有的全局变量都绑定window
</code></pre>
<pre><code class="language-js">//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
</code></pre>
<p><strong>js实际只有一个全局作用域，任何变量（函数也可以看做变量）假设没有在任何函数中找到变量，就会向外查找</strong><br>
<mark>规范</mark>：<strong>由于所有的全局变量都会绑定到window中，如果不同的js文件，使用了相同的全局变量，那么就会有冲突，如果能够减少冲突？？</strong></p>
<pre><code class="language-js">//唯一全局变量
var XuAPP={};
//定义全局变量
XuAPP.name='wozaierbenxuejava';
XUapp.add=function(a,b){
return a+b;
}
</code></pre>
<p><em>把自己的代码全部放到自己定义的全局唯一空间里面降低全局命名冲突问题</em>f<br>
<s>框架Jqusery就是这么干的</s></p>
<h3 id="局部作用域-let">局部作用域 let</h3>
<pre><code class="language-js">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出去之后还会有作用域
</code></pre>
<p>es6 添加了let关键字，解决了局部作用域冲突问题！！</p>
<pre><code class="language-js">function aaa(){
for(let i=0;i<100;i++){
console.log(i)
}
console.log(i+1)
}
console.log(i+1)
1//输出
99
//就会输出报错
</code></pre>
<p>建议使用<code>let</code>来定义局部作用域的变量</p>
<h3 id="常量-const">常量 const</h3>
<p><strong>在es6之前，怎么定义常量？就是用大写字母定义的就是常量这是规范</strong></p>
<pre><code class="language-js">var PI='3.14';
console.log(PI);
PI='213';
console.log(PI);
//可以改变这个值
</code></pre>
<p>因为可以改变这些值所以就在es6的时候添加了新特性<code>const</code>关键字</p>
<pre><code class="language-js">const PI='3.14';//只读常量
console.log(PI);
PI='213';//更改会报错
console.log(PI);
</code></pre>
<h2 id="方法">方法</h2>
<h3 id="定义方法">定义方法</h3>
<p>方法就是把函数放在对象的里面，对象只有两个东西：属性和方法</p>
<pre><code class="language-js">var Xusen={
name;'zhang';
bitch;2003;
age:function(){
//今年减去出生的年龄
var now=new Date().getFullyear();
return now-this.birth;
}
}
//属性调用
Xusen.name
//方法，一定要带（）调用
Xusen.age()
</code></pre>
<pre><code class="language-js">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这个属性
</code></pre>
<h3 id="apply">apply</h3>
<p>this是无法指向的在java中，是默认指向调用者<br>
可是在js中可以利用<code>apply</code>关键字来控制指向</p>
<pre><code class="language-js">function getAge(){
//今年减去出生的年龄
var now=new Date().getFullyear();
return now-this.birth;
}
var Xusen={
name;'zhang';
bitch;2003;
age:getAge()
}
}
getAge.apply(Xusen,[])//this指向了Xusen，参数为空
</code></pre>
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250717175220118.png" alt="image-20250717175220118" style="zoom: 100%; margin-left: 0">
<h2 id="内部对象">内部对象</h2>
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250717175837924.png" alt="image-20250717175837924" style="zoom: 50%; margin-left: 10px">
## Date日期时间
<p>基本使用</p>
<pre><code class="language-js">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
</code></pre>
<p>转换</p>
<pre><code class="language-js">now=new Date(1752746711530)
//Thu Jul 17 2025 18:05:11 GMT+0800 (中国标准时间)
now.toLocaleString//注意调用的是一个方式不是一个属性
//ƒ toLocaleString() { }
now.toLocaleString()
//'2025/7/17 18:05:11'
now.toGMTString()
//'Thu, 17 Jul 2025 10:05:11 GMT'
</code></pre>
<h2 id="json">json</h2>
<h3 id="json是什么">json是什么</h3>
<blockquote>
<p>JSON: JavaScript Object Notation JS对象简谱 , 是一种轻量级的数据交换格式，是基于ECMAScript的一个子集设计的，是一种开放标准的文件格式和数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成</p>
</blockquote>
<ul>
<li>早期所有的数据传输习惯使用XML文件；</li>
<li>在js中一切都是对象，任何js支持的类型都可以用json来支持</li>
<li>格式：</li>
<li>对象都用{}</li>
<li>数组都用[]</li>
<li>所有的键值对都是用的key：value</li>
</ul>
<h4 id="json和对象的转换">json和对象的转换</h4>
<p>这些转换都是最原生的东西后面用的都是框架AJAX转换<br>
<mark><strong>stringify和parse</strong></mark></p>
<pre><code class="language-js">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":"男"}' )
</code></pre>
<pre><code class="language-js">JSON =>"name":"qinjiang","age":3,"sex":"男"
对象 =>name:"qinjiang",age:3,"sex":"男"
</code></pre>
<h2 id="ajax">Ajax</h2>
<ul>
<li>原生的js写法xhr异步请求</li>
<li>jQuey封装好的方法$("#name").ajax("地址")</li>
<li>axios请求</li>
</ul>
<h2 id="面向对象编程">面向对象编程</h2>
<h3 id="什么是面向对象">什么是面向对象</h3>
<p>js，java，c#·····都是面向对象。js有些区别<br>
在面向对象中一般类：模版对象：具体的实例</p>
<h3 id="继承">继承</h3>
<h4 id="原型继承">原型继承</h4>
<p>在js中这个需要换一下思维方式=>原型=>继承<br>
原型这个概念=>继承</p>
<pre><code class="language-js">var student ={
name:xusen,
age:3,
run:function(){
   console.log(this.name+'run....')
}
};
var xiaoming={
name:xiaoming
};
xiaoming.__proto__=student//意思是小明的原型是学生相当于继承
</code></pre>
<h4 id="class继承">class继承</h4>
<p><strong>es6引入的新特性</strong></p>
<pre><code class="language-js">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 extendsStudent{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert('我是一名小学生')
}
}
var xiaoming=new Student('xiaoming');
var xiaohong=new xiaoStudent('xiaohong',1)
xiaohong.myGrade()
</code></pre>
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250718090304159.png" alt="image-20250718090304159" style="zoom: 33%; margin-left: 0">
#### 原型链
**_ _proto__:关键字这是一个属性**
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250718090832528.png" alt="image-20250718090832528" style="zoom: 33%; margin-left: 0">
## 操作BOM对象（重点）
<p><strong>BOM：浏览器对象模型</strong></p>
<h3 id="浏览器介绍">浏览器介绍</h3>
<p><strong>js和浏览器的关系，js的诞生就是为了能够在浏览器中运行！！</strong></p>
<ul>
<li>IE 6-11 ------window</li>
<li>Chrom ------常用</li>
<li>Safari -------- 苹果</li>
<li>FireFox</li>
<li>Opera<br>
三方浏览器就是内核是别人的要考虑浏览器内核</li>
<li>请求浏览器</li>
<li>360浏览器</li>
</ul>
<h3 id="window">window</h3>
<p>**window代表浏览器窗口 **<br>
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250718093716852.png" alt="image-20250718093716852" style="zoom: 100%; margin-left: 0"></p>
<h4 id="navigator">Navigator</h4>
<p><strong>封装了浏览器的信息</strong></p>
<pre><code class="language-bash">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' //系统版本
</code></pre>
<p>有什么用就是看用户适合不合适用这个网页<br>
大多数时候不会使用这个<code>navigator</code>对象因为会被人为修改！<br>
不建议使用这些属性判断和编写对象</p>
<h4 id="screen">Screen</h4>
<p><strong>代表屏幕尺寸</strong></p>
<pre><code class="language-bash">Screen.width
1920
Screen.height
1080
</code></pre>
<h4 id="location重要">location（重要）</h4>
<p><strong>location代表当前页面</strong></p>
<pre><code class="language-bash">location
host: "www.doubao.com"//代表主机
href: "https://www.doubao.com/chat/12660173884120578" //当前页地址
protocol: "https:"//协议
reload: ƒ reload()//重新加载
//设置新的地址
location.assign('www.baidu.com')
</code></pre>
<h4 id="document">document</h4>
<p><strong>document代表当前页面，HTML DOM文档树</strong></p>
<pre><code class="language-bash">document.title
"火狐主页"
document.title='重生之我在二本学java'
"重生之我在二本学java"
</code></pre>
<p><strong>获取具体的文档数节点</strong></p>
<pre><code class="language-html"><dl id='app'>
<dt>java<dt>
<dd>java<dd>
<dd>java<dd>
</dl>
<script>
var dl=document.getElementById('app')
</script>
</code></pre>
<p><strong>获取网页的cookie</strong></p>
<pre><code class="language-bash">document.cookie
"Hm_lvt_dd4738b5fb302cb062ef19107df5d2e4=1750173959,1750386768,1752486198,1752748042; Hm_lpvt_dd4738b5fb302cb062ef19107df5d2e4=1752748042; HMACCOUNT=28E4089D7550528D"
</code></pre>
<p><strong>劫持cookie原理</strong><br>
登录www.taobao.com 之后发一段js代码截取你的cookis实现登录</p>
<pre><code class="language-html"><script src='aa.js'>
//恶意人员获取你的cokkie上传到他的服务器
</script>
</code></pre>
<p><strong>服务端可以设置cookie：只读模式不能让别人获取</strong><br>
服务端设置 cookie 时添加HttpOnly属性，可禁止客户端 JS 访问 cookie，有效防止劫持。</p>
<h4 id="history一般不使用">history（一般不使用）</h4>
<p>** 代表浏览器的历史记录**</p>
<pre><code class="language-bash">history//查看历史
History { length: 2, scrollRestoration: "auto", state: {…} }

history.back() //后退
undefined
history.forward()//前进
undefined
</code></pre>
<h2 id="操作dom对象重点">操作DOM对象（重点）</h2>
<p><strong>DOM：文档对象模型</strong></p>
<h3 id="核心">核心</h3>
<p>浏览器网页就是一个DOM树形结构</p>
<ul>
<li>更新：更新Dom节点</li>
<li>遍历Dom节点：得到每一个DOM节点</li>
<li>删除：删除一个Dom节点</li>
<li>添加：添加一个新的节点</li>
</ul>
<h3 id="获取dom节点">获取dom节点</h3>
<p>要操作一个Dom节点就先获得这个Dom节点</p>
<pre><code class="language-html"><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>
</code></pre>
<p>这全部是原生的代码以后全都要用框架来实现</p>
<h3 id="更新dom元素">更新dom元素</h3>
<pre><code class="language-html"><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>
</code></pre>
<h3 id="删除dom节点removechild">删除dom节点:removeChild</h3>
<p><strong>删除节点先获取父节点再用父节点删除自己</strong></p>
<pre><code class="language-html"><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>
</code></pre>
<p>坑点：如果直接删除父节点的子节点集合中的元素，需注意索引变化（推荐先获取副本再遍历）。</p>
<pre><code class="language-html">father.removeChild(father.chilren);//先删除
father.removeChild(father.chilren);
father.removeChild(father.chilren); // 就会报错
</code></pre>
<h3 id="添加-dom-节点appendchild">添加 DOM 节点:appendChild</h3>
<p>我们获得了某个Dom节点，假设这个节点是空的，我们通常添加<br>
通常分两步：创建新节点 → 插入到已有节点中：</p>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="操作表单验证">操作表单（验证）</h2>
<h3 id="表单是什么---from-dom-以外">表单是什么 from Dom 以外</h3>
<ul>
<li>文本框 text</li>
<li>下拉框 select</li>
<li>单选框 radio</li>
<li>多选框 checkbox</li>
<li>隐藏框 hidden</li>
<li>密码框 password<br>
获取要提交数据的表单和修改数据</li>
</ul>
<pre><code class="language-html"><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>
</code></pre>
<h3 id="提交表单">提交表单</h3>
<p>MD5在线加密包</p>

<pre><code class="language-html"><form id="loginForm" action="#" method="post">
用户名：<input type="text" id="username" name="username">
密码：<input type="password" id="password">

<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>
</code></pre>
<h2 id="jquery">jQuery</h2>
<h3 id="js和jquery关系">js和jQuery关系</h3>
<p>jQuery里面存在大量的js函数</p>
<h3 id="获取jquery">获取Jquery</h3>
<p>引入在线的cdn加速</p>

<p><strong>选择器就是css选择器</strong><br>
<strong>公式=>$(selector).action()</strong></p>
<pre><code class="language-html"><!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>

//选择器就是css选择器
$('#b').click(function () {
   alert('点击了')
});

</script>
</body>
</html>
</code></pre>
<h3 id="选择器">选择器</h3>
<pre><code class="language-js"> $('p').action();//标签选择器
$('#id1').action();//id选择器
$('.class').action();//类选择器
</code></pre>
<h3 id="事件">事件</h3>
<p><strong>浏览器对用户操作（如点击、鼠标移动）的响应，称为事件。通过 JS 可以定义事件触发时的处理逻辑。</strong></p>
<h4 id="常见事件类型">常见事件类型</h4>
<ul>
<li>鼠标事件：click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）、mousemove（鼠标移动）</li>
<li>键盘事件：keydown（按键按下）、keyup（按键抬起）</li>
<li>表单事件：submit（表单提交）、change（内容改变）、focus（获取焦点）、blur（失去焦点）</li>
<li>窗口事件：load（页面加载完成）、resize（窗口大小改变）、scroll（滚动）</li>
</ul>
<pre><code class="language-html">//当网页元素加载完响应事件
$(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>
</code></pre>
<p><img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250718221320680.png" alt="image-20250718221320680" loading="lazy"></p>
<h3 id="操作dom">操作dom</h3>
<pre><code class="language-html"><!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").text("Hello World")
$("#b li.is").text("Hello World1")
$("#b li").text("Hello World2")
$("#b li").css("color","red")
$("#b li").show()//显示
$("#b li").hide()//隐藏
</script>
</body>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/zhangxusen/p/18992261

頁: [1]

琼殿技术论坛's Archiver

js进阶