weixin_33851604
weixin_33851604

前端知识点总结——DOM

前端知识点总结——DOM

1.什么是DOM: Document Object Model

什么是: 专门操作网页内容的API标准——w3c
为什么: 统一不同浏览器操作网页内容的API标准
优点: 几乎所有浏览器100%兼容

2.DOM Tree:

什么是: 网页中所有内容在内存中都是保存在一棵树形结构中
网页中每项内容(元素,文本,属性,注释...)，都是树上的一个节点对象。
唯一的树根节点: document
为什么: 树形结构是最好的保存上下级包含关系的结构

节点对象: Node
网页中每项内容都是DOM树上的一个节点对象:
所有节点都有的三个属性:
nodeType: 节点类型

何时: 只要判断节点的类型时
包括: 
  document  9
  element    1
  attribute   2
  text       3
问题: 无法进一步区分元素的标签名

nodeName: 节点名称

何时: 只要进一步判断元素的标签名时
    ——可代替nodeType
包括:
 document   #document
 element     全大写标签名
 attribute     属性名——不常用!
 text        #text

nodeValue: 节点值 ——不常用

 document  null
 element    null
 attribute   属性值
 text       文本内容

3.查找: 4种:

1.不需要查找可直接获得节点:
document.documentElement html
document.head head
document.body body
document.forms[id/i] form

2.按节点间关系查找:
何时: 如果已经获得一个节点了。想找周围节点时。
包括: 2种树:

  1. 节点树: 包含网页中所有内容的完整树结构
    2大类关系:
    1.父子: 4种:
    elem.parentNode elem的父节点
    elem.childNodes elem的直接子节点
    elem.firstChild elem下的第一个直接子节点
    elem.lastChild elem下的最后一个直接子节点
    2.兄弟: 2种:
    elem.previousSibling elem的前一个兄弟元素
    elem.nextSibling elem的后一个兄弟元素
    问题: 受看不见的空字符的干扰!

2.元素树: 仅包含元素节点的树结构
2大类关系:

  1. 父子: 4种:
    elem.parentElement elem的父元素
    elem.children elem的直接子元素
    elem.firstElementChild elem下的第一个直接子元素
    elem.lastElementChild elem下的最后一个直接子元素

2.兄弟: 2种:

elem.previousElementSibling  elem的前一个兄弟元素
elem.nextElementSibling      elem的后一个兄弟元素

今后只要用DOM操作网页内容，都用元素树
说明: 元素树不是一棵新树，其实只是节点树的一个子集

childNodes和children: 动态集合(live collection)
什么是: 不实际存储属性值，每次访问集合都重新查找DOM树
优: 首次查找，效率高! 因为不用返回完整的属性。
缺: 每次访问集合，都会重新查找DOM树，降低效率
遍历:
不好: for(var i=0;i 好: for(var i=0,len=children.length;i

遍历指定父元素下的所有后代元素: 2种:
1.递归: 2步:
1.定义函数仅遍历指定父元素下的所有直接子元素
2.对每个直接子节点调用和父节点完全相同的操作
深度优先: 当一个节点同时拥有子节点和兄弟节点时，总是优先遍历子节点。
所有子节点遍历完，才返回遍历兄弟节点。
2.循环: 2步:
1.定义迭代器:

 迭代器: 可以依次获得每个后代元素节点的 专门对象
 如何: 
  创建: var iterator=document.createNodeIterator(
    parent, NodeFilter.SHOW_ELEMENT, null, false
  );

2.循环调用迭代器，获得下一个节点对象:

 var curr=iterator.nextNode()
 内置深度优先遍历的算法
 如果curr返回null，说明遍历结束

3.按HTML查找: 4种:
1.按id查找:

var elem=document.getElementById("id")
返回值: 一个元素
  如果找不到返回null!
强调: 1. 只能在document上调用

2.按标签名查找:

var elems=parent.getElementsByTagName("标签名")
返回值: 多个元素的集合
  如果找不到返回空集合
强调: 1. 可在任意父元素上调用
     2. 不但找直接子元素，且在所有后代中查找

3.按name查找:

var elems=document.getElementsByName("name")
返回值: 多个元素的集合
  如果找不到返回空集合
强调: 只能在document上调用

4.按class查找:

var elems=parent.getElementsByClassName("class")
返回值: 多个元素的集合
  如果找不到返回空集合
强调: 1.可在任意父元素上调用
     2.不但找直接子元素，且在所有后代中查找
     3.只要元素的一个class名匹配，就能找到该元素
      强调: 返回的集合都是动态集合
      问题: 每次只能按一个条件查找
      当查找条件复杂时，步骤很繁琐
      解决: 用选择器查找:

4.用选择器查找:

1.仅查找一个符合条件的:

var elem=parent.querySelector("选择器")
返回值: 一个元素
  如果找不到,返回null

2.查找多个符合条件的元素:

var elems=parent.querySelectorAll("选择器")
返回值: 多个元素的集合
  如果找不到返回空集合
  返回非动态集合: 实际存储属性值，即使反复访问集合，
  也不会导致反复查找DOM树
强调: 1. 可在任何父元素上调用
     2. 选择器只要相对于当前父元素内部即可
     3. 选择器的兼容性，受制于当前浏览器的兼容性

鄙视: 按HTML查找和按选择器查找的差别:

1.返回值: 按HTML查找返回动态集合
          按选择器查找返回非动态集合
2.效率: 首次查找: 按HTML查找效率高
                 按选择器查找效率低
3.易用性: 按HTML查找繁琐
          按选择器查找简单

总结: 今后，只要一个条件即可找到想要的元素，首选按HTML查找

    只要查找条件复杂，都选按选择器查找

jQuery中就是这么选择的

5.修改:

内容: .innerHTML .textContent .value
属性: 3种:
1.HTML标准属性: 2种:
1.核心DOM: 最初的DOM API，要求支持所有结构化文档

  优: 几乎万能   缺: 繁琐
 获取属性节点: var attrNode=elem.attributes[i]
 获取属性值: attrNode.value
   其实可以一步: var value=elem.getAttribute("属性名")
 修改属性值: elem.setAttribute("属性名","值")
 移除属性: elem.removeAttribute("属性名")
 判断是否包含指定属性: elem.hasAttribute("属性名")

2.HTML DOM: 专门操作HTML内容的API

            对核心DOM 常用API的简化
 优: 简单   缺: 不是万能
 简化: HTML DOM提前将所有标准属性，封装在了元素对象上，可用.直接访问.
  比如:
    获取属性值: elem.属性名
    修改属性值: elem.属性名="值"
     移除属性: elem.属性名=""
     判断是否包含指定属性: elem.属性名!==""
 特例: class属性: 
   ES的对象中已经先入为主的包含了内部属性class，用来记录对象创建时的类型名。
   HTML的class属性就无法同时存在
 所以: DOM: html的class属性，更名为className

2.状态属性: disabled selected checked
1.不能用核心DOM修改: 因为值是bool类型
2.只能用HTML DOM,打.修改
3.自定义扩展属性:
何时: 2种:

 1. 在元素上保存自定义数据
 2. 代替其他选择器，用来查找元素绑定事件

如何: 2套:

 不能用HTML DOM访问, 因为不是标准属性，未被提前封装在DOM元素对象中
 1. 普通属性名+核心DOM
 2. HTML5: 
  定义属性时: data-属性名="值"
  获取或修改属性值: elem.dataset.属性名

固定用法: 用自定义扩展属性代替其它选择器，为元素绑定事件

 为什么: 
   id: 唯一
   class: 经常变化
   elem: 做一种效果，可能使用任何元素
 解决: 今后，只要给元素绑定事件时，都要先为元素添加自定义扩展属性，
 再用自定义扩展属性查找元素，绑定事件
  优: 没有个数限制, 不会受样式影响而变化，不受元素限制
 如何: 
  定义: data-属性名="值"
  查找: 只能用属性选择器查找:[data-属性名=值]

6.样式: 2种:

1.内联样式:

修改: elem.style.css属性名
 强调: 1. css属性名都要去横线变驼峰
      2.长度数值必须加px单位
获取: 
 问题: 不能用elem.style.css属性名
 原因: elem.style仅包含内联样式! 无法获得内部或外部样式表中的样式
 解决: 获取计算后的样式!
  计算后的样式: 最终应用到元素上的所有样式的集合
                且将相对值换算为绝对值
  何时: 只要获取样式时，都要获取计算后的样式
  如何: 2步:
    1. 获得计算后的style对象:
      var style=getComputedStyle(elem);
    2. 从style中获得css属性值
      var value=style.css属性值
  强调: getComputedStyle获得样式都是只读！

2.内部/外部: 3步:
1.获得样式表对象:

 var sheet=document.styleSheets[i];

2.获得样式表对象中的cssRule

 什么是cssRule: 样式表中每个{}就是一个cssRule
 如何获得: var rule=sheet.cssRules[i]

3.获得cssRule中的style对象的css属性

 var value=rule.style.css属性

问题: 用elem.style.css属性一句话只能修改一个css属性

 如果同时修改多个属性，代码会很繁琐

解决: 用class批量应用样式
如何: 2步:

  1. 在css中准备好各种class
  2. 用程序，在对应情况下，选择对应的class应用！

7.添加:

添加: 3步:

  1. 创建空元素
    var a=document.createElement("a");

2.设置必要属性
a.href="http://tmooc.cn";
a.innerHTML="go to tmooc";
3.将新元素添加到DOM树:3种api:
parent.appendChild(a) 将a追加到指定父元素下末尾
parent.insertBefore(a, child) 将a插入到指定父元素下的现有子元素之前
parent.replaceChild(a, child) 用a替换指定父元素下的现有子元素

优化: 尽量减少操作DOM树的次数, 从而减少重排重绘
为什么:
HTML页面加载过程:
html -> DOM Tree

       ↓
      Render Tree -> ***layout -> paint
       ↑

css -> cssRules
如何:

  1. 如果同时添加父元素和子元素时，应先在内存中，将所有子元素添加到父元素中，
    再最后一次性将父元素添加到页面上

8.删除:

优化: 尽量减少操作DOM树的次数
为什么: 减少重排重绘
如何: 2种:
1.如果同时添加父元素和子元素，则应该现在内存中，将子元素添加到父元素，再最后将父元素一次性整体添加到DOM Tree
2.如果父元素已经在页面上了，要添加多个平级子元素，则应该使用文档片段:

什么是文档片段: 内存中临时存储多个子元素的虚拟父元素
何时: 只要向网页中同时添加多个平级子元素时，都可用文档片段
如何: 3步:
 1.创建文档片段
 2.将子元素添加到文档片段
 3.将文档片段整体添加到DOM 树

删除: parent.removeChild(child)

通常: child.parentNode.removeChild(child)

9.HTML DOM常用对象:

Image: 创建: var img=new Image();

Select: 代表页面上一个select元素
属性:
.selectedIndex 获得当前select选中的option的下标位置
.value 获得select中选中的option的值

      如果选中的option没有value属性，则用innerHTML代替

.options 获得当前select下所有option的集合

 .options.length 获得select下所有option的个数
  .options.length=0

.length => .options.length

 清空所有option  .length=0

方法: .add(option) 追加一个option

    问题: .add不支持文档片段
  .remove(i) 移除i位置的option

Option: 代表select下一个option元素
创建: var opt=new Option(text,value)
属性: .text .value .index

Table: 代表一个table元素
管着行分组:
创建行分组: var thead=table.createTHead()

          var tbody=table.createTBody()
          var tfoot=table.createTFoot()

删除行分组: table.deleteTHead()

          table.deleteTFoot()

获取行分组: table.tHead table.tFoot table.tBodies[i]
行分组: 管着行:
添加行: var tr=行分组.insertRow(i)

   在i位置插入一个新行
   固定套路: 1. 在末尾追加新行: .insertRow()
            2. 在开头插入新行: .insertRow(0)

删除行: 行分组.deleteRow(i) ——不常用!

    问题: i要求是在当前行分组内的相对下标位置
         无法自动获得
    应换为: table.deleteRow(tr.rowIndex)
     tr.rowIndex可自动获得当前行在整个table内的位置

获取行: 行分组.rows[i]
行: 管着格
添加格: var td=tr.insertCell(i)

固定用法: 行末尾追加一个格: tr.insertCell()
说明: 只能创建td，不能创建th

删除格: tr.deleteCell(i)
获取格: tr.cells[i]

Form: 代表一个form元素
获取: var form=document.forms[i/id]
属性: .elements 获得表单中所有表单元素的集合

     .elements.length  获得表单中，表单元素的个数
   .length => .elements.length

方法: .submit() 代替submit按钮，在程序中实现手动提交表单

表单元素:
获取: form.elements[i/id/name]

    更简化: form.name

方法: .focus 让当前表单元素获得焦点

结语：觉得总结的还可以的话，点下赞咯，你们的鼓励是我前进的动力，谢谢各位老铁们！

你可能感兴趣的:(前端知识点总结——DOM)

  • android系统selinux中添加新属性property 辉色投像
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 用Python实现简单的猜数字游戏 程序媛了了 python游戏java
    猜数字游戏代码：importrandomdefpythonit():a=random.randint(1,100)n=int(input("输入你猜想的数字："))whilen!=a:ifn>a:print("很遗憾，猜大了")n=int(input("请再次输入你猜想的数字："))elifna::如果玩家猜的数字n大于随机数字a，则输出"很遗憾，猜大了"，并提示玩家再次输入。elifn
  • react-intl——react国际化使用方案 苹果酱0567 面试题汇总与解析java开发语言中间件springboot后端
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
  • 使用由 Python 编写的 lxml 实现高性能 XML 解析 hunyxv python笔记pythonxml
    转载自：文章lxml简介Python从来不出现XML库短缺的情况。从2.0版本开始，它就附带了xml.dom.minidom和相关的pulldom以及SimpleAPIforXML(SAX)模块。从2.4开始，它附带了流行的ElementTreeAPI。此外，很多第三方库可以提供更高级别的或更具有python风格的接口。尽管任何XML库都足够处理简单的DocumentObjectModel(DOM
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Kubernetes部署MySQL数据持久化 沫殇-MS KubernetesMySQL数据库kubernetesmysql容器
    一、安装配置NFS服务端1、安装nfs-kernel-server：sudoapt-yinstallnfs-kernel-server2、服务端创建共享目录#列出所有可用块设备的信息lsblk#格式化磁盘sudomkfs-text4/dev/sdb#创建一个目录：sudomkdir-p/data/nfs/mysql#更改目录权限：sudochown-Rnobody:nogroup/data/nfs
  • C#动态加载DLL程序集及使用反射创建实例-简记 不全 C#相关Asp.netWebFormAsp.netMVCc#Assembly反射程序集
    Assembly动态加载程序集：分两种情况：1、需要加载的程序集已经在程序中被引用了，则直接从当前程序域中查找即可：Assemblyassembly=AppDomain.CurrentDomain.GetAssemblies().FirstOrDefault(x=>x.GetName().Name.Contains("theAssemblyName"));2、需要加载的程序集未被加载，则使用程序集
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • vue keep-alive w_wx_x
    作用：  vue内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM  keep-alive是用在一个直属子组件被开关的情形，同时只有一个子组件在渲染，若有v-for则不会工作  注：keep-alive是一个抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中//页面文件//路由exportdefaultnewRouter({routes:[{path:'/',name:'
  • Vue组件学习 yancolin
    Vue的精华之处就在于它的组件，重复使用，节省代码，提升工作效率。Vue组件要使用先要注册，注册分为全局的和局部的注册。全局注册：注：1.my-component就是注册的组件自定义标签名称;2.template的DOM结构必须被一个元素包含，如果直接写成'全局组件'，不带""是无法渲染的。Vue.component('my-component',{template:'全局组件';});varap
  • document获取元素的方法 小成语 js平时js
    js学习总结----DOM获取元素的方法（8个）DOM:documentobjectmodel文档对象模型DOM就是描述整个html页面中节点关系的图谱，可以如下图理解在DOM中，提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。1、获取页面中元素的方法1）、document.getElementById('元素的ID')在整个文档中，通过元素的ID获取到这个元素对象(获取的是一个
  • vue 两个弹窗时出现，打开第二个弹窗 是灰色的，再点击才是正常 光影3415 vue.jsjavascript前端
    如果你使用的是ElementUI，el-dialog组件有一个append-to-body属性，这个属性可以将弹窗的DOM直接挂载到body标签上，这样可以避免一些层级嵌套问题：
  • 基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element（解决SecureRandom造成的服务器请求缓慢） Tate_Brown gitJAVAIDEADEBUGVUE
    用md5两次加盐密码，可以灵活更换算法--直接上代码地址：JAVA后台：https://github.com/TateBrownJava/TwoFALogindemoBackendVue前端：https://github.com/TateBrownJava/TwoFALoginDemofrontend-------------------------------------------------
  • Open3D 使用RANSAC分割平面 今夕是何年， 单目+双目计算机视觉
    目录1，概述2，拟合平面3，实现过程4，主要函数：defsegment_plane(self,distance_threshold,ransac_n,num_iterations):'''5，代码实现6，结果展示1，概述随机抽样一致性算法QRANSAC(Randomsampleconsensus)是一种迭代的方法来从一系列包含有离异值的数据中计算数学模型参数的方法。RANSAC算法本质上由两步组成
  • groupby 中如何显示 tqdm 的进度条？ domodo2020
    在循环时调用tqdm显示进度已经是一个常规操作，常见的方式是foriiintqdm(...):...while循环的情况类似，whileicntintqdm(range(n)):...icnt+=1这里记录没有显式循环时，在groupby中的用法：importpandasaspdimportnumpyasnpfromtqdmimporttqdmdf=pd.DataFrame(np.random.r
  • vue3 内置组件＜Teleport＞ fishmemory7sec vue3vue.js前端
    官方文档：Teleport内置组件将一个组件的模板内容渲染到指定的DOM节点位置，而不是在组件自身的挂载点。组件的参数说明：to：必填项。指定目标容器。可以是选择器或实际元素。类型：string|HTMLElement作用：指定要将内容传送（teleport）到的目标位置。可以是一个CSS选择器字符串，用于选择一个现存的DOM元素，也可以是一个实际的DOM元素对象引用。示例：disabled：可选
  • Python——俄罗斯方块 星和月 pythonpygame开发语言
    俄罗斯方块游戏是一款经典的益智游戏，通常使用编程语言Python来实现。下面是一个简单的俄罗斯方块游戏的示例代码：importpygameimportrandom#定义颜色BLACK=(0,0,0)WHITE=(255,255,255)RED=(255,0,0)GREEN=(0,255,0)BLUE=(0,0,255)CYAN=(0,255,255)MAGENTA=(255,0,255)YELLO
  • vue 生成PDF(A4标准PDF分页) qq_39016177 HTML2CanvasjsPDF导出PDF转换DOM操作
    1.先安装两个插件//页面转图片npminstall--savehtml2canvas//图片转PDFnpminstalljspdf--save 2.在需要导出的dom节点增加ref='pdf'例如  这是待转换的页面，点击导出点击导出PDF3.定义导出方法handleExport(){   downloadPDF(this.$refs.pdf);},4.在页面导入 import{download
  • python有趣游戏代码大全 uolo_python 游戏
    一.贪吃蛇运行以下代码，将会弹出一个窗口显示贪吃蛇游戏。你可以使用箭头键控制贪吃蛇的移动。吃到食物后蛇的长度会增加，如果蛇触碰到边界或者自己则游戏结束。按下Q键退出游戏，按下C键重新开始游戏。importpygameimportrandom#初始化pygame.init()#设置游戏窗口window_width,window_height=640,480window=pygame.display.
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • python数组的基本操作 迟遇3 python开发语言
    一.创建数组arr:list[int]=[0]*8num1:list[int]=[1,5,9,8,6]二.访问元素1.指定访问（通过索引（下标））defrandom_a(nums:list[int])->int:returnnums[2]print(random_a(arr))2.随机访问(会访问不同的元素)defrandom_access(nums:list[int])->int:"""随机访问
  • Vue 和 React 的对比 淘淘是只狗 vueReactvue.jsreact.jsjavascript
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
  • react 更新元素状态 叶绿素yls
    所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
  • 把html字符串转为可以被js操作的dom 微特尔普拉斯 javascriptwebnodejavascripthtml前端
    在JavaScript中，您可以使用DOMParserAPI将HTML字符串转换为可操作的DOM节点。以下是具体步骤：1.创建DOMParser实例：constparser=newDOMParser();2.使用parseFromString()方法解析HTML字符串：consthtmlString='Hello,world!';constdoc=parser.parseFromString(ht
  • DOM事件与元素属性操作基本应用 amanohina
    事件事件：什么时候，做什么事执行机制：触发——响应绑定事件三要素1.事件源：绑定给谁事件2.事件类型：绑定什么类型的事件比如：click单击3.事件函数：事件发生后执行什么内容，写在函数内部事件监听JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发了绑定事件，就会立即执行事件函数常见事件监听方法方法1：绑定HTML元素属性方法2：绑定DOM对象属性绑定H
  • 概率图模型（PGM）综述 医学影像处理 概率图模型概率图模型综述
    RefLink:http://www.sigvc.org/bbs/thread-728-1-1.htmlGraphicalModel的基本类型基本的GraphicalModel可以大致分为两个类别：贝叶斯网络(BayesianNetwork)和马尔可夫随机场(MarkovRandomField)。它们的主要区别在于采用不同类型的图来表达变量之间的关系：贝叶斯网络采用有向无环图(DirectedAc
  • qt 创建随机数 入梦游 qt
    qt中有两种创建随机数的方法，一种是旧方法，一种是新方法目录旧方法：已过时intqrand（）voidqsrand（uintseed）Example新方法QRandomGenerator::global()->bouned(inthighest)QRandomGenerator::global()->generate()更多旧方法：已过时intqrand（）生成一个伪随机数，可以使用qsrand（
  • eclipse maven IXHONG eclipse
    eclipse中使用maven插件的时候，运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.   可以设一个环境变量M2_HOME指
  • timer cancel方法的一个小实例 alleni123 多线程timer
    package com.lj.timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; public class MyTimer extends TimerTask { private int a; private Timer timer; pub
  • MySQL数据库在Linux下的安装 ducklsl mysql
    1.建好一个专门放置MySQL的目录 /mysql/db数据库目录 /mysql/data数据库数据文件目录 2.配置用户，添加专门的MySQL管理用户 >groupadd mysql ----添加用户组 >useradd -g mysql mysql ----在mysql用户组中添加一个mysql用户 3.配置，生成并安装MySQL >cmake -D
  • spring------>>cvc-elt.1: Cannot find the declaration of element Array_06 springbean
    将-------- <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"     xmlns:xsi="http://www.w3
  • maven发布第三方jar的一些问题 cugfy maven
    maven中发布 第三方jar到nexus仓库使用的是 deploy:deploy-file命令 有许多参数，具体可查看 http://maven.apache.org/plugins/maven-deploy-plugin/deploy-file-mojo.html 以下是一个例子： mvn  deploy:deploy-file -DgroupId=xpp3
  • MYSQL下载及安装 357029540 mysql
        好久没有去安装过MYSQL，今天自己在安装完MYSQL过后用navicat for mysql去厕测试链接的时候出现了10061的问题，因为的的MYSQL是最新版本为5.6.24，所以下载的文件夹里没有my.ini文件，所以在网上找了很多方法还是没有找到怎么解决问题，最后看到了一篇百度经验里有这个的介绍，按照其步骤也完成了安装，在这里给大家分享下这个链接的地址
  • ios TableView cell的布局 张亚雄 tableview
      cell.imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:[indexPath row]]];           CGSize itemSize = CGSizeMake(60, 50);   &nbs
  • Java编码转义 adminjun java编码转义
    import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class ChangeCharset { /** 7位ASCII字符，也叫作ISO646-US、Unicode字符集的基本拉丁块 */ public static final Strin
  • Tomcat 配置和spring aijuans spring
    简介 Tomcat启动时，先找系统变量CATALINA_BASE，如果没有，则找CATALINA_HOME。然后找这个变量所指的目录下的conf文件夹，从中读取配置文件。最重要的配置文件：server.xml 。要配置tomcat，基本上了解server.xml，context.xml和web.xml。 Server.xml --  tomcat主
  • Java打印当前目录下的所有子目录和文件 ayaoxinchao 递归File
    其实这个没啥技术含量，大湿们不要操笑哦，只是做一个简单的记录，简单用了一下递归算法。   import java.io.File; /** * @author Perlin * @date 2014-6-30 */ public class PrintDirectory { public static void printDirectory(File f
  • linux安装mysql出现libs报冲突解决 BigBird2012 linux
    linux安装mysql出现libs报冲突解决 安装mysql出现 file /usr/share/mysql/ukrainian/errmsg.sys from install of MySQL-server-5.5.33-1.linux2.6.i386 conflicts with file from package mysql-libs-5.1.61-4.el6.i686  
  • jedis连接池使用实例 bijian1013 redisjedis连接池jedis
    实例代码： package com.bijian.study; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.JedisPoo
  • 关于朋友 bingyingao 朋友兴趣爱好维持
      成为朋友的必要条件：    志相同，道不合，可以成为朋友。譬如马云、周星驰一个是商人，一个是影星，可谓道不同，但都很有梦想，都要在各自领域里做到最好，当他们遇到一起，互相欣赏，可以畅谈两个小时。     志不同，道相合，也可以成为朋友。譬如有时候看到两个一个成绩很好每次考试争做第一，一个成绩很差的同学是好朋友。他们志向不相同，但他
  • 【Spark七十九】Spark RDD API一 bit1129 spark
    aggregate package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} //测试RDD的aggregate方法 object AggregateTest { def main(args: Array[String]) { val conf = new Spar
  • ktap 0.1 released bookjovi kerneltracing
    Dear, I'm pleased to announce that ktap release v0.1, this is the first official release of ktap project, it is expected that this release is not fully functional or very stable and we welcome bu
  • 能保存Properties文件注释的Properties工具类 BrokenDreams properties
            今天遇到一个小需求：由于java.util.Properties读取属性文件时会忽略注释，当写回去的时候，注释都没了。恰好一个项目中的配置文件会在部署后被某个Java程序修改一下，但修改了之后注释全没了，可能会给以后的参数调整带来困难。所以要解决这个问题。     &nb
  • 读《研磨设计模式》-代码笔记-外观模式-Facade bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 百度百科的定义： * Facade（外观）模式为子系统中的各类（或结构与方法）提供一个简明一致的界面， * 隐藏子系统的复杂性，使子系统更加容易使用。他是为子系统中的一组接口所提供的一个一致的界面 * * 可简单地
  • After Effects教程收集 cherishLC After Effects
    1、中文入门 http://study.163.com/course/courseMain.htm?courseId=730009 2、videocopilot英文入门教程（中文字幕） http://www.youku.com/playlist_show/id_17893193.html 英文原址： http://www.videocopilot.net/basic/ 素
  • Linux Apache 安装过程 crabdave apache
    Linux Apache 安装过程   下载新版本： apr-1.4.2.tar.gz（下载网站：http://apr.apache.org/download.cgi） apr-util-1.3.9.tar.gz（下载网站：http://apr.apache.org/download.cgi） httpd-2.2.15.tar.gz（下载网站：http://httpd.apac
  • Shell学习 之 变量赋值和引用 daizj shell变量引用赋值
    本文转自：http://www.cnblogs.com/papam/articles/1548679.html Shell编程中，使用变量无需事先声明，同时变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z） 中间不能有空格，可以使用下划线（_） 不能使用标点符号 不能使用bash里的关键字（可用help命令查看保留关键字） 需要给变量赋值时，可以这么写：
  • Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行） dcj3sjt126com javajdk
    Java SE 第一讲： Java SE：Java Standard Edition Java ME: Java Mobile Edition Java EE：Java Enterprise Edition Java是由Sun公司推出的（今年初被Oracle公司收购）。 收购价格：74亿美金 J2SE、J2ME、J2EE JDK：Java Development
  • YII给用户登录加上验证码 dcj3sjt126com yii
    1、在SiteController中添加如下代码： /** * Declares class-based actions. */ public function actions() { return array( // captcha action renders the CAPTCHA image displ
  • Lucene使用说明 dyy_gusi Lucenesearch分词器
    Lucene使用说明 1、lucene简介 1.1、什么是lucene     Lucene是一个全文搜索框架，而不是应用产品。因此它并不像baidu或者googleDesktop那种拿来就能用，它只是提供了一种工具让你能实现这些产品和功能。 1.2、lucene能做什么     要回答这个问题，先要了解lucene的本质。实际
  • 学习编程并不难,做到以下几点即可! gcq511120594 数据结构编程算法
    不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
  • Java面试十问之三：Java与C++内存回收机制的差别 HNUlanwei javaC++finalize()堆栈内存回收
    大家知道， Java 除了那 8 种基本类型以外，其他都是对象类型（又称为引用类型）的数据。 JVM 会把程序创建的对象存放在堆空间中，那什么又是堆空间呢？其实，堆（ Heap）是一个运行时的数据存储区，从它可以分配大小各异的空间。一般，运行时的数据存储区有堆（ Heap）和堆栈（ Stack），所以要先看它们里面可以分配哪些类型的对象实体，然后才知道如何均衡使用这两种存储区。一般来说，栈中存放的
  • 第二章 Nginx+Lua开发入门 jinnianshilongnian nginxlua
    Nginx入门 本文目的是学习Nginx+Lua开发，对于Nginx基本知识可以参考如下文章： nginx启动、关闭、重启 http://www.cnblogs.com/derekchen/archive/2011/02/17/1957209.html agentzh 的 Nginx 教程 http://openresty.org/download/agentzh-nginx-tutor
  • MongoDB windows安装 基本命令 liyonghui160com
      windows安装    安装目录：   D:\MongoDB\   新建目录   D:\MongoDB\data\db   4.启动进城：   cd D:\MongoDB\bin   mongod -dbpath D:\MongoDB\data\db   &n
  • Linux下通过源码编译安装程序 pda158 linux
    一、程序的组成部分 　　Linux下程序大都是由以下几部分组成： 　　二进制文件：也就是可以运行的程序文件 　　库文件：就是通常我们见到的lib目录下的文件 　　配置文件：这个不必多说，都知道 　　帮助文档：通常是我们在linux下用man命令查看的命令的文档 　　 二、linux下程序的存放目录 　　linux程序的存放目录大致有三个地方： 　　/etc, /b
  • WEB开发编程的职业生涯４个阶段 shw3588 编程Web工作生活
    觉得自己什么都会 2007年从学校毕业，凭借自己原创的ASP毕业设计，以为自己很厉害似的，信心满满去东莞找工作，找面试成功率确实很高，只是工资不高，但依旧无法磨灭那过分的自信，那时候什么考勤系统、什么OA系统、什么ERP，什么都觉得有信心，这样的生涯大概持续了约一年。 根本不是自己想的那样 2008年开始接触很多工作相关的东西，发现太多东西自己根本不会，都需要去学，不管是asp还是js，
  • 遭遇jsonp同域下变作post请求的坑 vb2005xu jsonp同域post
    今天迁移一个站点时遇到一个坑爹问题,同一个jsonp接口在跨域时都能调用成功,但是在同域下调用虽然成功,但是数据却有问题. 此处贴出我的后端代码片段 $mi_id = htmlspecialchars(trim($_GET['mi_id '])); $mi_cv = htmlspecialchars(trim($_GET['mi_cv ']));  贴出我前端代码片段: $.aj
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他