jQuery注意事项

1、关于选择器中含有特殊符号

选择器中含有"."，"#"，"("，"]"等特殊字符，根据W3C的规定，属性值中是不能含有这些特殊字符的，例如：

view plaincopy to clipboardprint?
<div id="id#b">bb</div>  
<div id="id[1]"></div>
<div id="id#b">bb</div>
<div id="id[1]"></div>

如果按照普通的方式来获取，例如：

view plaincopy to clipboardprint?
$("#id#b");  
$("#id[1]");
$("#id#b");
$("#id[1]");

以上代码不能正确获取到元素，正确的写法如下：

view plaincopy to clipboardprint?
$("#id\\#b");  
$("#id\\[1\\]");
$("#id\\#b");
$("#id\\[1\\]");

2、关于选择器中含有空格的

看下面这个例子，它的HTML代码如下：

view plaincopy to clipboardprint?
<div class="test">  
    <div style="display:none;">aa</div>  
    <div style="display:none;">bb</div>  
    <div style="display:none;">cc</div>  
    <div class="test" style="display:none;">dd</div>  
</div>  
<div class="test" style="display:none;">ee</div>  
<div class="test" style="display:none;">ff</div>
<div class="test">
    <div style="display:none;">aa</div>
    <div style="display:none;">bb</div>
    <div style="display:none;">cc</div>
    <div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>

使用jquery选择器分别获取它们：

view plaincopy to clipboardprint?
alert($(".test :hidden").length);//输出4  
alert($(".test:hidden").length);//输出3
alert($(".test :hidden").length);//输出4
alert($(".test:hidden").length);//输出3

之所以会出现不同的结果，是因为后代选择器与过滤选择器的不同。

view plaincopy to clipboardprint?
$(".test :hidden").length;//带空格的
$(".test :hidden").length;//带空格的

以上代码是选取class为"test"的元素里面的隐藏元素。

view plaincopy to clipboardprint?
$(".test:hidden").length;//不带空格的
$(".test:hidden").length;//不带空格的

而上面的代码则是选取隐藏的class为"test"的元素。

3、关于val()方法

在jquery中，val()方法是从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会被选中，例如：

view plaincopy to clipboardprint?
<option value="1号">2号</option>  
<option value="2号">1号</option>
<option value="1号">2号</option>
<option value="2号">1号</option>

无论使用val("1号")还是val("2号")，都会选中后面的那个option

4、关于css()方法

如果参数值是数字，将会被自动转换为像素值；如果属性中带有"-"符号，例如font-size、background-color等属性，如果在 设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：

view plaincopy to clipboardprint?
$("p").css({fontSize:"30px", backgroundColor:"#888888"});
$("p").css({fontSize:"30px", backgroundColor:"#888888"});

如果带上了引号，既可以写成"font-size"，也可以写成"fontSize"，建议大家加上引号，养成良好的习惯。

5、关于height()方法

(1)、在jQuery1.2版本以后的height()方法可以用来获取window和document的高度。

(2)、用css()方法获取高度值与height()方法的区别是： css()方法获取的高度值与样式的设置有关，可能会得到"auto"，也可能得到"10px"之类的字符串；而height()方法获取的高度值则是元 素在页面中的实际高度，与样式的设置无关，并且不带单位。

6、关于事件对象(event)的属性

jQuery对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

(1)、event.type()方法

该方法的作用是可以获取到事件的类型。

view plaincopy to clipboardprint?
$("a").click(function(event) {  
    alert(event.type);//获取事件类型  
    return false;//阻止链接跳转  
});
$("a").click(function(event) {
    alert(event.type);//获取事件类型
    return false;//阻止链接跳转
});

以上代码运行后会返回"click"。

(2)、event.preventDefault()方法

该方法的作用是阻止默认的事件行为。javascript中符合W3C规范的preventDefault()方法在IE浏览器中无 效，jQuery对其进行了封装，使其能兼容各种浏览器。

(3)、event.stopPropagation()方法

该方法的作用是阻止事件冒泡。javascript中符合W3C规范的stopPropagation()方法在IE浏览器中无效，jQuery对 其进行了封装，使其能兼容各种浏览器。

(4)、event.target()方法

该方法的作用是获取到触发事件的元素。jQuery对其封装后，避免了不同浏览器的差异。

view plaincopy to clipboardprint?
$("a[href=http://google.com]").click(function(event) {  
    alert(event.target.href);//获取触发事件的<a>元素的href属性值  
    return false;  
});
$("a[href=http://google.com]").click(function(event) {
    alert(event.target.href);//获取触发事件的<a>元素的href属性值
    return false;
});

以上代码运行后返回"http://google.com"。

(5)、event.relatedTarget()方法

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过 event.relatedTarget()方法来访问的。event.relatedTarget()方法在mouseover中相当于IE浏览器的 event.fromElement()方法，在mouseout中相当于IE浏览器的event.toElement()方法，jQuery对其进行了 封装，使之能兼容各种浏览器。

(6)、event.pageX()方法 / event.pageY()方法

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jquery时，那么IE浏览器中是用event.x()/event.y() 方法，在firefox浏览器中是用event.pageX()/event.pageY()方法。如果页面上有滚动条，则还要加上滚动条的高度和宽度。 在IE浏览器中还应该减去默认的2px的边框。

view plaincopy to clipboardprint?
$("a").click(function(event) {  
    alert("Current mouse position: "+event.pageX+", "+event.pageY);//获取鼠标当前相对于页面的坐标  
    return false;  
});
$("a").click(function(event) {
    alert("Current mouse position: "+event.pageX+", "+event.pageY);//获取鼠标当前相对于页面的坐标
    return false;
});

(7)、event.which()方法

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

view plaincopy to clipboardprint?
$(function() {  
    $("body").mousedown(function(e) {  
        alert(e.which);//1=鼠标左键 left; 2=鼠标中键; 3=鼠标右键  
    });  
});
$(function() {
    $("body").mousedown(function(e) {
        alert(e.which);//1=鼠标左键 left; 2=鼠标中键; 3=鼠标右键
    });
});

(8)、event.metaKey()方法

针对不同浏览器对键盘中的<ctrl>按键解释不同，jquery也进行了封装，并规定event.metaKey()方法为键盘事件 中获取<ctrl>按键。

(9)、event.originalEvent()方法

该方法的作用是指向原始的事件对象。

7、关于bind()方法

(1)、绑定多个事件类型

view plaincopy to clipboardprint?
$(function() {  
    $("div").bind("mouseover mouseout", function() {  
        $(this).toggleClass("over");  
    });  
});
$(function() {
    $("div").bind("mouseover mouseout", function() {
        $(this).toggleClass("over");
    });
});

(2)、添加事件命名空间

view plaincopy to clipboardprint?
$(function() {  
    $("div").bind("click.plugin", function() {  
        $("body").append("<p>click</p>");  
    });  
    $("div").bind("mouseover.plugin", function() {  
        $("body").append("<p>mouseover</p>");  
    });  
    $("div").bind("dblclick", function() {  
        $("body").append("<p>dblclick</p>");  
    });  
    $("button").click(function() {  
        $("div").unbind(".plugin");  
    });  
});
$(function() {
    $("div").bind("click.plugin", function() {
        $("body").append("<p>click</p>");
    });
    $("div").bind("mouseover.plugin", function() {
        $("body").append("<p>mouseover</p>");
    });
    $("div").bind("dblclick", function() {
        $("body").append("<p>dblclick</p>");
    });
    $("button").click(function() {
        $("div").unbind(".plugin");
    });
});

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。单击<button>元素后，"plugin"的命名 空间被删除，而不在"plugin"的命名空间的"dblclick"事件依然存在。

(3)、相同事件名称、不同命名空间执行方法

view plaincopy to clipboardprint?
$(function() {  
    $("div").bind("click", function() {  
        $("body").append("<p>click</p>");  
    });  
    $("div").bind("click.plugin", function() {  
        $("body").append("<p>click.plugin</p>");  
    });  
    $("button").click(function() {  
        $("div").trigger("click!");//注意click后面的感叹号  
    });  
});
$(function() {
    $("div").bind("click", function() {
        $("body").append("<p>click</p>");
    });
    $("div").bind("click.plugin", function() {
        $("body").append("<p>click.plugin</p>");
    });
    $("button").click(function() {
        $("div").trigger("click!");//注意click后面的感叹号
    });
});

当单击<div>元素后，会同时触发click事件和click.plugin事件。如果只是单击<button>元素， 则只触发click事件，而不触发click.plugin事件。注意，trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空 间中的click方法。如果需要两者都触发，只需要去掉感叹号即可。

8、关于jQuery中的动画

(1)、用jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)、jQuery中的任何动画效果，都可以指定3种速度参数，即"slow"、"normal"、"fast"(时间长度分别是0.6秒、 0.4秒和0.2秒)。当使用速度关键字时要加引号，例如show("slow")，如果用数字作为时间参数时就不需要加引号，例如 show(1000)。

(3)、在使用animate()方法使元素动起来之前，为了能影响该元素的"top"、"left"、"buttom"、"right"样式属 性，必须先把元素的position样式设置为"relative"或者"absolute"。

9、关于load()方法

此方法通常用来从web服务器上获取静态的数据文件。

(1)、用load()筛选载入的HTML文档内容

这时load()方法的URL参数的语法结构为："url selector"，注意url和selector之间有一个空格。例如只需要加载test.html页面中class为"para"的内容，可以 用$("#xxx").load("test.html .para");

(2)、load()方法的回调函数的参数

load()方法提供的回调函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，代码如下：

view plaincopy to clipboardprint?
#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) {  
    //responseText : 请求返回的内容  
    //textStatus : 请求状态: success、error、notmodified、timeout 4种  
    //XMLHttpRequest ： XMLHttpRequest对象  
});
#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) {
    //responseText : 请求返回的内容
    //textStatus : 请求状态: success、error、notmodified、timeout 4种
    //XMLHttpRequest ： XMLHttpRequest对象
});

注意，在load()方法中，无论Ajax请求是否成功，只要当请求完成后(complete)后，回调函数(callback)就被触发。此对 应$.ajax()方法中的complete回调函数。

10、关于$.get()方法

(1)、只有当response的返回状态是success时才调用此方法的回调函数。

(2)、此方法的回调函数有两个参数，分别是data即返回的内容(可以是XML文档、JSON文件、HTML片段等等)、textStatus即 请求状态(success、error、notmodified、timeout这4种)

注意，$.post()方法与$.get()方法基本相同。

11、关于内容选择器

内容选择器:contains()选择符区分大小写。

12、关于插件的通常写法

view plaincopy to clipboardprint?
(function ($) {  
    $.fn.extend({  
        "resize" : function (userOptions) {  
            var defaultOptions = {height:100, width:100};  
            var mergeOptions = $.extend({}, defaultOptions, userOptions);  
            return this.each(function () {  
                $(this).animate(mergeOptions, "slow", function () {  
                    $(this).fadeTo("slow", ".70")  
                });  
            });  
        }  
    });  
})(jQuery);
(function ($) {
    $.fn.extend({
        "resize" : function (userOptions) {
            var defaultOptions = {height:100, width:100};
            var mergeOptions = $.extend({}, defaultOptions, userOptions);
            return this.each(function () {
                $(this).animate(mergeOptions, "slow", function () {
                    $(this).fadeTo("slow", ".70")
                });
            });
        }
    });
})(jQuery);

注意：

1、插件函数中的this一般只的是jQuery对象，例如第六行的this。但this.each中的this指的是DOM对象。

2、插件的另类写法：

=====================分割线============================

PS：附一些不错的jQuery插件。

1、 jQuery Plugins-Kwicks-图片展示横向手风琴效果—

DEMO https://dl.dropbox.com/u/81097/51toria.cn/Kwicks151/kwicks.html
下载 http://dl.dropbox.com/u/81097/51toria.cn/Kwicks151.rar

2、jQuery.popeye ：Lightbox的替代品

jQuery.popeye 可以作为Lightbox的替代品。这个插件能够将一组无序的图片列表转换成一个简单的相册，还能提供与你网站相近的风格。相对于其他的Lightbox 来说，更能与网页相融合。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图 片添加备注说明信息。jQuery.popeye还能根据图片大小自动调整展示框的高度和宽度。

Demo页面：http://dev.herr-schuessler.de/examples/jquery-popeye-1-0/

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ivan820819/archive/2009/10/14/4669632.aspx