兰巧儿
兰巧儿

三、JS03 DOM 操作

三、DOM 操作

3.1 JavaScript DOM 操作

DOM (Document Object Model) 为文档对象模型，是 HTML 和 XML 文档的编程接口

DOM 提供了对整个文档的访问模型，将文档作为一个树形结构

树的每个节点表示了一个 HTML 标签或标签内的文本

3.1.1 DOM 操作分类

使用 JavaScript 操作 DOM 时分为三个方面：DOM core(DOM 核心操作)、HTML-DOM 和 CSS-DOM，开发者可通过这些操作实现动态地增加、删除、修改数据

1、DOM core（DOM 核心操作）

  • HTML core 定义了一套标准的针对任何结构化文档的对象
  • getElementById()、getElementsByTagName() 等方法都是 DOM core 的组成部分

2、HTML-DOM

  • HTML-DOM 提供了一些更简单的标记描述各种 HTML 元素的属性
  • 获取 DOM 模型中的某些对象，既可以使用 DOM core 实现，也可以使用 HTML-DOM 实现
  • 相对于 DOM Core 获取对象、属性而言，HTML-DOM 的代码通常较为简短
  • HTML-DOM的应用范围没有 DOM core 广泛

3、CSS-DOM

  • CSS-DOM 是针对 CSS 的操作
  • CSS-DOM 技术的主要作用是获取和设置 style 对象的各种属性

3.1.2 节点和节点主键的关系

节点可以理解为 HTML 文档中每个标签或者元素

  • 整个文档就是一个文档节点
  • 每个 HTML 标签就是一个元素节点
  • 包含在 HTML 元素中的文本是文本节点
  • 每个 HTML 属性就是一个属性节点
  • 注释属于注释节点

一个 HTML 文档是由各个不同的节点组成，下面示例展示了 HTML 文档

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 节点title>
head>
<body>
  <h1>标题h1>
  <p>DOM 应用p>
  <ul>
    <li>列表1li>
    <li>列表2li>
  ul>
body>
html>

以上节点的结构层次关系图

document-文档
根节点-HTML
head-标签
body-标签
meat-标签
title-标签
文本-DOM节点
h1-标签
p-标签
ul-标签
文本-标题
文本-DOM应用
li-标签1
li-标签2
文本-列表1
文本-列表2
  • 以上可以清晰的看出一个文档节点被抽象为一个 DOM 树的结果
  • 通过 DOM 树可以方便后续对 DOM 树中的节点进行操作

使用 父节点（parent）、子节点（child）、兄弟节点（sibling）等术语来描述节点的层次关系

  • 父节点拥有子节点，同级的子节点被称为同胞或兄弟节点
  • 在以上 DOM 树中，顶部节点被称为 根（root）、 节点。
  • 每个节点都有父节点，除了根节点，如、 的父节点都是 节点
  • “DOM 节点” 的父节点是
  • 一个节点可以拥有任意数量的子节点，如 节点的子节点有
  • 、

    和

    • 兄弟节点是拥有相同父元素的节点。例如，两个
    • 就是兄弟节点，它们的父节点均为
      • 节点

    3.1.3 节点信息

    1、每个节点都拥有包含节点某些信息的属性

    • nodeName（节点名称）
    • nodeValue（节点值）
    • nodeType（节点类型）

    2、nodeName 属性含有某个节点的名称

    • 元素节点的 nodeName 是标签名称
    • 属性节点的 nodeName 是属性名称
    • 文本节点的 nodeName 永远是 #text
    • 文档节点的 nodeName 永远是 #document

    3、nodeValue 属性包含文本

    • 属性节点的 nodeValue 属性包含属性值
    • nodeValue 属性对于文档节点和元素是不可用的

    4、nodeType 属性可返回节点的类型

    • 重要的节点类型
    元素类型 节点类型
    元素 element 1
    属性 attr 2
    文本 text 3
    注释 comments 8
    文档 document 9

    3.1.4 访问节点

    使用 DOM core 访问 HTML 文档的节点主要有两种方式

    1、使用 getElement 系列方法访问指定节点

    2、根据节点的层次关系访问

    1、使用 getElement 系列方法访问指定节点

    方法名 描述
    getElementById() 返回按 id 属性查找的第一个对象的引用
    getElementByName() 返回按带有指定名称 name 查找的对象的集合
    一个文档中可能会有多个同名节点，因此返回的是元素数组
    getElementByTagName() 返回带有指定标签名 TagName 查找的对象的集合

    2、根据层次关系访问节点

    • 根据层次关系访问节点，可以遵循文档的结构
    • 在文档的局部进行 “短距离地查找元素”
    • 节点属性
    属性名称 描述
    parentNode 返回节点的父节点
    childNodes 返回子节点集合，childNodes[i]
    firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
    lastChild 返回节点的最后一个子节点
    nextSibling 下一个节点
    previousSibling 上一个节点
    • 如果你的标签之间存在空格或换行，那么这些空格和换行也算作一个节点
    • 例如，输出下面的 ul 标签内有几个子节点
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断节点title>
head>
<body>
<ul>
  <li>li>
  <li>li>
  <li>li>
ul>
<script type="text/javascript">
  //获取 ul 节点
  var obj=document.getElementsByTagName("ul")[0];
  //输出 ul 内有几个子节点
  alert(obj.childNodes.length);
script>
body>
html>
    • 运行结果

    三、JS03 DOM 操作_第1张图片

    • 从上面的结果可以看出，ul 标签内只有 3 对 li 标签，但是输出结果却是 7 ，这是因为，ul 标签内的空行也被认为是一个节点，所以才会显示 7
    • javaScript 内提供一组可兼容不同浏览器的 element 属性，可以消除这种因空行、换行等出现的无法准确访问到节点的情况
    • element 属性只会访问到标签元素
    • element 属性
    属性名称 描述
    firstElementChild 返回节点的第一个子节点
    lastElementChild 返回节点的最后一个子节点
    nextElementSibling 下一个节点
    previousElementSibling 上一个节点

    3.2 操作节点

    在网页开发中，如果想动态地改变网页内容，需要对网页中的节点进行操作

    主要是对节点属性、节点、节点样式进行操作

    3.2.1 操作节点的属性

    HTML DOM 操作提供了获取及改变节点属性值的标准方法

    • getAttribute( “属性名” ) ：用来获取属性的值
    • setAttribute( “属性名”,“属性值” ) ：用来设置属性的值
    • 当使用 getAttribute() 方法读取属性值时，如果属性不存在，则返回 null

    3.2.2 创建或插入节点

    • 使用 JavaScript 操作 DOM 有很多方法可以创建或增加一个新节点，主要方法如下
    • 创建节点
    名称 描述
    createElement( tagName ) 创建一个标签名为 tagName 的新元素节点
    A.appendChild(B) 把 B 节点追加到 A 节点的子节点的末尾，将 B 节点作为最后一个子元素添加到A元素
    insertBefore(A,B) 把 A 节点插入到 B 节点之前
    cloneNode(deep) 复制某个指定的节点
    • insertBefore(A,B) 中有两个参数
      • A 是必选项，表示插入的节点
      • B 是可选项，表示新节点被插入 B 节点的前面
    • cloneNode(deep) 中的参数为布尔值
      • 若 deep 值为 true，则复制该节点及该节点的所有子节点
      • 若 deep 值为 false，则只复制该节点和其属性

    3.2.3 删除和替换节点

    删除和替换节点的方法

    名称 描述
    removeChild(node) 删除元素内指定的子元素 node
    replaceChild(newNode,oldNode) 用其他的节点替换指定的节点
    • 方法 replaceChild(newNode,oldNode) 有两个参数
      • newNode 是替换的新节点
      • oldNode 是要被替换的节点

    3.2.4 操作节点样式

    通过获取节点，通过改变节点的样式属性，可以实现各种动态效果

    有两种方式可以动态地改变样式属性

    1、使用样式的 style 属性

    2、使用样式的 className 属性

    1、style 属性

    • style 是一个对象，代表一个单独的样式声明
    • 可以通过应用样式的文档或元素访问 style 对象
    • 使用 style 属性改变样式的语法 如下
    HTML元素.style.样式属性="值";
    • 例如：将一个id 为 titles 的 div 字体改变为红色，字体大小改为 13px
    document.getElementById("titles").style.color="#FF0000";
document.getElementById("titles").style.fontSize="25px";
    • 上面代码中，CSS 中设置字体属性为 font-size，在 JavaScript 中则是 fontSize
    • 因为在 JavaScript中 “-” 代表减号，因此，如果 CSS 的属性有 “-”，则要省去，并且 “-” 后的字母要大写

    2、className 属性

    • className 属性可设置或返回元素的 class 样式
    • 语法如下
    HTML.元素.className="样式名称";
    • 示例
    //获取属性值：
HTMLElementObject.className
//设置属性值：
HTMLElementObject.className="classname"

    3.2.5 获取元素样式

    • JavaScript 中可以使用 style 属性获取样式的属性值，语法如下
    HTML元素.style.样式属性
    • 但是上面这种方法存在一定的缺陷，它只能获取行内样式的属性值，无法获取内部样式表或外部样式表中的属性值
    • 微软为每个元素提供了一个 currentStyle 对象，它包含所有元素的 style 对象的特性和任何违背覆盖的 CSS 规则的 style属性
    • currentStyle 对象语法如下
    HTML元素.currentStyle.样式属性
    • currentStyle 可以获取样式属性的值，但是只局限于 IE 浏览器，其他浏览器无法获取样式的属性值
    • DOM 提供了一个 getComputedStyle() 方法，此方法接收两个参数，需要获取样式的属性值
    • 语法格式如下
    document.defaultView.getComputedStyle(元素,null).属性
    • defaultView：获取文档的窗口对象
    • getComputedStyle：方法用于获取指定元素的 CSS 样式

    象语法如下**

    HTML元素.currentStyle.样式属性
    • currentStyle 可以获取样式属性的值，但是只局限于 IE 浏览器，其他浏览器无法获取样式的属性值
    • DOM 提供了一个 getComputedStyle() 方法，此方法接收两个参数，需要获取样式的属性值
    • 语法格式如下
    document.defaultView.getComputedStyle(元素,null).属性
    • defaultView：获取文档的窗口对象
    • getComputedStyle：方法用于获取指定元素的 CSS 样式

    你可能感兴趣的:(JavaScript,javascript,html,前端)

    • Long类型前后端数据不一致 igotyback 前端
      响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    • swagger访问路径 igotyback swagger
      Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
    • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
      示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
    • 四章-32-点要素的聚合 彩云飘过
      本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
      加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • node.js学习 小猿L node.jsnode.js学习vim
      node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
      这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
      在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    • 博客网站制作教程 2401_85194651 javamaven
      首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
      目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
    • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
      作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
    • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
      在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
      最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    • 补充元象二面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    • 微信小程序开发注意事项 jun778895 微信小程序小程序
      微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
      切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    • 字节二面 Redstone Monstrosity 前端面试
      1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    • 斟一小组鸡血视频 和自己一起成长
      http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
    • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
      点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
      许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
    • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
      一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
      【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
    • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
      第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    • 高性能javascript--算法和流程控制 海淀萌狗
      -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
      html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
      通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
    • ubuntu安装opencv最快的方法 Derek重名了
      最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
    • jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
      XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
    • mysql 分区查询优化 annan211 java分区优化mysql
      分区查询优化 引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。 所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。 可以通过查看explain执行计划，是否携带 partitions
    • MYSQL存储过程中使用游标 chicony Mysql存储过程
      DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla
    • mysql 和 sqlite 区别 Array_06 sqlite
      转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
    • pinyin4j使用 oloz pinyin4j
      首先需要pinyin4j的jar包支持；jar包已上传至附件内 方法一:把汉字转换为拼音；例如：编程转换后则为biancheng      /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
    • 微博发送私信 随意而生 微博
      在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据， 让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。
    • jsp 香水浓 jsp
      JSP初始化     容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行     这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。     当JSP网页完成初始化后
    • 在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
      在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号   最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx   现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
    • android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
      我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick 方法中 参数 arg2  是选中的序号，但是我不知道如何继续处理下去 1 2 3
    • jdk-6u26-linux-x64.bin 安装 baalwolf linux
      1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
    • MongoDB经典面试题集锦 BigBird2012 mongodb
      1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。 关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 在考虑数据库的成熟
    • JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScriptPromise
              Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。         在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r
    • [Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
      ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should
    • 【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
      隐式转换存在的必要性，   在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下：   val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {
    • Android JSON数据的解析与封装小Demo ronin47
      转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;    impor
    • [设计]字体创意设计方法谈 brotherlamp UIui自学ui视频ui教程ui资料
        从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
    • 单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java算法面试题
      import java.util.LinkedList; /* 单调队列 滑动窗口 单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减 题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就
    • struts2处理一个form多个submit chiangfai struts2
      web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">
    • shell查找上个月，陷阱及野路子 chenchao051 shell
      date -d "-1 month" +%F     以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。     野路子解决：假设当天日期大于15号
    • mysql导出数据中文乱码问题 daizj mysql中文乱码导数据
      解决mysql导入导出数据乱码问题方法： １、进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs
    • SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHPsmartysae
        对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为：   01 $path 
    • 《教父》系列台词 dcj3sjt126com
      Your love is also your weak point. 你的所爱同时也是你的弱点。   If anything in this life is certain, if history has taught us anything, it is that you can kill anyone.   不顾家的人永远不可能成为一个真正的男人。 &
    • mongodb安装与使用 dyy_gusi mongo
      一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库,     linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置     tar -vxf mongodb-linux-x86_64-ubun
    • Git排除目录 geeksun git
      在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。   有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1.  针对单一工程排除文件 这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
    • Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
      转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下 以下假设你的脚本文件名为 test。   2) 设置脚本文件的权限 $ sudo chmod 755
    • 第八章 流量复制/AB测试/协程 jinnianshilongnian nginxluacoroutine
      流量复制 在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
    • 电商系统商品表设计 lkl
      DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL
    • 修改phpMyAdmin导入SQL文件的大小限制 pda158 sqlmysql
      　用phpMyAdmin导入mysql数据库时，我的10M的 数据库不能导入，提示mysql数据库最大只能导入2M。 　　 phpMyAdmin数据库导入出错： 　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
    • Tomcat性能调优方案 Sobfist apachejvmtomcat应用服务器
      一、操作系统调优 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 【适用场景】 任何项目。 二、Java虚拟机调优 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J
    • SQLServer学习笔记 vipbooks 数据结构xml
      1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他