JQuery 基础

一、DOM对象和JQuery对象的转换

var $div = $("#div"); -> 获取JQuery对象
var div = $div[0]; -> JQuery对象转换DOM对象
var $div = $(div); -> DOM对象转换JQuery对象

二、JQuery选择器

基础语法:
$("")|$(''); -> 默认查找方式,范围在当前文档[$(selector,document)]
$("",node); -> 基于某个节点下查找[$(selector,parent.document)]
$(this)和this的区别:$(this)获取JQuery对象,this获取JavaScript对象

CSS选择器
$("#id"); -> id选择器
$(".class"); -> 类选择器
$("div"); -> 元素选择器
$("*"); -> 通用选择器
$(this); -> 特殊选择器
$("div p"); -> 后代选择器
$("div>p"); -> 子代选择器
$("h1+p"); -> 一般兄弟选择器
$("h1~p"); -> 相邻兄弟选择器

基本选择器
$(":first"); -> 匹配第一个元素
$(":last"); -> 匹配最后一个元素
$(":eq(index)"); -> 匹配下标为index的元素
$(":gt(index)"); -> 匹配下标大于index的元素
$(":lt(index)"); -> 匹配下标小于index的元素
$(":even"); -> 匹配下标为偶数的元素
$(":odd"); -> 匹配下标为奇数的元素
$(":not(selector)"); -> 过滤选择器,匹配不含指定选择器的元素
$(":header"); -> 匹配标题元素(h1~h6)
$(":root"); -> 匹配该文档的根元素
$(":animated"); -> 匹配正在执行动画的元素
$(":lang(language)"); -> 匹配指定语言的元素

内容选择器
$(":contains(text)"); -> 匹配包含指定文本的元素
$(":parent"); -> 匹配含有子元素或文本的元素
$(":empty"); -> 匹配没有子元素的元素
$(":has(selector)";) -> 匹配包含指定选择器的元素
例:div:not(:has(>p)); -> 匹配子元素里没有P标签的DIV

可见性选择器
$(":visible"); -> 匹配显示的元素
例:style="display:block";
$(":hidden"); -> 匹配隐藏的元素
例:style="display:none";

属性选择器
$("[attribute|='value']"); -> 匹配attribute的值为value或以value-前缀的元素
$("[attribute*='value']"); -> 匹配attribute的值包含value字符串的元素
$("[attribute~='value']"); -> 匹配attribute的值包含value单词的元素
$("[attribute^='value']"); -> 匹配attribute的值以value开头的元素
$("[attribute$='value']"); -> 匹配attribute的值以value结尾的元素
$("[attribute!='value']"); -> 匹配attribute的值不为value的元素
$("[attribute='value']"); -> 匹配attribute的值为value的元素
$("[attribute]"); -> 匹配含有attribute属性的元素
$("[attributeN][attributeM]"); -> 匹配含有多个attribute属性的元素
例:$("div[class='col-sm-12 bootstrap-table']"); -> 匹配同时有多个类属性的元素

表单对象属性选择器
$(":enabled"); -> 匹配可用的元素
$(":disabled"); -> 匹配不可用的元素
$(":checked"); -> 匹配被选中的元素(input)
$(":selected"); -> 匹配被选中的元素(option)

表单元素选择器
$(":input"); -> 匹配input、textarea、select、button元素
$(":text"); -> 匹配文本框(input:type=text)
$(":password"); -> 匹配密码框(input:type=password)
$(":radio"); -> 匹配单选框(input:type=radio)
$(":checkbox"); -> 匹配复选框(input:type=checkbox)
$(":file"); -> 匹配文件域(input:type=file)
$(":image"); -> 匹配图像域(input:type=image)
$(":button"); -> 匹配按钮(button:type=button)
$(":submit"); -> 匹配提交按钮(button:type=submit)
$(":reset"); -> 匹配重置按钮(button:type=reset)

子元素选择器
$(":first-child"); -> 匹配第一个子元素
$(":last-child"); -> 匹配最后一个子元素
$(":only-child"); -> 匹配唯一的子元素
$(":nth-child(n)"); -> 匹配第n个子元素
$(":nth-last-child(n)"); -> 匹配倒序第n个子元素

窗口间的交互
$('selector',window.parent.document); -> 获取父窗口的元素
window.parent.$('selector'); -> 获取父窗口的元素
window.parent.document.getElementBy-*(params); -> 获取父窗口的元素
$('selector',window.frames[index].document); -> 获取子窗口的元素
window.frames[index].$('selector'); -> 获取子窗口的元素
window.frames[index].document.getElementBy-*(params); -> 获取子窗口的元素

window.parent.function(); -> 调用父窗口的函数
window.frames[index].function(); -> 调用子窗口的函数

三、对象方法

$object.html(); -> 获取元素的HTML内容
$object.html(html); -> 设置元素的HTML内容
$object.html(function(index,old){
    index表示当前元素被JQuery读取的下标
    old表示未被替换时的旧文本
    return html; -> 通过回调设置HTML内容
});

$object.text(); -> 获取元素及子代元素的纯文本内容(标签体)
$object.text(text); -> 设置元素的纯文本内容(标签体)
$object.text(function(index,old){ return text; });

BUG：获取输入框(input)改变后的内容,必须使用val()方法
$.object.val(); -> 获取元素value属性的值
$.object.val(value); -> 设置元素value属性的值
$object.val(function(index,old){ return value; });

操作元素的自定义属性
var value = $object.attr("class"); -> 通过元素属性名获取属性值
$object.attr("class","wjx"); -> 设置元素属性的值
$object.attr("class",function(index,old){ return "wjx" });
$object.attr({width:"50",height:"80"}); -> 设置多个属性及值
$object.removeAttr("class"); -> 移除元素的属性及值
例:$input.attr("checked",true); -> 单选或复选框选中
例:$option.attr("selected",true); -> 下拉框选项选中

操作元素的固有属性
var value = $object.prop("class"); -> 通过元素属性名获取属性值
$object.prop("class","wjx"); -> 设置元素属性的值
$object.removeProp("class"); -> 移除元素的属性及值

$object.addClass("class"); -> 添加类属性及值
$object.addClass(function(index,old){ return "class" });

$object.removeClass("class"); -> 移除类属性及值
$object.removeClass(function(index,old){ return "class" });

$object.toggleClass("class"); -> 类切换,有则删除,没有则添加
$object.toggleClass("class",boolean); -> 是否添加(true)或移除(false)类

var array = $object.has("JQuery选择器"); -> 获取有某些子元素的父元素
var boolean = $object.hasClass('class'); -> 当前对象是否含有某个类
var boolean = $object.is("JQuery选择器"); -> 判断当前对象是否符合某个条件
var boolean = $object.is(function(){})

$object.css("name"); -> 获取元素的CSS样式
$object.css("name","value"); -> 设置元素的CSS样式
$object.css({"nameN":"valueN","nameM":"valueM"}); -> 同时设置多个属性
例:$object.css('display') === 'none'; -> 判断元素的某个属性值
例:$object.css('cssText',"color:white !important;"); -> 设置最高优先级

$object.data("key"); -> 对象读取数据
JQuery.data($object,"key"); -> 静态读取数据

$object.data("key","value"); -> 对象存储数据
JQuery.data($object,"key","value"); -> 静态存储数据

$object.removeData("key"); -> 对象移除数据
JQuery.removeData($object,"key"); -> 静态移除数据

$object.children(); -> 获取所有子元素
$object.children("JQuery选择器"); -> 匹配符合选择器的子元素
$object.find("JQuery选择器"); -> 匹配符合选择器的子元素
两者区别:find()必须有选择器且遍历后代,children()只遍历子代
$object.contents(); -> 获取所有子元素
$object.contents("JQuery选择器"); -> 匹配符合选择器的子元素
两者区别:contents()返回的子元素包括文本节点和注释节点

$object.parent(); -> 获取$object的父元素
$object.parent("JQuery选择器"); -> 获取符合条件的父元素
$object.parents(); -> 获取$object的所有父元素
$object.parents("JQuery选择器"); -> 获取符合条件的父元素
$object.offsetParent(); -> 获取最接近当前对象的父元素
$child.parentsUntil($parent); -> 获取两个元素间的所有元素
两者区别:parent()查找上一级父元素,parents()查找所有父元素
$object.closest("JQuery选择器"); -> 获取单个符合条件的父元素
两者区别:closest()从自身出发向上查找到符合条件的父元素则停止查询

$brother.prev(); -> 获取上一个兄弟元素
$brother.prev("JQuery选择器"); -> 获取上一个符合条件的兄弟元素
$brother.prevAll(); -> 获取所有被跟随的兄弟元素
$brother.prevAll("JQuery选择器"); -> 获取符合条件的被跟随兄弟元素
$brother.prevUntil($brother); -> 获取两个兄弟元素间的所有元素

$brother.next(); -> 获取下一个兄弟元素
$brother.next("JQuery选择器"); -> 获取下一个符合条件的兄弟元素
$brother.nextAll(); -> 获取所有跟随的兄弟元素
$brother.nextAll("JQuery选择器"); -> 获取符合条件的跟随兄弟元素
$brother.nextUntil($brother); -> 获取两个兄弟元素间的所有元素

$brother.siblings(); -> 获取同辈元素
$brother.siblings("JQuery选择器"); -> 获取符合条件的同辈元素

var $array = $("*"); -> 对象是一个集合
$array.add($object); -> 集合添加对象
$array.eq(index); -> 取出数组中的第index个元素
$array.first(); -> 获取数组中的第一个元素
$array.last(); -> 获取数组中的最后一个元素
$array.filter("JQuery选择器"); -> 获取数组中符合条件的元素
$array.not("JQuery选择器");  -> 获取数组中不符合条件的元素

$("select[name=user] option").filter(function () {
    return $(this).text() === 'wjx'; -> 通过文本选中下拉框
}).prop("selected", true);

$object.each(function(index, element) { -> 迭代
     index:循环下标,element:当前元素
});

$是jQuery对象的别称,因此$.function()=jQuery.function();
$.get(url,function(data,status){}); -> url:请求地址,data:返回数据,status:请求码
$.post(url,function(data){}); -> url:请求地址,data:返回数据
$.load("ajax.php",{"key":"value"},function(){}); -> ajax请求携带参数及回调函数
$.getJSON(url, function (data) {}); -> ajax异步请求
$.getScript("ajax.js"); -> ajax请求获得并运行js文件
$.ajaxSetup({"key","value"}); -> 全局设置ajax的属性默认值
$.ajaxStart(function(){}); -> ajax请求发送前回调
$.ajaxStop(function(){}); -> ajax请求完成时回调

$.inArray(value,array); -> array是否含有value,返回下标(不存在-1)
$.inArray(value,array,startIndex); -> 设置开始匹配的位置

$object.index(); -> 当前元素相对兄弟元素的下标
$a.index($b); -> $b相对于$a的下标,没有返回-1

$object.width(); -> 获取不包括内外边距的宽度
$object.height(); -> 获取不包括内外边距的宽度
$object.innerWidth(); -> 获取不包括外边距的宽度
$object.innerHeight(); -> 获取不包括外边距的宽度
$object.outerWidth(); -> 获取包括内外边距的宽度
$object.outerHeight(); -> 获取包括内外边距的宽度

$object.offset(); -> 获取元素相对于页面的左上角坐标的对象
$object.position(); -> 获取元素相对于父元素的左上角坐标的对象

var object = $.parseJSON(json); -> JSON字符串转换对象
var type = $.type($object); -> 获取对象的类型
var boolean = $.isArray($array); -> 判断对象是不是数组
var boolean = $.isFunction($fun); -> 判断对象是不是函数
var boolean = $.isEmptyObject(object); -> 判断对象是不是空
$.trim($object); -> 清除对象两端的空格
jQuery.noConflict(); -> 释放jQuery对$符号的控制

四、操作节点

var node = $("<div></div>"); -> 创建节点,直接写HTML结构

$object.prepend(node); -> 元素开头添加节点(内部)
node.prependTo($object); -> 节点添加到元素开头上(内部)
$object.append(node); -> 元素结尾添加节点(内部)
node.appendTo($object); -> 节点添加到元素结尾上(内部)

$object.before(node); -> 在元素前添加节点(外部)
node.insertBefore($object);  -> 在元素前添加节点(外部)
$object.after(node); -> 在元素后添加节点(外部)
node.insertAfter($object); -> 在元素后添加节点(外部)

$object.remove(); -> 移除当前及子元素
$object.remove("JQuery选择器"); -> 移除符合条件的元素
$object.empty(); -> 清除当前及子元素内容,保留HTML结构
$.isEmptyObject(object); -> 检测对象是否为空
$.param(object); -> 把对象以key/value形式序列化

$object.replaceWith(node); -> node节点取代$object节点
node.replaceAll($object); -> node节点取代$object节点

$object.wrap(node); -> node作为$object的父节点
$array.wrapAll(node); -> 数组里的所有元素都添加父节点
$object.wrapInner(node); -> node作为元素的子元素的父节点
$object.unwrap(); -> 删除$object的父节点

var object = $object.detach(); -> 临时将节点从页面删除,但保留元素的内存对象
$("body").append(object); -> 将临时删除节点恢复到页面上

$object.clone(); -> 克隆结构,不克隆事件
$object.clone(true); -> 同时克隆结构和事件

jQuery.fn = jQuery.prototype -> 等价
$.extend({ -> 为jQuery添加静态方法
  plus:function(a,b){return a+b;},
  minus:function(a,b){return a-b;}
});
如:$.plus(2,3)|$.minus(3,2);

$.fn.extend({ -> 为jQuery添加成员方法
  member:function(){}       
});
如:$object.member();

var user = {};
var name = {name:"wjx"}; 
var age= {age=20}; 
如:$.extend(user,name,age); -> 用一个或多个对象来拓展目标对象(user)
结果:user={name:"wjx",age=20};

五、事件设置

$object.click(function(e){}); -> 元素的点击事件
$object.dblclick(function(e){}); -> 元素的双击事件

$object.bind(event,data,function(e){}); -> 设置多个event用空格分隔,data的传值可选
$object.unbind(event,function(e){}); -> 自定义事件,移除元素绑定的事件
$parent.delegate($child,event,data,function(e){}); -> 父元素设置子元素的事件
$parent.undelegate($child,event,data,function(e){}); -> 移除现在或将来的事件
$object.trigger(event,dataA,...,dataZ); -> 指定元素触发某个事件
$object.triggerHandler(event); -> 只影响单个元素,不会引起事件的默认行为
$object.one(event,data,function(){}); -> 设置事件,回调函数只响应一次

$object.live(event,data,function(e){}); -> 设置当前及未来(脚本生成)元素的事件
$object.die(); -> 移除所有live()设置的事件
$object.die(event,function(e){}); -> 移除某个live()设置的事件

$object.on(event,function(e){}); -> 设置当前及子元素的事件
$parent.on(event,$child,function(e){}); -> 设置子元素的事件
$object.off(event,function(e){}); -> 移除on()设置的事件
$parent.off(event,$child,function(e){}); -> 移除on()设置的事件

$object.load(function(){}); -> 元素加载成功
$(window).unload(function(){}); -> 用户离开本页
$object.error(function(){}); -> 元素加载发生错误

$(function(){}); -> 文档就绪回调
$(document).ready(function(){}); -> 文档就绪回调
$(window).resize(function(){}); -> 浏览器窗口大小发生变化
$object.scroll(function(){}); -> 元素内部滚动回调

$object.keydown(function(e){}); -> 按键按下
$object.keypress(function(e){}); -> 输入域每添加一个字符触发一次该事件
$object.keyup(function(e){}); -> 按键抬起

$object.focusin(function(e){}); -> 当前及子元素获得焦点
$object.focusout(function(e){}); -> 当前及子元素失去焦点

$object.mousedown(function(e){}); -> 按下鼠标按键
$object.mousemove(function(e){}); -> 鼠标移动
$object.mouseover(function(e){}); -> 鼠标在元素上方
$object.mousemout(function(e){}); -> 鼠标离开元素上方
$object.mouseenter(function(e){}); -> 鼠标进入元素
$object.mouseleave(function(e){}); -> 鼠标离开元素
$object.mouseup(function(e){}); -> 抬起鼠标按键
$object.hover(function(e){}); -> mouseover() + mousemout()

$input.focus(function(e){}); -> 输入域获得焦点
$input.blur(function(e){}); -> 输入域失去焦点
$input.change(function(e){}); -> 输入域内容发生变化
$input.select(function(e){}); -> 鼠标左键选中输入域内容
$input.bind("input propertychange change",function(){}); -> 实时监听输入框变化
$form.submit(function(e){}); -> 表单提交回调

event.pageX; -> 鼠标位于页面的横坐标
event.pageY; -> 鼠标位于页面的纵坐标
event.result; -> 事件处理器返回的值
event.target; -> 触发事件的元素
event.timeStamp; -> 事件触发的时间
event.type; -> 触发事件的类型
event.which; -> 触发事件的键
event.preventDefault(); -> 阻止事件的默认动作
var boolean = event.isDefaultPrevented(); -> 是否阻止事件的默认动作

六、动画效果

$object.show(); -> 显示元素
$object.show(100,function(){}); -> 设置时间和完成回调

$object.hide(); -> 隐藏元素
$object.hide(100,function(){}); -> 可传参数:fast|normal|slow,也可指定时间

$object.toggle(100,function(e){}); -> 显示或隐藏的切换,单位毫秒,执行完成回调
$object.toggle(functionA(e){},...,functionZ(e){}); -> 自定义切换效果,两个以上
$object.toggle(boolean); -> 只响应显示(true)或隐藏(false)的单个效果

$object.slideDown(); -> 滑动的方式隐藏元素
$object.slideDown(100,function(){}); -> 设置滑动时间,单位毫秒

$object.slideUp(); -> 滑动的方式显示元素
$object.slideUp(100,function(){}); -> 设置滑动时间,单位毫秒

$object.slideToggle(); -> 滑动显示或隐藏元素的切换
$object.slideToggle(100,function(){}); -> 设置滑动时间,单位毫秒

$object.fadeOut(); -> 淡出效果隐藏元素
$object.fadeOut(100,function(){}); -> 设置淡出时间,单位毫秒
$object.fadeTo(100,1.0); -> 动画时间,透明度(0.0~1.0)
$object.fadeIn(); -> 淡入效果显示元素
$object.fadeIn(100,function(){}); -> 设置淡入时间,单位毫秒

$object.fadeToggle(); -> 淡入淡出效果切换
$object.fadeToggle(100,function(){}); -> 设置动画时间,单位毫秒

$object.stop(); -> 停止元素正在执行的动画

$object.animate(styles,speed,easing,callback); -> 自定义动画效果
styles:{"CSS属性名N":"CSS属性值N","CSS属性名M":"CSS属性值M"}
speed:fast、normal、slow、特定毫秒值
easing:swing、linear
callback:function(){}

$("JQuery选择器").delay(speed); -> 延迟执行任务

七、延迟对象

var $defer = $.Deferred(); -> 创建延迟对象
$defer.resolve(); -> 设置延迟对象的运行状态为已完成,并回调done()方法
$defer.reject(); -> 设置延迟对象的运行状态为已失败,并回调fail()方法
$defer.done(); -> 任务执行完成时回调
$defer.fail(); -> 任务执行失败时回调
$.when($defer1,$defer2,$defer3); -> 管理多个延迟对象
$defer.then(done(),fail()); -> 任务完成和失败的回调函数合在一起
$defer.promise(); -> 在原对象基础上返回一个新的延迟对象,这个对象屏蔽了修改运行状态的方法
$defer.always(function(){}); -> 不管任务完成或者失败,都回调该函数