随着jQuery的风靡，有很多关于jQuery选择器的文章，可是很多人没有系统的学过或者总结过jQuery的选择器使用方法，本文主要跟大家讨论一下jQuery的选择器的用法，针对于不同的jQuery用户，从基础说起，带您领略jQuery强大的选择器。

在跟大家分享自己的jQuery选择器的使用方法之前，我想跟大家说一个Tip，当你使用jQuery选择器的时候，有时候我们却不一定使用jQuery的选择器里面的函数，而是要简单的返回HTML对象，如果使用getElementById之类选择出HTML对象，就比较麻烦了，再说我们强大的jQuery选择器就浪费了，在这里我通过Firebug查看了jQuery选择器返回的对象，发现原来$(“#id”)[0]就是我们要的HTML对象，比如我们要取其中的innerHTML就可以使用$()[0].innerHTML。

关于jQuery选择器

通过jQuery的参考手册 我们可以看见jQuery的选择器分为：基本、层次、简单筛选、内容、可见性筛选、属性筛选、子元素、表单以及表单及其属性，共九种选择器类型，本文主要介绍基本选择器、属性、简单筛选、内容筛选这几个常用的选择器。如果能熟练掌握这几个选择器，那么我们的jQuery选择器就已经很熟练了

jQuery基本选择器

jQuery的选择器跟CSS的选择器很接近，甚至于跟CSS的选择器统一，这样就比较容易学习，简单选择器就是我们常用的CSS的ID和Class选择器，例如下面的代码把id为world的html内容改为“Hello World!”

现在浏览器太多了也使我们前端开发人员慌了手脚，今天刘洋在写《教程：编写放在收藏夹里的网页划词翻译工具》的时候，问起来绑定事件的函数，由于一直使用jQuery开发，我都差点忘记了最原始的js添加绑定事件的方法啦~抽空立马写两个函数，以备不时之需。

javascript跨浏览器添加事件绑定 bind()

IE 的事件绑定函数是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 则两种都支持。使用jQuery就可以使用简单的bind()，或者$().click()之类的函数解决，而如果不使用JavaScript框架的时候，大家可是使用下面的封装bind()函数。

/************************************
 * 添加事件绑定
 * @param obj   : 要绑定事件的元素
 * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
 * @param fn    : 事件处理函数
 ************************************/
function bind( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
        obj.addEventListener( type, fn, false );
}

导言

之前在开发普加09年国庆中秋祝福页面复制链接功能时，遇见在Firefox，Chrome，Opera，Safari能复制链接的兼容性问题，而在近期上线的普加地图产品中使用的是Flash的flashvars来传入参数来解决了这个问题。其实开发中经常会用到复制的功能，在 IE 下通过JavaScript的window.clipboardData.setData可以简单实现复制到剪贴板功能。最后终于找到了终极解决方式：使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板，所以只要浏览器装有Flash 就可以复制内容。

Zero Clipboard的实现原理

Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。

Zero Clipboard的安装方法

其实也不算安装啦，就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。
Zero Clipboard : [项目主页] [zip下载] [在线演示]

IE6真是前端开发人员的噩梦，就像刘洋说的:IE6一次又一次的阻碍了互联网的发展。在前几天开发的WordPress天气预报插件中使用的图片都是png格式的透明图片，由于png格式的图片比较漂亮美观，可是在IE6中png的透明效果是没有的，这样子本来设计很漂亮的页面在IE6就歇菜了，让人感觉很不爽~本文使用js的方法来解决IE6下PNG图片不透明的问题，简单实用。更多解决方法点击此处。

如果我们在页面中使用的透明PNG图片不是很多，可以使用下面的代码来解决问题：

function setPng(img, w, h){
     ua = window.navigator.userAgent.toLowerCase();
     if (!/msie/.test(ua))
         return;
     imgStyle = "display:inline-block;" + img.style.cssText;
     strNewHTML = "";
     img.outerHTML = strNewHTML;
}

使用方法，在img上添加onload=”setPng(this,宽度,高度)”，如<img onload=”setPng(this,98,78)” src=”” />
如果您觉得这样的方法比较麻烦，或者页面中使用的透明png图片比较多如果手动添加很不方便的时候，可是使用下面的代码来解决问题。

由于不同的浏览器，比如IE6、IE7、Firefox等，对CSS的解析不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。我在写WordPress天气预报插件的时候就碰见了一个CSS hack的问题：在IE6下不能显示正常。本来一个很好的WordPress天气预报插件就因为IE6给推迟了发布时间。所以对于前端开发人员CSS兼容性是个比较棘手的问题，当然对于不同浏览器也有不同的CSS hack的方法，此处本人就整理了一些常用到CSS hack方法，分享给大家，希望对大家有用。

CSS Hack浏览器的顺序

对于不同浏览器的CSS hack是有顺序区分的，一般的书写hack的顺序是：Firefox -> IE7 -> IE6 -> 其他，
当然推荐大家使用Firefox+Firebug来进行调试，注意书写的时候要尽量标准，记住封口，很多时候不封口在FF，IE7下显示正常，可是在IE6下就全部乱了~

CSS Hack整理汇总

这些方法相信很多人已经很熟悉了：比如 IE6能识别下划线”_“和星号” * “，IE7能识别星号” * “，但不能识别下划线”_“，而firefox两个都不能认识。

在IE CSS hack(更多方法)当中常用到if IE 来判断浏览器的类型，解决CSS甚至于JS的兼容性问题，之前大家可能知道if IE来解决CSS的兼容性问题，其实if IE不仅仅是用于CSS hack的使用，我们在前端开发中甚至可以使用if IE来做JS的处理，如下面的代码：

<!–[if IE 5]> <script>document.write(“仅IE5.0与IE5.5可以识别”);</script> <![endif]–>

<!–[if gte IE 5.0]><script>document.write(“IE5.0以及IE5.0以上版本都可以识别”);</script><![endif]–>

<!–[if IE 6]><script>document.write(“仅IE6可识别”);</script><![endif]–>

<!–[if lt IE 6]><script>document.write(“IE6以下版本可识别”);</script><![endif]–>

<!–[if gte IE 6]><script>document.write(“IE6以及IE6以上版本可识别”);</script><![endif]–>

<!–[if IE 7]><script>document.write(“仅IE7可识别”);</script> <![endif]–>

<!–[if lt IE 7]><script>document.write(“IE7以下版本可识别”);</script><![endif]–>

<!–[if gte IE 7]><script>document.write(“IE7以及IE7以上版本可识别”);</script><![endif]–>
下面对if IE做一下详细的解释：

昨天写的一个根据来访者IP返回来访者所在地区的天气情况的WordPress天气插件侧边栏，效果见本博客的首页侧边栏“天气预报”。其中根据IP返回来访者城市地理位置的方法是采用了QQ的一个接口：http://fw.qq.com/ipaddress,而这个接口提供的js为GBK编码的，由于[我的博客](http://js8.in “断桥残雪部落格”)是UTF-8编码的，所以再次使用返回的城市名称在我页面显示的是乱码，而且不能引用的。

上网找了很多关于JavaScript把GBK编码转换为UTF-8编码的js函数，可是都无济于事，并且如果单单为了编码问题就单独写一个js函数来处理GBK转UTF-8编码，这是很不合理的~由于本来我引用的是QQ的根据IP返回城市接口，我自己是不能够改变QQ官方的数据编码格式的，解决的方法唯有我在我的程序中把GBK编码的js强制转换为utf-8的格式，怎么转换是个比较难的方式，既然不能通过写js函数，那就只用用其他的方式了。

最后我在网上找到了一个很好的解决方法，

今天看了岁月如歌的一片文章《KISSY CSS Reset 1.0》其中写到了css重置的代码

/
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯, 正淳
Revision: 276 /

/ 清除内外边距 /
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, / structural elements 结构元素 /
dl, dt, dd, ul, ol, li, / list elements 列表元素 /
pre, / text formatting elements 文本格式元素 /
form, fieldset, legend, button, input, textarea, / form elements 表单元素 /
th, td / table elements 表格元素 / {
margin: 0;
padding: 0;
}

/ 设置默认字体 /
body,
button, input, select, textarea / for ie / {
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } / 将斜体扶正 /
code, kbd, pre, samp { font-family: courier new, courier, monospace; } / 统一等宽字体 /
small { font-size: 12px; } / 小于 12px 的中文很难阅读，让 small 正常化 /

/ 重置列表元素 /
ul, ol { list-style: none; }

/ 重置文本格式元素 /
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } / 重置，减少对行高的影响 /
sub { vertical-align: text-bottom; }

/ 重置表单元素 /
legend { color: #000; } / for ie6 /
fieldset, img { border: 0; } / img 搭车：让链接里的 img 无边框 /
button, input, select, textarea { font-size: 100%; } / 使得表单元素在 ie 下能继承字体大小 /
/ 注：optgroup 无法扶正 /

/ 重置表格元素 /
table { border-collapse: collapse; border-spacing: 0; }
而我在腾讯webteam中看到一篇文章《border:none;与border:0;的区别》中提到

之前做地图打印页面的时候，经理要求打印时候把打印的按钮去掉。这个时候就用到了控制打印的样式表了。
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />

正因为xhtml和css是分离的，所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求，良好的扩展标记和结构嵌套，使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了，你象设置word一样去写你想打印的页面吧。
后来想了想，其实单独写一个css增加了请求次数，就想到了@media print{}的作用，代码如下

@media print{
 .printdesc
{
    right: 0;
    width: 685px;
    height: 69px;
    background-color: #FFFFFF;
    float:left;
    overflow:auto;
    border:0px;
}
.text{
    float:right;
    width: 688px;
    margin-top:20px;
}
.printlink{
    height:0px;
    display:none;
    width:0px;
    z-index:-10;

}
.printlink a{
    display:none;
}
}

后来想到如果打印页面的某一部分，可以使用iframe来进行操作，现在的打印页面的局部内容基本上就是使用iframe进行处理的~特此记录一下

前言

随着互联网前端技术的革新，javascript越来越重要，并且js的轻便，非严格的写法，使越来越多的人掌握了js，可是谈到js的写法，很多人都觉得自己很熟悉，很了解，但是笔者在实践中发现js并非大家想象的那么简单，就像同事一句话：php会的很多，一抓一大把，而真正会js的却不多。仔细想想，原因很简单，js的加载到客户端运行的，不像php可以一个include就可以搞定，而且引入的文件中不用的函数可以放着不动，而js不同，如果加入很多很多无用的函数会大大的占有带宽，不利于用户体验。下面结合笔者实际开发过程中遇到的问题，以及自己收集的技巧，谈谈js高效简洁代码的编写及其优化的技巧。当然网上也有很多类似的文章，不过建议大家还是不要人云亦云，真正适合自己的技巧跟编写习惯才是最好的！

真假的判断

Javascript中有null、undefined、string、number、boolean五种基本的类型，一般判断真假或者为空的时候大家会使用下面的代码：

if(a==true){
    //doSomeTing();
}```但是这种方法很不简洁，我们完全可以使用1，0来判断，比如我们设定一个a，如果a为假，我们就改成真，而a在程序后面可能用于判断，最简单也是最好理解的方法就是下面的写法
```javascript

var a=false;
if(a==false){
    a=true;
}
```既然提到了0，1，肯定有人想到了第二种写法：
```javascript

var a=0;
if(!a){
    a=1;
}
```这个代码还可以进一步简写优化，就是使用js的三元运算符，也就是三目运算符：
```javascript

var a=0;
!a?a=1?null;

还有一点，对于空字符串的判断，往往采用if（a==””）,其实对于空字符本身就是false，下面我总结了下Javascript中的真假值，希望对大家有用