JS应用DOM入门(3)：简单文档DOM结构分析

一个简单文档的DOM结构分析

　　下面让我们来对一个简单的文档进行分析，最终形成它的DOM结构。要分析的文档包括3个段落，HTML代码如下：


　　<HTML>
　　<HEAD>
　　<TITLE> Simple DOM Demo </TITLE>
　　</HEAD>
　　<BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P>
　　This is the document body
　　<P ID = "p2Node"> </P>
　　<P ID = "p3Node"></P>
　　</BODY>
　　</HTML>

　　请注意，从现在开始，我们就要按照Tree结构以及家族关系的方式来看待整个文档了。 <BODY>标记是Tree的根节点，它包含了4个孩子节点：p1Node、文本项节点（“This is the document body”）、p2Node和p3Node。每个孩子节点或者是一个HTML标记型节点，或者是一个文本项型节点。在一对开始标记和结束标记间的内容属于这个标记的孩子节点，比如“This is paragraph1”就是p1Node节点的孩子节点，同时它本身也是一个文本项型节点。文本项型节点必须包含一个非空字符，因此，第2段和第3段的孩子节点是不存在的。

　　这里有上述HTML文档的DOM Tree图示，它能帮助我们更好地理解节点间的相互关系：

　　HTML中有一些标记不包含关闭括弧，这种情况下，我们可以将下一个紧挨者的标记作为关闭括弧对待。比如<LI>标记可以将紧挨者的<LI>或<UL>标记作为关闭标识。

　　简单文档的节点导航

　　文档的DOM Tree结构为每个标记和文本项设置了一个节点，对于任一被分配了ID属性的节点，都可以作为起始点开始整个Tree的“攀登”。而且，借助DOM属性的强大功能，我们可以寻址到Tree中的每一个节点。

　　在继续讲述前，请再次看看上一节中的简单文档的HTML源代码以及它的DOM Tree结构图。我们可以得知：图中的箭头表示了可以到达Tree中其他节点的导航路线；<BODY>标记的ID属性值是bodyNode，3个<P>标记的ID属性值依次为p1Node、p2Node和p3Node。下面，我们分别从不同的节点开始，举例说明如何寻址到其他的节点：

起始节点 到达节点 寻址表达式
<BODY> p1Node bodyNode.firstChild 或bodyNode.childNodes[0]
p1Node的孩子节点 bodyNode.firstChild.firstChild
文本项节点 bodyNode.childNodes[1]
p3Node BodyNode.childNodes[3] 或bodyNode.lastChild
p1Node 文本项节点 p1Node.nextSibling
p2Node p1Node.nextSibling.nextSibling
p3Node p1Node.nextSibling.nextSibling.nextSibling
p3Node p1Node的孩子节点 p3Node.previousSibling.previousSibling.previousSibling.childNodes[0]

　　以上列举的都是从双亲（parent）到孩子或者孩子到孩子方向的寻址表达式，借助我们介绍另外一种导航方向：使用parentNode属性从孩子到双亲。比如：要从每一个<P>标记开始寻址到<BODY>标记，可以使用p1Node.parentNode、p2Node.parentNode或者 p3Node.parentNode。
　　为了加深对以上节点导航表达式的理解，我们编写了一段JavaScript代码，它将显示出文档DOM的每个节点的nodeName值。请注意，除了上面举例的简单文档中涉及到的节点外，还包含一个<Script>标记节点。为了不使问题复杂化，代码中不使用lastChild属性。代码如下：

<HTML>
<HEAD>
<TITLE> Simple DOM Demo </title>
<STYLE>TYPE="text/CSS">
<!--
FORM.tb {display:inline;}
.twidth{width:100%}
.include{ font-size: 75%; font-family: verdana, arial, helvetica;}
.includebig{font-family: verdana, arial, helvetica;}
.includebig A:link { color: blue; }
.includebig A:visited { color: purple; }
.include A:link { color: blue; }
.include A:visited { color: purple; }
.submitter { font-size: 75%; font-family: verdana, arial, helvetica; }
pre.code {color: #660099; margin-left:5%}
address {text-align: right}
body {background:#FFFFFF; margin-left: 5%; margin-right: 5%}
-->
</STYLE>
</HEAD>
<BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P>
This is the document body
<P ID = "p2Node"> </P>
<P ID = "p3Node"></P>
<SCRIPT LANGUAGE="JavaScript">
alert(
"bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "\n" +
"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" +
"bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "\n" +
"bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "\n" +
"bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "\n" +
"bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "\n" +
"bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "\n" +
"p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "\n" +
"p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "\n" +
"p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " +
p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName + "\n" +
"p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "\n" +
"p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "\n" +
"p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "\n" +
"bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " +
bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "\n"
　　);
</SCRIPT>
</BODY>
</HTML>

　　执行后，结果图示如下：

你可能感兴趣的:(dom)

  • 信息技术基础专有名词和计算机硬件学习笔记 learning-striving 信息技术学习笔记信息技术计算机硬件
    信息技术常见专有名词信息技术基础课程中常见的专有名词英文缩写或简称及其详细含义，按领域分类整理：硬件与存储CPU(CentralProcessingUnit)中央处理器，负责执行计算机指令和处理数据。GPU(GraphicsProcessingUnit)图形处理器，专用于处理图形和并行计算。RAM(RandomAccessMemory)随机存取存储器，临时存储运行中的程序和数据。ROM(Read-
  • Vue3项目白屏问题深度解析：从AI辅助诊断到性能优化实战 TE-茶叶蛋 前端项目性能优化vueelementui
    一、问题背景：令人困惑的白屏现象在开发一个基于Vue3+Vite+TypeScript的中后台管理系统时，我们遭遇了一个典型的性能问题：页面刷新后出现持续1-2秒的白屏，随后才正常渲染内容。尽管在index.html中加入了Loading动画，但动画结束后仍存在明显的空白间隙。关键现象特征：开发环境请求数达400+（Vite按需编译特性）生产环境构建后请求50+，资源总体积8.6MBDOMCont
  • JavaScript性能优化指南：聚焦DOM操作优化 桃木山人 技术杂谈javascript性能优化开发语言
    引言：性能优化的关键路径在Web应用开发中，JavaScript性能直接影响用户体验。虽然存在多种优化手段，但DOM操作优化往往能带来最显著的性能提升。本文将以DOM操作为核心展开深入分析，并简要概述其他优化方向。核心优化：DOM操作性能提升1.问题根源分析浏览器渲染引擎与JavaScript引擎独立运作，频繁的DOM操作会导致：重排（Reflow）：计算元素几何属性重绘（Repaint）：更新元
  • PO、DTO、VO等9大对象划分详解，让你的代码不再“一团糟” 码熔burning SpringBootJavaJavaSpringBoot
    目录一、PO(PersistentObject)二、DO(DomainObject)三、TO(TransferObject)四、DTO(DataTransferObject)五、VO(ViewObject)六、BO(BusinessObject)七、POJO(PlainOrdinaryJavaObject)八、DAO(DataAccessObject)九、Entity对象转换与使用场景总结何时使用
  • Dotnet洋葱架构实践 福伴
    实现数据层在DomainLayer目录里，建一个Models目录。在Models目录下，建两个类：BaseEntity.cspublicclassBaseEntity{publicintId{get;set;}publicDateTimeCreatedDate{get;set;}publicDateTimeModifiedDate{get;set;}publicboolIsActive{get;s
  • 深入解析 Vue 3 Teleport：原理、应用与最佳实践 赵大仁 前端Vue.js技术vue.jsjavascript前端
    深入解析Vue3Teleport：原理、应用与最佳实践1.引言Vue3引入了Teleport组件，它可以让我们将组件的渲染位置从当前组件层级移动到DOM的其他位置，而不影响Vue的响应式和组件状态管理。在开发中，我们经常遇到模态框、通知、弹窗、工具提示（Tooltip）等UI组件，这些组件通常需要被渲染到body或特定DOM节点，以避免z-index层级问题。Vue3的Teleport解决了这个问
  • 深入解析 React Diff 算法：原理、优化与实践 赵大仁 前端技术jsreact.js前端前端框架
    深入解析ReactDiff算法：原理、优化与实践1.引言React作为前端领域的标杆框架，采用虚拟DOM（VirtualDOM）来提升UI更新性能。React的Diff算法（Reconciliation）是虚拟DOM运行机制的核心，它决定了如何高效地对比新旧DOM并执行最少的操作来更新UI。本篇文章将深入探讨ReactDiff算法的原理、优化策略，并通过生动的示例解析其工作方式，让你能够更直观地理
  • 【pptx-preview】react+pptx预览 起来改bug javascriptreact.jspptx
    pptx前端预览插件pptx-preview-npm1.插件使用letpptxPreviewer:any=null;constdom:any=document.getElementById(`pptx-wrapper`);if(!dom)return;pptxPreviewer=init(dom,{width:800});fetch(url).then((response:any)=>respon
  • HarmonyNext深度解析：ArkUI 3.0声明式开发与高性能渲染实践 披光人 harmonyOSharmonyos
    第一章鸿蒙声明式UI架构演进与技术优势1.1从命令式到声明式的范式迁移HarmonyNext的ArkUI3.0标志着鸿蒙开发生态的重大革新，其核心在于采用声明式UI编程范式。相较于传统Android的XML+Java/Kotlin命令式开发模式，声明式UI具有以下技术特征：状态驱动视图：UI呈现完全由数据状态决定，开发者只需描述"UI应该是什么样子"，无需手动操作DOM元素单向数据流：采用Stat
  • python手写kmeans算法 菜鸟懿 机器学习聚类算法python
    kmean聚类是最基础和常见的算法，工程上使用比较常见，spark,sklearn都有实现，本文手写实现kmeans#!/usr/bin/pythonimportsysimportrandomimportmathdefcreate_rand_points(max_x,max_y,count):"""Createcountpoints(0-x),(0-y)."""points=[]foriinran
  • 【JS】JS中的jQuery库简介及使用方法 菜就多练少说 javascriptjavascriptjquery开发语言
    jQuery简介及使用方法jQuery简介如何使用jQuery1导入jQuery库2编写自己的jQuery文件3jQuery语法3.1基础语法3.2文档就绪函数3.3选择器3.4事件绑定函数结语jQuery简介jQuery是一个流行的JavaScript库，用于简化JavaScript编程。它提供了许多便捷的方法来处理DOM操作、事件处理、动画效果等，使得JavaScript开发变得更加简单和高效
  • 玩转 Vue 3：自定义指令让页面魔法随心而动 心中的灯塔 vue.jsjavascript前端
    玩转Vue3：自定义指令让页面魔法随心而动玩转Vue3：自定义指令让页面魔法随心而动什么是自定义指令？全局注册示例：高亮效果指令注册自定义指令在组件中使用局部注册与高级用法局部注册示例小结玩转Vue3：自定义指令让页面魔法随心而动在Vue3中，自定义指令为我们提供了在模板中直接操作DOM的能力，不仅可以让我们的页面效果更炫酷，还能将一些通用逻辑抽离出来，做到代码复用。本文将带你了解Vue3自定义指
  • Docker拉取镜像 - 代理 纳兰雨天 docker容器代理模式
    docker配置代理创建或编辑Docker配置文件sudomkdir-p/etc/systemd/system/docker.service.dsudonano/etc/systemd/system/docker.service.d/http-proxy.conf在文件中添加代理配置：[Service]Environment="HTTP_PROXY=127.0.0.1:7897"Environme
  • 安全密码生成器 那曾是梦 安全python
    功能实现说明1.灵活配置自定义长度：输入框支持手动输入（默认12），自动校验数字类型字符组合：通过复选框实现四类字符自由组合（大写、小写、数字、符号）默认值支持：初始化时已预设常用参数（长度12，全选字符类型）2.安全增强加密安全：使用secrets模块替代random，符合NIST安全标准配置校验：未选择字符类型时抛出错误，密码长度<8时弹出警告防预测设计：字符选择后随机打乱顺序，避免模式化组合
  • Python使用pycryptodome库来进行AES加密解密 飞起来fly呀 Pythonpython
    在现代通信和数据存储中，加密技术是保障数据安全的核心手段。AES（AdvancedEncryptionStandard）是一种对称加密算法，广泛应用于各种信息安全领域。Python提供了丰富的加密库，其中PyCryptodome是一个功能强大且常用的库，它支持多种加密算法和模式。以下指南将详细介绍如何在Python中使用PyCryptodome库进行AES加密和解密。一、安装PyCryptodom
  • ModuleNotFoundError: No module named ‘Crypto‘ 小武小武每天练武 python开发语言
    看到这个错误提示“ModuleNotFoundError:Nomodulenamed‘Crypto’”，说明Python环境中缺少Crypto模块。这通常发生在pycryptodome库没有正确安装的情况下。解决步骤1.安装pycryptodome确保你安装了pycryptodome库，这是包含Crypto模块的库。使用以下命令来安装：pipinstallpycryptodome2.检查Pytho
  • Vue.js 3 的设计思路：从声明式UI到高效渲染机制 前端 贾公子 vue.jsuiflutter
    目录一、声明式UI与虚拟DOM的灵活性二、渲染器：虚拟DOM到真实DOM的桥梁三、组件的本质与实现四、编译与运行时的协同优化五、性能与可维护性的权衡总结Vue.js3作为新一代前端框架，其设计理念在声明式UI描述、虚拟DOM优化、组件化架构以及编译与运行时协作等方面实现了显著突破。本文将从多个角度深入探讨其设计思路。一、声明式UI与虚拟DOM的灵活性Vue.js3的核心特性之一是声明式UI描述，开
  • Web 开发的“三件套” zhangpeng455547940 Web开发reactnativereact.jsjavascript
    HTML：定义内容结构。CSS：控制样式布局。JavaScript：实现动态行为和复杂逻辑。JavaScript应用场景前端开发：操作DOM、处理用户事件、实现动画等。后端开发：通过Node.js构建服务器端应用。跨平台开发：Electron（桌面应用）、ReactNative（移动端）等。
  • VNode 码农 小王 javascript
    1.什么是VNode？VNode的全称是VirtualNode,也就是虚拟节点.它是指一个抽象的节点对象，用于描述真实DOM中的元素。在前端框架中，通过操作VNode来实现虚拟DOM，从而提高性能。2.VNode的本质本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述3.为什么需要VNode？在前端框架中，我们通常需要在页面中操作DOM元素，如增删改查等操作。但是DOM操作是
  • JavaScript的学习6——jQuery 十五春会
    文章目录jQuery选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器练习层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关练习查找和过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改DOM结构添加DOM删除节点练习事件鼠标事件键盘事件其他事件事件参数取消绑定事件触发条件浏览器安全限制练习动画show/hide
  • ueditor图片上传跨域问题 hello_simon javascriptphpueditor图片上传跨域
    ueditor置于A域，图片置于B域，B域需放flash跨域策略文件crossdomain.xml，如下修改ueditor配置文件ueditor.config.js//图片上传配置区,imageUrl:"http://abupload.xxx.com/imageUp.php"//图片上传提交地址,imagePath:"http://abupload.xxx.com/"
  • 【漫话机器学习系列】137.随机搜索（Randomized Search） IT古董 漫话机器学习系列专辑机器学习人工智能
    随机搜索（RandomizedSearch）详解在机器学习和深度学习的模型训练过程中，超参数调优（HyperparameterTuning）是至关重要的一环。随机搜索（RandomizedSearch）是一种高效的超参数优化方法，它通过在候选超参数的数值分布（如正态分布、均匀分布等）中随机选择超参数组合，从而找到最优的超参数配置。1.超参数调优的必要性超参数是模型在训练之前需要人为设定的参数，例如
  • 领域驱动设计（DDD）深度解析：从小白到入门 月落星还在 数据库设计模式
    一、为什么要学DDD？——从现实问题说起假设你参与开发一个电商系统，需求如下：用户下单时，需检查库存、计算优惠、生成订单同一商品的库存信息分散在商品服务、订单服务、促销服务中开发过程中频繁出现「订单金额计算逻辑冲突」「库存状态不一致」等问题传统开发方式的问题：需求直接映射为数据库表结构业务逻辑散落在Service层技术实现主导设计，业务语义模糊此时，领域驱动设计（Domain-DrivenDesi
  • GoogleTest学习实践 郭涤生 c/c++c++单元测试功能测试
    第1步：环境安装与配置对于Linux系统#安装编译依赖sudoapt-getinstallbuild-essentialcmakelibgtest-dev#编译安装cd/usr/src/gtestsudocmakeCMakeLists.txtsudomakesudocp*.a/usr/libCMake集成示例cmake_minimum_required(VERSION3.14)project(My
  • MetaGPT零基础极速入门：手把手教你打造AI虚拟公司 Julian.zhou MetaGPT人工智能人工智能
    MetaGPT是什么？为什么突然爆火？MetaGPT是由中国团队开发的多智能体协作框架，仅需1个需求，自动生成完整软件项目！它能模拟真实IT公司流程，自动分解任务、编写代码、生成文档，GitHub狂揽18k+星！官网：https://www.deepwisdom.ai/源码地址：https://github.com/geekan/MetaGPTMetaGPT能做什么？一句需求，可以让模拟的一个团队
  • 深度掌握 ReactJS 高级概念：前端开发者必备 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这篇文章汇总了ReactJS中值得深入研究的高级概念。读完后，不仅在前端面试中能更胸有成竹，还能自行开发一个类似ReactJS的UI库。目录Rendering的含义与过程Re-rendering发生的机制及原因VirtualDOM的原理Reconciliation算法的运行方式ReactJS的性能优化方案1
  • JavaScript性能优化实战 仰望丨苍穹 前端：技巧与实践javascript性能优化前端
    深入探讨JavaScript性能瓶颈，分享优化技巧与最佳实践：性能瓶颈DOM操作开销大：DOM操作往往是JavaScript性能的一个关键瓶颈。每次对DOM进行访问、修改或创建，都可能触发浏览器的重排（reflow）和重绘（repaint）操作。例如频繁地使用innerHTML修改元素内容，或者大量地动态创建DOM节点，都会导致性能问题。全局作用域查找慢：在JavaScript中，变量的查找是从当
  • JavaScript性能优化实战：从瓶颈分析到高效编码策略 AAEllisonPang Java数据库
    一、性能瓶颈分析：从问题出发1.1常见性能问题类型渲染阻塞：同步脚本加载导致DOMContentLoaded延迟内存泄漏：未解绑的事件监听、闭包引用残留重复计算：高频触发的回调函数无节制运算布局抖动：强制同步布局（ForcedSynchronousLayout）网络瓶颈：未优化的资源加载策略典型案例：某电商网站商品筛选功能，用户选择规格时界面卡顿。经分析发现每次选择都会触发全量DOM重新渲染，导致
  • n-tier(层)架构 神经兮兮的小饼 架构知识
    一，不断要去改。二来还得快。就必须要用n-tier（层）模式开发。这样我就可以把分工分得很细。需要改动时，可以一步到位，找到需要改动的地方，而且还可以非常快。n-tier架构，把model细化分成了几层。现在继续把其中的服务层（service）细化，变成service层调用BO（BusinessObject）层，BO层调用DO（domainobject）层。1、DO（domainobject）DO
  • 今天记录一下哈希表，因为一直有点不理解，所以今天查找了一些资料来理解哈希表 suohanfjiusbis 散列表leetcode数据结构
    classSolution:defcopyRandomList(self,head:'Optional[Node]')->'Optional[Node]':ifnothead:returndic={}cur=headwhilecur:dic[cur]=Node(cur.val)cur=cur.nextcur=headwhilecur:dic[cur].next=dic.get(cur.next)d
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他