随笔分类 - javascript
摘要：这里开始介绍一个史上最简单的日历，只显示当月，但是它是一个雏形，会一步一步完善，效果如下：（够简单，够帅气）实现方式如下：MaxDayOfDate作用是返回某月的最大天数GetDayOfWeek作用是当月的第一天是星期几 星期一：1，星期二：2，星期三：3，星期四：4，星期五：5，星期六：6星期日：7calendar作用是创造日历View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t
阅读全文
摘要：Ajax一般应用于户表单数据的验证，局部更新，如分页等等Ajax的优点与缺点优点：1、异步处理功能，可以选择性提交数据；2、局部更新；3、较少服务器负担；4、更快的响应速度；5、减轻带宽压力。缺点：1、局部更新不支持后退功能和添加到收藏夹功能；2、搜索引擎不支持Ajax的抓取；3、跨平台性不好；4、并非所有浏览器都支持Ajax；5、浏览器对Ajax的支持程度不同。例子就不在一一给出了，一步一步理解Ajax前两篇文章主要是讲述理解Ajax的方法，本篇文章讲述了在什么情况下Ajax技术，Ajax结合html、css、xml、dom等等技术融合，才能体现出强大的功能和效果。。。
阅读全文
摘要：ajax方法：通过 HTTP 请求加载远程数据get方法： 通过远程 HTTP GET 请求载入信息post方法：通过远程 HTTP POST 请求载入信息1、创建XMLHttpRequest对象function createXHR() { return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}2、将键值对转换成拼接串function params(data) { var a = []; for (var i in data) { a.pus
阅读全文
摘要：Ajax是Asynchronous Javascript And XML的缩写。作用：通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。1、创建XMLHttpRequest对象var xhr =new XMLHttpRequest()对于IE早期版本（IE7及以下版本）使用，new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP")等方式创建对象2、XMLHttpReq
阅读全文
摘要：拖拽三部曲： 1、this.dragInit.apply(this, arguments) 作用：初始化对象2、 function setOptions作用：设置对象的属性或方法3、与前面的相比好处是只要初始化一次。4、然后为函数对象设置属性即可。View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns
阅读全文
摘要：拖拽三部曲：1、可以指定标题栏作为移动区域，默认整个移动物体都可以拖动2、可以设置移动范围，当前移动物体相对于某个区域内范围内移动,默认整个页面内拖动View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 &
阅读全文
摘要：拖拽三部曲： 1、鼠标按下：获取鼠标当前按下的位置，阻止浏览器默认行为，添加监听事件，清除浏览器默认选择的文本，处理IE在容器内的鼠标事件被容器捕获。 2、鼠标移动：获取鼠标位置，设置对象的位置，阻止浏览器默认行为。 3、鼠标抬起：移除事件监听。View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns=
阅读全文
摘要：拖拽三部曲原理： 1、鼠标按下； 2、鼠标移动； 3、鼠标抬起。View Code <!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"><head> <title>Drag一步一步理解拖拽</title>
阅读全文
摘要：getBoundingClientRect来获取页面元素的位置详细见：http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html//获取页面元素的位置 function getElemPos(obj) { if (obj.getBoundingClientRect) { // 当浏览器支持getBoundingClientRect方法时采用 var pos = obj.getBoundingClientRect(); return { x: pos.left + Math.max(document.documentElement
阅读全文
摘要：定义和用法left属性规定元素的左边缘。该属性定义了定位元素左边距边界与其包含块左边界之间的偏移。注释：如果“position”属性的值为“static”，那么设置“left”属性不会产生任何效果。类型：string 状态：可读可写 js：elem.style.leftoffsetLeft属性返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。类型：int 状态：只读 js：elem.offsetLeftwidth属性规定元素的宽度类型：string 状态：只读 js：elem.style.widthoffsetWidth返回元素的宽度，以像素为单位。包括padding，bord
阅读全文
摘要：几个主要节点类型： ELEMENT_NODE = 1; 元素节点 TEXT_NODE = 3; 文本节点 DOCUMENT_NODE = 9; 文档节点在IE中会自动过滤掉空白文本节点 elem.previousSibling 在FireFox，Chrome等浏览器中可能会包含空白文本节点 elem.previousSibling --- [object text] function prev(elem) { //获取当前节点的上一个元素节点 do { elem = elem.previousSibling; } while (elem && elem.nodeType !=
阅读全文
摘要：JQuery中获取CSS样式css(name)：访问第一匹配元素的样式属性css(name,value)：在所有匹配的元素中，设置一个样式属性的值css(properties)：把一个“名/值对”对象设置为所有匹配元素的样式属性css(name,function(index,value))：在所有匹配的元素中，设置一个样式属性的值-------------------------------------------------------------------------------------Javascript中获取样式的值 function css(obj, attr, value)
阅读全文
摘要：W3C的DOM标准用addEventListener绑定事件IE的DOM标准用attachEvent绑定事件/*** 绑定事件*/function addEvent(elem,evt,fn,b){ if(elem.addEventListener){ if(4==arguments.length){ elem.addEventListener(evt,fn,b); } else{ elem.addEventListener(evt,fn,false); } } else{ elem.attachEvent("on"+evt,fn); }}W3C 中 removeEventL
阅读全文