个人中心
gpt4 book ai didi

jQuery功能函数详解

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery功能函数详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

在javascript编程中，开发者通常需要编写很多小程序来实现一些特定的功能。例如浏览器检测，字符串处理、数组的编辑等。jQuery对这些常用的程序进行了总结，提供了很多实用的函数.

1.检测浏览器.

jQuery通过$.browser对象获取浏览器信息.

属性 说明 msie 如果是ie为true,否则为false mozilla 如果是mozilla相关的浏览器为true，否则为false safari 如果是Safari浏览器为true,否则为false poera 如果是opera浏览器为true,否则为false version 浏览器的版本号 在使用时，开发者可以直接调用这些属性来获取浏览器属性。如下:

  。

复制代码 代码如下:

        <script type="text/javascript">
            $(function() {
                function detect() {
                    if ($.browser.msie)
                        return "IE";
                    if ($.browser.mozilla)
                        return "Mozilla";
                    if ($.browser.safari)
                        return "Safari";
                    if ($.browser.opera)
                        return "Opera";
                }
                var sBrowser = detect();
                document.write("您的浏览器是：" + sBrowser + "<br>版本为：" + $.browser.version)

  。

            });         </script> 。

  。

2.盒子模型 。

在jQuery中提供了$.boxModel对象来检测目前所遵循的盒子模型。它是一个布尔值，当为true时，表示遵循w3c标准盒子模型，如果false则为ie的盒子模型 。

    var sBox = $.boxModel ? "标准W3C" : "IE";                 document.write("您的页面目前支持：" + sBox + "盒子模型"); 3.处理javascript对象.

在javascript编程中，可以说一切变量都是对象，例如字符串，日期和数值等.

jQuery提供了一些编辑的方法来处理相关的对象，例如$.trim()函数(首尾去空格) 函数就是其中之一 。

i.使用$each()方法遍历 。

前文介绍到each()方法，用于选择器的中的元素遍历，同样对于javascript的数组和对象，可以使用$.each()方法进行遍历.

$.each(object,fn); 其中，object为需要遍历的对象，fn为object中每个元素都执行的函数，其中函数fn可以接受两个参数，第一个参数为数组元素的序号或者是对象的属性。第二个参数为元素或者属性的值.

例子：用$.each()函数遍历数组和对象 。

  。

复制代码 代码如下:

<script type="text/javascript">
            var aArray = ["one", "two", "three", "four", "five"];
            $.each(aArray, function(iNum, value) {
                //征对数组
                document.write("序号" + iNum + "值" + value + "<br>");
            });
            var oObj = {
                one: 1,
                two: 2,
                three: 3,
                four: 4,
                five: 5
            };
            $.each(oObj, function(pro, value) {
                //征对对象
                document.write("属性" + pro + "值" + value + "<br>")
            });
        </script>

  。

从上面的例子可以看到，$.each()对遍历数组和对象都十分方便，例如对未知的属性$.browser,使用$.each进行遍历 。

$.each($.browser, function(iNum, value) {                 //征对数组                 document.write("属性" + iNum + "值" + value + "<br>");             }); 得值:

属性chrome值true 属性version值39.0.2171.99 属性webkit值true ii.过滤数据 。

对于数组中的数据，很多时候开发者需要对其进行筛选，如果使用纯javascript,往往需for循环进行逐一检查。jQuery提供了$.grep()方法。能够便捷的过滤数组的数据.

其语法如下:

$.grep(Array,fn,[invert]) 其中，array是需要过滤的数组对象名称，fn为过滤函数，对数组中的每个对象，如果返回true则保留，否则去除。可选的invert为布尔值，如果设置为true.则函数fn取反，满足条件的被去除.

  。

复制代码 代码如下:

var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
            var aResult = $.grep(aArray, function(value) {
                return value >= 4;
            });        
            document.write(aResult.join());

  。

首先定义了数组aArray,然后用$.grep()方法将值大于等于4挑选出来得到新的数组 。

例子2，过滤数组的高级方法.

  。

复制代码 代码如下:

    <script type="text/javascript">
            var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
            var aResult = $.grep(aArray, function(value, index) {
                //元素的值和value和序号同时判断
                return (value >= 4 && index > 3);
            });

  。

            document.write(aResult.join());         </script> 。

  。

iii转化数组 。

很多时候开发者希望某个数组中的元素能够统一的转化，例如将所有的元素都乘以2.虽然在javascript中例如for循环可以实现，但是jQuery提供了更为便利的$.map()方法。这个方法如下 。

$.map(array,fn) 其中，array为要转化的数组，fn为转化函数，对数组中的每一项都执行，该函数同样可以接受两个函数，1个参数为元素的值。2个参数为元素的序号，是可选参数.

  。

复制代码 代码如下:

<script type="text/javascript">
            $(function() {
                var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
                $("p:eq(0)").text(aArray.join());
                aArray = $.map(aArray, function(value, index) {
                    //将数组转化为大写并添加了序号
                    return (value.toUpperCase() + index);
                });
                $("p:eq(1)").text(aArray.join());

  。

                cArray = $.map(aArray, function(value) {                     return value + value;                 });                 $("p:eq(2)").text(cArray.join());             });         </script>         <p></p>         <p></p>         <p></p> 。

  。

执行结果 。

a,b,c,d,e,f,g,h,i 。

A0,B1,C2,D3,E4,F5,G6,H7,I8 。

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8 使用$.map()函数进行转移后，数组长度不一定与原来的数组相同。可以通过设置null来删除数组的元素.

  。

复制代码 代码如下:

<script type="text/javascript">
            $(function() {
                var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
                $("p:eq(0)").text(aArray.join());
                $("p:eq(1)").text("aArray长度：" + aArray.length + "值:" + aArray.join());
                cArray =$.map(aArray,function(value){
                    //比1大的+1后返回，否则通过设置为null将其删除
                    return value>1?value+1:null;
                });
                $("p:eq(2)").text("cArray长度：" + cArray.length + "值:" + cArray.join());
            });
        </script>
        <p></p>
        <p></p>
        <p></p>

  。

除了删除元素外，$.map转化数组时同样可以增加数组元素.

  。

复制代码 代码如下:

    <script type="text/javascript">
            $(function() {
                var aArray = ["one", "two", "three", "four", "five"];
                $("p:eq(0)").text(aArray.join());
                cArray =$.map(aArray,function(value){
                    return value.split("");
                });
                $("p:eq(1)").text("cArray长度：" + cArray.length + "值:" + cArray.join());
            });
        </script>
        <p></p>
        <p></p>

  。

执行结果 。

one,two,three,four,five 。

cArray长度：19值:o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e 以上代码在$.map转化过程中，split("")方法将元素拆分为一个个字母 。

iiii搜索数组元素 。

对于字符串，可以通过indexOf()来搜索特定字符所处的位置，对于数组元素，javascript没有提供类似的方法。在jQ中，$.inArray()函数可以很好的数组元素的搜索功能。语法如下:

$.inArray(value,array) 其中，value为希望查找的对象，array为数组本身，如果找到了则返回第一个匹配元素在数组的位置。如果没有则返回-1. 。

  。

复制代码 代码如下:

    <script type="text/javascript">
            $(function() {
                var aArray = ["one", "two", "three", "four", "five"];
                var cx1 = $.inArray("two", aArray);
                var cx2 = $.inArray("www", aArray);
                $("p:eq(0)").text(cx1);
                $("p:eq(1)").text(cx2);
            });
        </script>
        <p></p>
        <p></p>

  。

4.获取外部代码 。

在一些较大工程中，开发者将不同的js放在不同的js文件中，有时根据补贴的需求加载不同的代码。jQuery提供了$.getScript()实现外边的代码加载。使用方法如:

$.getScript(url,[callback]) 其中，url为外部资源的地址，可以是相对的，也可以是绝对的地址。callback为加载成功后的回调函数，可选.

  。

复制代码 代码如下:

<script type="text/javascript">
            $(function() {
                $("p:eq(0)").click(function() {
                    $.getScript("1.js");
                });
                $("p:eq(1)").click(function() {
                    textfun();
                });
            });
        </script>
        <p>点击1</p>
        <p>点击2</p>

  。

其中1.js代码为 。

  。

复制代码 代码如下:

alert("加载ok！")
function textfun(){
    alert("testfun")
};

最后此篇关于jQuery功能函数详解的文章就讲到这里了,如果你想了解更多关于jQuery功能函数详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： C++中this指针用法详解及实例
文章推荐： Python入门之使用pandas分析excel数据
文章推荐： C语言中的参数传递机制详解
文章推荐： 将Python代码打包成.exe可执行文件的完整步骤
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com