为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础(五)一Ajax应用与常用插件

陶老实 其它
难度中级
时长 3小时20分
学习人数
综合评分9.40
97人评价 查看评价
9.6 内容实用
9.2 简洁易懂
9.4 逻辑清晰
  • 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息

    查看全部
    0 采集 收起 来源:练习题

    2018-07-12

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

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

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


     $(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);

                });


    查看全部
  • 调用名为$. extend的工具函数,可以对原有的工具函数进行扩展,自定义类级别的jQuery插件,调用格式为:

    $. extend ({options});

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


     $extend({

                        "MinNum": function (p1, p2) {

                            return (p1 > p2) ? p2 : p1;

                        }

                    });


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

    $. param (obj);

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

    var objNewInfo =$ param(objInfo);

    查看全部
    0 采集 收起 来源:URL操作函数

    2018-07-12

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

    $.trim (str);

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


     var strNew =$trim(strOld);

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

    $.contains (container, contained);

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


    if ($contains(node_a, node_b)) { //检测是否包含节点

                        strTmp += " 包含 ";

                    }

                    else {

                        strTmp += " 不包含 ";

                    }


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

    $.isPlainObject (obj);

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


    if ($isPlainObject(obj)) { //检测是否为原始对象

                        strTmp += "原始对象";

                    }

                    else {

                        strTmp += "非原始对象";

                    }


    查看全部
  • 在jQuery中,可以调用名为$.isEmptyObject的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值,调用格式如下:

    $.isEmptyObject(obj);

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


    if ($.isEmptyObkect(obj)) { //检测是否为空

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


    if ($.support.boxModel) { //是W3C盒子模型

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


      $(function () {

                    var strTmp = "您的浏览器名称是:";

                    if ($.browser.chrome) { //谷歌浏览器

                        strTmp += "Chrome";

                    }

                    if ($.browser.mozilla) { //火狐相关浏览器

                        strTmp += "Mozilla FireFox";

                    }

                    strTmp += "<br /><br /> 版本号是:" //获取版本号

                           +$.browser.version;

                    $(".content").html(strTmp);

                });


    查看全部
  • 工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:

    $(selector).tooltip({options});

    其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。


     $(function () {

                    $("a").tooltip({

                        show: {

                            effect: "slideDown",

                            delay: 350

                        },

                        hide: {

                            effect: "explode",

                            delay: 350

                        },

                        position: {

                            my: "left top",

                            at: "left bottom"

                        }

                    });

                });


    查看全部
  • 微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:

    $(selector).spinner({options});

    selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。


     var intR = 0, intG = 0, intB = 0, strColor;

                    $("input").spinner({


    查看全部
  • 菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:

    $(selector).menu({options});

    selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。

     $(function () {

                    $("menu").menu();

                });


    查看全部
  • 对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()confirm()函数的功能,它的调用格式为:

    $(selector).dialog({options});

    selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

     $("#dialog-model").dialog({

                        height: 140,

                        modal: true,

                        title: '系统提示',

                        hide: 'slide',

                        buttons: {

                            '确定': function () {

                                $("#spnName").remove();

                                $(this).dialog("close");

                            },

                            '取消': function () {

                                $(this).dialog("close");

                            }

                        },

                        open: function (event, ui) {

                            $(this).html("");

                            $(this).append("<p>" + content + "</p>");

                        }

                    });


    查看全部
  • 使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:

    $(selector).tabs({options});

    selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。

     

    $(function () {

                   $("#tabs").tabs ({

                        //设置各选项卡在切换时的动画效果

                        fx: { opacity: "toggle", height: "toggle" },

                        event: "mousemove" //通过移动鼠标事件切换选项卡

                    })

                });


    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery中的ajax应用 2、jQuery中的插件 3、jQuery中的工具类函数

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!