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()方法的封装
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.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);
})