香雪儿sofia-CSDN博客

原创 Angular JS1学习笔记之一ng-model模型

Angular JS ng-model指令 ng-model用于绑定应用程序（input、select、textarea）的数据到html的controller里。与ng-bind区别在于，input是用于用户输入的，数据要用ng-model从View传输到Controller中，而{{}}和ng-bind是用于从controller中得到数据然后显示在view中的。ng-model指

2016-04-20 22:17:42 1537

原创 Angular JS1学习笔记之一指令

AngularJS 指令AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。各指令简介1. ng-app 指令ng-app 指令初始化一个 AngularJS 应用程序，定义了 AngularJS 应用程序的

2016-04-15 15:46:18 835

Canvas简介<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。示例，使用CanvasRenderingContext2D.fillRect()方法的简单例子.HTML<canvas id="canvas"></canvas>JavaScriptvar canvas = document.getElemen

2016-04-11 10:46:09 365

原创 Angular JS1学习笔记之一简介与表达式

Angular JS简介 Angular JS是一个基于JS的框架，通过<script>标签添加到HTML页面。如：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> Angular JS通过指令扩展HTML，通过表达式绑定数据到HTMLAngular JS指令Angular

2016-04-05 09:08:42 775

原创 Bootstrap-栅格系统

一、栅格参数是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs- 和 .col-md-。请看下面的实例，研究一下这些是如何工作的。比如HTML代码：<div class="row"><div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> content

2016-03-25 18:20:56 2940

原创 DOM 事件下拉菜单实例

实现下图所示的菜单效果，实现点击菜单中的向下三角展开菜单，点击页面空白处收起菜单，按下键盘上的向上、向下方向键可以选中对应的选项，鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题任务一、点击菜单中的向下三角展开菜单提示: 点击三角时需阻止事件冒泡二、展开菜单之后，在document对象上绑定keyup事件,按下向下方向键，选中下一个选项，按下向上方向键，选中上

2016-01-18 15:51:40 968

原创 DOM事件探秘之三-键盘事件

键盘事件 keyDown:按下任意字符键事触发，如果按着不放会重复触发此事件； keyPress:按下任意字符键事触发，如果按着不放会重复触发此事件； keyUp：松开时触发的事件。本次预期是实现一个抽奖的小功能，当鼠标点击开始或者第一次按下回车键时，系统开始抽奖；鼠标点击结束或者第二次按下回车键时，停止抽奖。实现效果：【HTML结构】 <body> <di

2016-01-18 14:58:30 1868

原创 DOM事件探秘之三_QQ面板拖拽效果

注意点：在标题区按下-在页面移动-释放鼠标时停止移动 onmousedown：用户按下任何鼠标按钮时触发 onmousemove：当鼠标指针在元素内部移动时触发 onmouseup：当用户释放鼠标按钮时触发鼠标的光标位置获取：clientX和clientY属性，所有浏览器都支持这两个属性。保持鼠标与面板的相对位置关系，按下时在哪，松开鼠标时光标还在那移

2016-01-11 20:15:04 456

原创网站布局中Position属性四个值的区别和用法

position属性有四个可选值，它们分别是：static、absolute、fixed、relative。用Div+CSS进行网站布局时，做一些浮动层等特殊效果时要考虑到定位问题。这就要用到Position属性等。【Static】 static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。【Relative】相对定位元素的定位是相

2016-01-06 16:26:42 6715

原创 JavaScript_DOM编程艺术第二版学习笔记-第10章

本章内容动画基础知识用动画丰富网页的浏览效果10.1 动画基础知识前面章节介绍了如何利用DOM技术去修改文档的样式信息，选择JS可以节约你的时间和精力，但总的来说，CSS仍是完成这类任务的最佳工具。不过，如果我们想随着时间间隔重复调用一个函数，随时间推移而不断更改某个元素的样式，我们会选择动画。动画就是让元素的位置随着时间而不断的发生变化。10.1.1 位置元素在网页中的位置通常由

2016-01-06 14:59:02 946

原创可重复使用的JS函数

一、文档onload时多个函数共享加载如果需要在页面加载同时加载JS函数，可以使用addLoadEvent()函数function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func;

2016-01-05 16:01:23 529

原创 DOM事件探秘之二

3 事件对象2 IE中的事件对象（1）type属性用于获取事件类型（2）srcElement属性用于获取事件目标（3）cancelBubble（）方法用于阻止事件冒泡设置为true表示阻止事件冒泡，设置为false表示不阻止冒泡。（4）returnValue()方法阻止事件的默认行为设置为false表示阻止事件的默认行为getEvent: function(event)

2016-01-04 13:25:25 346

原创 DOM事件探秘之一

1.事件流事件是文档或浏览器窗口中发生的特定的交互瞬间。【JavaScript <——>HTML】事件流：描述的是从页面中接受事件的顺序。其中IE使用的是事件冒泡流 / Netscape使用的是事件捕获流简单理解为点击按钮时，也点击了按钮所在的容器以及容器至外地的容器一直到整个DOM 事件冒泡：即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节

2015-12-31 09:53:51 330

原创 JavaScript_DOM编程艺术第二版学习笔记-第9章

CSS-DOM9.1 style属性语法，element.style.property比如，获取文档的颜色：para.style.color这里，需要注意的是，当获取如：font-family中间有-的属性时，属性名采用驼峰命名法，及para.style.fontFamily不管CSS属性名有多少连字符，DOM一律采用驼峰命名法表示他们。 DOM 的style对象只包含在HTML代码里，用styl

2015-12-25 13:37:44 1026 4

转载女总裁坐上一辆的士后，她和男师傅的谈话，震撼60万人！

到了机场，我给他留了一张名片，说：“你有没有兴趣这个星期五到我办公室，给我的员工讲一讲你怎么开出租车的？你就当打着表，60公里一小时，你讲多久，我就付你多少钱。给我电话。”没等司机回话，我便走了。在飞机上，我迫不及待地写下了这堂生动的MBA课。（这篇文章你一定要看完，认真看完，必有收获！）我要从徐家汇赶去机场，于是匆匆结束了一个会议，在美罗大厦前

2015-12-24 10:25:30 533

原创 jQuery学习笔记_DOM操作

一、DOM对象转jQuery对象用$()把DOM对象包起来即可

2015-12-22 17:38:01 336

原创 jQuery学习笔记_选择器

一、jQuery语法基础语法：$(selector).action(); jQuery的所有代码都将写在$(document).ready()函数中。二、选择器2.1 基础选择器#id 根据id匹配一个元素.class 根据class匹配一个元素element 根据元素名称匹配元素* 选择所有元素，包括body 上述实例如下： <!DOCTYPE html><html><head>

2015-12-22 15:38:47 387

原创 JavaScript_DOM编程艺术第二版学习笔记-第8章

上一章节学会利用DOM方法和属性来动态创建标记，这一章节，我们将继续在实践中利用这些技术。8.1 不应该做什么理论上，我们可以用JS把一些重要的内容添加到网页上。事实上这是一个坏主意，因为这样一来JS就没有任何空间去平稳退化。那些缺乏必要的JS支持的访问者就会永远也看不到你的重要内容。如果察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，则应该立即停下来去检讨，很可能你会发现自己正在滥

2015-12-18 09:40:48 1002

原创 JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记传统技术：document.write和innerHTML 深入剖析DOM方法：createElement、createTextNode、appendChild和insertBefore。一、传统方法1.1 document.write 利用document.write可以在页面上写入内容，但它有着一个很大的缺点就是它违背了“行为与表现分离”的原则。即使将documen

2015-12-16 09:20:53 1426 1

原创 JavaScript_DOM编程艺术第二版学习笔记-第6章

第5章总结编写JS脚本，需注意，它是否支持平稳退化；渐进增强；向后兼容；分离JavaScript原则。在第五章中，我们已经基本实现了JavaScript与HTML文档的分离，只有onclick事件仍在文档中。第6章将探讨如何实现事件函数与HTML文档的分离。一、添加事件处理函数1.1 检查点如第五章介绍过的，灵活使用逻辑或逻辑非，来检测当前浏览器是否识别JS脚本中的DOM方法。 if (!do

2015-12-14 17:23:24 445

原创 JavaScript_DOM编程艺术第二版学习笔记-第5章

第五章平稳退化弹出窗口JS使用window对象的open()方法创建新的浏览器窗口，语法：window.open(url,name,features)三个参数是可选的。参数1是想在新窗口中打开的网页的URL地址。若省略这个参数，屏幕上将弹出一个空白的浏览器窗口。参数2是新窗口的名字，可在代码里通过这个名字与新窗口进行通信参数3是一个以逗号分隔的字符串，其内容是新窗口的各种属性(窗口尺寸等)。

2015-12-03 15:48:10 773

原创 JavaScript写的图片库功能（小图变大图查看浏览）

图片库期望：当点击小图时，能留在这个页面而不是转到另一个窗口；当点击小图时，能够在本页面的下面大图显示；当点击小图时，在大图的下面能够显示图片的相关信息。最终实现效果：--------------------------------------------------------------------------------------------

2015-12-03 14:56:59 996

sofia92的博客