获取浏览器的名称与版本信息，jQuery基础(五)一Ajax应用与常用插件教程-慕课网

4-1 获取浏览器的名称与版本信息

本节编程练习不计算学习进度，请电脑登录imooc.com操作

获取浏览器的名称与版本信息

在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。

例如，调用$.browser对象，获取浏览器名称并显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，通过调用$.browser对象，检测当前浏览器的所属类型，并根据类型不同，将浏览器名称保存至变量中，最后将变量的内容显示在页面中。

任务

我来试试，亲自调用$.browser对象显示浏览器的名称和对应版本号

在下列代码的第27行，调用$.browser对象获取浏览器的版本号，并以累加的方式保存至变量中。

index.html style.css

<!DOCTYPE html>
<html>
    <head>
        <title>获取浏览器名称和版本号</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
 
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">获取浏览器名称和版本号</span> 
            </div>
            <div class="content"></div>
        </div>
 
        <script type="text/javascript">
            $(function () {
                var strTmp = "您的浏览器名称是：";
                if ($.browser.chrome) { //谷歌浏览器
                    strTmp += "Chrome";
                }
                if ($.browser.mozilla) { //火狐相关浏览器
                    strTmp += "Mozilla FireFox";
                }
                strTmp += "<br /><br /> 版本号是：" //获取版本号
                       +?;
                $(".content").html(strTmp);
            });
        </script>
    </body>
</html>

#divtest
{
    width: 282px;
}
#divtest .title
{
    padding: 8px;
    background-color: Blue;
    color: #fff;
    height: 23px;
    line-height: 23px;
    font-size: 15px;
    font-weight: bold;
}
#divtest .content
{
    padding: 8px;
    background-color: #fff;
    font-size: 13px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}