jQuery 1.9使用$.support替代$.browser的使用方法

jQuery 1.9版已经弃用了$.browser，官方推荐使用更强大和灵活的$.support来检测浏览器特性和功能。下面是使用$.support替代$.browser的方法。

Step 1：了解$.support对象

$.support可用于检测浏览器的功能及其兼容性，可以用它来提供与$.browser相同的功能。$.support对象包含以下关键性质：

• boxModel：true表示使用W3C盒模型，false表示使用IE盒模型；
• changeBubbles：true表示表单元素的change事件可以冒泡，false表示不能；
• checkOn：true表示绑定在复选框或单选按钮上的属性值在被点击后正常更新，false则相反；
• cors：true表示浏览器支持跨域资源共享（CORS），false表示不支持；
• cssFloat：true表示浏览器支持用"float"设置CSS属性，false则需用"cssFloat"来设置；
• hrefNormalized：true表示设置了带协议头的绝对URL，false则表示只设置了路径；
• htmlSerialize：true表示序列化HTML字符串，false则整形化字符串中的字符；
• inlineBlockNeedsLayout：true表示inline-block元素会进行自身排版，false则需调用触发绘制；
• opacity：true表示浏览器支持用"opacity"设置CSS透明度，false需用filter特性；
• scriptEval：true表示浏览器能够评估动态生成的JS代码，false表示不能；
• style：浏览器是否支持动态访问和修改已存在的样式。

Step 2：使用$.support来代替$.browser

示例1：使用$.support检测浏览器是否支持CORS

if ($.support.cors) {
    // 浏览器支持CORS
    $.ajax({
        url: 'http://www.example.com/api/',
        type: 'GET',
        crossDomain: true,
        success: function(data){
            console.log(data);
        }
    });
} else {
    // 不支持CORS
    $.getJSON('http://www.example.com/api/?callback=?', function(data) {
        console.log(data);
    });
}

示例2：使用$.support检测浏览器是否支持动态修改样式

if ($.support.style) {
    $('p').css('color', 'red'); // 动态修改样式
} else {
    $('p').attr('style', 'color:red'); // 使用HTML属性动态修改样式
}

总结

$.support是jQuery 1.9+自带的一个常量对象，可以用于检测浏览器特性及其兼容性。使用$.support替代$.browser更加灵活，同时有助于提高网站性能和兼容性。