zoukankan      html  css  js  c++  java
  • 003 JQuery (009

    [A] JQuery的工具方法

                JQ的工具方法与我们自己封装的js方法没有任何区别

                    1. $.type()             输出当前数据类型            相当于typeof

                          // 传统的typeof对于数组,字符串,日期的返回值都是对象

                          // 而$.type()可以更明确的返回数组,字符串和日期

                    2. $.trim()             删除字符串的首尾空格

                          示例:

                              var a = " he l ok  ";

                              alert("|" + $.trim(a) + "|");   // 返回值"he l ok".

                    3. inArray()            查找元素在数组中的位置      相当于indexOf

                          【格式】

                              var arr = [10, 20, 30, 40, 50];

                              $.inArray(20, arr)      // 返回值为1

                    4. $.noConflict()        给$函数起别名

                          示例:

                              var money = $.noConflict();

                              此后可以用money替代$使用

                              如:

                                  money(function(){

                                      代码块;

                                  })

                    5. 将伪数组转成数组

                          makeArray()             相当于js中的Array.from()

    [B] Jquery插件方法

    JQ中插件方法,JQ中给了用户拓展JQ方法的接口

                1. $.extend()           拓展工具方法

                      【调用方式】:$.xxx()

                2. $.fn.extend()        拓展JQ方法

                      【调用方式】:$().xxx()

                  示例:

                      $.extend({

                          aaa: function(){

                              alert("我是aaa函数");

                          }

                      })

                      $.fn.extend({

                          bbb: function(){

                              alert("我是bbb函数");

                          }

                      })

                      $.aaa();

                      $("div").bbb();

                3. 通过函数拓展,实现drag()方法的封装

                      示例:

    $.fn.extend({
                            drag: function(){
                                $(this).css({
                                    position: "absolute",
                                    cursor: "pointer"
                                });
    
                                $(this).on("mousedown", function(ev){
                                    var oLeft = ev.clientX - $(this).offset().left;
                                    var oTop = ev.clientY - $(this).offset().top;
                                    var _this = this;
                                    $(document).on("mousemove", function(ev){
                                        $(_this).css({
                                            left: ev.clientX - oLeft + "px",
                                            top: ev.clientY - oTop + "px",
                                        });
                                    })
                                });
                                $(document).on("mouseup", function(){
                                    $(this).off("mousemove");
                                })
                            }
                            return this;        // 返回this,即返回节点,则便于实现链式操作
                        })
    View Code

    [D] jquery中的cookie和ajax方法

               JQuery中的cookie方法

             jquery的cookie方法没有包含再jquery.min.js中,封装在一个单独的js中

             jquery.cookie.js下载地址:https://plugins.jquery.com/cookie/

                      1. jquery的cookie方法中只有一个函数

                          即为:

                              $.cookie()

                      2. $.cookie()调用方式

                            1. $.cookie(name)               通过name取值

                            2. $.cookie(name, value)       设置name, value键值对

                            3. $.cookie(name, value {     设置键值对,亦可设置可选项

                                // 加入可选项

                                raw:    true            新增可选项,选择是否编码

                                                          false为默认值,表示不编码

                                                          true表示编码

                            })                               

                            4. $.cookie(name, null)     删除cookie


                JQuery中包含了ajax的所有方法,并且进行了细分

                      1. $.axjx(obj)                  提交数据

                          输入为一个对象

                              obj = {

                                  type:               "get"或者"post"两种请求方式

                                  url:                被请求文件的地址

                                 data: {}            请求需要提交的数据

                                  success: function(data, statusText, xhr){

                                      /星

                                          statusText两个取值:success和error

                                          xhr为ajax对象,可以输出其任何属性和方法

                                          data为请求到的数据

                                      星/

                                      alert(data + "," + statusText);

                                  }

                                  error: function(msg){

                                      alert(msg);

                                  }

                              }

                          【注】$.ajax()方法已经实现了跨域,即url可以跨域请求

                              但在此之前需要在obj对象中增加一个dataType: "jsonp"  参数

                              此时success中请求到的数据data已经转换为jsonp格式字符串,无需再用JSON.Stringify()

                          【注】ajax中包含有很多参数,更多需求请参考:

                                  W3C:https://www.w3cschool.cn/jquery/jquery-ref-ajax.html



                      2. $().load(url, 回调函数)函数        在load中传入url后,会直接将下载到的数据填充到元素的innerHTML中去

                              【注】load方法需要先导入jquery.min.js和jquery.cookie.js两个文件

                                  并且需要在服务器环境下运行

                                第一个参数:

                                      需要请求的文件的url

                                      若被请求的文本中包含有标签,则可以选择选择性的提取文本内容

                                       示例:

                                            "1.txt h2"      只提取文本中的h2标签内的文本

                                            "1.txt #box"    只提取文本中的id为box的标签内的文本

                                第二个参数:

                                      回调函数,在文件请求结束时调用

                               示例:

                                $("#box").load("1.txt", function(data, statusText, xhr){

                                        /星

                                            statusText两个取值:success和error

                                            xhr为ajax对象,可以输出其任何属性和方法

                                            data为请求到的数据

                                        星/

                                        alert(data + "," + statusText);

                                    })

  • 相关阅读:
    Path Sum II
    Convert Sorted Array to Binary Search Tree
    Construct Binary Tree from Inorder and Postorder Traversal
    Construct Binary Tree from Preorder and Inorder Traversal
    Maximum Depth of Binary Tree
    Binary Tree Zigzag Level Order Traversal
    Binary Tree Level Order Traversal
    Same Tree
    Validate Binary Search Tree
    Binary Tree Inorder Traversal
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/13282669.html
Copyright © 2011-2022 走看看