2016年05月_凉川望远

原创动画 animate()fang

在jQuery中，可以使用animate()方法来自定义动画。其语法格式如下：animate(params, speed, callback);参数说明如下：(1).params:一个包含样式属性及值的映射，比如{property1:”value1″, property2:”value2″,…}(2).speed:速度参数，可选。(3).callback:在动画完成时执行的

2016-05-31 21:39:57 463

原创 jQuery实现时钟插件

body { margin: 0px; padding: 0px; } div { padding: 0px; } HoverClock - HoverTree

2016-05-31 20:54:32 473

原创 web页面位置详解

1理解客户区坐标位置　　含义是：鼠标指针在可视区中的水平clientX和垂直clientY坐标；　　如下图所示：　　2理解页面坐标位置pageX和pageY：　　pageX与pageY是指页面坐标的位置，与clientX和clientY的区别是：它包含页面滚动条的位置，如下图所示：　　但是IE8及更早的版本

2016-05-31 10:06:33 1179

原创 jquery基础

1、jQuery入口函数与Js入口函数的区别【注】js入口函数指的是：window.onload = function(){};区别一：书写个数不同　　Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。　　jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。区别二：执行时机不同　　Js入口函数是在所有的文件资源加载完成后，才执行。

2016-05-31 09:40:24 252

原创 JavaScript实现数据结构中的队列和堆栈

1、队列的基本概念　　队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出!（可以想象成水管）　　如下图所示：　　2、堆栈的基本概念　　堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出!（可以想象成木桶）　　如下图所示：　　二、在JavaScript中实现队列和堆栈　　在JavaScr

2016-05-30 19:59:07 222

原创 ajax简单获取json数据

代码：json.html{"code":0,"data":"boy"}Untitled-1.html用户注册$(function(){$('#showPage').click(function(){$.ajax({ url:"json.html", dataType:

2016-05-30 16:14:31 304

原创 ajax简单html页面内容获取

代码：page.html无标题文档 HTML语言jquery语言 c语言js语言Untitled.html用户注册$(function(){$('#showPage').click(function(

2016-05-30 16:07:09 1976

原创 jquery防止表单重复提交

代码：用户注册var tm=null;function calcSubmitCnt(){var cnt=parseInt($('#submitCnt').text());cnt=cnt+1;$('#submitCnt').text(cnt);//$('#subsmitBtn').removeAttr('dis'); $('#subm

2016-05-30 15:26:44 429

原创 Canvas和SVG

区别一：svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；区别二：svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 can

2016-05-29 22:48:54 557

原创 display:none与visibility:hidden

visibility:隐藏对应的元素但不挤占该元素原来的空间。display:隐藏对应的元素并且挤占该元素原来的空间。来看看下面的这个例子：XML/HTML代码下面来看visibility和dispaly的一些参数visibility用来设置元素的可见状态。语法：visibility : inherit | visible | collapse | hi

2016-05-29 21:48:29 341

原创图片的HTTP请求

1. 隐藏图片 src="haorooms.jpg" style="display: none" />http请求如下：结论：只有Opera不产生请求。注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。2. 重复图片 src="haorooms.jpg" /> src="haorooms.jpg" />http请

2016-05-29 21:41:55 1072

原创 jquery表单提交简单实例

代码：用户注册$(function(){ $('#register').click(function(){ var name=$('#name').val();var pass=$('#pass').val();var phone=$('#pho

2016-05-29 18:40:57 375

原创 jquery键盘事件

基本键盘事件：1、keydown() keydown事件会在键盘按下时触发. 2、keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3、keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键二、获得键盘上对应的ascII码： $(document).keydown(function(e

2016-05-29 18:32:08 309

原创 jQuery事件鼠标事件

jQuery事件鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。 (1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。 $('p').click(function(){ alert('click function is running !');

2016-05-29 18:14:07 285

原创 jquery绑定事件

1.　　bind()向匹配元素添加一个或多个事件处理器。使用方式　　$(selector).bind(event,data,function)　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；　　　　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);　

2016-05-29 16:46:21 205

原创 jQuery中尺寸与坐标函数

一、获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。（即视口坐标）该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。代码：alert("内框坐标为：("+$(".samll").offset().left+","+$(".samll").offset().top+

2016-05-29 11:19:35 217

原创 css截图

css截图代码：无标题文档var i=0;window.onload=function(){document.onclick=function(){var playerImg=document.getElementById("playerImg"); playerImg.style.clip="rect(0px "+(i+1

2016-05-29 09:39:01 315

原创图片放大镜

图片放大镜：代码无标题文档 var img1,img2,dd; window.onload=function(){img1=document.getElementById("img1");img2=document.getElementById("img2");dd=document.getElementById("dd");im

2016-05-29 09:06:37 216

原创网页性能优化

主要专注其中加载部分的优化，总结起来主要有以下几点：带宽使用CDNCDN的全称是Content Delivery Network，即内容分发网络压缩js、css，图片优化HTTP优化减少转向减少请求数缓存尽早Flushflush()是清空使用gzipgzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序减少cookie

2016-05-26 23:09:50 186

原创经典前端面试题

1.用CSS实现布局让我们一起来做一个页面首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局：2.用JavaScript优化布局由于我们的用户群喜欢放大看页面，于是我们给上一题的布局做一次优化。当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动效果如下：解答；

2016-05-26 18:05:15 290

原创 CSS hack

Firefox 浏览器@-moz-document url-prefix() { .selector { property: value; } } 支持所有Gecko内核的浏览器 (包括Firefox)*>.selector { property: value; } Webkit 内核浏览器 @media screen and (-webkit-min-devi

2016-05-26 13:06:30 164

原创前端面试问题（一）

① web前端优化② 事件冒泡（选项卡的实现）③ CSS布局相关④ 应该用float吗？⑤ 模块化编程⑥ 为什么有闭包⑦ 延迟请求① 作用域问题② 语义化标签 1）tite与h1的区别2）b与strong的区别3）i与em的区别③ 事件绑定addEventListener绑定事件的对

2016-05-25 22:55:09 370

原创事件冒泡（选项卡的实现）

可以通过以下三种方法做到不同程度的阻止。 1. return false --->In event handler ,prevents default behavior and event bubbing 。 return false 在事件的处理中，可以阻止默认事件和冒泡事件。 2. event.preventDefault()---> In event handler ,

2016-05-25 22:54:32 1833

原创模块化编程

通行的 Javascript 模块规范共有两种：CommonJS 和 AMD。CommonJS　　2009年，美国程序员 Ryan Dahl 创造了 node.js 项目，将 Javascript 语言用于服务器端编程。　node.js 的模块系统，就是参照 CommonJS 规范实现的。在 CommonJS 中，有一个全局性方法 require ()，用于

2016-05-25 22:43:43 270

原创闭包

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。举例：Js代码　　var n=999;

2016-05-25 22:02:43 380

原创延迟请求

实现ajax延时发送ajax请求1.用jquery延时加载ajax $(document).ready(function() { $(".mainbox").hover(function() { t = setTimeout(function() { //这里写你的AJAX请求

2016-05-25 21:22:53 461

原创语义化标签

1）tite与h1的区别2）b与strong的区别逻辑字体格式化标签，表示强调，默认效果是通过字体加粗来表示语义强调。而标签就是字体加粗标签，没有语义强调的意思，一般称为物理（无意义）字体格式化标签。3）i与em的区别把文本定义为强调的内容标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文

2016-05-25 20:55:27 328

原创 addEventListener绑定事件的对象方法。

当一个事件发生时，分为三个阶段：捕获阶段从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）目标阶段触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。冒泡阶段从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为

2016-05-25 20:22:08 2106

原创 setTimeout的工作原理

setTimeout(function(),ms)函数，Js文件中有这么一段代码：setTimeout( a() , 5000 );。　　在执行流执行到setTimeout代码时，并不会原地踏步地等待执行完毕后再向下执行，而是会告诉浏览器，我这段代码要等待5秒之后再执行，然后立即向下执行接下来的代码。经典阿里面试题　　第一问：　　var a = 6;

2016-05-25 20:05:23 1764

原创 javascript变量作用域

首先了解：什么是块级作用域呢？任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的。函数作用域：定义在函数中的参数和变量在函数外部是不可见的。1.javascript是没有块级作用域的。函数是JavaScript中唯一拥有自身作用域的结构。函数作用域var scope="global"; func

2016-05-25 19:52:47 326

原创 js之三类（冒泡，插值，二分）排序算法

1.冒泡排序：代码：var arr=[12,23,56,34,89,95];window.onload=function(){var len=arr.length;for( var i=0;ifor( var j=i+1;jif(arr[i]>arr[j]){var temp=arr[i];arr[i]=arr[j];arr[j]=temp;}}

2016-05-25 15:48:36 382

qq_24193261的博客