对于一个网站前台来说,最重要的工作就是制作出精美惊艳的网页,网页除了美观,更重要的是稳定,然而想要做到这一点很不容易,首先浏览器的种类实在太多了,除去那些滥竽充数的劣质浏览器,市场上的主流优质浏览器大约有五种:火狐(Firefox)、谷歌(Chrome)、苹果(Safari)、IE、Opera,不同的浏览器使用的内核不同,那么对同一个网页的渲染效果和技术支持自然不同,为了针对不同类型浏览器采取不同的应对措施,因此,对浏览器类型和版本的检测有时就显得很重要。
jQuery.browser
根据官网的说法,jQuery.browser 是使用 navigator.userAgent 来工作的,所以检测的结果很容易被用户浏览器所欺骗,所以 jQuery 的这种方法存在了一段时间后,随着 jQuery 版本的升级就被废弃了,官方也是推荐用户使用其他优秀类库(像 Modernizr)来代替这种方法。
被弃用并不是完全否定,这种方法有它的可取之处的。jQuery 1.9 发布时正式开始不再支持 browser 属性,因此下面就分别讲 jQuery 1.9 之前版本与之后版本的使用。
jQuery 1.9 之前版本
演示版本:1.8.3
说明:直接使用。
属性 | 返回值 | 说明 |
$.browser.msie | 布尔值 | 检测IE浏览器。 |
$.browser.mozilla | 布尔值 | 检测火狐浏览器。 |
$.browser.webkit | 布尔值 | 检测 webkit 内核浏览器,如 谷歌、苹果 等 |
$.browser.safari | 布尔值 | 检测 webkit 内核浏览器,如 苹果 等 |
$.browser.chrome | 布尔值 | 检测 webkit 内核浏览器,如 谷歌 等 |
$.browser.opera | 布尔值 | 检测IE浏览器。 |
$.browser.version | 数字 | 检测浏览器的版本。 |
实例:检测 IE 浏览器
if($.browser.msie && ($.browser=="6.0"))
alert("your browser is IE6!");
else if($.browser.msie && ($.browser=="7.0"))
alert("your browser is IE7!");
else if($.browser.msie && ($.browser=="8.0"))
alert("your browser is IE8!");
else if($.browser.msie && ($.browser=="9.0"))
alert("your browser is IE9!");
else if($.browser.msie && ($.browser=="10.0"))
alert("your browser is IE10!");
else($.browser.msie)
alert("your browser is IE!");
实例:检测 Firefox 浏览器
if($.browser.mozilla)
alert("your browser is Firefox!");
实例:检测 Opera 浏览器
if($.browser.opera)
alert("your browser is Opera!");
实例:检测 Safari 浏览器
if($.browser.safari)
alert("your browser is Safari!");
实例:检测 Chrome 浏览器
if($.browser.chrome)
alert("your browser is Chrome!");
注意:较低的版本可能没用,在测试时请使用 jquery-1.8.3.js
jQuery 1.9 之后版本
演示版本:1.10.2
说明:虽然 1.9 版本之后的 jQuery 不再支持 browser 属性,但是为了特殊需求,官方将所有废弃的方法和属性全部集成到了一个插件中,这个插件叫做 Migrate,和其他的普通插件用法一样,网页中导入这个插件之后就可以使用 browser 属性了。
具体代码:打开
<script src="jquery-1.10.2.js"></script>
<script src="jquery-migrate-1.2.1.js"></script>
属性实例:见上
$.ajax()
替代:jQuery.ajax()
用法:$.ajax({ type:"GET/POST", url:string, data:json_data, success:function, ...})
说明:这种用法是底层的,它有很多参数选项,功能很强大,用它可以决定以哪种方式进行提交数据,提交的页面,发送json参数数据,返回的数据类型等。
参数:
参数名 | 说明 |
url | 必选,发送的地址,一般为动态网页,可以是绝对地址,也可以是相对地址。 |
data | 可选,发送的参数,可以是json数据。 |
type | 可选,发送的方式,GET/POST,默认为GET。 |
dataType | 可选,返回的数据格式,xml、html、json、text。 |
success | 可选,回调函数,Function( PlainObject data, String textStatus, jqXHR jqXHR )。 |
timeout | 可选,超时时间,单位毫秒,在指定的时间内无响应则取消操作。 |
实例:打开
$.ajax({
type:"post",
url:"ajax/show.php",
data:"class=music",
typeData:"json",
success:function(data){
$("#ajaxarea").html("song:"+data.song);
}
})
官网使用详解:http://api.jquery.com/jQuery.ajax/
$.get()
替代:jQuery.get()
用法:$.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
说明:这是 $.ajax() 的一种简写,简化了一些参数,让代码更加简洁。
参数:参考上述说明。
实例:打开
$.get({"php/ch.php",{"mid":"515"},function(data){$("#ajax_area").html(data.movie);},"json"})
官网使用详解:http://api.jquery.com/jQuery.get/
$.post()
替代:jQuery.post()
用法:$.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
说明:这是 $.ajax() 的一种简写,简化了一些参数,让代码更加简洁。
参数:参考上述说明。
实例:打开
$.post({"php/ak.php",{"pid":"515"},function(data){$("#ajax_area").html(data.movie);},"json"})
官网使用详解:http://api.jquery.com/jQuery.post/