003 JQuery (009 - 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，即返回节点，则便于实现链式操作
                    })

 

 

[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);

                         　　　　   })