不睡觉的怪叔叔

DOM总结一：HTML相关的DOM1级总结

一、DOM概念

二、节点层次

三、Node类型

四、Document类型

五、Element类型

六、Text类型

七、Comment类型

八、CDATASection类型

九、DocumentType类型

十、DocumentFragment类型

十一、Attr类型

十二、表格DOM

十三、总结中的小结

一、DOM概念

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM将HTML页面描绘成一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

1998年DOM1级规范称为W3C的推荐标准。DOM1级为基本文档结构及查询提供了接口，DOM1级的目标主要是映射文档的结构。

IE、Firefox、Safari、Chrome和Opera都非常完善地实现了DOM。

二、节点层次

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

节点分为几种不同的类型，每种类型分别标识文档中不同的信息及标记。

每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。

所有页面标记表现为一个以特定节点为根节点的树形结构，文档节点就是每个文档的根节点。

文档节点只有一个子节点，即元素，称为文档元素，文档元素是文档的最外层元素。

三、Node类型

DOM1级定义了一个Node接口，该接口在JavaScript中是作为Node类型实现的。

JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

1、属性

nodeType —— 用于表明节点的类型

节点类型由Node类型中定义的下列12个数值常量来表示：

Node.ELEMENT_NODE(1)

Node.ATTRIBUTE_NODE(2)

Node.TEXT_NODE(3)

Node.CDATA_SELECTION_NODE(4)

Node.ENTITY_REFERENCE_NODE(5)

Node.PROCESSING_INSTRUCTION_NODE(7)

Node.COMMENT_NODE(8)

Node.DOCUMENT_NODE(9)

Node.DOCUMENT_TYPE_NODE(10)

Node.DOCUMENT_FRAGMENT_NODE(11)

Node.NOTATION_NODE(12)

nodeName —— 节点名
nodeValue —— 节点值
childNodes —— 返回保存子节点的NodeList对象
parentNode —— 指向父节点
firstChild —— 指向第一个子节点
lastChild —— 指向最后一个子节点
previousSibling —— 指向前一个兄弟节点
nextSibling —— 指向后一个兄弟节点
ownerDocument —— 指向文档节点

2、方法

hasChildNodes() —— 是否包含子节点
appendChild(newNode) —— 在子节点末尾添加新节点
insertBefore(newNode, someNode) —— 在某个子节点前添加一个新的子节点
replaceChild(newNode, oldNode) —— 使用新节点替换旧节点
removeChild(someNode) —— 删除某个节点
cloneNode() | cloneNode(true) —— 浅复制，即只复制节点本身 | 深复制，即复制节点及其整个子节点树
normalize() —— 删除空文本节点或者合并相邻的文本节点

四、Document类型

JavaScript通过Document类型表示文档。

在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。

而且，document对象是window对象的一个属性

1、Document节点的特征

nodeType的值是9
nodeName的值为"#document"
nodeValue的值为null
parentNode的值为null
ownerDocument的值为null

2、属性

documentElement —— 指向元素，即文档元素
body —— 指向元素
doctype —— 指向文档类型标签
title —— 包含元素中的文本</li> <li>URL —— 包含页面完整的URL</li> <li>domain —— 包含页面的域名</li> <li>referrer —— 保存着链接到当前页面的那个页面的URL</li> <li>anchors —— 包含文档中所有带有name特性的<a>元素</li> <li>forms —— 包含文档中所有的<form>元素</li> <li>images —— 包含文档中所有的<img>元素</li> <li>links —— 包含文档中所有带href特性的<a>元素</li> </ul> <p><strong>3、方法</strong></p> <ul> <li>getElementById() —— 使用元素id获取该元素对象</li> <li>getElementsByTagName() —— 返回对应标签名元素组成的HTMLCollection对象</li> <li>getElementsByName() —— 返回对应name特性的元素组成的NodeList对象</li> <li>implementation.hasFeature(功能，版本号） —— 监测浏览器支持的功能和版本</li> <li>write() | writeln() —— 写入文档</li> <li>open() —— 打开网页的输出流</li> <li>close() —— 关闭网页的输出流</li> <li>createElement() —— 创建元素节点</li> <li>createTextNode() —— 创建文本节点</li> <li>createComment() —— 创建注释节点</li> <li>createCDataSection() —— 创建CDATASection节点</li> <li>createDocumentFragment() —— 创建文档片段节点</li> <li>createAttribute() —— 创建特性节点</li> </ul> <h3 id="%E4%BA%94%E3%80%81Element%E7%B1%BB%E5%9E%8B"><strong>五、Element类型</strong></h3> <p> 所有HTML元素都由<strong><span style="color:#f33b45;">HTMLElement</span></strong>类型表示，不是直接通过这个类型，也是通过它的子类型来表示。</p> <p> HTML类型直接继承自<strong><span style="color:#f33b45;">Element</span></strong>并添加了一些属性。</p> <p> Element类型提供了对元素标签名、子节点及特性的访问。</p> <p><strong>1、ELEMENT节点的特征</strong></p> <ul> <li>nodeType的值为1</li> <li>nodeName的值为元素的标签名</li> <li>nodeValue的值为null</li> <li>parentNode可能是Document或Element</li> </ul> <p><strong>2、属性</strong></p> <p><strong> </strong>只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。</p> <p> style特性通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过style属性来访问它则会返回一个对象。</p> <p> onclick特性通过getAttribute()访问时，返回的onclick特性值总包含的是相应代码的字符串，而通过onclick属性来访问它则返回相应的函数</p> <ul> <li>id —— 元素在文档中的唯一标识符</li> <li>title —— 有关元素的附加说明信息，一般通过工具提示条显示出来</li> <li>className —— 与元素的class特性对应，即为元素指定的css类</li> <li>style —— 与元素的style特性对应</li> <li>onclick —— 与元素的onclick特性对应</li> <li>attributes ‘—— 保存元素的各个特性</li> </ul> <p> attributes属性的各个方法：</p> <p> getNamedItem(name) —— 返回nodeName属性等于name的节点</p> <p> removeNamedItem(name) —— 从列表移除nodeName属性等于name的节点</p> <p> setNamedItem(node) —— 向列表中添加节点，以节点的nodeName属性为索引</p> <p> item(pos) —— 返回位于数字pos位置处的节点</p> <p><strong>3、方法</strong></p> <ul> <li>setAttribute(attr, value) —— 设置元素的特性</li> <li>getAttribute(att) —— 获取元素的特性</li> <li>removeAttribute(attr) —— 移除元素的特性 </li> <li>setAttributeNode() —— 添加特性节点</li> <li>getAttributeNode() —— 获取特性节点</li> </ul> <h3 id="%E5%85%AD%E3%80%81Text%E7%B1%BB%E5%9E%8B"><strong>六、Text类型</strong></h3> <p> 文本节点由<span style="color:#f33b45;"><strong>Text类型</strong></span>表示，包含的是可以按照字面解释的纯文本内容。</p> <p> 纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。</p> <p><strong>1、Text节点的特征</strong></p> <ul> <li>nodeType的值为3</li> <li>nodeName的值为"#text"</li> <li>nodeValue的值为节点所包含的文本</li> <li>parentNode是一个Element</li> <li>不支持（没有）子节点</li> </ul> <p><strong>2、属性</strong></p> <ul> <li>data —— 可以通过nodeValue属性或data属性访问文本节点中包含的文本</li> <li>length —— 文本节点中字符的数目</li> </ul> <p><strong>3、方法</strong></p> <ul> <li>appendData(text) —— 将text添加到节点的末尾</li> <li>deleteData(offset，count) —— 从offset指定的位置开始删除count个字符</li> <li>insertData(offset，text) —— 在offset指定的位置插入text</li> <li>replaceData(offset, count, text) —— 用text替换从offset指定的位置开始到offset+count为止处的文本</li> <li>splitText(offset) —— 从offset指定的位置将当前文本节点分成两个文本节点</li> <li>substringData(offset, count) —— 提取从offset指定的位置开始到offset+count为止处的字符串</li> </ul> <h3 id="%E4%B8%83%E3%80%81Comment%E7%B1%BB%E5%9E%8B"><strong>七、Comment类型</strong></h3> <p> 注释在DOM中是通过Comment类型来表示的。</p> <p><strong>1、Comment节点的特征</strong></p> <ul> <li>nodeType的值为8</li> <li>nodeName的值为"#comment"</li> <li>nodeValue的值是注释的内容</li> <li>parentNode可能是Document或Element</li> <li>不支持（没有）子节点</li> </ul> <p><strong>2、属性和方法</strong></p> <p> Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。</p> <p> 与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。</p> <h3 id="%E5%85%AB%E3%80%81CDATASection%E7%B1%BB%E5%9E%8B"><strong>八、CDATASection类型</strong></h3> <p> CDATASection类型<u>只针对基于XML</u>的文档，表示的是CDATA区域。</p> <p><strong>1、CDATASection节点的特征</strong></p> <ul> <li>nodeType的值为4</li> <li>nodeName的值为"#cdata-section"</li> <li>nodeValue的值是CDATA区域中的内容</li> <li>parentNode可能是Document或Element</li> <li>不支持（没有）子节点</li> </ul> <p><strong>2、属性和方法</strong></p> <p> CDATASection类型继承自Text类型，因此拥有除splitText()之外的所有字符串操作方法。</p> <h3 id="%E4%B9%9D%E3%80%81DocumentType%E7%B1%BB%E5%9E%8B"><strong>九、DocumentType类型</strong></h3> <p> DocumentType包含着与文档的doctype有关的所有信息</p> <p><strong>1、DocumentType节点的特征</strong></p> <ul> <li>nodeType的值为10</li> <li>nodeName的值为doctype的名称</li> <li>nodeValue的值为null</li> <li>parentNode是Document</li> <li>不支持（没有）子节点</li> </ul> <p><strong>2、属性</strong></p> <ul> <li>name —— 表示文档类型的名称</li> </ul> <h3 id="%E5%8D%81%E3%80%81DocumentFragment%E7%B1%BB%E5%9E%8B"><strong>十、DocumentFragment类型</strong></h3> <p> DOM规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。</p> <p> 可以将文档片段作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。</p> <p><strong>1、DocumentFragment节点的特征</strong></p> <ul> <li>nodeType的值为11</li> <li>nodeName的值为"#document-fragment"</li> <li>nodeValue的值为null</li> <li>parentNode的值为null</li> <li>子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference</li> </ul> <h3 id="%E5%8D%81%E4%B8%80%E3%80%81Attr%E7%B1%BB%E5%9E%8B"><strong>十一、Attr类型</strong></h3> <p> 元素的特性在DOM中以<span style="color:#f33b45;"><strong>Attr类型</strong></span>来表示。</p> <p> 尽管Attr节点也是节点，但它们却不被认为是DOM文档树的一部分。</p> <p><strong>1、Attr节点的特征</strong></p> <ul> <li>nodeType的值为2</li> <li>nodeName的值是特性的名称</li> <li>nodeValue的值是特性的值</li> <li>parentNode的值为null</li> <li>在HTML中不支持（没有）子节点</li> </ul> <p><strong>2、属性</strong></p> <ul> <li>name —— 特性名称</li> <li>value —— 特性的值</li> <li>specified —— 用于区别特性是在代码中指定的，还是默认的</li> </ul> <h3 id="%E5%8D%81%E4%BA%8C%E3%80%81%E8%A1%A8%E6%A0%BCDOM"><strong>十二、表格DOM</strong></h3> <p><strong>1、<table>元素的属性和方法</strong></p> <ul> <li>caption —— 保存着对<caption>元素（如果有）的指针</li> <li>tBodies —— 是一个<tbody>元素的HTMLCollection</li> <li>tFoot —— 保存着对<tfoot>元素（如果有）的指针</li> <li>tHead —— 保存着对<thead>元素（如果有）的指针</li> <li>rows —— 是一个表格中所有行的HTMLCollection</li> <li>createTHead() —— 创建<thead>元素，将其放到表格中，返回引用</li> <li>createTFoot() —— 创建<tfoot>元素，将其放到表格中，返回引用</li> <li>createCaption() —— 创建<caption>元素，将其放到表格中，返回引用</li> <li>deleteTHead() —— 删除<thead>元素</li> <li>deleteTFoot() —— 删除<tfoot>元素</li> <li>deleteCaption() —— 删除<caption>元素</li> <li>deleteRow(pos) —— 删除指定位置的行</li> <li>insertRow(pos) —— 向row集合中的指定位置插入一行</li> </ul> <p><strong>2、<tbody>元素的属性和方法</strong></p> <ul> <li>rows —— 保存着<tbody>元素中行的HTMLCollection</li> <li>deleteRow(pos) —— 删除指定位置的行</li> <li>insertRow(pos) —— 向rows集合中的指定位置插入一行，返回对新插入行的引用</li> </ul> <p><strong>3、<tr>元素的属性和方法</strong></p> <ul> <li>cells —— 保存着<tr>元素中单元格的HTMLCollection</li> <li>deleteCell(pos) —— 删除指定位置的单元格</li> <li>insertCell(pos) —— 向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用</li> </ul> <h3 id="%E5%8D%81%E4%B8%89%E3%80%81%E6%80%BB%E7%BB%93%E4%B8%AD%E7%9A%84%E5%B0%8F%E7%BB%93"><strong>十三、总结中的小结</strong></h3> <p> 最基本的节点类型是<span style="color:#f33b45;"><strong>Node</strong></span>，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。</p> <p> <strong><span style="color:#f33b45;">Document</span></strong>类型表示整个文档，是一组分层节点的根节点。在JavaScript中，document对象是Document的一个实例。使用document，有很多中方式可以查询和取得节点。</p> <p> <strong><span style="color:#f33b45;">Element</span></strong>节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性。</p> <p> 另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA区域和文档片段。</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1288486941741883392"></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">  <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>  <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>  <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)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1891105387818577920.htm" title="【JavaScript】异步编程汇总" target="_blank">【JavaScript】异步编程汇总</a> <span class="text-muted">秀秀_heo</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a> <div>异步编程解决方案：回调函数PromiseGeneratorawait/async回调函数回调函数是早期处理异步编程的主要方式，虽然它本身存在很多的缺陷，比如那个时候对于复杂的异步处理常常会出现回调地狱。但是因为JavaScript中当时并没有很好的API来帮助我们以比较优雅的方式编写代码，所以依然应用非常广泛。functionfetchData(url,callback){setTimeout((</div> </li> <li><a href="/article/1891089498368962560.htm" title="使用 MySQL 从 JSON 字符串提取数据" target="_blank">使用 MySQL 从 JSON 字符串提取数据</a> <span class="text-muted">m0_66323401</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>使用MySQL从JSON字符串提取数据在现代数据库管理中，JSON格式因其灵活性而广泛使用。然而，当数据存储在JSON中时，我们经常需要将其转换为更易于处理的格式。本篇文章将通过一个具体的SQL查询示例，展示如何从存储在MySQL中的JSON字符串提取数据并重新格式化。1.背景知识JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器</div> </li> <li><a href="/article/1891077022319439872.htm" title="Vue3 + Moveable + Selecto 拖拽组件 Demo" target="_blank">Vue3 + Moveable + Selecto 拖拽组件 Demo</a> <span class="text-muted">巧克力力克巧！</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%A7%AF%E7%B4%AF/1.htm">学习积累</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、项目概述本demo旨在通过Vue3、Moveable和Selecto三个库的结合，实现一个基本的拖拽组件功能。通过Selecto实现元素的选择功能，通过Moveable控制选中元素的大小和位置。同时，封装了hooks以实现元素与数据之间的绑定，使得操作更加灵活和可维护。二、技术栈Vue3：用于构建用户界面的渐进式JavaScript框架。Moveable：一个可以拖拽、缩放、旋转DOM元素的库</div> </li> <li><a href="/article/1891065925759725568.htm" title="学习使用Elm架构的JavaScript项目" target="_blank">学习使用Elm架构的JavaScript项目</a> <span class="text-muted">陈昊和</span> <div>学习使用Elm架构的JavaScript项目learn-elm-architecture-in-javascript:unicorn:LearnhowtobuildwebappsusingtheElmArchitecturein"vanilla"JavaScript(step-by-stepTDDtutorial)!项目地址:https://gitcode.com/gh_mirrors/le/le</div> </li> <li><a href="/article/1891065926242070528.htm" title="学习Elm架构在JavaScript中的应用" target="_blank">学习Elm架构在JavaScript中的应用</a> <span class="text-muted">萧书泓</span> <div>学习Elm架构在JavaScript中的应用learn-elm-architecture-in-javascript:unicorn:LearnhowtobuildwebappsusingtheElmArchitecturein"vanilla"JavaScript(step-by-stepTDDtutorial)!项目地址:https://gitcode.com/gh_mirrors/le/le</div> </li> <li><a href="/article/1891065672667033600.htm" title="探索Redux：构建可预测、可测试的JavaScript应用" target="_blank">探索Redux：构建可预测、可测试的JavaScript应用</a> <span class="text-muted">黎杉娜Torrent</span> <div>探索Redux：构建可预测、可测试的JavaScript应用learn-redux:boom:ComprehensiveNotesforLearning(howtouse)ReduxtomanagestateinyourWeb/Mobile(React.js)Apps.项目地址:https://gitcode.com/gh_mirrors/le/learn-redux项目介绍在现代Web开发中，J</div> </li> <li><a href="/article/1891057860494815232.htm" title="探索Elm架构：用纯JavaScript构建优雅的Web应用" target="_blank">探索Elm架构：用纯JavaScript构建优雅的Web应用</a> <span class="text-muted">邵瑗跃Free</span> <div>探索Elm架构：用纯JavaScript构建优雅的Web应用learn-elm-architecture-in-javascript:unicorn:LearnhowtobuildwebappsusingtheElmArchitecturein"vanilla"JavaScript(step-by-stepTDDtutorial)!项目地址:https://gitcode.com/gh_mirro</div> </li> <li><a href="/article/1891054457932804096.htm" title="[失业前端恶补算法]JavaScript leetcode刷题top100（六）：字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积" target="_blank">[失业前端恶补算法]JavaScript leetcode刷题top100（六）：字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积</a> <span class="text-muted">摸鱼老萌新</span> <a class="tag" taget="_blank" href="/search/%E5%A4%B1%E4%B8%9A%E5%89%8D%E7%AB%AF%E6%81%B6%E8%A1%A5%E7%AE%97%E6%B3%95/1.htm">失业前端恶补算法</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/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C/1.htm">哈希</a> <div>专栏声明：只求用最简单的，容易理解的方法通过，不求优化，不喜勿喷49.字母异位词分组题面给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。知识点：哈希表、排序思路这里用了js语言的一个小技巧，我们可以使用split这个api将字符串变成字符的数组，之后我们对得到的数组进行排序，这样字母异位词得到了结果字符串的一致的，</div> </li> <li><a href="/article/1891044744973316096.htm" title="Vue.js 新手必看：5个趣味小案例快速理解数据绑定原理" target="_blank">Vue.js 新手必看：5个趣味小案例快速理解数据绑定原理</a> <span class="text-muted">云资社</span> <a class="tag" taget="_blank" href="/search/VUE/1.htm">VUE</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js是一个渐进式JavaScript框架，用于构建用户界面。其核心特性之一是数据绑定，它允许开发者通过简单的声明式语法将数据与DOM元素绑定在一起。这种双向数据绑定机制使得数据更新和视图更新变得非常直观和高效。本文将通过5个趣味小案例，帮助Vue.js新手快速理解数据绑定的原理和实现方式。案例1：简单的文本绑定目标将输入框中的内容实时显示在页面上。实现代码Vue数据绑定-文本绑定输入框内容</div> </li> <li><a href="/article/1891002003375583232.htm" title="vue3 ref/reactive 修改数组的方法" target="_blank">vue3 ref/reactive 修改数组的方法</a> <span class="text-muted">取啥好</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>import{ref}from'vue'//给每个todo对象一个唯一的idletid=0constnewTodo=ref('')consttodos=ref([{id:id++,text:'LearnHTML'},{id:id++,text:'LearnJavaScript'},{id:id++,text:'LearnVue'}])functionaddTodo(){todos.value.pu</div> </li> <li><a href="/article/1890999732432596992.htm" title="C#中的动态类型用法总结带演示代码" target="_blank">C#中的动态类型用法总结带演示代码</a> <span class="text-muted">yuanpan</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>在C#中，dynamic类型是一种特殊的类型，它允许你在编译时绕过类型检查，而是在运行时解析类型。这使得你可以编写更灵活的代码，但也增加了运行时错误的风险。dynamic类型通常用于与动态语言（如Python、JavaScript）交互，或者处理一些在编译时无法确定类型的场景。1.基本用法你可以使用dynamic关键字来声明一个动态类型的变量。这个变量在编译时不会进行类型检查，而是在运行时根据实际</div> </li> <li><a href="/article/1890985363690811392.htm" title="JavaScript网页设计案例：动态天气预报页面" target="_blank">JavaScript网页设计案例：动态天气预报页面</a> <span class="text-muted">静默.\\</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在这个案例中，我们将创建一个简单的网页，该网页能够根据用户输入的城市名称显示当前的天气情况。这个项目不仅将帮助我们理解如何使用JavaScript进行DOM操作和事件处理，还将介绍如何通过API获取实时数据。1.准备工作首先，你需要注册一个免费的天气API服务（如OpenWeatherMap），以获取API密钥。这将允许你访问其服务器上的天气数据。2.HTML结构让我们从基本的HTML结构开始：D</div> </li> <li><a href="/article/1890982335944388608.htm" title="解析浏览器中JavaScript与Native交互原理：以WebGPU为例" target="_blank">解析浏览器中JavaScript与Native交互原理：以WebGPU为例</a> <span class="text-muted">ttod_qzstudio</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/WebGPU/1.htm">WebGPU</a> <div>引言随着Web应用复杂度的提升，开发者对浏览器访问本地硬件能力的需求日益增长。然而，浏览器必须在开放性与安全性之间找到平衡——既不能放任JavaScript（JS）随意操作系统资源，又要为高性能计算、图形渲染等场景提供支持。WebGPU的出现正是这一矛盾的解决方案之一。作为新一代Web图形API，WebGPU允许JS以接近原生（Native）的方式操作GPU，同时严格遵循浏览器的安全模型。本文将结</div> </li> <li><a href="/article/1890966438739505152.htm" title="在Vue中使用highlight.js代码高亮" target="_blank">在Vue中使用highlight.js代码高亮</a> <span class="text-muted">技术驱动者</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>代码高亮是在网页开发中常见的需求之一，它可以使代码在页面上以不同的颜色或样式进行突出显示，提高可读性。highlight.js是一个流行的JavaScript库，它提供了丰富的语法高亮功能，支持多种编程语言和模板语言。本文将介绍如何在Vue项目中使用highlight.js来实现代码高亮的效果。步骤1：安装highlight.js首先，我们需要安装highlight.js库。在Vue项目的根目录下</div> </li> <li><a href="/article/1890965177625538560.htm" title="Vue.js 配置 Babel、Webpack 和 ESLint" target="_blank">Vue.js 配置 Babel、Webpack 和 ESLint</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%85%A5%E9%97%A8%E4%B8%8E%E5%AE%9E%E8%B7%B5/1.htm">入门与实践</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue.js配置Babel、Webpack和ESLint今天我们来聊聊如何配置Babel、Webpack和ESLint，这三个工具在现代前端开发中扮演着重要角色。它们分别负责代码转译、模块打包和代码质量检测，合理配置它们能大大提高项目的开发效率和质量。下面我将详细介绍它们的作用，并提供具体的配置示例。1.Babel配置Babel主要用于将现代JavaScript（ES6+）代码转译为兼容性更好的版</div> </li> <li><a href="/article/1890942729731502080.htm" title="如何使用Three.js制作3D月球与星空效果" target="_blank">如何使用Three.js制作3D月球与星空效果</a> <span class="text-muted">软件工程师文艺</span> <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/3d/1.htm">3d</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>目录1.基本设置2.创建星空效果3.创建月球模型4.添加中文3D文字5.光照与相机配置6.动画与控制7.响应式布局8.结语在本文中，我们将一起学习如何利用Three.js实现一个3D月球与星空的效果，并添加一些有趣的元素，比如中文3D文字和互动功能。Three.js是一个强大的JavaScript库，它简化了WebGL的使用，使得在网页上进行3D图形渲染变得更加容易。我们将逐步分析代码，帮助大家理</div> </li> <li><a href="/article/1890940335354343424.htm" title="Github 2024-06-20 开源项目日报 Top10" target="_blank">Github 2024-06-20 开源项目日报 Top10</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%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/Github%E8%B6%8B%E5%8A%BF%E5%88%86%E6%9E%90/1.htm">Github趋势分析</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a> <div>根据GithubTrendings的统计，今日(2024-06-20统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目4TypeScript项目4Rust项目2JavaScript项目1Dart项目1Java项目1Go项目1RustDesk:用Rust编写的开源远程桌面软件创建周期：1218天开发语言：Rust,Dart协议类型：GNUAfferoG</div> </li> <li><a href="/article/1890932133879410688.htm" title="阮一峰的ES6文档（第一天）" target="_blank">阮一峰的ES6文档（第一天）</a> <span class="text-muted">jackzhuoa</span> <a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录ECMAScript6简介let和const命名let基本用法-块级作用域不存在变量提升不允许重复声明暂时性死区为什么需要块级作用域？原因一：内层变量可能会覆盖外层变量原因二：用来计数的循环遍历泄露为全局变量const基本用法-声明只读的常量与let命令相同点let和const使用建议ECMAScript6简介ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，</div> </li> <li><a href="/article/1890927088047812608.htm" title="vue和Django快速创建项目" target="_blank">vue和Django快速创建项目</a> <span class="text-muted">CCSBRIDGE</span> <a class="tag" taget="_blank" href="/search/%E4%BA%86%E8%A7%A3Vue/1.htm">了解Vue</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、VUE1.创建Vue3+JavaScript项目npmcreatevite@latest项目名称----templatevue创建Vue3+TypeScript项目npmcreatevite@latest项目名称----templatevue-ts2.然后cd项目名称npminstallnpminstallaxios#发送API请求npminstallpinia#Vue3推荐的状态管理库npm</div> </li> <li><a href="/article/1890876277712285696.htm" title="JavaScript前端性能优化技巧分享" target="_blank">JavaScript前端性能优化技巧分享</a> <span class="text-muted">代码旅人博客</span> <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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>在前端开发中，性能优化是一个持续不断的追求。随着Web应用的日益复杂，如何确保应用的流畅性和响应速度，成为了每个前端开发者必须面对的问题。JavaScript作为前端的核心语言，其性能优化更是至关重要。本文将分享一些JavaScript前端性能优化的技巧，帮助开发者提升Web应用的性能。一、减少DOM操作DOM（文档对象模型）操作是JavaScript中常见的性能瓶颈之一。频繁的DOM操作会导致浏</div> </li> <li><a href="/article/1890866571493044224.htm" title="【Node-Red】Function节点教学" target="_blank">【Node-Red】Function节点教学</a> <span class="text-muted">零炻大礼包</span> <a class="tag" taget="_blank" href="/search/Node-Red/1.htm">Node-Red</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>本篇来讲在Node-Red中编写函数时用到的一个至关重要的节点：function。function节点允许消息运行JavaScript代码。其中部分内容来自官方文档翻译：function节点用户指南。Function节点教学1.变量定义2.返回值1）返回单条数据进阶1进阶22）返回多条数据3.其他变量定义1）数组定义buffer2.Array4.运算符1）算数运算符2）赋值运算符3）字符与运算符4</div> </li> <li><a href="/article/1890859505722388480.htm" title="JavaScript 内置对象-Math对象" target="_blank">JavaScript 内置对象-Math对象</a> <span class="text-muted">難釋懷</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Math对象提供了一系列与数学相关的静态方法和属性，帮助开发者执行复杂的计算任务。无论是简单的算术运算还是高级的几何、统计计算，Math对象都能提供强大的支持。本文将详细介绍Math对象的主要功能及其使用方法。一、简介不同于其他全局对象，Math不是一个构造函数，而是一个静态对象。这意味着我们不能通过new关键字创建Math的实例，所有的属性和方法都必须直接调用Math来</div> </li> <li><a href="/article/1890823701016932352.htm" title="JavaScript内置对象" target="_blank">JavaScript内置对象</a> <span class="text-muted">難釋懷</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript提供了一套丰富的内置对象，这些对象为开发者提供了处理数据、操作日期时间、执行数学运算等众多功能的强大工具。掌握这些内置对象不仅能够提高代码的效率，还能让开发过程更加简洁流畅。本文将详细介绍一些常用的JavaScript内置对象及其使用方法。一、Object对象Object是JavaScript中所有对象的基类。每个对象都是直接或间接地继承自Object.prototype。它提</div> </li> <li><a href="/article/1890816388486983680.htm" title="Vue和React的区别" target="_blank">Vue和React的区别</a> <span class="text-muted">挨踢女孩y</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>组件开发方式：Vue使用单文件组件（SFC）,HTML,JS和CSS在一个文件内实现exportdefault{//JavaScript代码}.my-component{/*CSS样式*/}React使用JSX和JavaScriptimportReactfrom'react';import'./MyComponent.css';functionMyComponent(){return({/*JSX</div> </li> <li><a href="/article/1890812105985159168.htm" title="React VS Vue" target="_blank">React VS Vue</a> <span class="text-muted">懒人村杂货铺</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>React和Vue是目前最流行的两个前端框架，它们在设计理念、生态系统和开发体验上各有特点。以下是对React和Vue的全方位对比：1.核心设计理念React库而非框架：React是一个用于构建UI的库，专注于视图层，其他功能（如路由、状态管理）需要借助第三方库。函数式编程：推崇组件化、函数式编程，强调不可变性和单向数据流。JSX：使用JSX语法，将HTML和JavaScript结合在一起。Vue</div> </li> <li><a href="/article/1890811727436640256.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><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/firefox/1.htm">firefox</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a> <div>一、Ajax、JSONP、JSON、Fetch和Axios技术详解1.Ajax（异步JavaScript和XML）什么是Ajax？Ajax是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过`XMLHttpRequest`对象实现。优点-支持同步和异步请求。-能够发送和接收多种格式的数据（如JSON、XML等）。缺点-原生代码较复杂。-不支持跨域请求（需要服务器配置CORS或使用JSO</div> </li> <li><a href="/article/1890809458745995264.htm" title="JavaScript实现拖动窗口功能详解" target="_blank">JavaScript实现拖动窗口功能详解</a> <span class="text-muted">滚菩提哦呢</span> <div>本文还有配套的精品资源，点击获取简介：本教程深入讲解了如何通过JavaScript实现拖动窗口功能，涵盖了原生方法和面向对象（OOP）的封装技术，以及确保代码在主流浏览器（包括IE6、Firefox和Chrome）中的兼容性。教程提供详细代码示例，从基础的原生拖动方法到利用OOP封装的Droppable类，再到特殊浏览器的兼容性处理，使读者能够掌握全面的拖动窗口实现技巧。1.JavaScript拖</div> </li> <li><a href="/article/1890803274878087168.htm" title="JavaScript窗口大小变化事件：window.resize" target="_blank">JavaScript窗口大小变化事件：window.resize</a> <span class="text-muted">星际编程喵</span> <a class="tag" taget="_blank" href="/search/%E6%8E%A2%E7%B4%A2Spring%E7%9A%84%E5%A5%87%E5%A6%99%E4%B8%96%E7%95%8C/1.htm">探索Spring的奇妙世界</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>1.前言在Web开发中，JavaScript是一种强大的脚本语言，它可以与HTML和CSS一起使用，为用户提供交互性和动态性的体验。其中，window.addEventListener("resize")事件是一个常用的事件之一，用于在浏览器窗口大小发生变化时触发相应的操作。本文将深入介绍这个事件的相关内容。2.简介window.resize事件是浏览器提供的一种事件，用于监听窗口大小的改变。这意</div> </li> <li><a href="/article/1890793944799834112.htm" title="javascript高级试题" target="_blank">javascript高级试题</a> <span class="text-muted">BiBbo</span> <a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>1.判断为数组类型的4种方式Array.isArray()typeofinstanceofconstructor2.判断对象是否包含特定的自身（非继承）属性hasOwnProperty()3.改变this的3种方式，他们有什么相同点和不同点call、bind、apply这三个函数的第一个参数都是this的指向对象，第二个参数差别就来了：call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔</div> </li> <li><a href="/article/1890792179358560256.htm" title="JavaScript考核详解" target="_blank">JavaScript考核详解</a> <span class="text-muted">青青青青草地</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a> <div>文章目录JavaScript考核详解一、请简述var，let，const的区别？二、解释垃圾回收机制，垃圾回收的方式？三、以下代码的输出是什么？四、this的指向五、实现数组扁平化六、实现数组去重七、JS中的基本类型JavaScript考核详解一、请简述var，let，const的区别？块级作用域：块级作用域有大括号{}包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决</div> </li> <li><a href="/article/82.htm" title="java类加载顺序" target="_blank">java类加载顺序</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.demo; /** * @Description 类加载顺序 * @author FuJianyong * 2015-2-6上午11:21:37 */ public class ClassLoaderSequence { String s1 = "成员属性"; static String s2 = "</div> </li> <li><a href="/article/209.htm" title="Hibernate与mybitas的比较" target="_blank">Hibernate与mybitas的比较</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/orm/1.htm">orm</a> <div>第一章 Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 MyBatis 参考资料官网：http:</div> </li> <li><a href="/article/336.htm" title="php多维数组排序以及实际工作中的应用" target="_blank">php多维数组排序以及实际工作中的应用</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/usort/1.htm">usort</a><a class="tag" taget="_blank" href="/search/uasort/1.htm">uasort</a> <div>自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 <!doctype html> <html lang="en"> <head> <meta charset="utf-8&q</div> </li> <li><a href="/article/463.htm" title="DOM改变字体大小" target="_blank">DOM改变字体大小</a> <span class="text-muted">周华华</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div><!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/1999/xhtml&q</div> </li> <li><a href="/article/590.htm" title="c3p0的配置" target="_blank">c3p0的配置</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/c3p0/1.htm">c3p0</a> <div>c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。以在spring中配置dataSource为例：  <bean name="prope</div> </li> <li><a href="/article/717.htm" title="Java获取工程路径的几种方法" target="_blank">Java获取工程路径的几种方法</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>第一种： File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); 结果: C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 获取当前类的所在工程路径; 如果不加“</div> </li> <li><a href="/article/844.htm" title="在类Unix系统下实现SSH免密码登录服务器" target="_blank">在类Unix系统下实现SSH免密码登录服务器</a> <span class="text-muted">Harry642</span> <a class="tag" taget="_blank" href="/search/%E5%85%8D%E5%AF%86/1.htm">免密</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>1.客户机 (1)执行ssh-keygen -t rsa -C "xxxxx@xxxxx.com"生成公钥，xxx为自定义大email地址 (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址 (3)执行cat</div> </li> <li><a href="/article/971.htm" title="Java新手入门的30个基本概念一" target="_blank">Java新手入门的30个基本概念一</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java+%E5%85%A5%E9%97%A8/1.htm">java 入门</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B/1.htm">新手</a> <div>在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合</div> </li> <li><a href="/article/1098.htm" title="Memcached for windows 简单介绍" target="_blank">Memcached for windows 简单介绍</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>1. 安装memcached server a. 下载memcached-1.2.6-win32-bin.zip b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo</div> </li> <li><a href="/article/1225.htm" title="数据库对象的视图和索引" target="_blank">数据库对象的视图和索引</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/oeacle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oeacle数据库</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E5%9B%BE/1.htm">视图</a> <div> 视图视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图为什么oracle需要视图; &</div> </li> <li><a href="/article/1352.htm" title="Mockito(一) --入门篇" target="_blank">Mockito(一) --入门篇</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div> Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。 &nb</div> </li> <li><a href="/article/1479.htm" title="精通Oracle10编程SQL(5)SQL函数" target="_blank">精通Oracle10编程SQL(5)SQL函数</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* * SQL函数 */ --数字函数 --ABS(n):返回数字n的绝对值 declare v_abs number(6,2); begin v_abs:=abs(&no); dbms_output.put_line('绝对值：'||v_abs); end; --ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度</div> </li> <li><a href="/article/1606.htm" title="【Log4j一】Log4j总体介绍" target="_blank">【Log4j一】Log4j总体介绍</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div>Log4j组件：Logger、Appender、Layout Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能：日志的输出目标日志的输出格式日志的输出级别(是否抑制日志的输出) logger继承特性 A logger is said to be an ancestor of anothe</div> </li> <li><a href="/article/1733.htm" title="Java IO笔记" target="_blank">Java IO笔记</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public static void main(String[] args) throws IOException { //输入流 InputStream in = Test.class.getResourceAsStream("/test"); InputStreamReader isr = new InputStreamReader(in); Bu</div> </li> <li><a href="/article/1860.htm" title="Docker 监控" target="_blank">Docker 监控</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/docker%E7%9B%91%E6%8E%A7/1.htm">docker监控</a> <div> 目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容监控宿主机本身监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。额外的，因为是docker的</div> </li> <li><a href="/article/1987.htm" title="java-顺时针打印图形" target="_blank">java-顺时针打印图形</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一个画图程序要求打印出： 1.int i=5; 2.1 2 3 4 5 3.16 17 18 19 6 4.15 24 25 20 7 5.14 23 22 21 8 6.13 12 11 10 9 7. 8.int i=6 9.1 2 3 4 5 6 10.20 21 22 23 24 7 11.19</div> </li> <li><a href="/article/2114.htm" title="关于iReport汉化版强制使用英文的配置方法" target="_blank">关于iReport汉化版强制使用英文的配置方法</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/iReport%E6%B1%89%E5%8C%96/1.htm">iReport汉化</a><a class="tag" taget="_blank" href="/search/%E8%8B%B1%E6%96%87%E7%89%88/1.htm">英文版</a> <div>对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下：在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。 # ${HOME} will be replaced by user home directory accordin</div> </li> <li><a href="/article/2241.htm" title="[并行计算]论宇宙的可计算性" target="_blank">[并行计算]论宇宙的可计算性</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E8%A1%8C%E8%AE%A1%E7%AE%97/1.htm">并行计算</a> <div> 现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识...... 那么,这种概念让我们推论出一个结论 &nb</div> </li> <li><a href="/article/2368.htm" title="用OpenGL实现无限循环的coverflow" target="_blank">用OpenGL实现无限循环的coverflow</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/coverflow/1.htm">coverflow</a> <div>网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能源码地址： https://github.com/jackfengji/glcoverflow public class CoverFlowOpenGL extends GLSurfaceView implements GLSurfaceV</div> </li> <li><a href="/article/2495.htm" title="JAVA数据计算的几个解决方案1" target="_blank">JAVA数据计算的几个解决方案1</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a> <div>老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 -----------------------------华丽的分割线------------------------------------- 数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J &nbs</div> </li> <li><a href="/article/2622.htm" title="简单的用户授权系统,利用给user表添加一个字段标识管理员的方式" target="_blank">简单的用户授权系统,利用给user表添加一个字段标识管理员的方式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>怎么创建一个简单的(非 RBAC)用户授权系统通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。数据库首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限扩展 CWebUser 类在配置文件(一般为 protecte</div> </li> <li><a href="/article/2749.htm" title="未选之路" target="_blank">未选之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AF%97/1.htm">诗</a> <div>作者:罗伯特*费罗斯特黄色的树林里分出两条路, 可惜我不能同时去涉足, 我在那路口久久伫立, 我向着一条路极目望去, 直到它消失在丛林深处. 但我却选了另外一条路, 它荒草萋萋,十分幽寂; 显得更诱人,更美丽, 虽然在这两条小路上, 都很少留下旅人的足迹. 那天清晨落叶满地, 两条路都未见脚印痕迹. 呵,留下一条路等改日再</div> </li> <li><a href="/article/2876.htm" title="Java处理15位身份证变18位" target="_blank">Java处理15位身份证变18位</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/18%E4%BD%8D%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%9815%E4%BD%8D/1.htm">18位身份证变15位</a><a class="tag" taget="_blank" href="/search/15%E4%BD%8D%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%9818%E4%BD%8D/1.htm">15位身份证变18位</a><a class="tag" taget="_blank" href="/search/%E8%BA%AB%E4%BB%BD%E8%AF%81%E8%BD%AC%E6%8D%A2/1.htm">身份证转换</a> <div> 15位身份证变18位，18位身份证变15位 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201</div> </li> <li><a href="/article/3003.htm" title="SpringMVC4零配置--应用上下文配置【AppConfig】" target="_blank">SpringMVC4零配置--应用上下文配置【AppConfig】</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a> <div>从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。 Xml配置和Java类配置对比如下： applicationContext-AppConfig.xml  </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>