喵了个咪蛋儿
喵了个咪蛋儿

wenb前端学习笔记25-事件发展历程及操作方式

一、事件

对可识别的控件的操作就是事件，在特定时间发生的事情

1.1 事件流的概念

事件执行的流程就是事件流，事件流实际上就是在元素之间可以传递的事件的过程

1.2 事件流的分类

  • 捕获流事件
    网景公司在Netscape浏览器中提出捕获事件流，事件触发机制是从最外层元素向最内层元素查找事件的来源
  • 冒泡流事件
    微软公司在IE浏览器中提出的事件执行流程，事件由触发事件的第一个元素向外层元素逐渐扩散（从内向外）
  • 标准事件流程
    在DOM2阶段，W3C提出了标准的事件流程，将事件的流程一共划分为三个阶段：事件的捕获阶段、处于事件阶段、事件的冒泡阶段

&& 绝大多数浏览器都是支持W3C标准事件模式，低版本IE浏览器并不支持事件的捕获流，但绝大多数的常用事件都在事件流的冒泡阶段可以实现
【冒泡事件流代码示例】


<html>
	<head>
		<meta charset="utf-8">
		<title>事件title>
		<style>
			div{
				padding: 30px;
				border: 2px solid black;
			}
			#red{
				background: red;
			}
			#orange{
				background: orange;
			}
			#yellow{
				background: yellow;
			}
			#green{
				background: green;
			}
			#cyan{
				background: cyan;
			}
			#blue{
				background: blue;
			}
			#purple{
				background: purple;
			}
		style>
	head>
	<body>
		
		
		<div id="red" onclick="show(this)">
			<div id="orange" onclick="show(this)">
				<div id="yellow" onclick="show(this)">
					<div id="green" onclick="show(this)">
						<div id="cyan" onclick="show(this)">
							<div id="blue" onclick="show(this)">
								<div id="purple" onclick="show(this)">div>
							div>
						div>
					div>
				div>
			div>
		div>
		
		<script>
			// 在标签的事件函数中使用this参数，表示将当前标签（元素节点）当作实参传入事件函数
			function show(element){  //element接收this参数
				console.log(element.id);
			}
		script>
	body>
html>

wenb前端学习笔记25-事件发展历程及操作方式_第1张图片

二、事件的添加与删除操作

2.1 DOM0阶段

<标签 事件名="事件函数()">内容
元素节点.事件名=事件函数
【注】

  1. 使用方法2时绝大多数情况下使用的都是匿名函数
  2. 缺点： 无法指定DOM中事件的阶段，因为该阶段还没有事件标准。且事件效率较低
  3. 优点： 所有浏览器都支持该方法，没有兼容性问题

2.2 DOM2阶段

2.2.1 IE版本
关键字 释义 格式 事件类型 事件函数
attachEvent(); 注册事件 元素节点.attachEvent('事件类型',事件函数); 使用带有on的事件类型，如onclick 推荐使用声明函数(因为删除时还需要此函数)
detachEvent(); 移除事件 元素节点.detachEvent('事件类型',事件函数); 使用带有on的事件类型，如onclick 推荐使用声明函数(因为删除时还需要此函数)
2.2.2 非IE版本
关键字 释义 格式 事件类型 事件函数 事件阶段
addEventListener(); 注册事件 元素节点.addEventListener('事件类型',事件函数,事件阶段); 使用事件名称，不可以使用on，如click,mouseover 推荐使用声明函数(因为移除时还需要此函数) true捕获流
false冒泡流
removeEventListener(); 取消事件 元素节点.removeEventListener('事件类型',事件函数,事件阶段); 使用事件名称，不可以使用on，如click,mouseover 推荐使用声明函数(因为移除时还需要此函数) true捕获流
false冒泡流		 

<html>
	<head>
		<meta charset="utf-8">
		<title>事件title>
		<style>
			#moon{
				width: 800px;
				height: 20px;
				background: palegoldenrod;
			}
			#home{
				width: 800px;
				height: 20px;
				background: paleturquoise;
			}
			#farmer{
				width: 800px;
				height: 20px;
				background: palevioletred;
			}
			#eat{
				width: 800px;
				height: 20px;
				background: palegreen;
			}
		style>
	head>
	<body>
		
		<div id="moon" onclick="showTxt(this)">床前明月光div>
		<div id="home" onclick="showTxt(this)">低头思故乡div>
		
		
		<div id="farmer">锄禾日当午div>
		
		<div id="eat">谁知盘中餐div>
		
		<script>
			// DOM0事件操作
			// DOM0事件添加 方法1
			function showTxt(ele){
				alert(ele.innerHTML);
			}
			// 取消DOM0事件
			var moon=document.getElementById('moon');
			moon.onclick=null;
			// DOM事件添加 方法2
			var home=document.getElementById('home');
			home.onclick=function(){
				// 在对象内部使用this，this代表当前对象本身
				alert(this.innerHTML);
			}
			
			// DOM2阶段事件操作
			// IE浏览器（只支持冒泡流）——————————————————
			var farmer=document.getElementById('farmer');
			// 事件函数
			function showFarmer(){
				alert(farmer.innerHTML);
			}
			// 事件添加
			farmer.attachEvent('onclick',showFarmer);
			// 事件移除(五秒后移除)
			setTimeout(function(){
				farmer.detachEvent('onclick',showFarmer);
			},5000);
			
			// 非IE浏览器——————————————————————————————
			var eat=document.getElementById('eat');
			// 事件函数
			function showEat(){
				alert(eat.innerHTML);
			}
			// 事件添加
			eat.addEventListener('click',showEat,true);
			// 事件移除(五秒后移除)
			setTimeout(function(){
				// 需保证参数和添加事件的完全一致
				eat.removeEventListener('click',showEat,true);
			},5000);
		script>
	body>
html>

2.3 兼容性事件工具对象

【制作事件兼容性工具】
需考虑的问题：

  1. DOM0还是DOM2？ 能用DOM2就用DOM2
  2. IE浏览器还是非IE？

<html>
	<head>
		<meta charset="utf-8">
		<title>事件title>
		<style>
			#lili{
				width: 800px;
				height: 20px;
				background: peru;
			}
		style>
	head>
	<body>
		
		<div id="lili">粒粒皆辛苦div>

		<script>
			// 事件兼容性工具
			// 定义事件工具对象
			var eventTools={
				// 添加事件
				// element 标签（元素）  type事件类型(不带on)   func 事件函数
				addEvent:function(element,type,func){
					// 判断是否支持DOM2的addEventListener方法
					if(element.addEventListener){ //非IE DOM2，type：click
						element.addEventListener(type,func,false);  //ie不支持捕获流因此参数使用false
					}else if(element.attachEvent){  //IE DOM2，type：onclick
						element.attachEvent('on'+type,func); 
					}else{  //DOM0
						element['on'+type]=func;  //中括号将字符串变为对象成员属性（对象的成员是个变量）
					}	
				},
				// 取消事件
				delEvent:function(element,type,func){
					// 判断是否支持DOM2的addEventListener方法
					if(element.removeEventListener){ //非IE DOM2，type：click
						element.removeEventListener(type,func,false);  //ie不支持捕获流因此参数使用false
					}else if(element.detachEvent){  //IE DOM2，type：onclick
						element.detachEvent('on'+type,func); 
					}else{  //DOM0
						element['on'+type]=null;  //中括号将字符串变为对象成员属性（对象的成员是个变量）
					}
				}
			}
			// 为div添加事件
			var lili=document.getElementById('lili');
			// 事件函数
			function minnong(){
				alert(lili.innerHTML);
			}
			// 添加事件
			eventTools.addEvent(lili,'click',minnong);
		script>
	body>
html>

三、关于DOM标准

共分为四个标准阶段

3.1 DOM0 没有标准阶段

这实际上是未形成标准的试验性质的初级阶段的DOM，现在习惯上被称为DOM0

3.2 DOM1

DOM1阶段主要定义了HTML和XML文档的底层结构。在DOM1中，DOM由两个模块组成: DOM Core（DOM核心）和DOM HTML。

3.3 DOM2

在DOM1的基础上，DOM2和DOM3引入了更多的交互能力，也支持了更高级的XML特性。DOM2和DOM3将DOM分为更多具有联系的模块。

  • DOM视图(DOM Views)：定义了跟踪不同文档视图的接口
  • DOM事件(DOM Events)：定义了事件和事件处理的接口
  • DOM样式(DOM Style)：定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围(DOM Traversal and Range)：定义了遍历和操作文档树的接口

3.4 DOM3

  • DOM加载和保存模块(DOM Load and Save)：引入了以统一方式加载和保存文档的方法
  • DOM验证模块(DOM Validation)：定义了验证文档的方法
  • DOM核心的扩展(DOM Style)：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base

你可能感兴趣的:(web前端学习)

  • WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站 html5网页设计 web前端期末大作业期末网页设计作业前端网页设计与制作html静态网页html期末大作业
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • 【网页设计】web前端期末大作业html+css web学生网页设计 web前端cssdreamweaverhtmlhtml5期末作业
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • web前端学习教程：JS的作用域链 Eric_V
    我们都知道js是一个基于对象的语言，系统内置各种对象。而window作为一个天然存在的全局对象，它承担了所有全局资源的存储。我们使用的任何全局变量，都是window下的。也就是说，在js中，实际上没有任何对象、方法是可以独立的，它们必须依赖于某个对象才可以被访问或执行。就像alert()，它的完整写法是window.alert()parseInt(),完整写法是window.parseInt()所
  • 2019web前端学习路线，教你认识HTML 强哥科技兴
    近两年来，前端开发工程师越来越火了，薪资待遇也快接近后端开发工程师了。2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后的金三银四能靠实力找到一份满意的工作！有的小伙伴很迷茫，想学前端，却没有方向！今天来给大家讲讲，在2019年，我们学习前端开发，如何才能高效学会前端开发？HTML基础学习目标1、本专业介绍、HTML相关概念，
  • 面试官当面撕程序员简历：大专生我们不收！ 秋风_bdfd
    每个人都有过求职的经历，这个过程也是很痛苦的，因为求职不可能会让你一帆风顺的，经常会使你碰壁。即便是被拒绝了之后，想想自己的哪些方面的不足，在下一次面试的时候做好准备，也没什么抱怨的。但是总有一些面试官的做法却让人感到愤怒。这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎
  • Web前端学习笔记 jusw123456 前端学习javascript
    文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、
  • 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签 lmonkey_01
    一、html5概述html5是超文本标记语言（html）的第五次重大修改，可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5，css3的新特性，以及新增的JavaScript接口。本节的主要内容是讲解html5中新增加的布局标签和媒体标签。二、html5布局标签在此前我们学习的内容中，网页布局一直都是使用div作为容器，html5新标准中，为了让容器元素有语义
  • Web前端学习-day03-JavaScript 王敏晓 前端javascriptjava
    溢出设置overflowvisible显示(默认)hidden隐藏scroll滚动显示行内元素垂直对其方式vertical-aligntop上对齐middle中间对齐bottom下对齐baseline基线对齐显示层级z-index当元素脱离文档流出现层叠显示时undefined可以通过z-index设置显示层级z-index的值越大显示约靠前此样式只能添加给非静态定位的元素undefined静态定
  • 适合初学者的WEB前端学习路线 千_锋小小千
    在当下来说web前端开发工程师可谓是高薪水的职业了。所以现在学习web前端开发的技术人员也是日益增多了，但是在学习web前端开发中盲目的去学习而没有一个完整的思路和学习路线也是不行的。那么想学好web前端，该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?在此为大家整理完整的适合零基础学员的web前端学习路线分享给大家：1.HTML5介绍内容包括：(互联网发展趋势、H5语言的优势
  • 2020年小白要知道的Web前端学习路线 web前端学习指南
    今天小编要跟大家分享的文章是关于2020年小白要知道的Web前端学习路线。准备在2020年学习Web前端技术的小伙伴们来和小编一起看看本篇文章，希望能够对大家有所帮助！第一阶段：●HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、●JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器
  • 【融职培训】Web前端学习 第7章 Vue基础教程2 创建Vue项目 lmonkey_01
    一、使用vue/cli创建Vue项目在第七章我们已经介绍了如何使用npm命令全局安装node包，本节我们需要安装一个名为@vue/cli的包来创建我们的vue项目，安装代码如下所示：npminstall-g@vue/cli安装完成之后，在命令行可以使用Vue命令命令创建一个vue项目，具体命令如下所示vuecreatehello安装过程需要连接国外服务器下载项目模板和依赖包，如果网速过慢可以在配套
  • 谁说程序员都是秃子?给你个眼神自己体会！ 秋风_bdfd
    在网络上，各种黑程序员的段子铺天满地；最最最让我受不了的就是秃顶！我们程序员是需要加班，需要动脑想逻辑。但是，我要申明一点：我不是秃头！谣传：男程序员都是秃头，女程序员满脸痘痘在我们身边有着这样一群人，每天起得比鸡早，睡得比狗晚，吃得比猪差，干得比驴多。没错，就是我们程序员。这里还是要推荐下小编的web前端学习裙:6879，58461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自
  • html常用标签大全 八重樱勿忘
    html中标签有很多，每一种标签都有着不同的用处，下面这篇文章给大家总结html常用的标签，每一种标签都会跟随一个例子，话不多说，让我们来看看具体内容。我的学习交流群web前端学习交流群字体标签，用于展示效果中修饰文字样式文字size:控制字体大小.最小1~最大7。如果设置范围不在1~7之间，设置无效color：控制字体颜色.使用英文设置（例如：red,blue…）face：控制字体类型。只能设置
  • web前端 html+css+javascript游戏网页设计实例 (网页制作课作业) IT黑马程序员 学生网页设计作业期末作业web前端学生网页作业网页模版htmldw网页设计
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • 【融职培训】Web前端学习 第3章 JavaScript基础教程4 条件语句 lmonkey_01
    一、概述语句执行流程有三种：顺序执行、条件执行、循环执行。条件语句表示的就是按照条件判断执行哪些代码（或不执行哪些代码）。例如：我们登录一个软件，输入用户名和密码的时候，输入正确则登录成功，输入错误，会弹出相关提示，这就是一个典型的分支语句（在实际开发中，这个功能或设计多个分支语句）。二、if语句if语句是最基本的条件控制语句，它让JavaScript程序可以选择执行顺序，我们可以通过一个布尔值来
  • 【融职培训】Web前端学习 第2章 网页重构9 css定位 lmonkey_01
    一、定位的基本概念在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:绝对定位相对定位固定定位二、css定位详解我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、rig
  • web前端学习（二）：React是最优秀的web框架，基于JS专注于视图层 起航吧！少年 web前端学习前端框架reactjavascript
    React是用于构建用户界面的JavaScript库,只关注于视图，主要表现为将数据渲染为HTML视图。一、React基础学习npx普通安装创建一个项目npxcreate-react-appreact-app创建一个react-app项目yarnstart启动项目(默认3000端口)http://localhost:3000/高级安装--使用脚手架npmi-gcreate-react-appcre
  • 史上最全web前端学习资料总结 强哥科技兴
    HTML+CSS入门：HTML30分钟入门：http://deerchao.net/tutorials/html/html.htmw3school：http://www.w3school.com.cn/html/index.asp菜鸟教程：http://www.runoob.com/html/html-tutorial.html绿叶学习网：http://www.lvyestudy.com/html
  • web前端学习之TypeScript（持续更新中...） 书剑走江湖 typescript前端
    web前端学习之TypeScriptTypeScript简介什么是TypeScript?TypeScriptVSJavaScript深度对比安装TypeScriptHelloTypeScript基础原始数据类型任意值TypeScript简介什么是TypeScript?TypeScript是一种有微软开发的自由和开源的编程语言，是JavaScript的超集。TypeScript拓展了JavaScri
  • 修BUG？不存在的！我是上班的，不是卖身的！ 秋风_bdfd
    作为一名程序员，加班就是家常便饭，不要加班的程序员都不是好程序员。你以为每天6点下班回家是休息时间吗？不！连上公司VPN继续写代码。你以为周末是可以休息放松的吗？不！一到周末就由新的需求，然后继续加班写代码。（ps：正常的不是996吗？[捂脸]）这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料
  • 程序员的一段代码！网友：你有没有艺术细胞？ 秋风_bdfd
    最近小编看到一条帖子，楼主将发了一段代码，结果引来大批网友的吐槽：网友表示：工具包有自带的，你还写，主要还写的很烂。还有网友表示：代码没问题，就是太啰嗦了，不优雅而已。不过也有网友表示这段代码质量差，编写这段代码的人眼界低，方法命名都错了。这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基
  • 程序员与用户之间的那些事，两个字：真实！ 秋风_bdfd
    在外行来看，程序员都是拥有超能力的人，他们用一段段的字母+数字将这个时代带上了高潮。但是在程序员眼里都认为自己很普通，与常人一样，他们都认为自己能够做到的事，其他人也能做到。（ps：我本来就是普通人好吧，我能做到的为什么别人不能做到？）这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入
  • 【融职培训】Web前端学习 第2章 网页重构15 flex布局 lmonkey_01
    一、flex布局概述此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。二、flex容器将一个元素设置如下属性1.box{2display:flex;3}此容器会变成一个flex容器（flexcontainer），
  • Web前端学习：BAT前端面试送命题—JS三座大山 Web前端小辰
    Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。给你学习路线，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd前言本篇文章比较适合3年以上的前端工作者，JS三座大山
  • Web前端学习有哪些优势，HTML5与前端什么关系？ Web前端小辰
    HTML5与Web前端什么关系，Web前端有哪些优势？Web前端就业怎么样?现在学习前端就业前景好吗?越来越多人了解Web前端，也有很多年轻人想进入到Web前端的行列，但是现在Web前端还值得大家去选择学习吗?对于很多同学疑虑的问题，下面就给大家解答一下，其实现在学习前端的话就业是没有问题的，为啥这么说?Web前端这一技术是从美工演变而来的，其名称具有很明显的时代特征。而且现在越来越多的IT企业对
  • 爱创课堂分享web前端学习路线自学如何找到工作 爱创乐育知识速递 javascriptcssvue.jshtmlhtml5
    爱创课堂分享web前端学习路线自学如何找到工作，自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件，如果基础好，自律性强那么将会容易很多，还有就是自学最难克服的并不是知识点，而是自己的学习环境是否真的能让自己静心学习。就学历和专业而言我们可以来分析成功率，本科生计算机相关专业的那么他的自学成功率就会很高，因为本身基础好，我国高考制度已经充分证明来他的实力，所以这样的人才学习能力
  • 零基础小白怎么入门前端，Web前端都学些什么 Web前端小辰
    零基础小白怎么入门前端？Web前端都学些什么？对于刚刚准备想进入Web前端行业的人来说，可能只知道Web前端开发前景好，薪资高，但是很多人都不知道要从事Web前端要学会哪些技术。那么下面就把Web前端学习路线告诉大家，让更多想进入Web前端行业的人了解更清楚一些。以下是的学习路线，学习内容包括7大学习阶段：第一阶段：前端页面重构内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、Web
  • web前端学习笔记之Node.js 偷到月亮了吗. 学习笔记node.jsjavascript
    文章目录01浏览器中的JavaScript运行环境02什么是Node.js03安装Node.js04使用Node运行JS代码05fs模块文件操作05.1什么是fs模块05.2读取指定文件内容fs.readFile()05.3写入文件内容fs.writeFile()05.4fs-整理成绩案例05.5fs-路径动态拼接问题05.6fs-使用注意事项06path模块路径操作06.1path模块是什么06
  • web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作 STU网页优选 web课程与设计前端网页设计web前端期末大作业html期末大作业
    精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
  • 想象中的程序员生活与现实版程序员！ 秋风_bdfd
    程序员，一个颇为神秘的群体，今天小编就整理了别人眼中的程序员和真实程序员之间的差别，话不多说，直接上货。外形：想象的程序员：要么是一身黑衣，充满霸气颜值，智商都爆表，现实中的程序员是这样的：工作别人眼中的程序员：这里还是要推荐下小编的web前端学习群:687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进阶中
  • HttpClient 4.3与4.3版本以下版本比较 spjich javahttpclient
    网上利用java发送http请求的代码很多，一搜一大把，有的利用的是java.net.*下的HttpURLConnection，有的用httpclient，而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3
  • Essential Studio Enterprise Edition 2015 v1新功能体验 Axiba .net
    概述：Essential Studio已全线升级至2015 v1版本了！新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件，还有其他一些控件功能升级，精彩不容错过，让我们一起来看看吧！ syncfusion公司是世界领先的Windows开发组件提供商，该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本
  • [宇宙与天文]微波背景辐射值与地球温度 comsci 背景
            宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢?      如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢?   &nbs
  • lvs-server 男人50 server
    #!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start)   /sbin/ifconfig eth2:0 $VIP broadca
  • java的WebCollector爬虫框架 oloz 爬虫
    WebCollector主页： https://github.com/CrawlScript/WebCollector 下载：webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。 接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra
  • jQuery append 与 after 的区别 小猪猪08
    1、after函数 定义和用法： after() 方法在被选元素后插入指定的内容。 语法： $(selector).after(content) 实例： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr
  • mysql知识充电 香水浓 mysql
    索引 索引是在存储引擎中实现的，因此每种存储引擎的索引都不一定完全相同，并且每种存储引擎也不一定支持所有索引类型。 根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引，总索引长度至少为256字节。 大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种：BTREE和HASH，具体和表的存储引擎相关； MYISAM和InnoDB存储引擎
  • 我的架构经验系列文章索引 agevs 架构
    下面是一些个人架构上的总结，本来想只在公司内部进行共享的，因此内容写的口语化一点，也没什么图示，所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全，希望抛砖引玉，大家互相讨论。 要注意，我这些文章是一个总体的架构经验不针对具体的语言和平台，因此也不一定是适用所有的语言和平台的。 （内容是前几天写的，现附上索引）   前端架构 http://www.
  • Android so lib库远程http下载和动态注册 aijuans andorid
    一、背景      在开发Android应用程序的实现，有时候需要引入第三方so lib库，但第三方so库比较大，例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验，发现通过远程下载so文件，然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。   二、主要
  • linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法 baalwolf option
    在客户端访问subversion版本库时出现这个错误： svnserve.conf:12: Option expected 为什么会出现这个错误呢，就是因为subversion读取配置文件svnserve.conf时，无法识别有前置空格的配置文件，如### This file controls the configuration of the svnserve daemon, if you##
  • MongoDB的连接池和连接管理 BigCat2013 mongodb
    在关系型数据库中，我们总是需要关闭使用的数据库连接，不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制，如果正对此有疑惑的朋友可以看一下。 通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧，mongoDB中当我们new一个Mongo的时候，会发现它也
  • AngularJS使用Socket.IO bijian1013 JavaScriptAngularJSSocket.IO
            目前，web应用普遍被要求是实时web应用，即服务端的数据更新之后，应用能立即更新。以前使用的技术（例如polling）存在一些局限性，而且有时我们需要在客户端打开一个socket，然后进行通信。         Socket.IO(http://socket.io/)是一个非常优秀的库，它可以帮你实
  • [Maven学习笔记四]Maven依赖特性 bit1129 maven
    三个模块 为了说明问题，以用户登陆小web应用为例。通常一个web应用分为三个模块，模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web， user-service依赖于user-core user-web依赖于user-core和user-service   依赖作用范围  Maven的dependency定义
  • 【Akka一】Akka入门 bit1129 akka
    什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio
  • zabbix_api之perl语言写法 ronin47 zabbix_api之perl
    zabbix_api网上比较多的写法是python或curl。上次我用java－－http://bossr.iteye.com/blog/2195679，这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use
  • 比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ brotherlamp linux运维工程师linux运维工程师教程linux运维工程师视频linux运维工程师资料linux运维工程师自学
    比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！   ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接：http://pan.baidu.com/s/1i3GQtGL 密码：bl65   兄弟连Lin
  • bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y( bylijinnan java
    import java.util.Random; /** * 题目： * 给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5)， * 使得他们的哈密顿距离（d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|）最大
  • map的三种遍历方法 chicony map
    package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v
  • Linux安装mysql的一些坑 chenchao051 linux
    1、mysql不建议在root用户下运行   2、出现服务启动不了，111错误，注意要用chown来赋予权限， 我在root用户下装的mysql，我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf)  chown -R cc /etc/init.d/mysql
  • Sublime Text 3 配置 daizj 配置Sublime Text
    Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和
  • MySQL server has gone away 问题的解决方法 dcj3sjt126com SQL Server
    MySQL server has gone away 问题解决方法，需要的朋友可以参考下。 应用程序（比如PHP）长时间的执行批量的MYSQL语句。执行一个SQL，但SQL语句过大或者语句中含有BLOB或者longblob字段。比如，图片数据的处理。都容易引起MySQL server has gone away。 今天遇到类似的情景，MySQL只是冷冷的说：MySQL server h
  • javascript/dom:固定居中效果 dcj3sjt126com JavaScript
    <!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&
  • 使用 Spring 2.5 注释驱动的 IoC 功能 e200702084 springbean配置管理IOCOffice
    使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项 将打印机的版面设置成横向打印模式 打印本页 将此页作为电子邮件发送 将此页作为电子邮件发送 级别： 初级 陈 雄华 ([email protected]), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日  &nb
  • MongoDB常用操作命令 geeksun mongodb
    1.   基本操作 db.AddUser(username,password)               添加用户 db.auth(usrename,password)      设置数据库连接验证 db.cloneDataBase(fromhost)    
  • php写守护进程（Daemon） hongtoushizi PHP
    转载自： http://blog.csdn.net/tengzhaorong/article/details/9764655   守护进程（Daemon）是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。   1、基本概念   &nbs
  • spring整合mybatis,关于注入Dao对象出错问题 jonsvien DAOspringbeanmybatisprototype
    今天在公司测试功能时发现一问题： 先进行代码说明： 1，controller配置了Scope="prototype"（表明每一次请求都是原子型）    @resource/@autowired service对象都可以（两种注解都可以）。 2，service 配置了Scope="prototype"（表明每一次请求都是原子型）
  • 对象关系行为模式之标识映射 home198979 PHP架构企业应用对象关系标识映射
    HELLO!架构   一、概念 identity Map:通过在映射中保存每个已经加载的对象，确保每个对象只加载一次，当要访问对象的时候，通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射，Mapper类的getFromMap方法就是实现标识映射的实现。     二、为什么要使用标识映射？ 在数据源架构模式之数据映射器中 //c
  • Linux下hosts文件详解 pda158 linux
    　1、主机名： 　　无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。 　　公网：IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。 　　局域网：每台机器都有一个主机名，用于主机与主机之间的便于区分，就可以为每台机器设置主机
  • nginx配置文件粗解 spjich javanginx
    #运行用户#user  nobody;#启动进程,通常设置成和cpu的数量相等worker_processes  2;#全局错误日志及PID文件#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  inf
  • 数学函数 w54653520 java
    public  class  S {        // 传入两个整数，进行比较，返回两个数中的最大值的方法。      public  int  get( int  num1, int  nu
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他