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()方法的封装

                  示例:

003 JQuery (009 - 009)
$.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);

                                })

 

上一篇:Python_note_003(Python中的输入函数input()、运算符用法)


下一篇:JS笔记003 - 第03章 流程控制