He Min Blog http://www.hemin.cn/blog 每一步细节注定你将来的命运。 Wed, 28 Jul 2010 03:00:04 +0000 en hourly 1 http://wordpress.org/?v=3.0 php中session详解 http://www.hemin.cn/blog/?p=1381 http://www.hemin.cn/blog/?p=1381#comments Wed, 28 Jul 2010 03:00:04 +0000 hemin http://www.hemin.cn/blog/?p=1381 　在PHP开发中对比起Cookie，session 是存储在服务器端的会话，相对安全，并且不像 Cookie 那样有存储长度限制，本文简单介绍 session 的使用。
　　由于 Session 是以文本文件形式存储在服务器端的，所以不怕客户端修改 Session 内容。实际上在服务器端的 Session 文件，PHP 自动修改 session 文件的权限，只保留了系统读和写权限，而且不能通过 ftp 修改，所以安全得多。PHPChina 开源社区门户

　　对于 Cookie 来说，假设我们要验证用户是否登陆，就必须在 Cookie 中保存用户名和密码(可能是 md5 加密后字符串)，并在每次请求页面的时候进行验证。如果用户名和密码存储在数据库，每次都要执行一次数据库查询，给数据库造成多余的负担。因为我们并不能只做一次验证。为什么呢?因为客户端 Cookie 中的信息是有可能被修改的。假如你存储 $admin 变量来表示用户是否登陆，$admin 为 true 的时候表示登陆，为 false 的时候表示未登录，在第一次通过验证后将 $admin 等于 true 存储在 Cookie，下次就不用验证了，这样对么?错了，假如有人伪造一个值为 true 的 $admin 变量那不是就立即取的了管理权限么?非常的不安全。
　　而 Session 就不同了，Session 是存储在服务器端的，远程用户没办法修改 session 文件的内容，因此我们可以单纯存储一个 $admin 变量来判断是否登陆，首次验证通过后设置 $admin 值为 true，以后判断该值是否为 true，假如不是，转入登陆界面，这样就可以减少很多数据库操作了。而且可以减少每次为了验证 Cookie 而传递密码的不安全性了(session 验证只需要传递一次，假如你没有使用 SSL 安全协议的话)。即使密码进行了 md5 加密，也是很容易被截获的。
　　当然使用 session 还有很多优点，比如控制容易，可以按照用户自定义存储等(存储于数据库)。我这里就不多说了。
　　session 在 php.ini 是否需要设置呢?一般不需要的，因为并不是每个人都有修改 PHP.ini 的权限，默认 session 的存放路径是服务器的系统临时文件夹，我们可以自定义存放在自己的文件夹里，这个稍后我会介绍。
　　开始介绍如何创建 session。非常简单，真的。
　　启动 session 会话，并创建一个 $admin 变量：
　　// 启动 session
　　session_start();
　　// 声明一个名为 admin 的变量，并赋空值。
　　$_session["admin"] = null;　　?>
　　如果你使用了 Seesion，或者该 PHP 文件要调用 Session 变量，那么就必须在调用 Session 之前启动它，使用 session_start() 函数。其它都不需要你设置了，PHP 自动完成 session 文件的创建。
　　执行完这个程序后，我们可以到系统临时文件夹找到这个 session 文件，一般文件名形如：sess_4c83638b3b0dbf65583181c2f89168ec，后面是 32 位编码后的随机字符串。用编辑器打开它，看一下它的内容：
　　admin|N;
　　一般该内容是这样的结构：
　　变量名|类型:长度:值;
　　并用分号隔开每个变量。有些是可以省略的，比如长度和类型。
　　我们来看一下验证程序，假设数据库存储的是用户名和 md5 加密后的密码：
　　// 表单提交后…
　　$posts = $_POST;
　　// 清除一些空白符号
　　foreach ($posts as $key => $value)
　　{
　　$posts[$key] = trim($value);
　　}
　　$password = md5($posts["password"]);
　　$username = $posts["username"];
　　$query = “Select `username` FROM `user` Where `password` = ‘$password’”;
　　// 取得查询结果
　　$userInfo = $DB->getRow($query);
　　if (!empty($userInfo))
　　{
　　if ($userInfo["username"] == $username)
　　{
　　// 当验证通过后，启动 session
　　session_start();
　　// 注册登陆成功的 admin 变量，并赋值 true
　　$_session["admin"] = true;
　　}
　　else
　　{
　　die(“用户名密码错误”);
　　}
　　}
　　else
　　{
　　die(“用户名密码错误”);
　　}
　　我们在需要用户验证的页面启动 session，判断是否登陆：
　　// 防止全局变量造成安全隐患
　　$admin = false;
　　// 启动会话，这步必不可少
　　session_start();
　　// 判断是否登陆
　　if (isset($_SESSION["admin"]) && $_session["admin"] === true)
　　{
　　echo “您已经成功登陆”;
　　}
　　else
　　{
　　// 验证失败，将 $_session["admin"] 置为 false
　　$_session["admin"] = false;
　　die(“您无权访问”);
　　}
　　?>
　　是不是很简单呢?将 $_session 看成是存储在服务器端的数组即可，我们注册的每一个变量都是数组的键，跟使用数组没有什么分别。
　　如果要登出系统怎么办?销毁 session 即可。
　　session_start();
　　// 这种方法是将原来注册的某个变量销毁
　　unset($_session["admin"]);
　　// 这种方法是销毁整个 session 文件
　　session_destroy();　　>
　　Session 能否像 Cookie 那样设置生存周期呢?有了 Session 是否就完全抛弃 Cookie 呢?我想说，结合 Cookie 来使用 session 才是最方便的。
　　Session 是如何来判断客户端用户的呢?它是通过 Session ID 来判断的，什么是 Session ID，就是那个 Session 文件的文件名，Session ID 是随机生成的，因此能保证唯一性和随机性，确保 Session 的安全。一般如果没有设置 Session 的生存周期，则 Session ID 存储在内存中，关闭浏览器后该 ID 自动注销，重新请求该页面后，重新注册一个 session ID。
　　如果客户端没有禁用 Cookie，则 Cookie 在启动 Session 会话的时候扮演的是存储 Session ID 和 session 生存期的角色。
　　我们来手动设置 session 的生存期：
　　session_start();
　　// 保存一天
　　$lifeTime = 24 * 3600;
　　setcookie(session_name(), session_id(), time() + $lifeTime, “/”);
　　?>
　　其实 Session 还提供了一个函数 session_set_cookie_params(); 来设置 Session 的生存期的，该函数必须在 session_start() 函数调用之前调用：
　　// 保存一天
　　$lifeTime = 24 * 3600;
　　session_set_cookie_params($lifeTime);
　　session_start();
　　$_session["admin"] = true;
　　?>
　　如果客户端使用 IE 6.0 ， session_set_cookie_params(); 函数设置 Cookie 会有些问题，所以我们还是手动调用 setcookie 函数来创建 cookie。
　　假设客户端禁用 Cookie 怎么办?没办法，所有生存周期都是浏览器进程了，只要关闭浏览器，再次请求页面又得重新注册 Session。那么怎么传递 Session ID 呢?通过 URL 或者通过隐藏表单来传递，PHP 会自动将 session ID 发送到 URL 上，URL 形如：http://www.openphp.cn /index.php?PHPSESSID=bba5b2a240a77e5b44cfa01d49cf9669，其中 URL 中的参数 PHPSESSID 就是 Session ID了，我们可以使用 $_GET 来获取该值，从而实现 session ID 页面间传递。
　　// 保存一天
　　$lifeTime = 24 * 3600;
　　// 取得当前 session 名，默认为 PHPSESSID
　　$sessionName = session_name();
　　// 取得 session ID
　　$sessionID = $_GET[$sessionName];
　　// 使用 session_id() 设置获得的 session ID
　　session_id($sessionID);
　　session_set_cookie_params($lifeTime);
　　session_start();
　　$_session["admin"] = true;
　　?>
　　对于虚拟主机来说，如果所有用户的 Session 都保存在系统临时文件夹里，将给维护造成困难，而且降低了安全性，我们可以手动设置 Session 文件的保存路径，session_save_path()就提供了这样一个功能。我们可以将 session 存放目录指向一个不能通过 Web 方式访问的文件夹，当然，该文件夹必须具备可读写属性。
　　// 设置一个存放目录
　　$savePath = “./session_save_dir/”;
　　// 保存一天
　　$lifeTime = 24 * 3600;
　　session_save_path($savePath);
　　session_set_cookie_params($lifeTime);
　　session_start();
　　$_session["admin"] = true;
　　?>
　　同 session_set_cookie_params(); 函数一样，session_save_path() 函数也必须在 session_start() 函数调用之前调用。
　　我们还可以将数组，对象存储在 session 中。操作数组和操作一般变量没有什么区别，而保存对象的话，PHP 会自动对对象进行序列化(也叫串行化)，然后保存于 session 中。下面例子说明了这一点：
　　class person
　　{
　　var $age;
　　function output() {
　　echo $this->age;
　　}
　　function setAge($age) {
　　$this->age = $age;
　　}
　　}
　　?>
　　setage.PHP
　　session_start();
　　require_once “person.PHP”;
　　$person = new person();
　　$person->setAge(21);
　　$_session['person'] = $person;
　　echo “check here to output age”;
　　?>
　　output.PHP
　　// 设置回调函数，确保重新构建对象。
　　ini_set(‘unserialize_callback_func’, ‘mycallback’);
　　function mycallback($classname) {
　　$classname . “.PHP”;
　　}
　　session_start();
　　$person = $_session["person"];
　　// 输出 21
　　$person->output();
　　?>
　　当我们执行 setage.php 文件的时候，调用了 setage() 方法，设置了年龄为 21，并将该状态序列化后保存在 session 中(PHP 将自动完成这一转换)，当转到 output.php 后，要输出这个值，就必须反序列化刚才保存的对象，又因为在解序列化的时候需要实例化一个未定义类，所以我们定义了以后回调函数，自动包含 person.PHP 这个类文件，因此对象被重构，并取得当前 age 的值为 21，然后调用 output() 方法输出该值。

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1381 2 一些AS3中常用到的公式 http://www.hemin.cn/blog/?p=1376 http://www.hemin.cn/blog/?p=1376#comments Tue, 27 Jul 2010 09:38:17 +0000 hemin http://www.hemin.cn/blog/?p=1376 基本三角函数的计算：
角的正弦值 = 对边 / 斜边
角的余弦值 = 邻边 / 斜边
角的正切值 = 对边 / 邻边

角度制与弧度制的相互转换：
弧度 = 角度 * Math.PI / 180
角度 = 弧度 * 180 / Math.PI

计算两点间距离：
dx = x2 – x1;
dy = y2 – y1;
dist = Math.sqrt(dx*dx + dy*dy);

缓动公式:
sprite.x += (targetX – sprite.x) * easing;//easing为缓动系数变量
sprite.y += (targetY – sprite.y) * easing;

弹性公式:
vx += (targetX – sprite.x) * spring;//spring为弹性系数
vy += (targetY – sprite.y) * spring;
sprite.x += (vx *= friction);//friction为摩擦力
sprite.y += (vy *= friction);

偏移弹性公式:
var dx:Number = sprite.x – fixedX;
var dy:Number = sprite.y – fixedY;
var angle:Number = Math.atan2(dy, dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;

向鼠标旋转(或向某点旋转)
dx = mouseX – sprite.x;
dy = mouseY – sprite.y;
sprite.rotation = Math.atan2(dy, dx) * 180 / Math.PI;

波形运动:
public function onEnterFrame1(event:Event):void {
ball.y=centerScale+Math.sin(angle)*range;
angle+=speed;
}

心跳:
public function onEnterFrame1(event:Event):void {
ball.scaleX=centerScale+Math.sin(angle)*range;
ball.scaleY=centerScale+Math.sin(angle)*range;
angle+=speed;
}

圆心旋转:
public function onEnterFrame(event:Event):void {
ball.x=centerX+Math.cos(angle)*radius;
ball.y=centerY+Math.sin(angle)*radius;
angle+=speed;
}

椭圆旋转:
public function onEnterFrame(event:Event):void {
ball.x=centerX+Math.cos(angle)*radiusX;
ball.y=centerY+Math.sin(angle)*radiusY;
angle+=speed;
}

颜色运算得到透明值:
var t:uint=0×77ff8877
var s:uint=0xff000000
var h:uint=t&s
var m:uint=h>>>24
trace(m)

转换为十进制:
trace(hexValue);
十进制转换为十六进制:
decimalValue.toString(16)

颜色提取:
red = color24 >> 16;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;
alpha = color32 >> 24;
red = color32 >> 16 & 0xFF;
green = color32 >> 8 & 0xFF;
blue = color232 & 0xFF;

按位计算得到颜色值:
color24 = red << 16 | green << 8 | blue;
color32 = alpha << 24 | red << 16 | green << 8 | blue;

过控制点的曲线:
// xt, yt是你想要让曲线通过的那一点
// x0, y0 和x2, y2 是曲线的终点
//PS.发现很多人转帖都是直接复制粘贴，也不翻译一下
xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;
moveTo(x0, y0);
curveTo(x1, y1, x2, y2);

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1376 0 各种html+CSS实例效果 更新为2010.7.27 http://www.hemin.cn/blog/?p=339 http://www.hemin.cn/blog/?p=339#comments Tue, 27 Jul 2010 08:05:57 +0000 hemin http://www.hemin.cn/blog/?p=339 新增实例：CSS3 QQ企鹅

这里收集和原创各种html+CSS实例效果。（为了工作需要和学习得更多）

1、鼠标滑过改变文字:

提示：你可以先修改部分代码再运行。


2、边框为阴影效果:

提示：你可以先修改部分代码再运行。

3、1个像素缺口:

提示：你可以先修改部分代码再运行。

4、星级评分:

提示：你可以先修改部分代码再运行。

5、纯css文本渐变:

提示：你可以先修改部分代码再运行。

6、隔行变色:

提示：你可以先修改部分代码再运行。

7、鼠标经过文本时提示的信息:

提示：你可以先修改部分代码再运行。

8、三级级联菜单(IE6不支持):

提示：你可以先修改部分代码再运行。

原文：http://www.14px.com/?p=148

9、em实现倒三角的提示效果:

提示：你可以先修改部分代码再运行。

10、模拟表格对角线:

提示：你可以先修改部分代码再运行。

11、纯CSS小三角:

提示：你可以先修改部分代码再运行。

12、纯CSS超过宽度显示省略号:

提示：你可以先修改部分代码再运行。

13、纯CSS图片放大效果:

提示：你可以先修改部分代码再运行。

转：http://ued.alipay.com/?p=117

14、五星红旗:

提示：你可以先修改部分代码再运行。

15、css3写的几面国旗:

提示：你可以先修改部分代码再运行。

转：http://bbs.blueidea.com/thread-2985513-1-1.html

16、CSS3 – 机器猫:

提示：你可以先修改部分代码再运行。

17、CSS3QQ企鹅:

提示：你可以先修改部分代码再运行。

18、…:
续写。。。

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=339 1 各种javascript实例效果 更新为2010.07.26 http://www.hemin.cn/blog/?p=341 http://www.hemin.cn/blog/?p=341#comments Mon, 26 Jul 2010 08:00:09 +0000 hemin http://www.hemin.cn/blog/?p=341 新增实例：简单的原生态JavaScript缓动效果

这里收集和原创各种CSS+js实例效果。（为了工作需要和学习得更多）

1、二级菜单:
i.横向

提示：你可以先修改部分代码再运行。


ii.竖向

提示：你可以先修改部分代码再运行。

2、自定义容器和字体大小:

提示：你可以先修改部分代码再运行。

3、预载模拟:

提示：你可以先修改部分代码再运行。

4、放大缩小容器：仿动画:

提示：你可以先修改部分代码再运行。

转：http://blog.pr1984.com/article.asp?id=87

5、DIV显示隐藏效果:

提示：你可以先修改部分代码再运行。

6、PNG-24 For ie6透明:

提示：你可以先修改部分代码再运行。

原文：http://dillerdesign.com/experiment/DD_belatedPNG/

7、选项卡:

提示：你可以先修改部分代码再运行。

转：http://blog.pr1984.com/article.asp?id=71

8、Table Stripes and Row Locking.-(checkbox) :

提示：你可以先修改部分代码再运行。

9、对联与旗帜:

提示：你可以先修改部分代码再运行。

10、密码强度提示 :(www.hemin.cn)

提示：你可以先修改部分代码再运行。

11、单行新闻滚动效果:

提示：你可以先修改部分代码再运行。

12、JS图片加载与获取远程图片大小:

提示：你可以先修改部分代码再运行。

13、JavaScript碰撞效果:

提示：你可以先修改部分代码再运行。

14、来回移动:

提示：你可以先修改部分代码再运行。

15、Javascript 控制 CheckBox 的全选与取消全选:

提示：你可以先修改部分代码再运行。

16、javascript彩色喷泉:

提示：你可以先修改部分代码再运行。

17、javascript行星运动:

提示：你可以先修改部分代码再运行。

18、javascript正弦曲线:

提示：你可以先修改部分代码再运行。

19、javascript手风琴菜单:

提示：你可以先修改部分代码再运行。

20、javascript仿QQ滑动菜单:

提示：你可以先修改部分代码再运行。

21、javascript简易动画类:

提示：你可以先修改部分代码再运行。

22、简单的原生态JavaScript缓动效果:

提示：你可以先修改部分代码再运行。

23、:
续写。。

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=341 4 老爷爷我想你 http://www.hemin.cn/blog/?p=1368 http://www.hemin.cn/blog/?p=1368#comments Sun, 18 Jul 2010 12:58:47 +0000 hemin http://www.hemin.cn/blog/?p=1368 我记得小时候周末去邻居家玩，看见有位老爷爷再给我们邻居的几位小朋友教课，我在门口看着，然后老爷爷也叫我进来听，经常讲些智力题，很有趣，他是每周循环到每个家里呆一次来讲课。我印象最深的是有一个智力题也是只有我一个人答对了。那个老爷爷很鼓励我。所以我留恋到现在，（题目是有一天小明早上读书的时候，请问他读的第一个字是什么字。）那个时候真的很激动。还有一次答题，答案是写在纸上，是关于将来的命运的。后来感觉只有我是答错了。那位老爷爷带我去一个房子里说了些话，说我以后命运会很好。呵呵。我心里的乐得啊。后来因为迷恋了智力题我每当无聊的时候就跑到附近的小书店看那个十万个为什么，还有相关的智力题。很有趣。嘿嘿。后来不知道为什么，老爷爷没有来了。不知道那位老爷爷现在是否在。很想去看看他，好想告诉他，我长大了。。。

如果我可以活到80岁左右的话，我也会像你那样的。去教教小朋友，培养他们成才。

随机日志

]]> http://www.hemin.cn/blog/?feed=rss2&p=1368 0 你身边有几个这样的朋友？ http://www.hemin.cn/blog/?p=1365 http://www.hemin.cn/blog/?p=1365#comments Thu, 08 Jul 2010 05:46:33 +0000 hemin http://www.hemin.cn/blog/?p=1365 你身边有几个这样的朋友？
没事就打打电话联系联系你说说话
没事就叫你一起去玩玩
没事就叫你一起吃吃饭
遇到悲伤的事情会找你聊聊，遇到高兴的事情会找你聊聊，遇到奇怪的事情会找你聊聊。
我们对彼此没有任何利益，目的，阴谋。
我们说话很随便，不会刻意去装，去虚伪。（我发现太多人喜欢装，喜欢虚伪。哎）
我们不是拜金主义，彼此有钱无钱不重要。

最近的感慨，除了亲人身边还有几个这样的朋友呢？

随机日志

]]> http://www.hemin.cn/blog/?feed=rss2&p=1365 2 tudou首页图片延迟加载 http://www.hemin.cn/blog/?p=1354 http://www.hemin.cn/blog/?p=1354#comments Tue, 06 Jul 2010 19:04:09 +0000 hemin http://www.hemin.cn/blog/?p=1354 经常上tudou网，发现tudou首页加载图片的功能很有意思，tudou首页从”娱乐”这个板块往下的所有视频的缩略图并不是在页面打开后就加载的，而是当用户拖动滚动条到了”娱乐”这个板块，才开始加载图片的。
这样做的好处当然是如果有用户不需要查看下面的内容，则免去了下面所有图片的请求，这对减少服务器的压力还是很有帮助的。
其实tudou的实现原理很简单，

1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif)，把真真图片的连接放进图片的alt属性中，look下代码：

<a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
<img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
</a>

2. 绑定window.scroll事件，在该事件里面的重设所有class为lazyImg的图片的src值，在土豆首页找到如下JS:

var o=function(){
var s=TUI.pos.scrollTop(),q=c;
if(q.box[0]){
    var r=q.box.offset().top;
    if(r-s>0&&r-TUI.pos.windowHeight()<s){
        q.init();
    }else{
        q.stop();
        }
}
if(!h||s<590){
    return true;
}
TUI.widget.quickPlaylist.load();
h=false
};
o();
$(window).bind("scroll",o);

我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现，tudou的JS都是压缩混淆的，看起来挺累，不过大家知道原理就可以了。
实例：
上面说了那么多，最后还是来个实例比较实际点，毕竟眼见为实嘛。

提示：你可以先修改部分代码再运行。

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1354 1 各种jquery实例效果 http://www.hemin.cn/blog/?p=1270 http://www.hemin.cn/blog/?p=1270#comments Tue, 06 Jul 2010 10:16:04 +0000 hemin http://www.hemin.cn/blog/?p=1270 新增实例：淡入淡出选项卡，文字立体渐变；

这里收集和原创各种jquery实例效果。（为了工作需要和学习得更多）

1、仿迅雷首页视频展示

提示：你可以先修改部分代码再运行。

ps:一直想访迅雷首页那个视频展示的，今天就有时间访了一下，参考的锋利的JQuery书里面找到第四章的案例，再那案例里面增加了一点小功能。2010.7.1

2、按字母顺序分类导航

提示：你可以先修改部分代码再运行。

ps:下午碰巧在蓝色逛了下，雅兴写了个JQ版的《按字母顺序分类导航》。2010.6.23

3、手风琴竖向菜单

提示：你可以先修改部分代码再运行。

4、手风琴横向菜单

提示：你可以先修改部分代码再运行。

ps:前几天在JS群里某人发了一个手风琴菜单，于是我就仿照玩玩。2010.6.22

5、淡入淡出选项卡

提示：你可以先修改部分代码再运行。

ps:本来昨天就想做一下的。后来因为去面试了，耽误了点时间。2010.7.6

6、文字立体渐变

提示：你可以先修改部分代码再运行。

7、

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1270 0 CSS查找匹配原理和简洁高效 http://www.hemin.cn/blog/?p=1340 http://www.hemin.cn/blog/?p=1340#comments Mon, 05 Jul 2010 17:39:43 +0000 hemin http://www.hemin.cn/blog/?p=1340 用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？
先来看一个简单的CSS：

DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。

匹配原理：

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBox p span.red{color:red;}， 浏览器的查找顺序如下：
先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

<style type="text/css">
DIV#divBox p span.red{color:red;}
<style>
 
<body>
<div id="divBox">
    <p><span>s1</span></p>
    <p><span>s2</span></p>
    <p><span>s3</span></p>
    <p><span class=’red‘>s4</span></p>
</div>
</body>

如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到[span class='red']的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。

简洁、高效的CSS:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：

1.不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。

2.不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

3.尽量少使用层级关系
一般写法：#divBox p .red{color:red;}
更好写法：.red{..}

4.使用class代替层级关系
一般写法：#divBox ul li a{display:block;}
更好写法：.block{display:block;}

PS：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考

mozilla firefox：https://developer.mozilla.org/en/Writing_Efficient_CSS

google page-speed：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1340 1 CSS清除浮动 http://www.hemin.cn/blog/?p=1333 http://www.hemin.cn/blog/?p=1333#comments Mon, 05 Jul 2010 16:43:44 +0000 hemin http://www.hemin.cn/blog/?p=1333 使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

常用的清除浮动的方法有以下三种。
此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

提示：你可以先修改部分代码再运行。


1、使用空标签清除浮动。某些同学用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用P，够简短，也有很多人用hr，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

提示：你可以先修改部分代码再运行。

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:hidden，即可！”zoom:1″用于兼容IE6。

提示：你可以先修改部分代码再运行。

3、使用after伪对象清除浮动。该方法因为要写好几个属性,不到特殊情况，不推荐使用。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候 content属性的值设为”.”，但我发现为空亦是可以的。

提示：你可以先修改部分代码再运行。

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1333 0 jQuery性能优化 http://www.hemin.cn/blog/?p=1313 http://www.hemin.cn/blog/?p=1313#comments Sun, 04 Jul 2010 18:06:40 +0000 hemin http://www.hemin.cn/blog/?p=1313 现在越来越多的人应用jQuery了，有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的.

  1. 总是从ID选择器开始继承
  2. 在class前使用tag
  3. 将jquery对象缓存起来
  4. 掌握强大的链式操作
  5. 使用子查询
  6. 对直接的DOM操作进行限制
  7. 冒泡
  8. 消除无效查询
  9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握jquery库

1. 总是从ID选择器开始继承

在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法.

<div id="content">
    <form method="post" action="/">
        <h2>Traffic Light</h2>
        <ul id="traffic_light">
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

像这样选择按钮是低效的:

var traffic_button = $(‘#content .button‘);

用ID直接选择按钮效率更高:

var traffic_button = $(‘#traffic_button’);

选择多个元素

提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.

var traffic_lights = $(‘#traffic_light input’);

2. 在class前使用tag

第二快的选择器是tag选择器($(‘head’)). 同理,因为它来自原生的getElementsByTagName() 方法.

<div id="content">
    <form method="post" action="/">
        <h2>Traffic Light</h2>
        <ul id="traffic_light">
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):

var active_light = $(‘#traffic_light input.on’);

注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:

var content = $(‘div#content’);

用ID修饰ID也是画蛇添足:

var traffic_light = $(‘#content #traffic_light’);

3. 将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯.

永远不要这样做:

$(‘#traffic_light input.on).bind(‘click‘, function(){…});
$(‘#traffic_light input.on).css(‘border’, ’3px dashed yellow’);
$(‘#traffic_light input.on).css(‘background-color‘, ‘orange‘);
$(‘#traffic_light input.on).fadeIn(‘slow’);

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ’3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(‘slow’);

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.
缓存jquery结果,备用

如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:

// 在全局范围定义一个对象 (例如: window对象)
window.$my =
{
    // 初始化所有可能会不止一次要使用的查询
    head : $(‘head‘),
    traffic_light : $(‘#traffic_light‘),
    traffic_button : $(‘#traffic_button‘)
};
 
function do_something()
{
    //现在你可以引用存储的结果并操作它们
    var script = document.createElement(‘script‘);
    $my.head.append(script);
 
    // 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
    $my.cool_results = $(‘#some_ul li‘);
    $my.other_results = $(‘#some_table td‘);
 
    // 将全局函数作为一个普通的jquery对象去使用.
    $my.other_results.css(‘border-color‘, ‘red‘);
    $my.traffic_light.css(‘border-color‘, ‘green‘);
}

4. 掌握强大的链式操作

上面的例子也可以写成这样:

var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})
.css(‘border’, ’3px dashed yellow’)
.css(‘background-color’, ‘orange’)
.fadeIn(‘slow’);

这样可以写更少的代码, 让我们的js更轻量.

5. 使用子查询

jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量里, 这样大大提高对其子元素的操作:

<div id="content">
    <form method="post" action="/">
        <h2>Traffic Light</h2>
        <ul id="traffic_light">
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

例如, 我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.

var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);

提示: 你可以用逗号分隔的方法一次声明多个局部变量–节省字节数

6. 对直接的DOM操作进行限制

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

例如,你想动态的创建一组列表元素, 千万不要这么做:

var top_100_list = [...], //假设这里是100个独一无二的字符串
    $mylist = $(‘#mylist‘); //jQuery 选择到 <ul> 元素t
 
for (var i=0, l=top_100_list.length; i<l; i++)
{
    $mylist.append(‘<li>‘ + top_100_list[i] + ‘</li>‘);
}

我们应该将整套元素字符串在插入进dom中之前全部创建好:

var top_100_list = [...], // assume this has 100 unique strings
    $mylist = $(‘#mylist‘), // jQuery selects our <ul> element
    top_100_li = ""; // 这个变量将用来存储我们的列表元素
 
for (var i=0, l=top_100_list.length; i<l; i++)
{
    top_100_li += ‘<li>‘ + top_100_list[i] + ‘</li>‘;
}
$mylist.html(top_100_li);

我们在插入之前将多个元素包裹进一个单独的父级节点会更快:

var top_100_list = [...], // assume this has 100 unique strings
    $mylist = $(‘#mylist‘), // jQuery selects our <ul> element
    top_100_ul = ‘<ul id="#mylist">‘; // This will store our entire unordered list
 
for (var i=0, l=top_100_list.length; i<l; i++)
{
    top_100_ul += ‘<li>‘ + top_100_list[i] + ‘</li>‘;
}
top_100_ul += ‘</ul>‘; // //关闭无序列表
 
$mylist.replaceWith(top_100_ul);

如果你做了以上几条还是担心有性能问题,那么:

  • 试试jquery的 clone() 方法, 它会创建一个节点树的副本, 它允许以”离线”的方式进行dom操作, 当你操作完成后再将其放回到节点树里.
  • 使用DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.

7. 冒泡

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.

例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

像这样绑定事件是低效的:

$(‘#entryform input).bind(‘focus‘, function(){
    $(this).addClass(‘selected‘);
    }).bind(‘blur‘, function(){
        $(this).removeClass(‘selected‘);
        });

我们需要在父级监听获取焦点和失去焦点的事件:

$(‘#entryform‘).bind(‘focus‘, function(e){
    var cell = $(e.target); // e.target grabs the node that triggered the event.
    cell.addClass(‘selected‘);
    }).bind(‘blur‘, function(e){
        var cell = $(e.target);
        cell.removeClass(‘selected‘);
        });

父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.

8. 消除无效查询

尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.

只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.

例如, 你的”文章”页面模板, 你可能会引用如下的代码在body结束处:

<script type="text/javascript>
mylib.article.init();
</script>
</body>

如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.

<ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<script type="text/javascript>
mylib.traffic_light.init();
</script>

你的全局js库可能会是这样子的:

var mylib =
{
    article_page :
    {
        init : function()
        {
            // Article page specific jQuery functions.
        }
    },
    traffic_light :
    {
        init : function()
        {
            // Traffic light specific jQuery functions.
        }
    }
}

9. 推迟到 $(window).load

jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.

尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.

你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括iframe)被下载完成后执行.

$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});

多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.

10. 压缩js

推荐一个js在线压缩地址: http://dean.edwards.name/packer/

11. 全面掌握jquery库

知己知彼, 百战百胜. 只有更深入的了解jQuery才能更灵活的使用它. 这里提供一个jQuery的速查手册, 可以打印出来随身携带. 要是有能力将jQuery源码通读一遍那就更好了.

原文：http://www.artzstudio.com/2009/04/jquery-performance-rules/#use-tags-before-classes

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1313 1 各种jQuery技巧 http://www.hemin.cn/blog/?p=1286 http://www.hemin.cn/blog/?p=1286#comments Sun, 04 Jul 2010 14:37:31 +0000 hemin http://www.hemin.cn/blog/?p=1286 收集和原创各种jQuery技巧。（为了工作需要和学习得更多）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

1、 去除页面的右键菜单

$(function(){ 
    $(document).bind("contextmenu",function(e){ 
        return false; 
    }); 
});


2、搜索输入框文字的消失
当鼠标获得焦点、失去焦点的时候，input输入框文字处理：

$(function(){
    $("input.text1").val("Enter your search text here");
    textFill($(‘input.text1‘));
});
function textFill(input){ //input focus text function
    var originalvalue = input.val(); 
    input.focus( function(){ 
        if( $.trim(input.val()) == originalvalue ){ input.val(”); } 
    }); 
    input.blur( function(){ 
        if( $.trim(input.val()) == ” ){ input.val(originalvalue); } 
    }); 
}

3、新窗口打开页面

$(function() { 
   //Example 1: Every link will open in a new window 
   $(‘a[href^="http://"]‘).attr("target", "_blank"); 
   //Example 2: Links with the rel="external" attribute will only open in a new window 
   $(‘a[@rel$="external"]‘).click(function(){ 
      this.target = "_blank"; 
   }); 
});
 
// how to use
<a href="http://www.opensourcehunter.com" rel="external">open link</a>

4、判断浏览器类型
注意： jQuery 1.4中$.support 来代替以前的$.browser

$(function() { 
    // Target Firefox 2 and above 
    if ($.browser.mozilla && $.browser.version >= "1.8" ){ 
        // do something 
    }   
    // Target Safari 
    if( $.browser.safari ){ 
        // do something 
    }   
    // Target Chrome 
    if( $.browser.chrome){ 
        // do something 
    }   
    // Target Camino 
    if( $.browser.camino){ 
        // do something 
    }   
    // Target Opera 
    if( $.browser.opera){ 
        // do something 
    }   
    // Target IE6 and below 
    if ($.browser.msie && $.browser.version <= 6 ){ 
        // do something 
    }   
    // Target anything above IE6 
    if ($.browser.msie && $.browser.version > 6){ 
        // do something 
    } 
});

5、轻松切换css样式

$(function() { 
    $("a.Styleswitcher").click(function() { 
        //swicth the LINK REL attribute with the value in A REL attribute 
        $(‘link[rel=stylesheet]‘).attr(‘href‘ , $(this).attr(‘rel‘)); 
    });
});
// how to use
// place this in your header
<link rel="stylesheet" href="default.css" type="text/css"> 
// the links 
<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a> 
<a href="#" class="Styleswitcher" rel="red.css">Red Theme</a> 
<a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>

6、高度相等的列

$(function() { 
    function equalHeight(group) { 
        tallest = 0; 
        group.each(function() { 
            thisHeight = $(this).height(); 
            if(thisHeight > tallest) { 
                tallest = thisHeight; 
            } 
        }); 
        group.height(tallest); 
    } 
    // how to use 
    $(function() { 
        equalHeight($(".left")); 
        equalHeight($(".right")); 
    }); 
});

7、简单字体变大缩小

$(function() {
    // Reset the font size(back to default)
    var originalFontSize = $(‘html‘).css(‘font-size‘);
    $(".resetFont").click(function(){
        $(‘html‘).css(‘font-size‘, originalFontSize); 
  }); 
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
      var currentFontSize = $(‘html‘).css(‘font-size‘);
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*1.2;
      $(‘html‘).css(‘font-size‘, newFontSize);
      return false;
    }); 
  // Decrease the font size(smaller font) 
  $(".decreaseFont").click(function(){
      var currentFontSize = $(‘html‘).css(‘font-size‘);
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*0.8;
      $(‘html‘).css(‘font-size‘, newFontSize);
      return false;
      }); 
});

8、返回头部滑动动画

$(function(){
    $(‘a[href*=#]‘).click(function(){
        if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname){
            var $target = $(this.hash);
            $target = $target.length && $target || $(‘[name=' + this.hash.slice(1) +']‘);
            if ($target.length){
                var targetOffset = $target.offset().top;
                $(‘html,body‘).animate({scrollTop: targetOffset}, 500);
                return false;
            }
        }
    });
});
 
 
<a name="top"></a> 
// the link 
<a href="#top">go to top</a>

9、获取鼠标位置

$(function() {
    $(‘html‘).mousemove(function(e){ 
         //display the x and y axis values inside the div with the id XY 
        $(‘#XY‘).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); 
      });
});
 
<div id="XY"></div>

10、判断一个元素是否为空

if ($(‘#id‘).html()) { 
       // do something 
       }

11、替换元素

$(function() {
    $(‘#id‘).replaceWith(‘<div>I have been replaced</div>‘);
});

12、jquery timer 返回函数

$(function() { 
   window.setTimeout(function() { 
     // do something 
   }, 1000); 
});

13、jquery也玩替换

$(function() { 
   var el = $(‘#id‘); 
   el.html(el.html().replace(/word/ig, "")); 
});

14、判断元素是否存在

$(function() { 
   if ($(‘#id‘).length) { 
  // do something 
  } 
});

15、让div也可以click

$(function() {
    $("div").click(function(){ 
      //get the url from href attribute and launch the url 
      window.location=$(this).find("a").attr("href"); return false; 
    });
});
 
<div><a href="index.html">home</a></div>

16、判断浏览器类型

$(function() { 
   function checkWindowSize() { 
    if ( $(window).width() > 1200 ) { 
        $(‘body‘).addClass(‘large‘); 
    } 
    else { 
        $(‘body‘).removeClass(‘large‘); 
    } 
   } 
$(window).resize(checkWindowSize); 
});

17、几个字符就clone！

$(function() {
    var cloned = $(‘#id‘).clone()
});

18、设置div在屏幕中央

$(function() {
   jQuery.fn.center = function () {
       this.css("position","absolute");
       this.css("top", ($(window).height()-this.height()) / 2+$(window).scrollTop() + "px");
       this.css("left", ($(window).width()-this.width()) / 2+$(window).scrollLeft() + "px");
       return this;
   }
   $("#id").center();
 });

19、创建自己的选择器

$(function() { 
   $.extend($.expr[':'], { 
       moreThen1000px: function(a) { 
           return $(a).width() > 1000; 
      } 
   }); 
  $(‘.box:moreThen1000px‘).click(function() { 
      // creating a simple js alert box 
      alert(‘The element that you have clicked is over 1000 pixels wide‘); 
  }); 
});

20、计算元素的数目

$(function() { 
   $("p").size(); 
});

21、设置自己的li样式

$(function() { 
   $("ul").addClass("Replaced"); 
   $("ul > li").prepend("‒ "); 
 // how to use 
 ul.Replaced { list-style : none; } 
});

22、关闭jquery动画效果

$(function() { 
    jQuery.fx.off = true; 
});

23、使用自己的jquery标识

$(function() { 
   var $jq = jQuery.noConflict(); 
   $jq(‘#id‘).show(); 
});

24、解决自定义方法或其他类库与jQuery的冲突

jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = ‘none‘;

25、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个div元素的内容。有如下两种方法：

$("div").eq(2).html();              //调用jquery对象的方法
$("div").get(2).innerHTML;       //调用dom的方法属性

26、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html();              //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");     
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
 
$("#msg").text();              //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");     
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
 
$("#msg").height();              //返回id为msg的元素的高度
$("#msg").height("300");       //将id为msg的元素的高度设为300
$("#msg").width();              //返回id为msg的元素的宽度
$("#msg").width("300");       //将id为msg的元素的宽度设为300
 
$("input").val(");       //返回表单输入框的value值
$("input").val("test");       //将表单输入框的value值设为test
 
$("#msg").click();       //触发id为msg的元素的单击事件
$("#msg").click(fn);       //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有这两种调用方法

27、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})     
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
 
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})     
//实现表格的隔行换色效果
 
$("p").click(function(){alert($(this).html())})             
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

28、扩展我们需要的功能

$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

29、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert(‘mouse over event‘)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

30、操作元素的样式
主要包括以下几种方式：

$("#msg").css("background");              //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

31、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

32、几个有用的jQuery方法
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：

$.extend(settings, options); 
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）

$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：

$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。
如：

$.trim("  hello, how are you?   ");    //返回"hello,how are you? "

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1286 0 javascript字符串反转 http://www.hemin.cn/blog/?p=1284 http://www.hemin.cn/blog/?p=1284#comments Sun, 04 Jul 2010 10:44:32 +0000 hemin http://www.hemin.cn/blog/?p=1284 周五遇到这面试题回家做了下记录下。

提示：你可以先修改部分代码再运行。

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1284 0 妈妈告诉我的细节 http://www.hemin.cn/blog/?p=1235 http://www.hemin.cn/blog/?p=1235#comments Thu, 24 Jun 2010 04:49:39 +0000 hemin http://www.hemin.cn/blog/?p=1235 1.去别人家里，不要坐在人家的床上 。
2.在酒桌上与别人碰杯，自己的杯子一定要低于对方的，特别是对方是长辈或领导 。
3.晴带雨伞，饱带干粮—未雨绸缪总是好的。
4. 如果问别人话，别人不回答你，不要死着脸皮不停的问。
5. 吃饭的时候尽量不要发出声音。

6. 捡东西或者穿鞋时候要蹲下去，不要弯腰撅屁股。
7. 别人批评你的时候，即使他是错的，也不要先辨驳，等大家都平静下来再解释 。
8.做事情要适可而止,无论是狂吃喜欢的食物还是闹脾气 。
9.到朋友家吃完饭,要主动帮忙洗碗清理桌子—–主人做饭已经很辛苦了,不能事后还让主人清理。
10.生活中会遇见各式各样的人,你不可能与每个人都合拍,但是有一点是四海皆准的:你如何对待别人,别人也会如何对待你 。
11.待客不得不大，持家不得不小 。
12.把拳头收回来是为了更有力的还击
13.人活在这个世上，首先要学会一个 “忍”字。
14.任何时候对任何人不要轻易告诉对方你的秘密 。
15.钱不是靠攒的，会花才会赚 。
16.学无止境，不仅仅是学书本知识，更要学会怎么待人处事，社会远比你想象的要复杂 。
17.不要跟同事议论上司或其他同事的是非，你的无心之言很可能成为别人打击你的证据。
18.做事情，做好了是你的本分，做的不好就是你失职 。
19.只有错买，没有错卖。不要只顾着贪小便宜。
20.有时候孤单是正常的，不要害怕，要自己调剂
21.有真正的朋友，但不知你有没有福气遇到。不管有没有遇到，都不要否认它。不要算计别人，尤其不要算计自己喜欢的人。对自己喜欢的人，不要使用手段去得到 。
22.最勇敢的事情是认清了生活的真相之后依旧热爱生活。不要害怕欺骗，但要知道世界上存在欺骗 。
23.借钱的时候，心里要有个底，就是要想着这个钱是回不来的。所以借出去的钱永远要在自己能承受的损失范围之内。可以承受的数字以内，即使回不来，也是心里早准备好的。自己不能承受损失的数目，就不能借。
24.最好的朋友之间，除非他穷的吃不了饭了，否则最好不要有经济往来。许多可贵的友谊都败坏在钱上。
25.君子可寓意于物，但不可留意于物 。
26.出门在外能忍则忍，退一步海阔天空。
27.擦桌子的时候要往自己的方向抹 。
28.打电话接电话第一句话一定要是 喂，您好；挂电话的时候等别人先挂。
29.一次不忠 百次不容。
30.不随地吐痰扔东西，如果没有垃圾箱，就拎回家扔垃圾筒里。
31.多看书对心灵有益,你会看到一个更广阔的世界 。
32.是你去适应社会,不是社会来适应你。
33.不要让别人知道自己的真实想法,要笑在人前笑, 要哭一个人躲起来哭。
34.走路手不要插在口袋里。
35.简单的事情复杂做，复杂的事情简单做 。
36.机会只留给有准备的人，天上不会掉馅饼。
37.不管什么条件下，仔细刷牙，特别是晚上 。
38.早上一定要吃早餐，没有早餐喝杯水也一定要 。
39.少说别人是非，把自己管牢 。
40.你是无价之宝 。
41.女生，和男孩子出去要自己买单 。
42.要对自己的行为负责，不要怨天由人，在做之前要想想应不应该，出了事要学会自己解决 。
43.要想人前显贵，必先人后受罪

随机日志

]]> http://www.hemin.cn/blog/?feed=rss2&p=1235 0 关于一个布局的写法 http://www.hemin.cn/blog/?p=1213 http://www.hemin.cn/blog/?p=1213#comments Mon, 31 May 2010 06:22:29 +0000 hemin http://www.hemin.cn/blog/?p=1213 关于一个布局的写法,看见蓝色里面讨论个火热.我就凑合的写下。


提示：你可以先修改部分代码再运行。

本来打算用ul标签，因li需要加list-style:none;，就放弃了。
如果超出题目的范围的话

  1. <dl>
  2.   <dd>
  3.    <div>
  4.     <img>
  5.    <div>
  6.     <h3
  7.     <p>

这样就可以防止以后的变动了吧。

随机日志

]]> http://www.hemin.cn/blog/?feed=rss2&p=1213 5 前端工程师面试 http://www.hemin.cn/blog/?p=1208 http://www.hemin.cn/blog/?p=1208#comments Sun, 30 May 2010 12:57:03 +0000 hemin http://www.hemin.cn/blog/?p=1208 一些前端工程师面试内容
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

2：行内元素有哪些？块级元素有哪些？CSS的盒模型？

3.CSS引入的方式有哪些? link和@import的区别是?

4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

5:前端页面有哪三层构成，分别是什么？作用是什么？

6:css的基本语句构成是？

8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

9.如何居中一个浮动元素?

10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！

11.你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）

13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

相关文章：

]]> http://www.hemin.cn/blog/?feed=rss2&p=1208 1 10个javascript Frameworks 外连 http://www.hemin.cn/blog/?p=1203 http://www.hemin.cn/blog/?p=1203#comments Sun, 30 May 2010 12:48:17 +0000 hemin http://www.hemin.cn/blog/?p=1203

google提供的10个javascript Frameworks 外连：

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jquery UI

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Chrome Frame

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>

swfobject

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

mootools

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Yahoo! UI

<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader/yuiloader-min.js"></script>

Prototype

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

Ext.JS

<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>

Dojo

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js"></script>

Scriptaculous

<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

相关文章：