`

jquery工具类笔记

 
阅读更多
1 $browswer对象获得浏览器信息
     <script type="text/javascript">
        $(function() {
            var strTmp = "您的浏览器名称是:";
            if ($.browser.msie) { //IE浏览器
                strTmp += "IE";
            }
            if ($.browser.mozilla) { //火狐相关浏览器
                strTmp += "Mozilla FireFox";
            }
            strTmp += " 版本号是:" //获取版本号
                   + $.browser.version;
            $("#divTip").html(strTmp);
        })

此外还有safari,opera等版本了

2)遍历数组each
       $(function() {
            var arrStu = { "张三:": "60", "李四:": "70", "王二:": "80" }
            var strContent = "<li class='title'>姓名:分数</li>";
            $.each(arrStu, function(Name, Value) {
                strContent += "<li>" + Name + Value + "</li>";
            })
            $("ul").append(strContent);
        })

3) 数据筛选
    $.grep 筛选数组中的元素
         $(function() {
            var strTmp = "筛选前数据:";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.grep(arrNum, function(ele, index) {
                return ele > 5 && index < 8 //元素值大于5且序号小于8
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>筛选后数据:"
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })
4) 数据变更
    可以根据指定条件修改数组中的元素,比如:
          $(function() {
            var strTmp = "变更前数据:";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.map(arrNum, function(ele, index) {
                if (ele > 5 && index < { //元素值大于5且序号小于8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>变更后数据:"
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })

5)在数组中进行搜索
  $.inArray()
         $(function() {
            var strTmp = "待搜索数据:";
            var arrNum = [4, 21, 2, 12, 5];
            var arrPos = $.inArray(2, arrNum);
            strTmp += arrNum.join();
            strTmp += "<br/><br>搜索后结果:"
            strTmp += arrPos;
            $("#divTip").append(strTmp);
        })

  $.inArray中,第一个参数是要搜索的元素的位置
  
6) $.trim()
    删除左右两边个空格字符
      
7) 搜索数组
         $(function() {
            var strTmp = "待搜索数据:";
            var arrNum = [4, 21, 2, 12, 5];
            var arrPos = $.inArray(2, arrNum);
            strTmp += arrNum.join();
            strTmp += "<br/><br>搜索后结果:"
            strTmp += arrPos;
            $("#divTip").append(strTmp);
        })
  8) isEmptyObject()
$(function() {
            var obj0 = {};
            var obj1 = { "name": "taoguorong" };
            var strTmp = "obj0是否为空:" + $.isEmptyObject(obj0);
            strTmp += "<br><br>obj1是否为空:" + $.isEmptyObject(obj1);
            $("#divTip").append(strTmp);
        })



  9)$.isPainObject()
        对象是否通过{}或者new Object()创建
   $(function() {
            var obj0 = {};
            var obj1 = new Object();
            var obj2 = "null";
            var strTmp = "obj0是否为原始对象:" + $.isPlainObject(obj0);
            strTmp += "<br><br>obj1是否为原始对象:" + $.isPlainObject(obj1);
            strTmp += "<br><br>obj2是否为原始对象:" + $.isPlainObject(obj2);
            $("#divTip").append(strTmp);
        })
10)  $.contains()检查两个节点是否包含关系
          $(function() {
            var node0 = document.documentElement;
            var node1 = document.body;
            var strTmp = "对象node0是否包含对象node1:"
            strTmp += $.contains(node0, node1);//检测两者的包含关系
            $("#divTip").append(strTmp);
        })

11) $.param()对数组进行序列化
       $(function() {
            var arrInfo = { id: 101, name: "tao", sex: 0 }; //基本信息数组
            //分数和汇总信息数组
            var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
                SunNum: { Score: 288, Num: 3 }
            };
            //序列化各数组
            var arrNewInfo = $.param(arrInfo);
            var arrNewScore = $.param(arrScore);
            var arrDecScore = decodeURIComponent($.param(arrScore));
            //显示序列化后的数组
            var strTmp = "<b>arrInfo数组序列化后</b>:";
            strTmp += arrNewInfo;
            strTmp += "<br><br><b>arrScore数组序列化后</b>:";
            strTmp += arrNewScore;
            strTmp += "<br><br><b>arrScore序列化解码后</b>:";
            strTmp += arrDecScore;
            //显示在页面中
            $("#divTip").append(strTmp);
        })
  输出: arrInfo数组序列化后:id=101&name=tao&sex=0

arrScore数组序列化后:Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3

arrScore序列化解码后:Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3

12) $.extend()函数
       <script type="text/javascript">
        /*------------------------------------------------------------/
        功能:返回两个数中最大值
        参数:数字p1,p2
        返回:最大值的一个数
        示例:$.MaxNum(1,2);
        /------------------------------------------------------------*/
        ; (function($) {
            $.extend({
                "MaxNum": function(p1, p2) {
                    return (p1 > p2) ? p1 : p2;
                }
            });
        })(jQuery);

        /*------------------------------------------------------------/
        功能:返回两个数中最小值
        参数:数字p1,p2
        返回:最小值的一个数
        示例:$.MinNum(1,2);
        /------------------------------------------------------------*/
        ; (function($) {
            $.extend({
                "MinNum": function(p1, p2) {
                    return (p1 > p2) ? p2 : p1;
                }
            });
        })(jQuery);
       
        $(function() {
            var strTmp = "5与6中最大的数是:";
            strTmp += $.MaxNum(5, 6);
            strTmp += "<br><br>7与8中最小的数是:";
            strTmp += $.MinNum(7,;
            $("#divTip").append(strTmp);
        })
    </script>
     $.extend()可以用扩展object
       比如:
          var objname={name:"张三“,sex:"男”};
  var objInfo={name:"李四“,age:30};
  var objLast=$.extend(objname,objInfo);
        objInfo为被合拼的对象,结果为:
  {name:"李四”,sex:"男“,age:30};
  也就是说,如果合拼对象,且存在相同参数名称,则会对应覆盖;

分享到:
评论

相关推荐

    jQuery基础自学笔记(pink老师jQuery全内容)

    《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库,由 John Resig 在2006年创建,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...

    我的JQuery笔记.doc

    《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    JQuery教程自学笔记

    本教程将深入探讨JQuery的核心概念和技术,帮助你掌握这个强大的工具,以便在Web开发中更加得心应手。 一、概述 JQuery的核心优势在于它的易用性,它通过提供一套简洁的API,让开发者可以快速实现常见的DOM操作、...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    jQuery编程笔记

    #### 七、jQuery常用的工具API 1. **动画效果** - `$.animate()`: 创建自定义动画。 - `$.effect()`: 应用预定义的效果。 2. **数据处理** - `$.parseJSON()`: 将JSON字符串转换为JavaScript对象。 - `$.param...

    锋利的jQuery学习笔记

    jQuery还提供了一些工具函数,如`.each()`, `.extend()`, `.trim()`等,它们在日常开发中非常实用。`.each()`用于迭代数组或对象,`.extend()`可以合并对象,`.trim()`则用于去除字符串两端的空白字符。 结合博文...

    圣思源的jquery学习笔记

    笔记中会详细讲解如何使用jQuery选择器选取元素,这是jQuery的基础,包括ID选择器、类选择器、属性选择器等,以及更高级的组合选择器和伪类选择器,帮助我们精准定位页面上的任何元素。 在DOM操作方面,jQuery提供...

    JQueryEasyUI学习笔记(十五)异步tree 源码

    在本文中,我们将深入探讨JQueryEasyUI框架中的异步Tree组件,这是一个强大的工具,用于在Web应用中展示层级结构的数据。JQueryEasyUI是基于jQuery的一个轻量级且易于使用的UI库,它提供了多种可定制的组件,包括...

    jquery学习笔记-相关代码

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...

    Jquery笔记.docx

    jQuery是一个预写好的JavaScript函数集合,可以看作是Java工具类的对应概念。它存储了大量的JavaScript代码,这些代码主要以函数形式存在,方便开发者调用。DOM对象则是使用JavaScript原生语法创建的对象,代表HTML...

    jQuery笔记和jQuery插件的使用

    1. **选择器**: jQuery提供了一套强大的CSS选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,可以快速选取页面中的元素。 2. **DOM操作**: jQuery提供了便利的方法来操作DOM,如`$(selector)....

    jquery 学习笔记

    jquery 教程笔记 jquery 是一个功能强大且灵活的 JavaScript 库,它提供了很多实用的方法来帮助开发者快速构建 web 应用程序。下面是 jquery 的一些重要知识点: 选择器 jquery 中的选择器是非常强大的,它可以...

    JQUERY学习笔记2

    ### JQUERY学习笔记2:深度解析与应用实例 在深入探讨jQuery的学习笔记中,我们将重点关注几个核心概念和功能...无论是处理DOM操作、事件响应还是样式更改,jQuery都提供了简洁而强大的工具,帮助开发者实现高效开发。

    jQuery相关笔记01

    总之,jQuery作为一款强大的JavaScript库,通过简洁的API和高效的DOM操作,极大地提高了前端开发的效率,使其成为前端开发者的得力工具。理解并熟练掌握jQuery的基本用法和核心概念,对于任何前端开发者来说都是至关...

    jQuery入门-1.0笔记

    jQuery入门笔记涵盖了JavaScript库jQuery的基本知识点,包括其核心概念、语法、选择器、事件处理以及页面元素操作等内容。在深入之前,我们先明确jQuery是一个高效的JavaScript库,它通过简化DOM操作、事件处理、...

    圣思园 jQuery笔记

    《圣思园 jQuery 笔记详解》 jQuery,作为一款强大的JavaScript库,它的出现极大地简化了JavaScript的DOM操作,使得网页动态化和交互性开发变得更加便捷。本文将深入探讨jQuery的选择器、过滤选择器及其在实际应用...

    jQuery学习笔记(二)

    在本篇“jQuery学习笔记(二)”中,我们将深入探讨jQuery库的更多核心功能和常见用法。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这篇笔记将帮助你进一步...

    JQuery笔记(表单验证).

    `jQuery Validate` 插件就是用于此类任务的一个强大工具,它允许开发者轻松地添加各种验证规则到HTML表单中。 首先,让我们深入了解 `jQuery Validate` 插件的基本用法。在提供的代码片段中,可以看到一个简单的...

    jQuery学习笔记.docx

    4. **jQuery开发工具**: - Dreamweaver可以通过安装jQuery_API.mxp插件来提供jQuery代码提示。 - Aptana是一款强大的开源IDE,专注于JavaScript和Ajax开发。 - Visual Studio 2008需要安装插件以支持jQuery提示...

Global site tag (gtag.js) - Google Analytics