首页 > 其他分享> 文章详细

003 JQuery (009 - 009)

2020-07-11 10:34:32 阅读：280 来源： 互联网

标签：JQuery jquery function 方法 js 003 cookie 009 data

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

　　　　 })

标签：JQuery,jquery,function,方法,js,003,cookie,009,data
来源： https://www.cnblogs.com/carreyBlog/p/13282669.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

003 JQuery (009 - 009)