12 2013 档案
PHP后台
摘要:一、ajax提交表单先引入ajax.js 1 function ajax(url, fnSucc, fnFaild) 2 { 3 //1.创建Ajax对象 4 var oAjax=null; 5 6 if(window.XMLHttpRequest) 7 { 8 oAjax=new XMLHttpRequest(); 9 }10 else11 {12 oAjax=new ActiveXObject("Microsoft.XMLHTTP");13 }14 15 //2.连接服...
阅读全文
DOM高级
摘要:一、表格应用thead、tbody、tfoot1.隔行变色、高亮、添加删除内容 1 var oTab=document.getElementById('tab1'); 2 var oBtn=document.getElementById('btn1'); 3 var oTxt=document.getElementById('txt1'); 4 var iNowId=oTab.tBodies[0].rows.length+1;//创建一个变量来设置行号 5 var oldBgColor='';//创建一个变量存储原来的颜色 6 7
阅读全文
js基础之面向对象
摘要:一、基本概念Array类 ————> 不具备实际的功能,只能用来构造对象arr对象 ————> 有实际的功能,被类给构造出来如:var arr=new Array();prototype原型 ————> 可以扩展系统或自建对象的功能,添加一些本不支持或没有的方法和属性,就类似于cl...
阅读全文
js基础之弹性运动(四)
摘要:一、滑动菜单、图片var iSpeed=0;var left=0;function startMove(obj,iTarg){ clearInterval(obj.timer);//记得先关定时器 obj.timer=setInterval(function(){ iSpeed+=(iTarg-obj.offsetLeft)/5; iSpeed*=0.7; left+=iSpeed;//用一个变量left解决小数误差的问题 if(Math.abs(iSpeed)=document.documentElement.clientWidth-oDi...
阅读全文
js基础之动画(三)
摘要:一、链式运动首先,要改进运动框架function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }function startMove(obj,attr,iTarget,fn){//多div运动 //var obj = document.getElementsByClassName('menu'); clearInterval(obj.tim...
阅读全文
js基础之动画(二)
摘要:一、多物体同时运动栗子一:多个Div,鼠标移入变高,动态下拉菜单function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iSpeed=(iTarget-obj.offsetHeight)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.offsetHeight==iTarget){ clearInter...
阅读全文
js基础之动画(一)
摘要:一、让div动起来var oBtn = document.getElementById('btn1'); var timer='';//设置定时器 oBtn.onclick=function startMove(){ var oDiv = document.getElementById('div1'); clearInterval(timer);//关闭原有的定时器,否则多个定时器会叠加 timer=setInterval(function(){ var iSpeed=3; if(oDiv.offsetLeft>=208){ ...
阅读全文
js基础之ajax
摘要:必须搞懂的几个问题:1.如何创建ajax对象?2.如何连接服务器?3.如何发送请求?4.监控请求状态的事件是什么?分几个阶段?如何获取返回值?答:onreadystatechange事件:一、readyState属性(请求状态:0——>未初始化;1——>载入,已经调用send()方法;2——>载入完成,已收到相应内容;3——>正在解析内容;4——>完成);二、status属性(请求结果);三、responseText属性(取得结果)一、读取服务器端文件function ajax(url, fnSucc, fnFaild){ //1.创建Ajax对象 var oAj
阅读全文
js基础之COOKIE
摘要:一、COOKIE的封装函数function setCookie(name,value,eDate){ var oDate = new Date(); oDate.setDate(oDate.getDate()+eDate);//alert(oDate.getSeconds()+eDate); document.cookie=name+'='+value+';expires='+oDate;}setCookie('ch','baaaa',1);function getCookie(name){ var arr=document.co
阅读全文
js基础之事件
摘要:一、event对象document.onclick=function(ev){ oEvent=event?event:ev;//兼容性写法 alert(oEvent.clientX); alert(oEvent);//IE为object、chrome为objectMouseEvent /*if(ev){ alert(event.clientX);//IE }else{ //alert(ev.clientX);//ff alert(ev); }*/ }二、事件冒泡var oBtn = document.getElementB...
阅读全文
js基础之BOM
摘要:一、window.open栗子:阿里西西运行代码功能var oBtn = document.getElementById('btn1'); var oTxt = document.getElementById('txt1'); oBtn.onclick=function(){ var oNewWin = window.open('about blank','_blank'); oNewWin.document.write(oTxt.value); }二、scrollTop、offsetHeightwindow.onload=win
阅读全文
js基础之DOM
摘要:一、创建子节点发帖在顶部显示:var oBtn = document.getElementById('btn1'); var oUl = document.getElementById('ul1'); oBtn.onclick=function(){ var oLi = document.createElement('li'); var lil = document.getElementsByTagName('li'); var otxt = document.getElementById('txt1'); oLi
阅读全文
js基础之数组
摘要:数组方法添加:pusharr.push();//尾部添加unshiftarr.unshift();//头部添加删除:poparr.pop();//尾部删除shiftarr.shift();//头部删除排序:sortarr.sort();sort很蠢,它只认识字符串,如果是数字则要设置一个比较函数var arr=[8,15,6,3,50];arr.sort(function(num1,num2){ return num1-num2; });alert(arr);连接:concat、joinarr1.concat(arr2);arr.join('-');//数组转换成字符串var
阅读全文
js基础之arguments、css
摘要:arguments就是一个包含传入的参数的数组对象栗子一:function sum(){ var result=0; for(var i=0;i<arguments.length;i++){ result += arguments[i]; }return result;}alert(sum(1,2,3,4,5));css函数原代码:function css(){ if(arguments.length==2){//获取 //return arguments[0].style[arguments[1]];//undefined因为style只能取行间样式 ...
阅读全文
四个使用this的典型应用
摘要:(1)在html元素事件属性中使用,如 (2)构造函数function Animal(name, color) {This.name = name;this.color = color;} (3)Var btn = document.getElementById(“text”);Btn.onclick = function() {Alert(this.value); //此处的this是按钮元素} (4)CSS expression表达式中使用this关键字 division element ...
阅读全文
网页优化URI(http URI scheme与data URI scheme)
摘要:网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件。除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是 data URI scheme。 Goolge Wave 中CSS定义的图片URL全部是 data URI scheme!那什么是 data URI scheme?假设你有以下的图像:A把它在网页上显示出来的标准方法是:这 种取得资料的方法称为 http URI scheme ,同样的效果使用 data URI scheme 可以写成:换句话说我们把图像档案的内容内置
阅读全文
FF与IE对JavaScript和CSS的区别
摘要:一、FF与IE对JavaScript的区别1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.elements["elementName
阅读全文
javascrip自定义对象的方式
摘要:对象初始化方式(也叫json对象创建方式) 构造函数方式 function User(name,age) { this.name =name; this.age = age; this.toString=function() { alert(this.name+' is '+this.age); } } function display_user() { /* 因为对象有了构造函数,所以可以用如下方式 */ var paul = new User('paul',2...
阅读全文
常用的JavaScript验证正则表达式1
摘要:匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*评注:表单验证时很实用匹配网址URL的正则表达式:[a-zA-z]+://[^s]* 评注:网上流传的版本功能很有限,上面这个基本可以满足需求 匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 评注:表单验证时很实用 匹配国内电话号码:d{3}-d{8}|d{4}-d{7} 评注:匹配形式如 0511-4405222 或 021-87888822 匹配腾讯QQ号:[1-9][0-9]{4,} 评注:腾讯QQ号从100
阅读全文
javascript——拖拽(完整兼容代码)
摘要:拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候 也是十分麻烦。其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以及对事件控制的理解。在此去繁化简,还原原汁原味的最易理解的拖拽原理。实现鼠标需要三个事件,其实所以的拖拽都是围绕着 onmousedown(点击) onmousemove (移动) onmouseup( 松开),然后是一个最简单事件捕获,IE中位setCapture()方法 -----IE自身独有的事件捕获DOM中addEventListener 事件监听 如果你无法理解 ,请先用谷歌复习 ...
阅读全文
js正则表达式和replace
摘要:javascript中replace与正则表达式 replace()最简单的算是能力就是简单的字符替换。示例代码如下: 它只替换了首字母。但如果加上正则表达式结果就不一样了!replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换!注意:被替换的部分不用加双引号. 这样还是只替换了第一个字母a。 由上可知,当正则表达式有"g"标志时,代表将处理整个字符串. 先看看简单例子:将所有单词首字母换成大写。 由上可知,当正则表达式有"g"标志时,代表将处理整个字符串,即函数change的变换将应用于所有匹配的对象。而该函数有三个
阅读全文
CSS最常用和实用的技巧
摘要:1.重置浏览器的字体大小重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite
阅读全文
优化MYSQL数据库的方法
摘要:1、选取最适用的字段属性,尽可能减少定义字段长度,尽量把字段设置NOT NULL,例如'省份,性别',最好设置为ENUM2、使用连接(JOIN)来代替子查询: a.删除没有任何订单客户:DELETE FROM customerinfo WHERE customerid NOTin(SELECT customerid FROM orderinfo) b.提取所有没有订单客户:SELECT FROM customerinfo WHERE customerid NOTin(SELECT customerid FROM orderinfo) c.提高b的速度优化:SELECT FROM
阅读全文
css默认样式
摘要:html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下以块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/li { display: list-item }/*默认以列表显示*/head { display: none }/*默认不显示*/table
阅读全文
javascript之document对象
摘要:一、修改网页元素当使用document提供的方法和Element的属性得到网页元素之后,就可以对元素的内容进行修改,如下例所示的“全选/全不选”的实现。例3-17全选 你希望学习的课程 全选 / 全不选 java基础 HTML + CSS + JavaScript java核心 java web SSH SqlServer2005 Oracle10g 运行上例,单击【全选】按钮,将看到如图3-21所示的效果。当单击【全不选】按钮的时候,所有复选框的选中...
阅读全文
常见JS(JavaScript)冲突解决方法
摘要:1、一般JS冲突解决办法 a.最容易出现的就是js的命名冲突①、变量名冲突变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScript错误,甚至死循环。②、方法名冲突函数中有很多方法,不同的js之间可能函数名一样,这就使得程序执行时不知道改调用那个方法或者哪个方法执行后的结果,最终导致程序加载失败。③、函数名冲突一般是命名导致JS冲突。解决方法主要是查找在加载的js中是否具有相同命名的情况,然后修改命名 b.onload 事件冲突如果在js中调用了window.onload = function(),同时在页面上又有body
阅读全文
String对象中的正则表达式
摘要:(1)身份证号码验证身份证号码是18位数字,根据GB11643-1999《公民身份证》定义制作;由17位本体码和一位校验码组成。身份证号码前6位是地址码,按(GB/T2260)规定执行。接着8位是年、月、日。后三位是同年同月同日出生的人的顺序号,奇数表示男,偶数表示女。最后一位是校验码。因此正则表达式验证模式为:/^d{17}(d|X)$/。用正则表达式验证身份证的合法性 验证身份证的合法性 身份证号: (2...
阅读全文
css去掉a标签点击后的虚线框
摘要:outline是css3的一个属性,用的很少。声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。outline控制的到底是什么呢?当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。基本上这个是没有用的效果,大多数情况下我们会希望不要出现这种效果,于是给a标签设置outline:none;很遗憾的是,ie6、ie7和遨游浏览器里都不能实现,只有ff,i
阅读全文
最全的CSS浏览器兼容问题【CSS技巧 】
摘要:CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响CSS处理,作为W3C的标准,一定要加DOCTYPE声名。CSS技巧1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行2.margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
阅读全文
最全的CSS浏览器兼容问题【FF与IE】
摘要:1.Div居中问题div设置margin-left,margin-right为auto时已经居中,IE不行,IE需要设定body居中,首先在父级元素定义text-algin:center;这个的意思就是在父级元素内的内容居中。2.链接(a标签)的边框与背景a链接加边框和背景色,需设置display:block,同时设置float:left保证不换行。参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇
阅读全文
this&super两个关键字的意义和用法
摘要:"this",作为一个特殊的关键字,它的规则如下:1、可以表示构造函数传递。this(a,b)表示调用另外一个构造函数。这里面的this就是一个特殊语法,不是变量,没有什么类型。2、可以在一个类的非static成员内部使用,表示当前这个对象。此时,this就是一个final的普通变量,它有静态类型,就是这个类C本身;它有动态类型,就是当前这个对象的类型。你可以对它调用成员函数,把它传递给别的函数,等等。只要一个C类型的final变量可以出现的地方,它就可以出现。"super"。它和"this"类似,但是也有不同的地方。1、表示调用父类
阅读全文
Javascript this 的一些总结
摘要:1.1.1 摘要相信有C/C++、C#或Java等编程经验的各位,对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言,它和C/C++、C#或Java一样都包含this关键字,接下来我们将向大家介绍Javascript中的this关键字。1.1.2 正文由于许多面向对象的编程语言都包含this关键字,我们会很自然地把this和面向对象的编程方式联系在一起,this通常指向利用构造器新创建出来的对象。而在ECMAScript中,this不仅仅只用来表示创建出来的对象,也是执行上下文的一个属性:activeExecutionContext = {// Variable
阅读全文
JS-封装类或对象的最佳方案
摘要:JS封装类或对象的最佳方案面向对象强大的优点之一是能够创建自己专用的类或者对象,封装一组属性和行为。抛开性能来说,JS要比面向对象语言如JAVA要灵活好用的多,组装数据结构很灵活方便。那么我们如何来用面向对象的思维来定义JavaScript的类或对象呢?问题的出现如果要抽象出来一个人,那么简单的属性为:name,sex,birthday等,方法为:sayHi,最初级的写法就是varoPerson=newObject;oPerson.name="zs";oPerson.sex='boy';oPerson.birthday='2001-02-03'
阅读全文
背景色透明,里面内容(图片、文字)不透明
摘要:需要整这么一个透明层,里面的文字不透明,但是css做不到,可以用下方法解决。(用两个div一个是背景层一个是文字层,用定位搞定)姓名:王薇19岁单位:北京市海淀区css:li{width:218px;margin-left:23px;position:relative;vertical-align:middle;height:330px;display:inline;}li.popLovers_info_bg{position:absolute;background:rgba(255,102,153,0.7)nonerepeatscroll00!important;width:218px;he
阅读全文
css3 前端开发
摘要:一、前缀: -moz(例如-moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome。二、CSS3圆角(所有的) -moz-border-radius:15px; -webkit-border-radius:15px;三、CSS3圆角(个别的) -moz-border-radius-topleft:15px; -moz-border-radius-topright:0px; -moz-border-radius-bottomright:15px; -moz-border-radius...
阅读全文
浙公网安备 33010602011771号