JQuery之工具类函数

最新推荐文章于 2022-12-23 11:36:53 发布

PzzZ

最新推荐文章于 2022-12-23 11:36:53 发布

阅读量199

点赞数

分类专栏： JQuery 文章标签：函数

本文链接：https://blog.csdn.net/qq_17635843/article/details/77841619

版权

JQuery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。已在jQuery1.9中被移除，因为识别方法不准确。

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

<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>

2、检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。

例如，根据页面的特征，并通过$.support.boxModel属性的返回值，显示当前浏览器是否属于标准的w3c盒子模型，

<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 ($.support.boxModel) { //是W3C盒子模型
                    strTmp += "W3C盒子模型";
                }
                else { //是IE盒子模型
                    strTmp += "IE盒子模型";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

3、检测对象是否为空
在jQuery中，可以调用名为$.isEmptyObject的工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下：

$.isEmptyObject(obj);

其中，参数obj表示需要检测的对象名称。

例如，通过$.isEmptyObject()函数，检测某个指定的对象是否为空，并将结果显示在页面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测对象是否为空</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = { "姓名": "土豪一族" };
                var strTmp = "您定义了一个：";
                if ($.isEmptyObject(obj)) { //检测是否为空
                    strTmp += "空对象";
                }
                else {
                    strTmp += "非空对象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

4、检测对象是否为原始对象

调用名为$.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：

$.isPlainObject (obj);

其中，参数obj表示需要检测的对象名称。

例如，通过$.isPlainObject()函数，检测某个指定的对象是否为原始，并将结果显示在页面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测对象是否为原始对象</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = "null";
                var strTmp = "您定义了一个：";
                if (?) { //检测是否为原始对象
                    strTmp += "原始对象";
                }
                else {
                    strTmp += "非原始对象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

5、检测两个节点的包含关系

调用名为$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：

$.contains (container, contained);

参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。

例如，通过$.contains()函数，检测两个节点对象间是否存在包含关系，并将检测的结果显示在页面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测两个节点的包含关系</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var node_a = document.body.firstChild;
                var node_b = document.body;
                var strTmp = "对象node_a";
                if (?) { //检测是否包含节点
                    strTmp += " 包含 ";
                }
                else {
                    strTmp += " 不包含 ";
                }
                strTmp += "对象node_b";
                $(".content").html(strTmp);
            });
        </script>
    </body>

6、字符串操作函数

调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：

$.trim (str);

参数str表示需要删除左右两边空格符的字符串。

例如，通过$.trim()函数，除掉一个两边均有空格符的字符串，并将其执行前后的字符长度都显示在页面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">字符串操作函数</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <input id="txtName" name="txtName" type="text" />
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "内容：";
                    var strOld = $("#txtName").val();
                    var strNew =?;
                    strTmp += strOld;
                    strTmp += "<br/><br>除掉空格符前的长度："
                    strTmp += strOld.length;
                    strTmp += "<br/><br>除掉空格符后的长度："
                    strTmp += strNew.length;
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>

7、URL操作函数

调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：

$. param (obj);

参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。

例如，通过$.param()函数，对指定的对象进行序列化编码，使其成为可执行传值的URL地址，并将该地址显示在页面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">URL操作函数</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                //基本信息对象
                var objInfo = new Object();
                objInfo.name = "白富美";
                objInfo.sex = 1;
                //序列化对象
                var objNewInfo =$.param(objInfo);
                //显示序列化后的对象
                var strTmp = "<b>对象 白富美 序列化后</b>：<br/><br/>";
                strTmp += objNewInfo;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>

8、使用$.extend()扩展工具函数

调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：

$. extend ({options});

参数options表示自定义插件的函数内容。

例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的最大值显示在页面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定义工具函数求两值中最小值</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            /*------------------------------------------------------------/
            功能：返回两个数中最小值
            参数：数字p1,p2
            返回：最小值的一个数
            示例：$.MinNum(1,2);
            /------------------------------------------------------------*/
            (function ($) {
                $.extend({
                    "MinNum": function (p1, p2) {
                        return (p1 > p2) ? p2 : p1;
                    }
                });
            })(jQuery);
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "17与18中最小的数是：";
                    strTmp +=$.MinNum(17, 18);
                    //显示在页面中
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>

9、使用$.extend()扩展Object对象

除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：

$. extend (obj1,obj2,…objN);

参数obj1至objN表示需要合并的各个原有对象。

例如，调用$.extend()函数对两个已有的对象进行合并，并将合并后的新对象元素内容显示在页面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">合并原有对象</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var objInfo = { name: "" };
                var objMess = { name: "白富美,", title: "欢迎与我联系！" };
                var objNewInfo =$.extend(objInfo,objMess);
                var strTmp = "<b>对象 白富美 合并后</b>：<br/><br/>";
                strTmp += objNewInfo.name + objInfo.title;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>自定义focusColor插件</title>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <style>
            .fl{ 
                background:purple; 
                padding:5px; 
                color:white;
            }
            .content ul li span{ 
                padding-right:20px;
            }
            .content ul li{
               background:aquamarine; 
            }
        </style>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定义focusColor插件</span>
            </div>
            <div class="content">
                <ul id="test">
                    <li><span>橘子</span><span>水果</span></li>
                    <li><span>芹菜</span><span>蔬菜</span></li>
                    <li><span>香蕉</span><span>水果</span></li>
                </ul>
            </div>
        </div>
        
        
        <script type = "text/javascript">
            $(function(){
                $("#test li").each(function(index){
                    $(this).focusColor("gray");
                });
            });
            (function ($) {
                $.fn.extend({
                    "focusColor": function (newColor) {
                       var oldColor = $(this).css('background-color');
                       $(this).hover(
                           function(){
                               $(this).css('background-color',newColor)
                               
                           },
                           function(){
                               $(this).css('background-color',oldColor)
                               
                           }
                       );
                       return $(this);
                    }
                });
            })(jQuery);
            
            
            
        </script>
    </body>
</html>

最近在整理一些资源工具，放在网站分享 http://tools.maqway.com
欢迎关注公众号：麻雀唯伊，不定时更新资源文章，生活优惠，或许有你想看的

PzzZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery之工具类函数

1、获取浏览器的名称与版本信息在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。已在jQuery1.9中被移除，因为识别方法不准确。例如，调用$.brows...
复制链接

扫一扫

专栏目录