boy快快长大

JavaScript笔记

1. 前端知识体系(学习路线)
2.前端三要素
3.行为层 JavaScript
4.UI框架
5.JavaScript构建工具
6. JavaScript引入方式
7. JavaScript语法
- 7.1数据类型:
- 7.2 变量声明和赋值
- 7.3运算符
- 7.4 方法声明
- 7.5 和页面相关的方法
- 7.6 JavaScript对象分类
- - 7.6.1 BOM相关对象
  - 7.6.2操作DOM对象（重要）
  - JavaScript HTML DOM - 改变 HTML
  - JavaScript HTML DOM - 改变CSS
  - JavaScript HTML DOM 事件

1. 前端知识体系(学习路线)

学习路线

2.前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。

CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。

JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

3.行为层 JavaScript

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

JavaScript框架：

JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）；
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能。

4.UI框架

UI框架：

Ant-Design：阿里巴巴出品，基于React的UI框架；
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；
BootStrap：Teitter推出的一个用于前端开发的开源工具包；
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。

5.JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。

6. JavaScript引入方式

内联: 在标签的事件属性中添加js代码,当事件触发时执行js代码

<input type="button" value="按钮" onclick="alert('按钮点击了!')">

内部: 在html页面的任意位置添加script标签,在标签内部写js代码,推荐写在的上面

<script type="text/javascript"> alert("内部引入成功!"); script>

外部: 把代码写在单独的js文件中,通过script标签的src属性引入js文件

<script type="text/javascript" src="first.js">script>

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    
    <input type="button" value="按钮" onclick="alert('按钮点击了')">

    
    <script type="text/javascript"> alert("内部引入成功") script>

    
    <script type="text/javascript" src="first.js">script>
body>
html>

alert("没想到吧")

7. JavaScript语法

数据类型变量运算符语句方法声明面向对象

7.1数据类型:

js中只有对象类型
1.数值类型：number var x = 10
2.字符串类型：string var s = “abc”/‘abc’;
3.布尔类型：boolean var b = true/false;
4.未定义类型：undefined var u; 只声明不赋值就是未定义类型
5.自定义类型object

7.2 变量声明和赋值

js语言属于弱类型的语言
java: int x = 10; x= "abc" 报错
js var x = 10; x="abc" 允许因为JS弱化了类型的概念

7.3运算符

+ - * / % > < >= <= = == !=

==和===, ==是先统一类型再比较值,===是先比较类型再比较值
"666"==666  true     "666"===666  false

除法运算,会自动转换整数和小数     
java: int x = 5; int y = 2;  x/y=?  2
js: var x = 5; var y = 2;   x/y=2.5

语句 if else while do while for switch case
和Java大体相同
for循环中的 int i 改成 var i

for(var i=0;i<10;i++){
   console.log(i);
}

7.4 方法声明

java: public void 方法名(参数列表){方法体}
js: function 方法名(参数列表){方法体}
声明常见的四种方法:
1. 无参无返回值
2. 无参有返回值
3. 有参无返回值
4. 有参有返回值
JS中方法声明有三种方式:
1. function 方法名(参数列表){方法体}
2. var 方法名 = function(参数列表){方法体}
3. var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title>Insert title heretitle>
head>
<body>
<input type="button" value="按钮" 
  onclick="fn1()">

<script type="text/javascript">
//无参无返回值
	function fn1(){
	//每行结束的;  可以省略 
		alert("fn1执行!");
	}
//调用 和java一样调用
//	fn1();
//有参无返回值
function fn2(name,age){
	alert(name+":"+age);
}
//调用
// fn2("孙尚香",60);
//无参有返回值
function fn3(){
	return "ABC";
	
}
//调用
//var s = fn3();
//alert(s);
//有参有返回值
function fn4(x,y){
	return x*y;
}
//调用
//var result = fn4(3,8);
//alert(result);
//第二种声明方法的方式:
	var fn5 = function(name,age){
	alert(name+":"+age);
}
//调用 
//	fn5("刘备",20);
//第三种声明方法的方式:
	var fn6 = new Function("name","age"
			,"alert(name+':'+age)");
//	fn6("吕布",18);
	 
script>
body>
html>

7.5 和页面相关的方法

通过id查找页面中的元素

div1

var d = document.getElementById("abc");

获取和修改元素的文本内容

d.innerText    获取
d.innerText = "xxx";  修改

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id = "d1">一个divdiv>

    <script>
        var d = document.getElementById("d1");
        alert(d.innerText);
        d.innerText="haha"; 
        alert(d.innerText);
    script>
body>
html>

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <div id="d1">div1div>

    <script type="text/javascript" >
        function fn1(){
            var d = document.getElementById("d1");
            alert(d.textContent)
            d.innerText = "xxx";
            alert(d.textContent)
        }
    script>

    <input type="button" value="按钮" onclick="fn1()">
body>
html>

获取和修改文本框的文本内容

<input type="text" id="i1">
var i1 = document.getElementById("i1");
i1.value  获取
i1.value="xxx"; 修改

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <input type="text" id="i1">
    <script>
        var i1 = document.getElementById("i1");
        alert(i1.value);
        i1.value="xxx"; 
        alert(i1.value)
    script>
body>
html>

DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Insert title heretitle>
  head>
  <body>
    <input type="text" id="i1" />
    <div id="d1">这是一个divdiv>

    <input type="button" value="获取" onclick="fn1()" />
    <input type="button" value="修改" onclick="fn2()" />
    <input type="button" value="按钮" onclick="fn3()" />

    <script type="text/javascript">
      function fn3() {
        //取出文本框的内容 给到 div显示
        d1.innerText = i1.value;
      }

      function fn1() {
        var d = document.getElementById("d1");
        alert(d.innerText);
      }
      
      function fn2() {
        //获取id为d1的元素
        //var d1 = document.getElementById("d1");
        //修改
        d1.innerText = "xxx";
      }
    script>
  body>
html>

Not a Number: 不是一个数.
isNaN(x) 判断x是否是NaN 返回值true代表是NaN(不是数) 返回值false代表不是NaN(是数)

7.6 JavaScript对象分类

内置对象: 包括number、string、boolean等
浏览器相关对象: BOM Browser Object Model(浏览器对象模型)
页面相关对象: DOM Document Object Model(文档对象模型)

7.6.1 BOM相关对象

window: window里面的属性称为全局属性,方法称为全局方法,调用window里面的属性或方法的时候可以将window省略掉

window中常见属性
1. location位置
  location.href 获取和修改浏览器当前的请求地址
  location.hash 返回URL中的hash（#号后跟零或多个字符）
  location.host 返回服务器名称和端口号
  location.port 返回服务器端口号
  location.pathname 返回URL中的目录和文件名
  location.hostname 返回不带端口号的服务器名称
  location.protocol 返回页面使用的协议（http://或https://)
  location.search 返回URL的查询字符串，字符串以问号开头
2. history历史当前窗口的历史记录
  history.length() 获取历史页面的数量
  history.back() 返回上一页面
  history.forward() 前往下一页面
3. navigator 导航/帮助
  navigator.userAgent 获取浏览器的版本信息
  window.navigator.platform：通过platform可以判断浏览器所在的系统平台类型
  window.navigator.online：判断是否联网
window中常见的方法
1. alert() 弹出提示框
2. confirm() 弹出确认框
3. prompt() 弹出文本输入框
4. parseInt()/parseFloat()
  parseInt(2.38) 2
  parseInt(“20”) 20
  parseInt(“20asdf”) 20
  parseInt(“a20”) NaN
  parseFloat(“3.8”) 3.8
  window.open() ：打开一个新的浏览器窗口，接受四个参数（URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）。
  window.close() ：关闭新打开的窗口（仅限open（）打开的窗口）。
  window.moveTo()：移动当前窗口。
  window.resizeTo()：调整当前窗口的尺寸。
5. isNaN() 判断一个变量是否是数
6. 定时器
  开启:var timer = setInterval(方法,时间间隔);
  停止: clearInterval(timer);

7.6.2操作DOM对象（重要）

DOM Document Object Model(文档对象模型)

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

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找HTML元素
通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
var x = document.getElementById("intro");
通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<p>你好世界!p>
<div id="main">
<p> DOM 是非常有用的。p>
<p>该实例展示了  <b>getElementsByTagNameb> 方法p>
div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
script>

body>
html>

通过类名找到 HTML 元素

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<p class="intro">你好世界!p>
<p>该实例展示了 <b>getElementsByClassNameb> 方法!p>
<script>
x=document.getElementsByClassName("intro");
document.write("文本来自 class 为 intro 段落: " + x[0].innerHTML + "
");
script>
<p><b>注意：b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。p>
body>
html>

JavaScript HTML DOM - 改变 HTML

改变HTML输出流

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<script>
	document.write(Date());
script>

body>
html>

改变HTML内容
document.getElementById(id).innerHTML=新的 HTML

<html>
<body>

<p id="p1">Hello World!p>

<script>
	document.getElementById("p1").innerHTML="新文本!";
script>

body>
html>

DOCTYPE html>
<html>
<body>

<h1 id="header">Old Headerh1>

<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
script>

body>
html>

改变HTML属性
document.getElementById(id).attribute=新属性值

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpgp>

body>
html>

JavaScript HTML DOM - 改变CSS

改变HTML样式

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<p id="p1">Hello World!p>
<p id="p2">Hello World!p>
<script>
	document.getElementById("p2").style.color="blue";
	document.getElementById("p2").style.fontFamily="Arial";
	document.getElementById("p2").style.fontSize="larger";
script>
<p>以上段落通过脚本修改。p>

body>
html>

使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
元素被点击。
页面加载完成。
输入框被修改。

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<h1 id="id1">我的标题 1h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!button>

body>
html>

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

例子1：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!h1>

body>
html>

// TODO 时间有限后续会继续补充

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战（强化速战版-66天）岫珩 Java 后端 java 开发语言学习 Java 时间安排学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记前端缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
12. 什么是事件委托 yqcoder 前端面试-CSS css 面试
总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元
H5UI微信小程序前端框架实战指南 ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Ubuntu安装LAMP L_h1 测试 ubuntu linux
在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript 前端 javascript html5
一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析代码简单说 2025开发必备(限时特惠)架构人工智能 Coze Studio 架构 AI Agent 开发平台全栈 AI 工程化图解架构
CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
时间组件库Day.js那些事前端小白花 javascript 开发语言 ecmascript
一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment
JavaScript正则表达式去除括号但保留内容与去除括号与内容 Selicens javascript 正则表达式
项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
linux网卡显示未知未托管,linux有线网络显示设备未托管
NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
页面开发样式和布局入门：Vite + Vue 3 + Less
页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
推客系统小程序机构版开发上线全攻略（2025年最新版） vx_qutudy 推客小程序推客系统开发推客系统源码
一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W
网络安全第14集不灭锦鲤 web安全安全
前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？阿蒙Armon javascript 开发语言 ecmascript
25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编
C/C++Win32编程基础详解视频下载择善Zach 编程 C++Win32
课题视频：C/C++Win32编程基础详解视频知识：win32窗口的创建 windows事件机制主讲：择善Uncle老师学习交流群：386620625 验证码：625 --
Guava Cache使用笔记 bylijinnan java guava cache
1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。分析过程：既然是temp表空间有问题，那当
Struct在jsp标签不懂事的小屁孩 struct
非UI标签介绍：控制类标签： 1：程序流程控制标签 if elseif else <s:if test="isUsed"> <span class="label label-success">True</span> </
按对象属性排序换个号韩国红果果 JavaScript 对象排序
利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
大数据分析让个性化的客户体验不再遥远蓝儿唯美数据分析
顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
java笔记4 a-john java
操作符 1，使用java操作符操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。笔者因此写上自己的学习心得，希望能给和我一样转变
在springmvc中解决FastJson循环引用的问题 asialee 循环引用 fastjson
我们先来看一个例子： package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
ArrayAdapter和SimpleAdapter技术总结百合不是茶 android SimpleAdapter ArrayAdapter 高级组件基础
ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果 ArrayAdapter;的数据可以是数组或者是队列 // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
九封信 bijian1013 人生励志
有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。 2014，写给人
Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHP Install phpMyAdmin
PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64 一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244 二、安装依赖包 sudo yum install gd
分布式系统理论 bit1129 分布式
FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
ssh2整合(spring+struts2+hibernate)-附源码白糖_ eclipse spring Hibernate mysql 项目管理
最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库项目用eclipse
treetable bug记录 braveCS table
// 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
编程之美-电话号码对应英语单词 bylijinnan java 算法编程之美
import java.util.Arrays; public class NumberToWord { /** * 编程之美电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动 J#
对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析 /* 流程图拓扑结构解析伪码描述算法 public java.util.ArrayList DFS(String graphid, String stepid, int j)
oracle I/O 从属进程 daizj oracle
I/O 从属进程　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
高级排序:希尔排序 dieslrae 希尔排序
public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
初二下学期难记忆单词 dcj3sjt126com english word
kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的 Indian 印度的 workplace 工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
git命令 shuizhaosi888 git
---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
qemu-kvm 网络 nat模式 (四) haoningabc kvm qemu
qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
不要让未来的你，讨厌现在的自己 jingjing0907 生活奋斗工作梦想
故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
枚举类型详解一路欢笑一路走 enum 枚举详解 enumset enumMap
枚举类型详解一.Enum详解 1.1枚举类型的介绍 JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。 Demo:一个最简单的枚举类 public enum ColorType { RED
第11章动画效果（上） onestopweb 动画
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipse jsp卡死 js卡死
使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下： 1、取消验证 windows–>perferences–>validation 把除了manual 下面的全部点掉，build下只留 classpath dependency Valida
MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
每一行命令都是用分号(;)作为结束对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。判断函数里面做了3次bfs，但是每次bfs节点最多

JavaScript笔记