摘要:
这是一个让我困扰了很久问题。在chrome中,如果设置了自动完成表单,那么用户在输入了表单并且再次进入到表单页面时,会发现表单下面有一个黄色的背景。例如下面这样:在网上找了很久以后,终于在这篇文章里面找到了完美解决方法:http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/对于纯色背景的表单,只需要在CSS里面加入类似下面的代码即可:input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000p 阅读全文
摘要:
string转其它==================================string转jsonvar json = eval('('+ string +')');string转arrvar arr = string.split(",");string转numberparseInt()jsJSON与String互转换============================ 1 function jsonToString (obj){ 2 var THIS = this; 3 switch(typeof(obj)){ 4 ... 阅读全文
摘要:
全是正则表达式测试地址:http://jsfiddle.net/dtdxrk/AX5wN/embedded/result/ 1 2 3 4 5 原生JavaScript对CSS进行格式化和压缩 6 12 13 原生JavaScript对CSS进行格式化和压缩14 15 16 17 input,button{ 18 height:20px;background-color: #ffffff;/*border:1px solid #333333;*/ 19 } 20 21 22 65 66 67 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/P9gea/embedded/result/看见类似的效果 自己动手写一个就是padding +setTimeout让元素动起来 其实margin也行 调用的时候要注意元素的原始padding设置 1 2 3 4 5 Js 页面元素 简单震动效果 6 10 11 12 13 点我试试14 15 39 40 阅读全文
摘要:
在线效果预览:http://jsfiddle.net/dtdxrk/JTBvg/3/embedded/result/(需要加载3m左右的png 会慢点要等等)文件打包下载:http://files.cnblogs.com/dtdxrk/fixed-Js.rar由于一些原因今年没有时间去香山撒野了,心... 阅读全文
摘要:
1 function isIE(){ //ie? 2 if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) 3 return true; 4 else 5 return false; 6 } 7 8 if(!isIE()){ //firefox innerText define 9 HTMLElement.prototype.__defineGetter__("innerText", 10 function(){11 var anyString = "" 阅读全文
摘要:
以前页面就有浏览器兼容问题 只能ie浏览 今天有空看了一下代码 确实比较糟糕 代码如下: 1 <input type="hidden" name="checkInDate" id="checkInDate" /> 2 <SCRIPT LANGUAGE="JavaScript"> 3 var nowtoday = new Date(); 4 var showMonth = nowtoday.getMonth() + 1; 5 var showDate = ""; 6 if 阅读全文
摘要:
属性:1 Attributes 存储节点的属性列表(只读)2 childNodes 存储节点的子节点列表(只读)3 dataType 返回此节点的数据类型4 Definition 以DTD或XML模式给出的节点的定义(只读)5 Doctype 指定文档类型节点(只读)6 documentElement 返回文档的根元素(可读写)7 firstChild 返回当前节点的第一个子节点(只读)8 Implementation 返回XMLDOMImplementation对象9 lastChild 返回当前节点最后一个子节点(只读)10 nextSibling 返回当前节点的下一个兄弟节点(只读)11 阅读全文
摘要:
我的便签1.用localStorage存储数据 比cookie存储空间大 缺点就是基于支持html5的浏览器2.操作就是对localStorage数据的提取/展示/修改/保存3.这个实例更多的是对数组的操作4.chrome和firefox是可以本地预览的 ie8 9需要启动本地服务http://localhost/才支持window.localStorage下载地址:http://files.cnblogs.com/dtdxrk/html5-localStorage.rar 1 <!DOCTYPE html> 2 <html> 3 <head> 4 < 阅读全文
摘要:
1、给你一个字符串,要你找出里面出现次数最多的字母和出现的次数,例如:“weruiewiuorsdjfklxsdfwerxcvcvcvmqwersadftioytyiopuioptuioptyiouio”; 1 2、字符串的字节长度; 1 3.、去掉数组中重复的元素 var a = ["abc", "def", "a", "b", "c", "a", "b", "c"]; 1 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/AWLu3/3/embedded/result/简单制作思路1.获取浏览器宽度添加ul 每个ul里默认添加5个li2.图片数据http://cued.xunlei.com/demos/publ/img/P_001.jpg-P_162.jpg3.当ul高小于页面的高加载数据 1 2 3 4 5 原生Js自适应浏览器宽度的瀑布流布局 6 17 18 19 20 21 简单制作思路 22 1.获取浏览器宽度添加ul 每个ul里默认添加5个li 23 2.... 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/8v6Yw/embedded/result/Js选择大学的弹出框 JSON数据格式 制作过程看别人用jquery做的 自己再用原生的写一个 js数据地址 http://files.cnblogs.com/technology/school.js 1.创建html css2.点击input显示学校div3.控制学校div的位置4.读取数据<!DOCTYPE HTML><html lang="en"><head><meta http-equiv="Content- 阅读全文
摘要:
JavaScript变量--匈牙利命名法匈牙利命名法语法:变量名=类型+对象描述类型指变量的类型对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解。提示: 虽然JavaScript变量表面上没有类型,但是JavaScript内部还是会为变量赋予相应的类型。提示: 匈牙利命名法是一位微软程序员发明的,多数的C,C++程序都使用此命名法。JavaScript变量匈牙利命名类型JavaScript变量起名类型变量命名前缀Array 数组aFloat 浮点lFunction 函数fInteger(int) 整型nObject 对象oRegular Expression 正则r 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/tuc8w/7/embedded/result/思路很简单 鼠标点击触发事件 元素跟随鼠标移动 鼠标放开清除事件主要是计算元素的位置鼠标在元素上按下的时候 记录下鼠标的x和y坐标 记录下元素的x和y坐标鼠标在元素上移动的时候 元素y = 现在鼠标y - 原来点击鼠标y + 原来元素y 元素x = 现在鼠标x - 原来点击鼠标x + 原来元素x 1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/a6eXP/embedded/result/封装了方法 所以浏览器通过测试调用方法/* var focus = new focusBox("focus_pic", { v : 0,//幻灯片滚动方向 0=左右 1=垂... 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/Js黑客帝国效果 文字向下落制作过程和思路 1.css控制文字竖显示 2.动态添加div 用随机数当文本 3.获取分辨率 把div随机分布到屏幕里 4.随机文字的大小和透明度 5.用setI... 阅读全文
摘要:
请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象如:var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2”var obj = new parseQueryString(url);alert(obj.key0) // 输出0 1 2 3 4 5 Web前端面试题 Js把URL中的参数解析为一个对象 6 7 8 28 29 30 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/wYABP/embedded/result/ 1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Js仿淘宝星级评分</title> 6 <style> 7 *{margin:0;paddi 阅读全文
摘要:
Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写了提高网站速度的秘籍,就是通过这款插件分析得出的。网络上已经有不少Yslow使用说明了,本文我想介绍下我使用Yslow的方法和一些别人没提到的小技巧。Yslow的安装方法现在Yslow已经有很多版本了,本文介绍的是3.0.4最新版,打开Yslow官网就能看到有四个版本可供选择:火狐(firefox)浏览器、谷歌(chrome)浏览器、欧朋(opera)浏览器和移动版。安装Yslow要先安装 Firebug(本 阅读全文
摘要:
盒模型——外边距、内边距和边框之间的关系,IE8以下版本的浏览器中的盒模型有什么不同。一个元素盒模型的层次从内到外分别为:内边距、边框和外边距IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式... 阅读全文
摘要:
XMLHttpRequest对象提供了在网页加载后与服务器进行通信的方法。 1 <script type="text/javascript"> 2 var xmlhttp; 3 function loadXMLDoc(url){ 4 xmlhttp = null; 5 if(window.XMLHttpRequest){ //code for all new browsers 6 xmlhttp=newXMLHttpRequest(); 7 }elseif(window.ActiveXObject){... 阅读全文
摘要:
document.documentElement返回文档的根节点<html>document.body<body>document.activeElement返回当前文档中被击活的标签节点(ie)event.fromElement返回鼠标移出的源节点(ie)event.toElement返回鼠标移入的源节点(ie)event.srcElement返回激活事件的源节点(ie)event.target返回激活事件的源节点(firefox)当前对象为node返回父节点:node.parentNode,node.parendElement,返回所有子节点:node.childN 阅读全文
摘要:
设置容器的浮动方式为绝对定位然后确定容器的宽高比如宽500高300的层然后设置层的外边距1 Div {2 width:500px ;3 height:300px;4 margin: -150px 0 0 -250px;5 position: absolute;6 ... 阅读全文
摘要:
CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面。看过O'Reilly的《CSS权威指南》,发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值... 阅读全文
摘要:
HTML文件是通过CSS样式进行显示的控制的,也就是结合XHTML与CSS来表现页面内容。那么到底有哪些方式在XHTML文件中引入CSS样式呢?一、内联引用CSS将STYLE属性直接加在个别的元件标签里,模板无忧 - www.mb5u.com这种方法优点:可灵巧应用样式於各标签中。方便于编写代码时的... 阅读全文
摘要:
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。声明位于文档中的最 阅读全文
摘要:
============================================正则表达式基础知识==============================================^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa+ 匹配前面元字符1次或多次,/ba+/将匹配ba,baa,baaa? 匹配前面元字符0次或1次, 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/nMNzT/embedded/result/IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点.简单点说就是给一个子元素绑定一个onclick事件 当点击的时候body也等于被点击了.所以有时候... 阅读全文
摘要:
1 View Code 2 // 兼容IE FF的getElementsByTagName方法 3 var getElementsByName = function(tag, name){ 4 var returns = document.getElementsByName(name); 5 if(returns.length > 0) return returns; 6 returns = new Array(); 7 var e = document.getElementsByTagName(... 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/kf9yR/embedded/result/以前一直在用别人的TAB方法 今天自己写一个在测试时才知道ie对getElementsByTagName的兼容性问题 最后放弃了使用 1 2 3 4 5 js TAB选... 阅读全文
摘要:
1 //获取元素在页面里的位置和宽高 2 function getPosition(obj) { 3 var top = 0, 4 left = 0, 5 width = obj.offsetWidth, 6 height = obj.off... 阅读全文
摘要:
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。IE5.5:div->body->documentIE6.0:div->body->html->documentMozilla1.0:div->body->html->document->window(2)捕获型事件(eventcapturing):事件从最不精确的对象(document对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。(3) 阅读全文
摘要:
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。(1)创建新节点createDocumentFragment()//创建一个DOM片段createElement()//创建一个具体的元素createTextNode()//创建一个文本节点(2)添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore()(3)查找getElementsByTagName()//通过标签名称getElementsByName()//通过元素的Name属性的值getElementById()//通过元素Id,唯一性本节要用到的html例 阅读全文
摘要:
ieevent.srcElementffevent.targetvar obj = event.srcElement ? event.srcElement :event.target;1.event.srcElement.parentNode.tagName;得到上一个节点的标签名称eg:<div style="border:10px red solid"><input type="button" value="父元素标签" onclick="alert(event.srcElement.parentNod 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/ygM5y/1/embedded/result/<!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> <meta http-equiv=&qu 阅读全文
摘要:
ie与firefox event的详细区别window.eventIE:有window.event对象FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)鼠标当前坐标IE:event.x和event.y。FF:event.pageX和event.pageY。通用:两者都有event.clientX和event.clientY属性。鼠标当前坐标(加上滚动条滚过的距离)IE:event.offsetX和event.offsetY。FF:event.layerX和event.layerY。标签的x和y的坐标位置 阅读全文
摘要:
在Javascript 中,页面上的每一对<form> 标记都解析为一个对象,即form 对象。可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。如果一个表单对象定义如下:<formname="frm1"method="post"action="login.aspx">获得该表单对象的方法:i>document.forms["frm1"];//根据name属性值ii>document.forms[0];//根据索引号iii>docume 阅读全文
摘要:
效果预览:http://jsfiddle.net/dtdxrk/BExYy/embedded/result/当鼠标略过某个区块的时候,该区块会放大,并且其他的区块仍然固定不动。 1 2 3 4 5 一道Web前端面试题 DIV放大 6 13 14 15 16 A17 B18 C19 20 21 46 47 48 阅读全文
摘要:
盒子标签和属性对照CSS语法(不区分大小写)JavaScript语法(区分大小写)borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-left-colorborderLeftColorborder-left-styleborderLeftStyleborder 阅读全文
摘要:
1. document.form.item 问题 问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox下运行解决方法: 统一使用 document.formName.elements["elementName"]2. 集合类对象问题 问题: IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象 解决方法: 改用[ ]作为下标运算。如:document.forms("formName") 改为 document.forms[& 阅读全文