目录
前言
DOM概念
什么是DOM？
DOM基本功能
DOM树
DOM事件流
什么是事件？
事件三要素
事件的执行步骤
什么是事件流？
三个阶段
DOM核心：元素及元素属性的增删改查
元素的增删改查
获取元素
创建及添加元素
移除元素和替换元素
修改元素内容、样式、属性
修改元素内容
修改元素样式
修改元素属性
总结
前言
找老师验收关卡，老师问的问题我都回答不上！但是感觉自己程序也写的出来呀！我cry了，老师都呆了：“这怎么啥都不会呀！学的啥呀！” 。怎么解决学完就忘的问题，当然还是得总结复习呀！毕竟十八岁的美女都是健忘的只会记住最重要的你呀！
DOM概念
什么是DOM？
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM即文档对象模型，是 HTML 的标准对象模型和编程接口，简而言之DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。什么是文档对象？HTML里面的所有元素都是对象。
DOM基本功能
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素
DOM树
节点node：网页中所有内容都是节点（标签、属性、文本、注释等）；
文档节点：页面即文档，整个文档是一个文档节点；
元素节点：每个标签，例如、、等；<br> 属性节点：每个属性，例如<a>的href属性； </p>
<p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/bd8da948b3244d5bb58a54ff4da8e3fc.gif" target="_blank"><img alt="我被老师问哭了！呜呜呜 就是因为我DOM搞不清楚这些东西！_第2张图片" height="266" src="http://img.e-com-net.com/image/info8/bd8da948b3244d5bb58a54ff4da8e3fc.gif" width="486" style="border:1px solid black;"></a></p>
<h1 id="%C2%A0DOM%E4%BA%8B%E4%BB%B6%E6%B5%81"></h1>
<h1 id="DOM%E4%BA%8B%E4%BB%B6%E6%B5%81"><span style="color:#be191c;">DOM事件流</span></h1>
<h3 id="%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%EF%BC%9F"><strong>什么是事件？</strong></h3>
<p> HTML 事件是发生在 HTML 元素上的事情。</p>
<p> 例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件， 想要详细去了解可以点击这里： HTML DOM 事件对象 | 菜鸟教程</p>
<p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/753f6dd564b04c9b9688b5ea807015b0.jpg" target="_blank"><img alt="我被老师问哭了！呜呜呜 就是因为我DOM搞不清楚这些东西！_第3张图片" height="312" src="http://img.e-com-net.com/image/info8/753f6dd564b04c9b9688b5ea807015b0.jpg" width="650" style="border:1px solid black;"></a></p>
<h3 id="%C2%A0%E4%BA%8B%E4%BB%B6%E4%B8%89%E8%A6%81%E7%B4%A0%EF%BC%9A"> <strong>事件三要素</strong></h3>
<ul>
<li>事件源：事件被触发的对象 （是谁干了这件事！）</li>
<li>事件类型：如何触发什么事件 ，例如：鼠标点击、鼠标经过、键盘按下（干了啥！）</li>
<li>事件处理程序：通过函数赋值的方式（怎么干的！）</li>
</ul>
<h3 id="%C2%A0%E4%BA%8B%E4%BB%B6%E7%9A%84%E6%89%A7%E8%A1%8C%E6%AD%A5%E9%AA%A4%EF%BC%9A"> <strong>事件的执行步骤</strong></h3>
<ul>
<li>获取事件源</li>
<li>注册事件（绑定事件）元素可以不用添加事件</li>
<li>添加事件处理程序（采用函数赋值的形式） </li>
</ul>
<h3 id="%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E6%B5%81%EF%BC%9F"><strong>什么是事件流？</strong></h3>
<p> 事件流简单来说就是事件执行的顺序流，描述页面中接收事物的顺序元素节点在特定顺序之间传播的过程即DOM事件流。</p>
<h3 id="%E4%B8%89%E4%B8%AA%E9%98%B6%E6%AE%B5%EF%BC%9A"><strong>三个阶段</strong></h3>
<p>捕获阶段：事件从Document节点<span style="color:#fe2c24;">自上而下从大往小</span>向目标节点传播的阶段；</p>
<p>目标阶段：真正的目标节点正在处理事件的阶段；</p>
<p>冒泡阶段：事件从目标节点<span style="color:#fe2c24;">自下而上从里往外</span>向Document节点传播的阶段。</p>
<p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/1cfd5f4c57664087b4084d2fd2370a50.jpg" target="_blank"><img alt="我被老师问哭了！呜呜呜 就是因为我DOM搞不清楚这些东西！_第4张图片" src="http://img.e-com-net.com/image/info8/1cfd5f4c57664087b4084d2fd2370a50.jpg" width="364" height="224" style="border:1px solid black;"></a></p>
<h1></h1>
<h1 id="DOM%E6%A0%B8%E5%BF%83%EF%BC%9A%E5%85%83%E7%B4%A0%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5"><span style="color:#be191c;">DOM核心：元素及元素属性的增删改查</span></h1>
<h2 id="%E5%85%83%E7%B4%A0%E7%9A%84%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5"><span style="color:#0d0016;">元素的增删改查</span></h2>
<h3 id="%E6%9F%A5%EF%BC%9A%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E3%80%81%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7">获取元素</h3>
<ul>
<li>通过元素 id 来查找元素 document.getElementById(<em>id</em>)</li>
<li>通过标签名来查找元素 document.getElementsByTagName(<em>name</em>)</li>
<li>通过类名来查找元素 document.getElementsByClassName(<em>name</em>)</li>
<li>查找符合条件的第一个元素 document.querySelector(<em>CSS selectors</em>)</li>
<li>查找符合条件的所有元素 document.querySelectorAll(selectors)</li>
<li>查找body标签（特殊） document.body 无括号</li>
<li>查找html标签 （特殊） document.documentElement 无括号</li>
</ul>
<pre><code class="language-html"><body>
<ul class="uu">
<li id="li1">我是小li 1</li>
<li>我是小li 2</li>
<li>我是小li 3</li>
<div>我是div </div>
</ul>
<script>
//通过id名查找元素
var li1 = document.getElementById('li1');
var li11 = document.querySelector('#li1');//ID名加# 只能找到符合条件的第一个
//通过class类名查找
var ul1 = document.getElementsByClassName('uu');
var ul11 = document.querySelector('.uu');//类名加点 只能找到符合条件的第一个
//通过标签名查找
var div1 = document.querySelector('div');//标签名不加 只能找到符合条件的第一个
var div11 = document.getElementsByTagName('div');
//查找所有li
var lis = document.querySelectorAll('li');
//如果查找 ID名加# 类名加点 标签名不加 返回值为符合条件的元素集合
//查找body标签
var body1 = document.body;//无括号
//查找HTML标签
var HTML = document.documentElement;//无括号
</script>
</body></code></pre>
<h3 id="%E5%A2%9E%EF%BC%9A%E5%88%9B%E5%BB%BA%E5%8F%8A%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0">创建及添加元素</h3>
<ul>
<li>创建元素 document.createElement(<em>element</em>)</li>
<li>追加元素 document.appendChild(<em>element</em>)</li>
<li>插入元素 parentnode.insertBefore(<em>newnode</em>,<em>existingnode</em>) </li>
</ul>
<pre><code class="language-html"><body>
<ul class="uu">
<li id="li1">我是小li 1</li>
<li>我是小li 2</li>
<li>我是小li 3</li>
</ul>
<script>
//第一步创建元素
var li4 = document.createElement('li');
var li5 = document.createElement('li');
//第二步给创建的元素赋值（否则为空）
li4.innerHTML = '我是小li 4';
li5.innerHTML = '我是小li 5';
var ul = document.querySelector('ul');//获取ul
//ul里面追加li4到最后一个
ul.appendChild(li4);
//ul插入li5到第一个
ul.insertBefore(li5, ul.children[0]);
</script>
</body></code></pre>
<p></p>
<h3 id="%E5%88%A0%EF%BC%9A%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0">移除元素和替换元素</h3>
<ul>
<li>删除元素 parentnode.removeChild(<em>element</em>)</li>
<li>替换元素 parentnode.replaceChild(new <em>element，old element</em>)</li>
</ul>
<pre><code class="language-html"><body>
<ul class="uu">
<li style="background-color: pink;">我是小li 1</li>
<li style="color: plum;">我是小li 2</li>
<li>我是小li 3</li>
</ul>
<script>
var lis = document.querySelectorAll('li');
var ul = document.querySelector('ul');
//删除第三个li元素
ul.removeChild(lis[2]);
//替换元素
var li = document.createElement('li');
li.innerHTML = '我被替换啦！'
//将第二个元素替换成新的li
ul.replaceChild(li, lis[1]);
</script>
</body></code></pre>
<h3 id="%E2%80%8B%E2%80%8B"></h3>
<h2 id="%E6%94%B9%EF%BC%9A%E4%BF%AE%E6%94%B9%E5%85%83%E7%B4%A0%E5%86%85%E5%AE%B9%E3%80%81%E6%A0%B7%E5%BC%8F%E3%80%81%E5%B1%9E%E6%80%A7">修改元素内容、样式、属性</h2>
<h3 id="%E4%BF%AE%E6%94%B9%E5%85%83%E7%B4%A0%E5%86%85%E5%AE%B9">修改元素内容</h3>
<ul>
<li>修改元素内容 element.innerHTML = <em>new html content</em></li>
</ul>
<h3 id="%E4%BF%AE%E6%94%B9%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F">修改元素样式</h3>
<ul>
<li>改变元素的样式 element.style.property = <em>new style</em></li>
<li>给元素添加新类 element.className = <em>new </em>className <pre><code class="language-html"> <style>
.pink {
background-color: pink;
font-size: 25px;
color: rgb(245, 6, 153);
}
.red {
background-color: red;
font-size: 10px;
color: blue;
}
</style>
<body>
<ul class="uu">
<li class="pink">我是小li 1</li>
<li class="red">我是小li 2</li>
<li>我是小li 3</li>
</ul>
<script>
var lis = document.querySelectorAll('li');
//修改第一个li的背景颜色
lis[0].style.backgroundColor = 'yellow';
//删除第二个li的red类
lis[1].className = '';
//给第三个li增加red类
lis[2].className = 'red';
</script>
</body>
</code></pre> <p></p> </li>
</ul>
<h3 id="%E4%BF%AE%E6%94%B9%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7"><strong>修改元素属性</strong></h3>
<ul>
<li>改变元素的属性 element.setAttribute(<em>attribute</em>, <em>value</em>)</li>
<li>获取元素的属性 element.getAttribute(<em>attributename</em>)</li>
<li>创建元素的属性 document.createAttribute(<em>attribute</em>, <em>value</em>)</li>
<li>删除元素的属性 element.removeAttribute(<em>attributename</em>)</li>
</ul>
<pre><code class="language-html"><style>
.becomered {
color: red;
}
.becomepink {
color: pink;
}
.becomeblue {
color: blue;
}
</style>
<body>
<ul>
<li>我是小li 1</li>
<li>我是小li 2</li>
<li class="becomeblue">我是小li 3</li>
<li class="becomeblue">我是小li 4</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
//创建元素的属性
var a = document.createAttribute('class');
a.value = 'becomered';
//将属性添加到第一个li
lis[0].setAttributeNode(a);
//将属性添加到第二个li
lis[1].setAttribute('class', 'becomepink');
//删除第三个li的属性
lis[2].removeAttribute('class');
//获取第四个li的属性
var b = lis[3].getAttribute('class')
console.log(b);
</script>
</body></code></pre>
<h1 id="%E6%80%BB%E7%BB%93">总结</h1>
<p> 知识越学越多也越来越杂，看什么东西都像“熟悉的陌生人”：我在哪里讲过你！在哪呢？你是做啥的呢？你叫什么名字？却也一个都想不起来，真实的我本人就是这样！而且程序员的代码就是一个字母即可改变整个页面。总觉得多总结可以有效控制发量哈哈哈哈~~~</p>
<h3></h3>
<p></p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1453270193974362112"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(javascript,html,html5,前端)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1943174357668917248.htm"
title="Softhub软件下载站实战开发（四）：代码生成器设计与实现" target="_blank">Softhub软件下载站实战开发（四）：代码生成器设计与实现</a>
<span class="text-muted">叹一曲当时只道是寻常</span>
<a class="tag" taget="_blank" href="/search/softHub/1.htm">softHub</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>文章目录Softhub软件下载站实战开发（四）：代码生成器设计与实现1.前言2.技术选型3.架构概览️3.1架构概览3.2工作流程详解4.核心功能实现⏳4.1配置管理系统4.2数据库表结构解析4.3模板渲染引擎4.4智能类型转换4.5动态文件生成4.6智能覆盖策略4.7运行5.附录ℹ️5.1生成器代码5.2后端模板5.3前端模板Softhub软件下载站实战开发（四）：代码生成器设计与实现1.前言在</div>
</li>
<li><a href="/article/1943174231235817472.htm"
title="Softhub软件下载站实战开发（十四）：软件收藏集设计" target="_blank">Softhub软件下载站实战开发（十四）：软件收藏集设计</a>
<span class="text-muted">叹一曲当时只道是寻常</span>
<a class="tag" taget="_blank" href="/search/softHub/1.htm">softHub</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a>
<div>文章目录Softhub软件下载站实战开发（十四）：软件收藏集设计引言：为什么我们需要收藏集功能？收藏集功能的核心价值1.资源整合与分类管理技术架构设计数据库设计核心接口设计后端实现详解1.收藏集服务层2.列表查询实现3.添加软件实现前端实现详解1.收藏集列表页面2.软件管理弹窗组件3.软件选择与添加逻辑Softhub软件下载站实战开发（十四）：软件收藏集设计前面几篇我们讲了软件管理相关实现，本篇我</div>
</li>
<li><a href="/article/1943173605189808128.htm"
title="使用ENO将您的JSON对象生成HTML显示" target="_blank">使用ENO将您的JSON对象生成HTML显示</a>
<span class="text-muted">土族程序员</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/eno/1.htm">eno</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请</div>
</li>
<li><a href="/article/1943172465710657536.htm"
title="Java程序设计（二十七）：基于SSM框架的OA办公自动化管理平台的设计与实现" target="_blank">Java程序设计（二十七）：基于SSM框架的OA办公自动化管理平台的设计与实现</a>
<span class="text-muted">人工智能_SYBH</span>
<a class="tag" taget="_blank" href="/search/2025%E5%B9%B4java%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">2025年java程序设计</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
<div>1.项目概述办公自动化（OA，OfficeAutomation）管理平台是企业实现内部管理信息化的重要工具。本文提出并实现了一个基于Java的OA办公自动化管理平台。该平台基于SSM架构（Spring+SpringMVC+MyBatis），数据库采用MySQL，并通过HTML、CSS、JavaScript等技术实现用户界面。1.1平台功能简介平台提供了管理员、普通用户和部门三类角色，分别具有不同的</div>
</li>
<li><a href="/article/1943170954217713664.htm"
title="从零开始学前端（HTML篇）：9、嵌入另一个页面的iframe元素" target="_blank">从零开始学前端（HTML篇）：9、嵌入另一个页面的iframe元素</a>
<span class="text-muted"></span>
<div>iframe元素通常用于在页面中嵌入另一个页面可以理解为在自己的页面里弄出一个区域，里面放置另一个页面iframe是可替换元素可替换元素：是指会被替换的元素。例如图片元素img等，书写img时没有在里门添加内容，而img元素把加载出来的图片作为内容。通常是行盒通常显示的内容取决于元素的属性css不能完成控制其中的样式具有行块盒的特点</div>
</li>
<li><a href="/article/1943168057174192128.htm"
title="Softhub软件下载站实战开发（十七）：用户端API设计" target="_blank">Softhub软件下载站实战开发（十七）：用户端API设计</a>
<span class="text-muted"></span>
<div>文章目录Softhub软件下载站实战开发（十七）：用户端API设计前言用户端API概览1.分类管理API2.首页API3.资源集管理API4.软件管理API5.资源下载API⬇️API设计原则Softhub软件下载站实战开发（十七）：用户端API设计前言在Softhub软件下载站的开发过程中，我们终于来到了用户端API的设计阶段！用户端API是整个系统与前端交互的核心桥梁，良好的API设计能极大</div>
</li>
<li><a href="/article/1943161498243231744.htm"
title="JSZip 使用详解" target="_blank">JSZip 使用详解</a>
<span class="text-muted">啃火龙果的兔子</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91DEMO/1.htm">开发DEMO</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>JSZip使用详解JSZip是一个用于创建、读取和编辑ZIP文件的JavaScript库，完全在浏览器中运行，也支持Node.js环境。安装浏览器环境Node.js环境npminstalljszip#或yarnaddjszip基本使用1.创建一个ZIP文件constJSZip=require("jszip");//Node.js中需要constzip=newJSZip();//添加文本文件zip.</div>
</li>
<li><a href="/article/1943161498759131136.htm"
title="Mammoth.js 使用详解" target="_blank">Mammoth.js 使用详解</a>
<span class="text-muted">啃火龙果的兔子</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91DEMO/1.htm">开发DEMO</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>Mammoth.js使用详解Mammoth.js是一个用于将Word文档（.docx）转换为HTML或Markdown的JavaScript库，支持浏览器和Node.js环境。安装浏览器环境Node.js环境npminstallmammoth#或yarnaddmammoth基本使用1.将DOCX转换为HTML//浏览器中使用input[type=file]获取文件document.getEleme</div>
</li>
<li><a href="/article/1943157716562276352.htm"
title="前端自动化测试最佳实践：Jest与Cypress详解" target="_blank">前端自动化测试最佳实践：Jest与Cypress详解</a>
<span class="text-muted"></span>
<div>目录前言自动化测试概述Jest详解Jest基础配置单元测试实践组件测试Mock与Stub快照测试Cypress详解Cypress环境搭建端到端测试实践页面交互测试API模拟测试策略与最佳实践测试金字塔测试覆盖率持续集成常见问题与解决方案总结前言随着前端应用的复杂度不断提高，确保代码质量和稳定性变得越来越重要。自动化测试作为保障代码质量的重要手段，已成为现代前端开发流程中不可或缺的一环。本文将详细介</div>
</li>
<li><a href="/article/1943154776942374912.htm"
title="【前端工程化】前端工作中如何协同管理开发任务？" target="_blank">【前端工程化】前端工作中如何协同管理开发任务？</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在企业级后台系统开发中，任务管理是保障团队协作效率、控制交付质量的核心环节。相比C端产品强调敏捷响应和快速迭代，B端更注重任务拆解的合理性、流程的可控性以及多人协作下的责任清晰。本文主要围绕需求拆解、任务分配、进度跟踪与闭环机制展开，适用于使用Git+PR流程+看板式工具的开发团队。一、任务管理目标职责明确每位成员清楚自己的任务范围与交付标准；避免多人重复处理同一功能模块；可视化进度使用看板或列表</div>
</li>
<li><a href="/article/1943151915655294976.htm"
title="Web 前端性能优化：从代码到加载速度的全面剖析" target="_blank">Web 前端性能优化：从代码到加载速度的全面剖析</a>
<span class="text-muted">码力无边-OEC</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
<div>Web前端性能优化：从代码到加载速度的全面剖析当用户访问你的网站时，如果页面加载时间超过3秒，跳出率会飙升至40%以上。更糟糕的是，移动端用户的耐心只有2秒。这意味着性能优化不仅仅是技术问题，更直接关系到业务成果。经过多年的前端开发实践，我发现很多开发者在性能优化时存在一个误区：过分关注工具和框架的选择，却忽略了最基础但最关键的优化策略。今天我们就来深入剖析前端性能优化的核心要点。性能优化的核心指</div>
</li>
<li><a href="/article/1943147505357221888.htm"
title="python汇率_用Python抓取汇率" target="_blank">python汇率_用Python抓取汇率</a>
<span class="text-muted"></span>
<div>抓取的是中行的数据:网址代码#-*-coding:utf-8-*-importreimporturllib.requesturl='http://www.boc.cn/sourcedb/whpj/index.html'#网址req=urllib.request.Request(url)response=urllib.request.urlopen(req)the_page=response.rea</div>
</li>
<li><a href="/article/1943141206603132928.htm"
title="让你的 AI 更聪明，这 7 个开源 MCP 项目不要错过" target="_blank">让你的 AI 更聪明，这 7 个开源 MCP 项目不要错过</a>
<span class="text-muted">霍格沃兹测试开发学社</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B/1.htm">测试用例</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">驱动开发</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>你还在用AI只是写写文档、改改代码？那你真的小看它了。现在，通过一套叫MCP（ModelControlPlane）的系统，AI不再只是“语言模型”，而是能直接操作网页、调用工具、自动化执行复杂任务的“智能助手”！今天整理了7个超实用的开源MCP项目，让你的AI立刻“开挂”。01｜PagePublisherMCP：HTML页面一键上线还在发愁怎么把AI生成的HTML页部署上线？PagePublish</div>
</li>
<li><a href="/article/1943138179548770304.htm"
title="SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版：整体布局、架构调整（二）" target="_blank">SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版：整体布局、架构调整（二）</a>
<span class="text-muted">喜欢敲代码的程序员</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a>
<div>目录一、前言二、后端调整1.实体类调整2.菜单相关接口3.用户相关接口4.新增工具类5.新增菜单树返回类6.配置类、拦截器三、前端调整1.请求调整2.页面布局、样式调整1.user.vue2.index.vue3.请求拦截四、开发过程中的问题五、附：源码1.源码下载地址六、结语一、前言此文章在上次的基础上进行了部分调整，并根据用户体验（我自己）确认了页面整体布局和数据呈现，暂定就先这样，后续有需要</div>
</li>
<li><a href="/article/1943104275487977472.htm"
title="Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总" target="_blank">Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总</a>
<span class="text-muted">代码背锅人日志</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/iphone/1.htm">iphone</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/webview/1.htm">webview</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a>
<div>在现代软件开发中，调试网络请求是不可或缺的一环。无论是Web前端、移动App，还是后端微服务，只要涉及到API通信，就离不开高效的抓包工具。Fiddler作为全球使用最广泛的抓包调试工具之一，凭借功能强大、灵活扩展和跨平台支持，深受开发者喜爱。而对于中文用户而言，Fiddler中文版的出现，让这款专业工具变得更加亲民、高效和易于掌握。本文将结合开发者日常使用场景，解析Fiddler中文版如何通过本</div>
</li>
<li><a href="/article/1943094313860788224.htm"
title="#TypeScript高频面试题总结（2025版）" target="_blank">#TypeScript高频面试题总结（2025版）</a>
<span class="text-muted">沈大大520</span>
<a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>本文将分享TypeScript高频面试题的一些面试点以及相应的示列作者：沈大大更新时间：2025-03-11前言TypeScript作为JavaScript的超集，已经成为前端开发中不可或缺的技术。本文整理了最常见的TypeScript面试题，从基础到高级，帮助你全面准备技术面试。基础概念篇1.TypeScript与JavaScript的区别是什么？TypeScript是JavaScript的超集</div>
</li>
<li><a href="/article/1943094314531876864.htm"
title="前端开发实践：疑难问题与解决方案总结" target="_blank">前端开发实践：疑难问题与解决方案总结</a>
<span class="text-muted">沈大大520</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%9E%E9%99%85%E5%BC%80%E5%8F%91%E6%89%80%E9%81%87%E8%A7%81%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">实际开发所遇见的问题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>本文将分享前端开发实践：疑难问题与解决方案总结，希望对大家在面试过程中有一定的帮助！作者：沈大大更新时间：2025-03-13前言在前端开发过程中，我们经常会遇到各种各样的技术难题。本文将分享在实际开发中遇到的一些典型问题及其解决方案，希望能给其他开发者一些参考和启发。性能优化类问题1.首屏加载过慢问题描述页面首次加载时间超过3秒用户等待时间过长白屏时间明显问题分析打包体积过大第三方库引入过多未进</div>
</li>
<li><a href="/article/1943079821684830208.htm"
title="springBoot服务之间的转发" target="_blank">springBoot服务之间的转发</a>
<span class="text-muted"></span>
<div>场景：前端请求的服务里没有关于该业务相关的代码。另一台服务有，这时候转发过去再处理明显方便多了。设前端请求的服务为A，实际处理的服务为B在服务A，我们这样写@PostMapping("delHlpxglHlcfjl")publicObjectdelHlpxglHlcfjl(@RequestBodyMapparam){try{Stringurl=baseUrl+"服务B实际接口名称";log.inf</div>
</li>
<li><a href="/article/1943079694941351936.htm"
title="实现el-date-picker带时分秒（附默认时间）" target="_blank">实现el-date-picker带时分秒（附默认时间）</a>
<span class="text-muted"></span>
<div>htmldatatime:'',pickerOptions:{showTime:true,format:'yyyy-MM-ddHH:mm:ss'//可以根据需要设置日期时间的显示格式},带默认时间，需要到一个插件momentdataCreateTime:[moment().subtract(30,'days').format('YYYY-MM-DD'),moment().format('YYYY-</div>
</li>
<li><a href="/article/1943071999479836672.htm"
title="实现顶部固定与平滑滑动二级菜单的网页导航设计" target="_blank">实现顶部固定与平滑滑动二级菜单的网页导航设计</a>
<span class="text-muted"></span>
<div>本文还有配套的精品资源，点击获取简介：现代网页设计中，高效的导航菜单对用户体验至关重要。本设计涵盖固定在顶部的导航栏和二级菜单项的平滑滑动效果。通过CSS实现导航栏的固定定位，而JavaScript则负责二级菜单的平滑过渡动画。包含的文件如HTML结构、JavaScript交互逻辑、CSS样式和可能的图像资源，共同构建了这种流行的导航菜单布局。1.顶部固定、二级栏目之间相互滑动的导航菜单在现代网页</div>
</li>
<li><a href="/article/1943062167636996096.htm"
title="7.3 React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略" target="_blank">7.3 React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略</a>
<span class="text-muted">少林码僧</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a>
<div>React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略-GitHubSentinelAgent用户界面原型设计与实现关键词：前端框架选型、React原型设计、API集成策略、CLI开发、组件化测试1.1用户界面功能规划通过ChatGPT交互式规划核心功能模块：</div>
</li>
<li><a href="/article/1943058004056272896.htm"
title="vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案" target="_blank">vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案</a>
<span class="text-muted"></span>
<div>vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案，中后台前端解决方案的探索与实践。框架示例图：在线预览：https://element-plus-admin.cn摘要：本文主要介绍了vue-element-plus-admin，一个基于element-plus的免费开源中后台前端模版。文章首先介绍了该模版的开发背景和技术栈，然后</div>
</li>
<li><a href="/article/1943054973642272768.htm"
title="爬虫-数据解析" target="_blank">爬虫-数据解析</a>
<span class="text-muted">打酱油的；</span>
<a class="tag" taget="_blank" href="/search/python%E8%87%AA%E5%8A%A8%E5%8C%96%2B%E7%88%AC%E8%99%AB/1.htm">python自动化+爬虫</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
<div>1.解析概述特性re(正则表达式)bs4(BeautifulSoup)xpath(lxml)pyquery本质文本模式匹配HTML/XML解析器(DOM树操作)XML路径语言(节点导航)jQuery式CSS选择器(封装lxml)学习曲线陡峭中等中等简单(熟悉jQuery/CSS)灵活性极高(处理任意文本)高(容错好，DOM操作)高(路径、轴、谓词)高(jQuery语法)可读性差(模式复杂时难懂)好</div>
</li>
<li><a href="/article/1943051068032217088.htm"
title="Vue 2 和 Vue 3 区别" target="_blank">Vue 2 和 Vue 3 区别</a>
<span class="text-muted">哈哈123453</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>1.响应式系统原理Vue2：利用Object.defineProperty()实现属性拦截。存在局限性，无法自动监测对象属性增减，需用Vue.set/delete；数组变异方法要重写；深层对象递归转换性能差。Vue3：采用ES6Proxy代理对象，能直接拦截属性访问修改。无需特殊API就能监测属性变化；数组操作拦截更自然；深层响应式惰性处理，提升性能。javascript//Vue3响应式创建im</div>
</li>
<li><a href="/article/1943050060019331072.htm"
title="网络安全之如何设置云服务器禁止 ping？两种设置方法教你搞定 云服务器无法ping通、ping不通云主机、Linux禁止ping、ICMP屏蔽、网络安全最佳实践 sysctl.conf配置" target="_blank">网络安全之如何设置云服务器禁止 ping？两种设置方法教你搞定 云服务器无法ping通、ping不通云主机、Linux禁止ping、ICMP屏蔽、网络安全最佳实践 sysctl.conf配置</a>
<span class="text-muted">代码简单说</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4%E5%AE%9D%E5%85%B8%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0/1.htm">运维宝典限时特惠</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%A6%81%E6%AD%A2ping/1.htm">服务器禁止ping</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%A6%81%E6%AD%A2ping/1.htm">云服务器禁止ping</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%A6%81%E6%AD%A2ping%E7%9A%84%E6%96%B9%E6%B3%95/1.htm">服务器禁止ping的方法</a>
<div>云主机如何设置云服务器禁止ping？两种设置方法教你搞定标签：云服务器无法ping通、ping不通云主机、Linux禁止ping、ICMP屏蔽、网络安全最佳实践、sysctl.conf配置前几天上线了一个测试服务，总有安全团队扫端口，还时不时用ping探测存活，我开始思考：云服务器到底要不要禁ping？一、禁ping的好处和坏处作为一名前端转全栈开发的程序员，我越来越觉得网络安全不能忽视。“pin</div>
</li>
<li><a href="/article/1943036074615959552.htm"
title="浏览器渲染引擎和JS引擎分类" target="_blank">浏览器渲染引擎和JS引擎分类</a>
<span class="text-muted"></span>
<div>渲染引擎：Firefox：Gecko引擎Safari：WebKit引擎Chrome：Blink引擎IE:Trident引擎Edge:EdgeHTML引擎JS引擎：SpiderMonkey(Firefox)，火狐Nitro/JavaScriptCore(Safari)，苹果IOS浏览器V8(Chrome,Chromium)，Node.js也是V8Chakra(MicrosoftInternetExp</div>
</li>
<li><a href="/article/1943033300671066112.htm"
title="Vue入门" target="_blank">Vue入门</a>
<span class="text-muted">LUO-CHEn</span>
<a class="tag" taget="_blank" href="/search/Java%E6%B8%A9%E9%A6%A8Talk/1.htm">Java温馨Talk</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>vue1、vue概述（1）概念vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。随着项目业务场景的复杂,传统模式(html+jquery)已无法满足需求,就出现了Angular/React/Vue等框架（2）特点1、Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。2、Vue.JS是优秀的前端Jav</div>
</li>
<li><a href="/article/1943033047586762752.htm"
title="AJAX和CORS通信" target="_blank">AJAX和CORS通信</a>
<span class="text-muted">Sᴀғᴇᴛʏ.944</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>AJAX浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年GoogleMap发布，才引起广泛重视。2005年2月，AJ</div>
</li>
<li><a href="/article/1943025104409653248.htm"
title="Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio" target="_blank">Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio</a>
<span class="text-muted">鱼虾一整碗•</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>一、前端1.计算文件的md5值前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange方法，可以在这里进行文件相关的操作。//处理文件上传consthandleChange=async(uploadFile)=>{//文件名字letfileName=uploadFile.name//文件的大小constfileSize=uploadFile.siz</div>
</li>
<li><a href="/article/1943021197591638016.htm"
title="【python实用小脚本-131】Python 实现 HTML 到 PDF 转换：解决文档处理痛点的高效工具" target="_blank">【python实用小脚本-131】Python 实现 HTML 到 PDF 转换：解决文档处理痛点的高效工具</a>
<span class="text-muted">Kyln.Wu</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a>
<div>引言在当今数字化办公环境中，文档格式的转换需求日益频繁。假设你是一位市场营销人员，需要将公司网站的产品介绍页面（HTML格式）转换为PDF文档，以便用于线下宣传。然而，手动复制粘贴内容并调整格式不仅耗时，还容易出错。这种情况下，一个能够自动将HTML转换为PDF的工具显得尤为重要。本文将介绍一个基于Python的简单工具——htmtopdf.py，它能够高效地解决这一痛点。代码解析说明htmtop</div>
</li>
<li><a href="/article/34.htm"
title="Java 并发包之线程池和原子计数" target="_blank">Java 并发包之线程池和原子计数</a>
<span class="text-muted">lijingyao8206</span>
<a class="tag" taget="_blank" href="/search/Java%E8%AE%A1%E6%95%B0/1.htm">Java计数</a><a class="tag" taget="_blank" href="/search/ThreadPool/1.htm">ThreadPool</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91%E5%8C%85/1.htm">并发包</a><a class="tag" taget="_blank" href="/search/java%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">java线程池</a>
<div>对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。
这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C</div>
</li>
<li><a href="/article/161.htm"
title="java编程思想 抽象类和接口" target="_blank">java编程思想 抽象类和接口</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">抽象类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a>
<div>接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持
1 ,抽象类 : 如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)
抽象方法 : 在方法中仅有声明而没有方法体
package com.wj.Interface;
</div>
</li>
<li><a href="/article/288.htm"
title="[房地产与大数据]房地产数据挖掘系统" target="_blank">[房地产与大数据]房地产数据挖掘系统</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a>
<div>
随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...
所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产
&nb</div>
</li>
<li><a href="/article/415.htm"
title="数组队列总结" target="_blank">数组队列总结</a>
<span class="text-muted">沐刃青蛟</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84%E9%98%9F%E5%88%97/1.htm">数组队列</a>
<div>
数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。
以下是数组队列的功能实现代码：
import List.Student;
public class</div>
</li>
<li><a href="/article/542.htm"
title="Oracle存储过程无法编译的解决方法" target="_blank">Oracle存储过程无法编译的解决方法</a>
<span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B%E3%80%80/1.htm">存储过程 </a>
<div>今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。
1. 查看无效对象
XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN</div>
</li>
<li><a href="/article/669.htm"
title="重装系统之后oracle恢复" target="_blank">重装系统之后oracle恢复</a>
<span class="text-muted">文强chu</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>前几天正在使用电脑，没有暂停oracle的各种服务。
突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。
无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。
晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候，
直接把我的c盘给格式化了 并且清理了注册表，再装系统。
然后的结果就是我的oracl</div>
</li>
<li><a href="/article/796.htm"
title="python学习二（ 一些基础语法）" target="_blank">python学习二（ 一些基础语法）</a>
<span class="text-muted">小桔子</span>
<a class="tag" taget="_blank" href="/search/pthon/1.htm">pthon</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/1.htm">基础语法</a>
<div>紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别：
1.ptyhon的源文件以UTF-8编码格式
2.
/ 除 结果浮点型
// 除 结果整形
% 除 取余数
* 乘
** 乘方 eg 5**2 结果是5的2次方25
_&</div>
</li>
<li><a href="/article/923.htm"
title="svn 常用命令" target="_blank">svn 常用命令</a>
<span class="text-muted">aichenglong</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80/1.htm">版本回退</a>
<div>1 svn回退版本
1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version
两者的区别:
revert this version:表示回退到当前版本(该版本后的版本全部作废)
revert chanages from this versio</div>
</li>
<li><a href="/article/1050.htm"
title="某小公司面试归来" target="_blank">某小公司面试归来</a>
<span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。
老拿这些对付毕业生的东东来吓唬我。。
面试官很刁难，问了几个问题，记录下；
1，包的范围。。。public,private,protect. --悲剧了
2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。
3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊）
4，stru</div>
</li>
<li><a href="/article/1177.htm"
title="动态数组的存储速度比较 集合框架" target="_blank">动态数组的存储速度比较 集合框架</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6/1.htm">集合框架</a>
<div>集合框架：
自定义数据结构(增删改查等)
package 数组;
/**
* 创建动态数组
* @author 百合
*
*/
public class ArrayDemo{
//定义一个数组来存放数据
String[] src = new String[0];
/**
* 增加元素加入容器
* @param s要加入容器</div>
</li>
<li><a href="/article/1304.htm"
title="用JS实现一个JS对象，对象里有两个属性一个方法" target="_blank">用JS实现一个JS对象，对象里有两个属性一个方法</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/js%E5%AF%B9%E8%B1%A1/1.htm">js对象</a>
<div><html>
<head>
</head>
<body>
用js代码实现一个js对象，对象里有两个属性，一个方法
</body>
<script>
var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
</div>
</li>
<li><a href="/article/1431.htm"
title="探索JUnit4扩展：使用Rule" target="_blank">探索JUnit4扩展：使用Rule</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a>
<div> 在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。
1. Rule
&n</div>
</li>
<li><a href="/article/1558.htm"
title="[Gson一]非泛型POJO对象的反序列化" target="_blank">[Gson一]非泛型POJO对象的反序列化</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a>
<div>当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种：
1. POJO对象不包含任何泛型的字段
2. POJO对象包含泛型字段，例如泛型集合或者泛型类
Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO
</div>
</li>
<li><a href="/article/1685.htm"
title="【Kakfa五】Kafka Producer和Consumer基本使用" target="_blank">【Kakfa五】Kafka Producer和Consumer基本使用</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
<div>0.Kafka服务器的配置
一个Broker，
一个Topic
Topic中只有一个Partition（） 1. Producer：
package kafka.examples.producers;
import kafka.producer.KeyedMessage;
import kafka.javaapi.producer.Producer;
impor</div>
</li>
<li><a href="/article/1812.htm"
title="lsyncd实时同步搭建指南——取代rsync+inotify" target="_blank">lsyncd实时同步搭建指南——取代rsync+inotify</a>
<span class="text-muted">ronin47</span>
<div>1. 几大实时同步工具比较 1.1 inotify + rsync
最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify</div>
</li>
<li><a href="/article/1939.htm"
title="java-9. 判断整数序列是不是二元查找树的后序遍历结果" target="_blank">java-9. 判断整数序列是不是二元查找树的后序遍历结果</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class IsBinTreePostTraverse{
static boolean isBSTPostOrder(int[] a){
if(a==null){
return false;
}
/*1.只有一个结点时，肯定是查找树
*2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是</div>
</li>
<li><a href="/article/2066.htm"
title="MySQL的sum函数返回的类型" target="_blank">MySQL的sum函数返回的类型</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
<div>今天项目切换数据库时，出错
访问数据库的代码大概是这样：
String sql = "select sum(number) as sumNumberOfOneDay from tableName";
List<Map> rows = getJdbcTemplate().queryForList(sql);
for (Map row : rows</div>
</li>
<li><a href="/article/2193.htm"
title="java设计模式之单例模式" target="_blank">java设计模式之单例模式</a>
<span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/java%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">java设计模式</a>
<div>
在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的：
作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构
单例模式的特点：
单例类只能有一个实例。
单例类必须自己创建自己的唯一实例。
单例类必须给所有其他对象提供这一实例。
饿汉式单例类
publ</div>
</li>
<li><a href="/article/2320.htm"
title="javascript取当月最后一天" target="_blank">javascript取当月最后一天</a>
<span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>
<!--javascript取当月最后一天-->
<script language=javascript>
var current = new Date();
var year = current.getYear();
var month = current.getMonth();
showMonthLastDay(year, mont</div>
</li>
<li><a href="/article/2447.htm"
title="linux tune2fs命令详解" target="_blank">linux tune2fs命令详解</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/tune2fs/1.htm">tune2fs</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E7%B3%BB%E7%BB%9F%E6%96%87%E4%BB%B6%E5%9D%97%E4%BF%A1%E6%81%AF/1.htm">查看系统文件块信息</a>
<div>一.简介：
tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。
二.用法：
Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou</div>
</li>
<li><a href="/article/2574.htm"
title="做有中国特色的程序员" target="_blank">做有中国特色的程序员</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>
从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有</div>
</li>
<li><a href="/article/2701.htm"
title="Android：TextView属性大全" target="_blank">Android：TextView属性大全</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/textview/1.htm">textview</a>
<div>android:autoLink 设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all) android:autoText 如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输</div>
</li>
<li><a href="/article/2828.htm"
title="tomcat虚拟目录安装及其配置" target="_blank">tomcat虚拟目录安装及其配置</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/tomcat%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E/1.htm">tomcat配置说明</a><a class="tag" taget="_blank" href="/search/tomca%E9%83%A8%E7%BD%B2web%E5%BA%94%E7%94%A8/1.htm">tomca部署web应用</a><a class="tag" taget="_blank" href="/search/tomcat%E8%99%9A%E6%8B%9F%E7%9B%AE%E5%BD%95%E5%AE%89%E8%A3%85/1.htm">tomcat虚拟目录安装</a>
<div>转载请出自出处：http://eksliang.iteye.com/blog/2097184
1.-------------------------------------------tomcat 目录结构
config：存放tomcat的配置文件
temp ：存放tomcat跑起来后存放临时文件用的
work ： 当第一次访问应用中的jsp</div>
</li>
<li><a href="/article/2955.htm"
title="浅谈：APP有哪些常被黑客利用的安全漏洞" target="_blank">浅谈：APP有哪些常被黑客利用的安全漏洞</a>
<span class="text-muted">gg163</span>
<a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a>
<div>首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。
1. 应用反编译漏洞：APK 包非常容易被反编译成可读</div>
</li>
<li><a href="/article/3082.htm"
title="C#根据网址生成静态页面" target="_blank">C#根据网址生成静态页面</a>
<span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a>
<div>HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：
bool CreateHtmlFile(string url, string path)
{
//http://keleyi.com/a/bjae/3d10wfax.htm
stri</div>
</li>
<li><a href="/article/3209.htm"
title="SVG 教程 （一）" target="_blank">SVG 教程 （一）</a>
<span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
<div>SVG 简介
SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识：
继续学习之前，你应该对以下内容有基本的了解：
HTML
XML 基础
如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量</div>
</li>
<li><a href="/article/3336.htm"
title="一个简单的java栈" target="_blank">一个简单的java栈</a>
<span class="text-muted">luyulong</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%A0%88/1.htm">栈</a>
<div>
public class MyStack {
private long[] arr;
private int top;
public MyStack() {
arr = new long[10];
top = -1;
}
public MyStack(int maxsize) {
arr = new long[maxsize];
top </div>
</li>
<li><a href="/article/3463.htm"
title="基础数据结构和算法八：Binary search" target="_blank">基础数据结构和算法八：Binary search</a>
<span class="text-muted">sunwinner</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Binary+search/1.htm">Binary search</a>
<div>Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori</div>
</li>
<li><a href="/article/3590.htm"
title="12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！" target="_blank">12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！</a>
<span class="text-muted">刘星宇</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！
1.gets()函数
问：请找出下面代码里的问题：
#include<stdio.h>
int main(void)
{
char buff[10];
memset(buff,0,sizeof(buff));
</div>
</li>
<li><a href="/article/3717.htm"
title="ITeye 7月技术图书有奖试读获奖名单公布" target="_blank">ITeye 7月技术图书有奖试读获奖名单公布</a>
<span class="text-muted">ITeye管理员</span>
<a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a><a class="tag" taget="_blank" href="/search/%E8%AF%95%E8%AF%BB/1.htm">试读</a>
<div>ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。
7月试读活动回顾：
http://webmaster.iteye.com/blog/2092746
本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：
《Java性能优化权威指南》
</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>
