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

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

陶老实 其它
难度中级
时长 3小时20分
学习人数
综合评分9.40
97人评价 查看评价
9.6 内容实用
9.2 简洁易懂
9.4 逻辑清晰

  • https://www.jquery123.com/bind/

     <script>

            $("p").bind("myCustomEvent", function (e, myName, myValue) {

                $(this).text(myName[1] + ", hi there!");

                $("span").stop().css("opacity", 1)

                    .text("myName = " + myName)

                    .fadeIn(30).fadeOut(1000);

            });

            $("button").click(function () {

                $("p").trigger("myCustomEvent", ["John"],['16']);//自定义事件

            });

        </script>


    查看全部
  •  <script>

                $(function(){

                     //首先定义全局JSON对象数组

                    var students=[{name:"zhansan",age:18},{name:"lisi",age:20},{name:"maliang",age:19}];

                //初始化遍历,students是要遍历的对象的名字,function中第一个参数index是索引,每次+1递增,                // 第二个参数item是数组中每个对象本身

                     $.each(students,function(index,item){

                         if(index<students.length){ //在此判断当前的index值和数组长度,可以避免点击事件后,

                            //触发连续append操作

                             $("#st").append("<li> 姓名是:"+item.name+" ,年龄:"+item.age+"</li>");

                         }

                         });

                    $("#btn").click(function(){

                        alert("ok");

                        $("#dv2").hide();

                        

                    });

                });

                

            </script>

        </head>

        <body>

            <div>

                <input type="button" id="btn" value="显示学生信息" />

                <ul id="st"></ul>

            </div>

            <div id="dv2">

               <span>中国</span> 

            </div>

        </body>

    </html>


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

    2019-08-10

  • margin的百分比是相对于width的百分比,即在W3C盒模型下是相对于content的,而在IE盒模型下相对于border。css3中可用属性boxSizing来自定义width。分别用content-sizing和border-sizing来定义

    查看全部
  • 字符转换

    https://r12a.github.io/apps/conversion/

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

    2019-07-22

  • my (x, y) at (x, y)
    我的某个位置在相对结点的某个位子
    例如
    {my:'right bottom', at:'center center'}
    可以解释为
    我的右下角在相对结点的中心
    my或者at中任何一个值没有给出的话都会自动设置成默认值center。

    查看全部
  • https://www.runoob.com/jqueryui/api-sortable.html

    查看全部
  • 可选项

    https://www.runoob.com/jqueryui/api-droppable.html#event-drop

    查看全部
  • 配置对象的可选项

    https://www.runoob.com/jqueryui/example-draggable.html

    查看全部
  • minChars (Number):

        在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表

    * width (Number):

        指定下拉框的宽度. Default: input元素的宽度

    * max (Number):

        autoComplete下拉显示项目的个数.Default: 10

    * delay (Number):

        击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10

    * autoFill (Boolean):

        要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false

    * mustMatch (Booolean):

        如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false

    * matchContains (Boolean):

        决定比较时是否要在字符串内部查看匹配,如ba是否与foo
    bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false

    * selectFirst (Boolean):

        如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true

    * cacheLength (Number):

        缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10

    * matchSubset (Boolean):

        autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true

    * matchCase (Boolean):

        比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false

    * multiple (Boolean):

        是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false

    * multipleSeparator (String):

        如果是多选时,用来分开各个选择的字符. Default: “,”

    * scroll (Boolean):

        当结果集大于默认高度时是否使用卷轴显示 Default: true

    * scrollHeight (Number):

        自动完成提示的卷轴高度用像素大小表示 Default: 180  

    * formatItem (Function):

        为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中.
    Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.

    * formatResult (Function):

        和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

    * formatMatch (Function):

        对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

    * extraParams (Object):

        为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

    * result (handler) Returns: jQuery

        此事件会在用户选中某一项后触发,参数为:

        event: 事件对象. event.type为result.

        data: 选中的数据行.

        formatted:formatResult函数返回的值

        例如:

        $(“#singleBirdRemote”).result(function(event, data, formatted) {

    //如选择后给其他控件赋值,触发别的事件等等

    });


    查看全部
  • 仅支持ie浏览器

    查看全部
  • json
    查看全部
  • 检测对象是否为空:

    $.isEmptyObject(obj)

    查看全部
  • 判断复选框是否被选中 checked:

    if($('ele').is(':checked')){

    }

    查看全部
  • 输入验证、提示

    查看全部
  •  $.get("https://www.imooc.com/data/info_f.php",function(data){

                         $("#btnShow").attr("disabled",true)

                          $("ul").append("<li>我的名字叫"+data.name+"!</li>")

                           $("ul").append("<li>我的女友说"+data.say+"!</li>")

                 },"json")


    这里的“json”是指dataType:"json"

    $.get({

    url:"",

    dataType:"",

    success:function(){}

    })


    查看全部

举报

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

微信扫码,参与3人拼团

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

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