WEB前端开发 -- IT技术博客大学习 -- 共学习共进步！

• 模拟宽度自适应的输入框

很早以前就看过ytzong的《宽度自适应的输入框》这篇文章，感觉很不错，非常详实，YUI的栅格决定宽度，内容决定高度确实很实用。前段时间在一个项目中真好用到，同事啄米鸟模拟了一个宽度自适应的输入框，原理和ytzong的大致相同，但是解决了以上两个麻烦点。当然也有不足的地方。

• 弹窗广告开发

昨天弄了一个非常简陋的右下角弹窗广告，因为工作和其他原因该代码没有最终完善，等以后项目上了可能会重新开发，本代码也并非本人原创，朋友给的一段代码，我在他的基础上改的，主要改进点：在支持position:fixed的浏览器上使用position:fixed，这样当拖动共同条的时候弹窗位置是固定的。优化了IE6下onscroll 事件绑定的函数还需改进的地方（过段事件等项目应用的时候会修改） ...

• 自己实现的简单的html元素选择器，类似jquery选择器，比jquery选择器还要快！

最近做前端，需要选择元素，虽说有jquery和各大js库已经帮我造好了轮子，但我想试试自己实现一个，正好项目也不忙，正好加入自己的js文件中，下面是实现代码。用$g(“#content .op”)这种格式就可以调用，和jquery $()的参数一样:

• 编写高性能的jQuery代码

请记住jQuery只是JavaScript。不要以为它有能力来补偿你糟糕的代码。这意味着，正如我们必须优化JavaScript for语句一样，我们必须优化jQuery的each方法。

• jquery中的数组过滤筛选-$.grep()

jquery中有个grep()方法用于数组元素过滤筛选，悲剧的是，平时我们用的api文档中找不到这个说明。查看官方说明 grep()的使用方法： grep(array,callback,invert) array：待过滤数组; callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（...

• jQuery之保证你的代码安全

在多人合作开发中一定要确保变量，对象，函数等命名不要冲突：方法一：当别人使用了其他的js库，并该库使用了”$”变量，那么我们可以使用noConflict()方法： var j = jQuery.noConflict(); // Now, instead of $, we use j. j('#someDiv').hide(); // The line below will reference some other library's $ function. $('someDiv').style.display = 'none'; 方法二，把你的代码放...

• jQuery之简写ready方法

在jQuery中监听document 是否 ready的操作

• jQuery之不要滥用$(this)

如果不了解javasrcipt中基本的DOM属性和方法的话，很容易滥用jQuery对象。比如： $('#someAnchor').click(function() { alert( $(this).attr('id') ); }); 如果你只是通过jQ对象获取简单的dom元素的属性比如id，那么你完全可以使用js原生的方法： $('#someAnchor').click(function() { alert( this.id ); }); 诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。

• jQuery之find选择器

jQuery有非常强大的Sizzle引擎来实现选择器，jQuery做了优化，他们能很好的工作，你一般不必担心太多。然而，我们可以稍微做一些改进，将可以使你的脚本略有提高。一般在jquery中能不要用Sizzle引擎就不要用，当然前面说了只要有可能，就尽量使用.find()方法。

• jQuery之jQuery方法总是返回jQuery对象

前几天看到一篇文章《14 Helpful jQuery Tricks, Notes, and Best Practices》感觉很不错，非常时候我这种入门级的人员，所以看懂一条翻译一条， jQuery方法总是返回jQuery对象：所以我们可以这样写（链式调用）： $someDiv.attr('class', 'someClass').hide().html('new stuff'); 为了美观易读也可以这样写：

• 回到顶部 -- jQuery插件

最近写了个回到顶部的插件，调用方法的 $(“.go-top”).goToTop({}); $(window).bind(‘scroll resize’,function(){ $(“.go-top”).goToTop({}); }); 当然可以传一些参数及参数的默认值： pageWidth:950,//页面宽度 pageWidthJg:10,//按钮和页面的间隔距离 pageHeightJg:50,//按钮和页面底部的间隔距离 startline:20,//出现回到顶部按钮的滚动条scrollTop距离 duration:200,//回到顶部的速度时间 ...

• IE6下position:absolute相邻元素margin-top失效的bug

昨天发现了一个ie6的bug，绝对定义(position:absolute)的相邻元素margin-top竟然会失效。

• Javascript浅拷贝与深拷贝

js中的赋值都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.引用就是浅拷贝。深拷贝就是不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的，新对象所指向的不是原来对像的地址。 Javascript深拷贝有很多封装的方法，大家网上可以搜索一下.看下面这个例子..........

• js数组去重

js数组去重就是把数组中重复的元素去掉

• 使<pre>的内容自动换行

元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
标签的一个常见应用就是用来表示计算机的源代码。
而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。
点...

• 各浏览器的默认CSS

在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份： IE6(下载) IE7(下载) IE8(下载) IE9(下载) Firefox 3.6.3(下载) Webkit (r57042) (下载) Opera 10.51(下载) 当然我们还可以找到更老的一些浏览器默认样...

• js窗口间通信摘要

1.打开一个新窗口：window.open();为了便于父窗口操作子窗口可以为window.open()定义一个变量，例如： var opW = window.open(‘tests.html’,\'popup’,\'width=300,height=300′); 这样要关闭子窗口可直接使用：opW.close(); 要操作子窗口元素，例如： opW.document.getElementById(“fartherWindowTxt”).innerHTML = “操作子窗口”; 2.子窗口可以使用window.opener来引用父窗口：win...

• JS操作iframe里的dom

看到断桥残雪对我上一篇日志的回复我也学习了一下JS操作iframe里的dom；主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作》和支付宝UED的《用JS访问操作iframe里的dom》，非常不错的两篇文章。一、父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox...

• 使用document.domain和iframe实现站内AJAX跨域

站内AJAX跨域可以通过document.domain和iframe实现，比如www.css88.com、js.css88.com、css88.com这3个域名其实是3个不同的域，很多时候www.css88.com和css88.com打开的可能是用一个页面，但是，他们确实是不同的域，比如www.css88.com的页面通过ajax无法直接获取css88.com域下的数据，这是由于js的安全性引起的。不过我们可以通过document.domain和iframe实现在站内的ajax跨域。查看demo：http://www.css88.com/demo/iframe-dom...

• 页面模块化实现的条件和基本实现思路

页面模块化实现的很大的受制于页面的结构和表现；一个统一的页面结构和表现能很好的实现页面的模块话。比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。《页面模块化（设想）》上面总结了页面模块化的优点，《前端模块化设计思路》也提到要做到模块化的前提条件：为了做到这...