从jQuery 1.1升级到1.2开发注意事项

看到绯雨的网站,非常好,介绍了不少jQuery的内容。此处转载一下1.1升级至1.2的差异性。

网上大部份的资料都是以jQuery 1.12为基础讲的。1.12至1.21更新了不少东西,如果不看官方的更新文档或者官方最新的API可能对开发造成影响。

1、选择器不支持XPath

XPath自1.2开始不再被jQuery默认支持。您可以通过插件形式来继续使用XPath,但是强烈建议您使用官方的选择器来替代XPath。

[code]$("div//p") //XPath写法
$("div p") //标准写法

$("div/p") //XPath写法
$("div>p") //标准写法

$("p/../div") //XPath写法
$("p").parent("div") //标准写法

$("div[p]") //XPath写法
$("div:has(p)") //标准写法

$("a[@href]") //XPath写法
$("a[href]") //标准写法[/code]

2、使用slice替代eq,lt,gt

eq及lt,gt方法非常好用,但官方从1.1.4开始放入了slice方法来替代它们,中间有一版本完全取消了eq(好像是1.2),然后又因为抗议太多,又把eq加回来了(群众的力量是强大的),但是难保eq在以后的版本还会继续存在。建议换成slice

[code]$("p").eq(0) //使用eq方法
$("p").slice(0,1) //使用slice方法

$("p").lt(2) //使用lt方法
$("p").slice(0,2) //使用slice方法

$("p").gt(2) //使用lt方法
$("p").slice(3) //使用slice方法[/quote]

3、contains方法官方不再赞成使用(有被取消掉的可能)

$("p").contains('text') //使用contains方法
$("p").filter(":contains(text)") //使用filter方法+选择器

4、loadIfModified,getIfModified,ajaxTimeout方法被取消

这3个方法应该算是冷门方法了,用的人应该是很少很少,替代方法如下。

[code]$("#elem").loadIfModified("some.asp") //使用loadIfModified方法
$.ajax({ //使用ajax方法(JSON参数里加入了ifModified)
url: "some.asp",
ifModified: true,
success: function(html) {
$("#elem").html(html)
}

});

$("#elem").getIfModified("some.asp") //使用getIfModified方法
$.ajax({ //使用ajax方法(JSON参数里加入了ifModified)
url: "some.asp",
ifModified: true

});

$.ajaxTimeout(3000) //使用ajaxTimeout方法
$.ajaxSetup({timeout: 3000}) //使用ajaxSetup方法[/code]

此外,版本更新里对动画效果也做了修改,具体看官方API的animate部份。此文档以1.1.4和1.2的更新说明为基础写的,可以上官网查看对应的原版更新文档。
1.2的选择器:http://shawphy.com/article.asp?id=8

在jQuery中利用AJAX加载XML数据并解析

被cssrain翻了N多的关于AJAX加载XML的帖子尸体。。。。
总结一下:

1,Content-Type
很多时候无法解析就是Content-Type的问题。
如果本身就是xml文件,请跳过这一步
动态生成的XML一定要将其设置为text/xml,否则默认就是text/html也就是普通的文本了。
常见语言的Content-Type设置

header(“Content-Type:text/xml”);    //php
response.ContentType=”text/xml”   //asp
response.setHeader(“ContentType”,”text/xml”);  //jsp

2,xml结构。
XML一定要封闭的,很重要!
例:
错误的XML


zhangsan
1
lisi
2

正确的




zhangsan
1


lisi
2


3,解析
这里引用macnie的
遍历student(这里还是用上面那个XML,子节点是student)

$.ajax({
    url:’ajax.asp’,
    type: ‘GET’,
    dataType: ‘xml’,//这里可以不写,但千万别写text或者html!!!
    timeout: 1000,
    error: function(xml){
        alert(‘Error loading XML document’+xml);
    },
    success: function(xml){
        $(xml).find(“student”).each(function(i){
            var id=$(this).children(“id”); //取对象
            var id_value=$(this).children(“id”).text(); //取文本
            alert(id_value);//这里就是ID的值了。
            alert($(this).attr(“email”)); //这里能显示student下的email属性。

            //最后么输出了,这个是cssrain的写法,貌似比macnie更JQ一点
            $(‘

  • ‘)
                    .html(id_value)
                    .appendTo(‘ol’);
            });
        }
    });
    最后补充一条:保证服务器端是utf-8的编码,否则会乱码!

    好啦,完工了,其实也不复杂,对吧?

    jQuery 1.2.2发布信息的简单翻译

    jQuery发布

    [b]
    jquery 1.2.2 完整版:[本站下载] 93.1 KB (推荐供测试、开发、学习用)
    jquery 1.2.2 Packed压缩版:[本站下载] 28.6 KB (推荐没有开通GZip的网站使用)
    jquery 1.2.2 去注释空格版:[本站下载] 51.4 KB (GZizp压缩后15kb。推荐开通GZip的网站使用)
    [/b]
    2008-1-14日,这个版本是针对jQuery 1.2的BUG修复,你可以在Bug Tracker查看详细列表

    重大改变
    $(DOMElement)提升300%速度(此处鼓吹的不高兴翻译了……大家自己看表,并结合实践再判断吧

    Browser1.2.1 (ms)1.2.2 (ms)
    Firefox 2 0.041 0.015
    Firefox 3 0.033 0.01
    Safari 3 0.017 0.005
    Opera 9 0.023 0.004
    IE 6 0.04 0.03

    .ready()改变

    • IE中改变较多,我们不再必须写一个document.write(),感谢Diego Perini的灵感。
    • 所有浏览器都是等CSS就绪后执行脚本了而不只是DOM,因为用户希望在CSS加载后判断某个元素是否可见以及高度等信息。这次在Safari和Opera中实现了。
    • $(document).bind("ready", fn);你可以用bind来监控ready了。当然以往的.ready()依旧。

    .bind("mouseenter") / .bind("mouseleave")
    将.hover()的内核拆出两个新事件,这跟mouseover 不同 mouseout ,因为那些事件会在你进出子元素的时候也会触发,这往往不必如此。在1.2.2中,下面两段都有效:[code]$("li").hover(function(){
    $(this).addClass("hover");
    }, function(){
    $(this).removeClass("hover");
    });[/code][code]$("li").bind("mouseenter", function(){
    $(this).addClass("hover");
    }).bind("mouseleave", function(){
    $(this).removeClass("hover");
    });[/code]

    .bind("mousewheel")
    Brandon Aaron写的新插件,基于我们的新内核API,可以这样使用:[code]$("div").bind("mousewheel", function(event, delta){
    if ( delta < 0 ) $(this).append("up"); else $(this).append("down"); });[/code] 更复杂的:not()
    虽然这个不是CSS 3的标准,但是由于大家都需要,所以我们也就加上了。
    现在下面的写法都是可以用了

    $(".hover:not(li.active)")

    $("li:not(.active,.hover,:contains(test))")

    Accept Headers
    现在我们会在普通的AJAX中发送给服务器一个附加的 accept headers
    如果你指定了dataType,我们就会放你发送了。具体如下

    • xml "application/xml, text/xml"
    • html "text/html"
    • script "text/javascript, application/javascript"
    • json "application/json, text/javascript"
    • text "text/plain"
    • Everything else: "*/*"

    Bug Fixes

    • .clone() overhaul
    • Script evaluation overhaul
    • height() / width() overhaul
    • Cross-frame DOM manipulation
    • A few memory leaks have been resolved

    Event API
    这个是新的API,功能非常强大,通过上面那个新增事件的代码来学习这个强大的API。

    附原文地址
    http://docs.jquery.com/Release:jQuery_1.2.2