首页 > 代码库 > 4_jquery
4_jquery
官网：www.jquery.com
兼容：
1.jquery-3.1.0.js ：form.attr("checked","false")无效
2.firefox:console.log($("input:checked").length);
attr("checked",true);失效
jquery-1.11.3.js
jQuery1.x：体积较大，兼容老IE，功能有缺失
jQuery2.x：体积稍小，放弃老IE，功能比较多
jQuery3.x：放弃老IE，功能更加丰富
JavaScript类库：jQuery,MooTools,Prototype,Dojo
jQuery 2.x开始不再支持IE 6,7,8
jQuery无法使用DOM对象的任何方法，反之
<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script> 添加jQuery库
(1)在head标签内引入
(2)在body标签的最后引入——推荐在body后引入和自定义的JS代码
jQuery特性：几乎所有函数都自带循环功能，可以对选中的元素进行遍历；
几乎所有的函数都返回jQuery对象
DOM对象(W3C DOM标准)：每个HTML标签在浏览器中都对应一个DOM对象。
jQuery对象（jQuery函数返回的对象）： $()/jQuery()函数的返回值是一个"jQuery对象"——典型的类数组对象，其中封装着所有选定的DOM对象。
DOM对象转换为jQuery对象：
$(DOM对象); $(this)
jQuery对象转换为DOM对象：
$obj.get(i) / $obj[i]; /类数组操作 //i下标
jQuery("选择器")/$("选择器")：
Basic基本选择器：
#id .class element * s1,s2,s3
Hierarchy层级选择器：
后代 ，子代>，相邻兄弟+，通用兄弟~
Basic Filter基本过滤选择器：
-:first 第一个元素
-:last 最后一个元素
-:not(selector) 排除selector -:not(:last)
-:even 挑选偶数行，1开始
-:odd 奇数行
-:eq(i) 下标=i的元素，下标从0开始
-:gt(i) 下标>i
-:lt(i) <i
Content Filter内容过滤选择器：
-:contains(text) 包含给定文本的元素
-:empty 所有不包含子元素或文本的空元素
-has(selector) 含有选择器所匹配的元素
-:parent 含有子元素或文本的元素
Child Filter子元素过滤选择器：
-:first-child 每个父元素的第一个子元素
-:last-child 最后一个
-:only-child 父元素中的唯一子元素
-:nth-child(i/even/odd/3n+1)每个父元素下的第i个子元素/偶/奇/表达式如3n+1元素，下标从1开始
Attribute属性选择器：
-[att] 匹配有att属性的元素
-[att=value] 匹配属性值等于value的元素
-[att!=value] 匹配属性值不等于value的元素
-[att^/$/*=value] 匹配属性以...开始/结尾/包含的元素
-[att1][att2] 复合属性过滤选择器
Visibility Filter可见性过滤选择器：
-:hidden 所有不可见的元素：display:none ; type="hidden"; opacity:0; visibility:hideen;
-:visible 所有的可见元素
From表单元素选择器：
-:input 选取所有<input>、<textarea>、<select>、<button>
-:text 所有的单行文本框
-:password 密码框
-:radio 单选
-:checkbox 复选
-:submit 提交按钮
-:image 图像按钮，<input type="image">
-:reset 重置按钮
-:button 所有的按钮，type="button"
-:file 所有的上传域
-:hidden 所有不可见元素,type="hidden"
-:enabled 选取所有可用元素，无disabled属性
-:disabled 选取所有不可用元素，有disabled属性
-:checked 选取所有被选中的元素(单选/多选框)，有checked属性
-:selected 选取所有被选中的元素(下拉列表)，有selected属性,常用option:selected
面试题：jQuery中有哪些选择器是css中所没有的？http://api.jquery.com/category/selectors/jquery-selector-extensions/
$("selector").action(),$node.action()：
html( [val|fn] ) 读取/修改节点的HTML内容，≈innerHTML,返回的是DOM内容
text( [val|fn] ) 读取/修改节点的文本内容，≈textContent
val( [val|fn|arr] ) 读取/修改节点的值
属性：
.prop(“checked/selected/disabled”) 添加属性，只有这三个必须用prop
attr("attr","value") 参数1/2，读取/修改节点属性
removeAttr("attr") 删除节点属性
attr("class","") 获取/设置class
addClass("classname") 追加class
removeClass("classname")/() 删除1个/所有class
toggleClass("classname") 切换class:有则删除，无则添加
hasClass("classname") 是否有某个class
jquery读取元素的扩展属性：
<li data-car-type=lt30”>
$(‘li’).data(‘car-type’); //读取
$(‘li’).data(‘car-type’，‘lt300’); //设置
样式：
css("name")/("name","value") 读取/设置样式，cssname可以-连接/驼峰命名,可对jq类数组一次性设置
css("name","value","name2","value2"...);设置多个样式
css("name","value").css("name2","value2")...;
css( {name:"value", name:"value"}... )
css(name,function(index, value)) index为元素在对象集合中的索引位置，value是原先的属性值。
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
查找节点：
parent() 父节点(没有选择器)
find(selector) 满足选择器的所有子元素
children()/(selector)/([s])直接子节点
next()/(selector) 下一个兄弟节点
nextAll() 后面所有的兄弟
prev()/(selector) 上一个兄弟节点
prevAll() 上面所有的兄弟
siblings()/(selector) 上面+下面所有的兄弟
创建节点：
var child=$("<...>...</...>"); 允许通过HTML代码字符串直接创建节点
内部插入：可能会移除child的html的标签以及内容
parent.append(child/html标签); 追加到parent子节点最后
child.appendTo((parent) child追加到parent中，返回值是所有被追加的内容，
选择先前选中的元素要使用end()方法
prepend(child/html标签) 追加到子节点最开始
child.prependTo((parent)
外部插入：
after(child/html标签) 追加到节点后
before(child/html标签) 追加到节点前
insertAfter(parent) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(parent)
删除元素：
.remove()/(selector) 移除当前元素
.empty() 清空当前选定元素的内容
.html( "" ); 清空当前选定元素的内容
替换元素：
oldChild.replaceWith( newChild/"HTML"); 返回oldChild，移动目标位置替换oldChild,可能会移除html的标签
newChild.replaceAll( oldChild ); 返回newChild，颠倒的replaceWith()方法
克隆元素：
clone()/(false/true) 不填/false:复制节点；true:克隆元素以及其身上所有的监听函数
类数组操作：jQuery对象即为类数组对象
length
[i] 返回封装的第i个DOM对象
eq(i) 将下标i的DOM对象取出来
get(i) 返回封装的第i个DOM对象
get() 返回一个DOM对象组成的数组
$(类数组).index(obj) 返回DOM/jQuery对象在类数组的下标
each(fn) 遍历类数组，fn处理DOM对象，this表正在被遍历的那个DOM对象
jq中两个each函数区别：i下标，v为obj/arr对应i下标的值
$.each(arr/obj,fn(i,v))：jq全局函数，遍历指定arr/obj的每个元素，fn为arr/{x1:x,x2:x...}内每个元素执行的回调函数
$(..).each(fn(i))： jq对象函数，遍历封装的每个DOM对象
多库共存：
jQuery.noConflict(); //将$控制权交给其他JS库
(function($) { .... })(jQuery); //定义匿名函数并设置形参为$，重新获取$的控制权
<==>jQuery(function($){....});//使用jQuery设定页面加载时执行的函数重新获取$的控制权
事件处理：
多个元素 逗号,分隔；绑定多个fn 逗号,分隔
一个元素绑定多个事件 事件名可用空格分开("事件1 事件2",function(){})
$obj.bind("click",fn); 简写$obj.click(fn);
unbind(type,[data|fn]]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
one(‘事件名‘, fn) 绑定一个一次性的事件处理函数。
delegate(‘子元素‘,子元素‘,事件名‘,fn)事件委派，被选元素的子元素添加一/多个事件处理程序，this->子元素
undelegete
live /die 已废弃
on(‘事件名‘,fn) 把监听函数直接绑定在事件源上
$(‘parent‘).on(‘事件名‘,‘元素‘, fn) 把多个元素的监听函数委托给父元素
off
trigger(事件类型) 触发某类事件，模拟操作，比如模拟用户点击按钮触发
blur 元素失去焦点时触发
change 只适用文本域（text field），以及 textarea 和 select 元素
click
dbclick
error
focus
keydown
keypress
keyup
load
mousedown
mouseover 鼠标穿过元素及其任何子元素，都会触发
mouseout
mouseenter 当鼠标指针穿过元素时触发
mouseleave 离开mouseenter();+mouseleave();<==>.hover().hover
resize
scroll 滚动指定的元素时触发
select textarea /文本类型的 input 元素中的文本被选择时
submit
unload
$(‘btn‘).bind( ‘click‘, fn )==btn.addEventListener(‘click‘, fn, false)
事件对象e 不能用e.nodeName∵nodeName是DOM的节点属性
e常用属性：
target/srcElement 事件源对象
eventPhase 事件所处的传播阶段
screenX/screenY 屏幕左上角
clientX||x，.clientY||y 浏览器显示区的左上角
pageX/pageY 网页左上角，IE9+，未滚动时，client与page值相等
offsetX/offsetY 目标元素左上角，IE属性
which/keyCode/charCode： 键盘事件中按下的按键
button： 鼠标哪个按键被按下了
cancelBubble=true; 是否取消事件冒泡，IE
returnValue=http://www.mamicode.com/false； 是否阻止事件默认行为
e.preventDefault(); 阻止默认行为
e.stopPropagation(); 取消 事件冒泡：子元素->父元素依次触发事件函数
页面载入：
$(document).ready(fn)：在DOM加载后就可以调用，HTML + JS，操作网页的元素时,可能关联文件未加载完毕
同一个页面中无限次地使用$(document).ready()事件，则先后顺序依次执行。
①$(document).ready(function(){
//jQuery functions
});
②$().ready( fn );
③$( fn );
底层的实现是:window.addEventListener(‘DOMContentLoaded‘, fn, false)//DOMContentLoaded:DOM内容加载完成触发
$(document).ready()可以先后绑定多个监听函数，而window.onload只能绑定一个监听函数
window.onload=f; 网页所有的元素(包括元素所有关联文件HTML + CSS + JS + 图片 + 视频/音频 + Flash...
)完全加载到浏览器后执行
或<body onl oad="f()"><body> 元素的onload事件中有注册函数，则不会触发+$(document).ready()事件。
前端实现动画的技术有哪些？
(1)CSS3 Transition
(2)CSS3 Keyframes
(3)JS 定时器： setInterval 或 setTimeout 修改样式；jQuery1&2
(4)requestAnimationFrame —— 效率最高；jQuery3
注：所有的jQuery动画函数都会自动排队
动画效果：
jQuery 1.11.3动画函数底层都是定时器动画(seTimeout)
show/hide( [time，[fn]] ) 基本显示/隐藏，通过同时改变元素的width,height.opacity来实现显示/隐藏效果
time：show,normal,fast,毫秒数
fn：动画执行完毕后要执行的函数
slideDown/slideUp/slideToggle( [time，[fn]] ) 滑动式动画，通过改变height来实现显示/隐藏/切换两个效果
fadeIn/fadeOut([time，[fn]]) 淡入淡出式动画，通过改变不透明度opacity来实现显示/隐藏
animate( {css:value,...}，time，fn ); js对象：{"css":"value",...}；time：毫秒数
animate(js对象, { duration:time, complete:fn });
默认情况下，animate函数可以对width / height / opacity / left / top等数字型的属性可以执行动画；
非数字型属性不能执行动画，如display / position。此外，颜色类型的属性也不能执行动画
排队效果：.animate().animate(); 多个动画先后顺序执行
并发效果：.animate({...多个}); 多个动画同时执行
jQuery UI：插件库http://plugins.jquery.com
导入css文件：<link rel="stylesheet" href="http://www.mamicode.com/jquery-ui.min.css" type="text/css">
class="ui-icon ui-icon-xxx" 选择图标
导入jquery UI：<stript src="http://www.mamicode.com/xxxx.js"></script> //在jQuery源文件之后导入
①Effect效果：
扩展颜色属性动画：
$(...).animate({"属性":".... ",},time);
属性：
backgroundColor:
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor
effect()
show()/hide()支持更多特效:
$(...).toggle("特效名称",time)：最后元素都->display:none
特效名称：
blind： 变盲，width,height,opacity->0
bounce： 弹跳，上下抖动后消失
clip： 裁剪，上下->中间，height->0
drop： 放下，向左滑动，opacity->0
explode： 爆炸，分割几部分扩散，opacity->0
fade： 褪色，枯萎
fold： 折叠
highlight： 高亮
puff： 张开
pulsate： 脉搏
scale： 缩放
shake 摇动
size： 改变大小，向中心缩小
slide： 滑动，右->左收缩，width->0
②Interactions交互组件：
$(..).draggable() 让一个元素可以在页面中任意拖动
$(..).resizable() 让一个元素可以由用户改变大小
$("ol").selectable() 让一个列表中的元素可以被选中,选中class为ui-selectee.ui-selected，未选中为.ui-selectee
$("ol").sortable() 让一个列表中的元素可以被排序,可拖动
③Widget部件：页面小部件
Accordion Widget 手风琴组件,把一对标题和内容面板转换成折叠面板
$(".parent").accordion() //div.parent>(h3/div)*3
选项：animate：是否使用动画改变面板，且如何使用动画改变面板
方法：option()：为accordion设置一个/多个选项
widget()：返回一个包含accordion的jQuery对象
事件：activate：面板被激活后触发事件
Autocomplete Widget 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择
$(input).autucomplete({
source:[‘...’ , ’ ’ , ’ ’ , ’ ’ , ’ ’ ]
}) //<input>
选项：source:定义要使用的数据，必须指定
方法：option():为autocomplete设置1/多个选项
widget():返回一个包含菜单元素的jQuery对象
事件：open:当打开建议菜单/更新建议菜单时触发
Datepicker Widget 日期拾取器，从弹出框/在线日历选择一个日期
$("input").datepicker(); //<input type="text">
选项：dateFormate:描述/显示日期的格式
minDate:最小的可选日期，当设置为null时，没有下限
maxDate:最大的可选日期，当设置为null时，没有上限
autoSize:如果设置为true,将自动调整输入字段
方法：setDate():为datepicker设置日期
getDate():返回一个datepicker中当前日期，如果没有日期被选中的话返回null
Dialong Widget 对话框组件，在一个交互覆盖层中打开内容,显示一个对话框
$(div).dialog(); //<div title="对话框标题">
选项：autoOpen:当设置为ture时，dialog会在初始化时自动打开
buttons:指定那些按钮已改在dialog上显示
width/height:设置dialog的宽度/高度
方法：open():打开dialog
事件：open:当对话框打开后，触发此事件
Tabs Widget 标签页组件，是一种多面板的但内容区，每个面板与列表中的标题相关
$(.parent).tabs()； //div.parent> (ul>li*3+div*3)
选项：hide:panel(面板)隐藏时的动画效果
show:panel(面板)显示时的动画效果
方法：load():加载远程选项卡的面板内容
事件：load：远程选项卡加载后触发该事件
Tooltip Widget 工具提示组件，可自定义的、可主体化,替代元素的工具提示框,
$(document).tooltip()； //<ANY title="提示文字的内容">
选项：hide:tooltip(工具提示框)关闭/隐藏时的动画效果
show:tooltip(工具提示框)打开/显示时的动画效果
方法：open():以变成方式打开一个tooltip，这仅供非委派的tooltip调用
事件：open:当tooltip打开，显示时，触发此事件，触发的事件为focusin/mouseover
插件：Plugin
日期插件：Datepicker、My97等
layDate日期插件：兼容包括IE6在内的所有主流浏览器,firefox位置不正确,
http://laydate.layui.com；基于原生JS,不基于jQuery。
laydate({...:... , ...});
选项：
elem:"#id", 需显示日期的元素选择器
event:"click", 触发事件
format:"YYYY-MM-DD hh:mm:ss",//日期格式
istime:false, 是否开启事件选择
isclear:true, 是否显示清空
istoday:true, 是否显示今天
issure:true, 是否显示query
festival:true, 是否显示节日
min:"1900-01-01 00:00:00"/laydate.now(-365*60),最小日期，laydate.now(-1/0/1)昨天/今天/明天
max:"2099-12-31 23:59:59",最大日期
start:"2016-6-15 23:00:00",开始日期
fixed:false, 是否固定在可视区域
zIndex:99999999, css z-index
choose:function(dates){ //选择好日期的回调 }
表单验证插件：针对表单元素的值进行验证，并给出相应的图形以及文字提示
常用插件：
formValidator
jQuery.validator
easyForm
validate.js
jQuery.validator插件：http:jqueryvalidation.org/;可验证网址、电子邮件，自定义验证方法
validate()
$("form").validate({
rules:{ //规则
userPwd:{
required:true,
minlength:6,
},
},
messages:{ //提示
userPwd:{
required:"密码不能为空",
minlength:"不能少于6位",
}, //userPwd:"请输入正确的密码",
}
});
选项：
debug:设置是否为调试模式，如果为调试模式表单不会被提交
submitHandler:表单提交时的回调函数，一般用于提交当前表单
rules:设置表单元素的验证规则，格式为key:value
messages:设置表单元素验证不通过时的错误提示信息
errorClass:自定义错误提示信息的样式
ignore:设置哪些表单元素不进行验证
自定义验证方法：jQuery.validator.addMethod("name",method[,message])方法
name:设置验证方法的名称
method:回调函数,function(value,element,param){}
value:元素的值
element:元素本身
param:参数
message:设置验证不通过的错误提示信息
瀑布流插件：参差不齐的多栏布局，随着页面滚动条向下滚动，不断加载数据并附加至当前尾部
Masonry插件：布局插件，css的浮动布局，根据网格先垂直排列元素，再水平排列元素
http://masonry.desandro.com/
$(‘.container‘).masonry({
itemSelector: ‘.box‘,
columnWidth: 260,
gutter: 8, //槽宽
transitionDuration: ‘1s‘, //重设位置动画持续时间
});
options选项：
itemSelector: 指定使用项目中哪些子元素进行布局
columnWidth: 设置每列的宽度
layout布局：
gutter: 设置每列直接的宽度
percentPosition: 值为true,使用百分之，而不是像素值
stamp: 在布局中标记元素,Masonry将在这些标记的元素下进行布局
isFitWidth： 基于容器的父元素大小设置容器的宽度以适应可用的列数
isOriginLeft: 设置布局的水平对齐，默认为true时，从左到右
isOriginTop: 设置布局的垂直对齐，默认为true时，从上到下
设置：
containerStyle: 对容器中的元素使用css样式
transitionDuration: 设置改变位置/外观的过渡时间，默认0.4s
isResizeBound: 是否根据窗口大小调整大小和位置
isInitLayout: 是否初始化布局，为false时，可以在初始化布局前，使用方法/绑定事件
methods方法：
布局：
masonry():布局容器中所有的元素，当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局
layoutItems():布局指定元素
添加/删除元素：
appended():在布局的最后添加并布局新的元素
remove():从Masonty对象中/DOM中删除指定元素
事件：
on:添加一个..事件的监听器
off:删除.............
使用jq的on()/off()绑定Masonry插件的事件：
layoutComplete:布局完成后触发该事件
removeComplete:删除元素完成后触发该事件
jQuery全局插件函数：有命名冲突的风险，
一般创建常用的函数$.ajax()
向jq命名空间添加一个函数：
jQuery.xxx=function(){....};
$/jQuery.extend({
xxx1:function(){...},
xxx2:function(){...}
});
调用：$/jQuery.xxx();
区别：
jQuery.extend(object)方法：全局函数
$.each(arr,function(index,domEle){})
jQuery.fn.extend(object)方法：对象方法
$().each(function(index,domEle){})
jQuery对象插件函数：把所有全局函数封装到一个对象中
jQuery.fn.xxx1=function(){...};
调用：$(...).xxx1(); //xxx3内有this且指向jQuery对象
对任何插件方法内部，this都引用当前的jQuery对象，因此可以在this上面调用任何内置的jQuery方法/DOM节点
实现左侧固定，右侧占剩余全部box1{width..;float:left;} box2{margin-left:..,}
jQuery.param(url/obj) 将url/obj序列化
官网：www.jquery.com
兼容：
1.jquery-3.1.0.js ：form.attr("checked","false")无效
2.firefox:console.log($("input:checked").length);
attr("checked",true);失效
jquery-1.11.3.js
jQuery1.x：体积较大，兼容老IE，功能有缺失
jQuery2.x：体积稍小，放弃老IE，功能比较多
jQuery3.x：放弃老IE，功能更加丰富
JavaScript类库：jQuery,MooTools,Prototype,Dojo
jQuery 2.x开始不再支持IE 6,7,8
jQuery无法使用DOM对象的任何方法，反之
<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script> 添加jQuery库
(1)在head标签内引入
(2)在body标签的最后引入——推荐在body后引入和自定义的JS代码
jQuery特性：几乎所有函数都自带循环功能，可以对选中的元素进行遍历；
几乎所有的函数都返回jQuery对象
DOM对象(W3C DOM标准)：每个HTML标签在浏览器中都对应一个DOM对象。
jQuery对象（jQuery函数返回的对象）： $()/jQuery()函数的返回值是一个"jQuery对象"——典型的类数组对象，其中封装着所有选定的DOM对象。
DOM对象转换为jQuery对象：
$(DOM对象); $(this)
jQuery对象转换为DOM对象：
$obj.get(i) / $obj[i]; /类数组操作 //i下标
jQuery("选择器")/$("选择器")：
Basic基本选择器：
#id .class element * s1,s2,s3
Hierarchy层级选择器：
后代 ，子代>，相邻兄弟+，通用兄弟~
Basic Filter基本过滤选择器：
-:first 第一个元素
-:last 最后一个元素
-:not(selector) 排除selector -:not(:last)
-:even 挑选偶数行，1开始
-:odd 奇数行
-:eq(i) 下标=i的元素，下标从0开始
-:gt(i) 下标>i
-:lt(i) <i
Content Filter内容过滤选择器：
-:contains(text) 包含给定文本的元素
-:empty 所有不包含子元素或文本的空元素
-has(selector) 含有选择器所匹配的元素
-:parent 含有子元素或文本的元素
Child Filter子元素过滤选择器：
-:first-child 每个父元素的第一个子元素
-:last-child 最后一个
-:only-child 父元素中的唯一子元素
-:nth-child(i/even/odd/3n+1)每个父元素下的第i个子元素/偶/奇/表达式如3n+1元素，下标从1开始
Attribute属性选择器：
-[att] 匹配有att属性的元素
-[att=value] 匹配属性值等于value的元素
-[att!=value] 匹配属性值不等于value的元素
-[att^/$/*=value] 匹配属性以...开始/结尾/包含的元素
-[att1][att2] 复合属性过滤选择器
Visibility Filter可见性过滤选择器：
-:hidden 所有不可见的元素：display:none ; type="hidden"; opacity:0; visibility:hideen;
-:visible 所有的可见元素
From表单元素选择器：
-:input 选取所有<input>、<textarea>、<select>、<button>
-:text 所有的单行文本框
-:password 密码框
-:radio 单选
-:checkbox 复选
-:submit 提交按钮
-:image 图像按钮，<input type="image">
-:reset 重置按钮
-:button 所有的按钮，type="button"
-:file 所有的上传域
-:hidden 所有不可见元素,type="hidden"
-:enabled 选取所有可用元素，无disabled属性
-:disabled 选取所有不可用元素，有disabled属性
-:checked 选取所有被选中的元素(单选/多选框)，有checked属性
-:selected 选取所有被选中的元素(下拉列表)，有selected属性,常用option:selected
面试题：jQuery中有哪些选择器是css中所没有的？http://api.jquery.com/category/selectors/jquery-selector-extensions/
$("selector").action(),$node.action()：
html( [val|fn] ) 读取/修改节点的HTML内容，≈innerHTML,返回的是DOM内容
text( [val|fn] ) 读取/修改节点的文本内容，≈textContent
val( [val|fn|arr] ) 读取/修改节点的值
属性：
.prop(“checked/selected/disabled”) 添加属性，只有这三个必须用prop
attr("attr","value") 参数1/2，读取/修改节点属性
removeAttr("attr") 删除节点属性
attr("class","") 获取/设置class
addClass("classname") 追加class
removeClass("classname")/() 删除1个/所有class
toggleClass("classname") 切换class:有则删除，无则添加
hasClass("classname") 是否有某个class
jquery读取元素的扩展属性：
<li data-car-type=lt30”>
$(‘li’).data(‘car-type’); //读取
$(‘li’).data(‘car-type’，‘lt300’); //设置
样式：
css("name")/("name","value") 读取/设置样式，cssname可以-连接/驼峰命名,可对jq类数组一次性设置
css("name","value","name2","value2"...);设置多个样式
css("name","value").css("name2","value2")...;
css( {name:"value", name:"value"}... )
css(name,function(index, value)) index为元素在对象集合中的索引位置，value是原先的属性值。
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
查找节点：
parent() 父节点(没有选择器)
find(selector) 满足选择器的所有子元素
children()/(selector)/([s])直接子节点
next()/(selector) 下一个兄弟节点
nextAll() 后面所有的兄弟
prev()/(selector) 上一个兄弟节点
prevAll() 上面所有的兄弟
siblings()/(selector) 上面+下面所有的兄弟
创建节点：
var child=$("<...>...</...>"); 允许通过HTML代码字符串直接创建节点
内部插入：可能会移除child的html的标签以及内容
parent.append(child/html标签); 追加到parent子节点最后
child.appendTo((parent) child追加到parent中，返回值是所有被追加的内容，
选择先前选中的元素要使用end()方法
prepend(child/html标签) 追加到子节点最开始
child.prependTo((parent)
外部插入：
after(child/html标签) 追加到节点后
before(child/html标签) 追加到节点前
insertAfter(parent) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(parent)
删除元素：
.remove()/(selector) 移除当前元素
.empty() 清空当前选定元素的内容
.html( "" ); 清空当前选定元素的内容
替换元素：
oldChild.replaceWith( newChild/"HTML"); 返回oldChild，移动目标位置替换oldChild,可能会移除html的标签
newChild.replaceAll( oldChild ); 返回newChild，颠倒的replaceWith()方法
克隆元素：
clone()/(false/true) 不填/false:复制节点；true:克隆元素以及其身上所有的监听函数
类数组操作：jQuery对象即为类数组对象
length
[i] 返回封装的第i个DOM对象
eq(i) 将下标i的DOM对象取出来
get(i) 返回封装的第i个DOM对象
get() 返回一个DOM对象组成的数组
$(类数组).index(obj) 返回DOM/jQuery对象在类数组的下标
each(fn) 遍历类数组，fn处理DOM对象，this表正在被遍历的那个DOM对象
jq中两个each函数区别：i下标，v为obj/arr对应i下标的值
$.each(arr/obj,fn(i,v))：jq全局函数，遍历指定arr/obj的每个元素，fn为arr/{x1:x,x2:x...}内每个元素执行的回调函数
$(..).each(fn(i))： jq对象函数，遍历封装的每个DOM对象
多库共存：
jQuery.noConflict(); //将$控制权交给其他JS库
(function($) { .... })(jQuery); //定义匿名函数并设置形参为$，重新获取$的控制权
<==>jQuery(function($){....});//使用jQuery设定页面加载时执行的函数重新获取$的控制权
事件处理：
多个元素 逗号,分隔；绑定多个fn 逗号,分隔
一个元素绑定多个事件 事件名可用空格分开("事件1 事件2",function(){})
$obj.bind("click",fn); 简写$obj.click(fn);
unbind(type,[data|fn]]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
one(‘事件名‘, fn) 绑定一个一次性的事件处理函数。
delegate(‘子元素‘,子元素‘,事件名‘,fn)事件委派，被选元素的子元素添加一/多个事件处理程序，this->子元素
undelegete
live /die 已废弃
on(‘事件名‘,fn) 把监听函数直接绑定在事件源上
$(‘parent‘).on(‘事件名‘,‘元素‘, fn) 把多个元素的监听函数委托给父元素
off
trigger(事件类型) 触发某类事件，模拟操作，比如模拟用户点击按钮触发
blur 元素失去焦点时触发
change 只适用文本域（text field），以及 textarea 和 select 元素
click
dbclick
error
focus
keydown
keypress
keyup
load
mousedown
mouseover 鼠标穿过元素及其任何子元素，都会触发
mouseout
mouseenter 当鼠标指针穿过元素时触发
mouseleave 离开mouseenter();+mouseleave();<==>.hover().hover
resize
scroll 滚动指定的元素时触发
select textarea /文本类型的 input 元素中的文本被选择时
submit
unload
$(‘btn‘).bind( ‘click‘, fn )==btn.addEventListener(‘click‘, fn, false)
事件对象e 不能用e.nodeName∵nodeName是DOM的节点属性
e常用属性：
target/srcElement 事件源对象
eventPhase 事件所处的传播阶段
screenX/screenY 屏幕左上角
clientX||x，.clientY||y 浏览器显示区的左上角
pageX/pageY 网页左上角，IE9+，未滚动时，client与page值相等
offsetX/offsetY 目标元素左上角，IE属性
which/keyCode/charCode：键盘事件中按下的按键
button： 鼠标哪个按键被按下了
cancelBubble=true; 是否取消事件冒泡，IE
returnValue=http://www.mamicode.com/false； 是否阻止事件默认行为
e.preventDefault(); 阻止默认行为
e.stopPropagation(); 取消 事件冒泡：子元素->父元素依次触发事件函数
页面载入：
$(document).ready(fn)：在DOM加载后就可以调用，HTML + JS，操作网页的元素时,可能关联文件未加载完毕
同一个页面中无限次地使用$(document).ready()事件，则先后顺序依次执行。
①$(document).ready(function(){
//jQuery functions
});
②$().ready( fn );
③$( fn );
底层的实现是:window.addEventListener(‘DOMContentLoaded‘, fn, false)//DOMContentLoaded:DOM内容加载完成触发
$(document).ready()可以先后绑定多个监听函数，而window.onload只能绑定一个监听函数
window.onload=f; 网页所有的元素(包括元素所有关联文件HTML + CSS + JS + 图片 + 视频/音频 + Flash...
)完全加载到浏览器后执行
或<body onl oad="f()"><body> 元素的onload事件中有注册函数，则不会触发+$(document).ready()事件。
前端实现动画的技术有哪些？
(1)CSS3 Transition
(2)CSS3 Keyframes
(3)JS 定时器： setInterval 或 setTimeout 修改样式；jQuery1&2
(4)requestAnimationFrame —— 效率最高；jQuery3
注：所有的jQuery动画函数都会自动排队
动画效果：
jQuery 1.11.3动画函数底层都是定时器动画(seTimeout)
show/hide( [time，[fn]] ) 基本显示/隐藏，通过同时改变元素的width,height.opacity来实现显示/隐藏效果
time：show,normal,fast,毫秒数
fn：动画执行完毕后要执行的函数
slideDown/slideUp/slideToggle( [time，[fn]] ) 滑动式动画，通过改变height来实现显示/隐藏/切换两个效果
fadeIn/fadeOut([time，[fn]]) 淡入淡出式动画，通过改变不透明度opacity来实现显示/隐藏
animate( {css:value,...}，time，fn ); js对象：{"css":"value",...}；time：毫秒数
animate(js对象, { duration:time, complete:fn });
默认情况下，animate函数可以对width / height / opacity / left / top等数字型的属性可以执行动画；
非数字型属性不能执行动画，如display / position。此外，颜色类型的属性也不能执行动画
排队效果：.animate().animate(); 多个动画先后顺序执行
并发效果：.animate({...多个}); 多个动画同时执行
jQuery UI：插件库http://plugins.jquery.com
导入css文件：<link rel="stylesheet" href="http://www.mamicode.com/jquery-ui.min.css" type="text/css">
class="ui-icon ui-icon-xxx" 选择图标
导入jquery UI：<stript src="http://www.mamicode.com/xxxx.js"></script> //在jQuery源文件之后导入
①Effect效果：
扩展颜色属性动画：
$(...).animate({"属性":".... ",},time);
属性：
backgroundColor:
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor
effect()
show()/hide()支持更多特效:
$(...).toggle("特效名称",time)：最后元素都->display:none
特效名称：
blind： 变盲，width,height,opacity->0
bounce： 弹跳，上下抖动后消失
clip： 裁剪，上下->中间，height->0
drop： 放下，向左滑动，opacity->0
explode： 爆炸，分割几部分扩散，opacity->0
fade： 褪色，枯萎
fold： 折叠
highlight： 高亮
puff： 张开
pulsate： 脉搏
scale： 缩放
shake 摇动
size： 改变大小，向中心缩小
slide： 滑动，右->左收缩，width->0
②Interactions交互组件：
$(..).draggable() 让一个元素可以在页面中任意拖动
$(..).resizable() 让一个元素可以由用户改变大小
$("ol").selectable() 让一个列表中的元素可以被选中,选中class为ui-selectee.ui-selected，未选中为.ui-selectee
$("ol").sortable() 让一个列表中的元素可以被排序,可拖动
③Widget部件：页面小部件
Accordion Widget 手风琴组件,把一对标题和内容面板转换成折叠面板
$(".parent").accordion() //div.parent>(h3/div)*3
选项：animate：是否使用动画改变面板，且如何使用动画改变面板
方法：option()：为accordion设置一个/多个选项
widget()：返回一个包含accordion的jQuery对象
事件：activate：面板被激活后触发事件
Autocomplete Widget 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择
$(input).autucomplete({
source:[‘...’ , ’ ’ , ’ ’ , ’ ’ , ’ ’ ]
}) //<input>
选项：source:定义要使用的数据，必须指定
方法：option():为autocomplete设置1/多个选项
widget():返回一个包含菜单元素的jQuery对象
事件：open:当打开建议菜单/更新建议菜单时触发
Datepicker Widget 日期拾取器，从弹出框/在线日历选择一个日期
$("input").datepicker(); //<input type="text">
选项：dateFormate:描述/显示日期的格式
minDate:最小的可选日期，当设置为null时，没有下限
maxDate:最大的可选日期，当设置为null时，没有上限
autoSize:如果设置为true,将自动调整输入字段
方法：setDate():为datepicker设置日期
getDate():返回一个datepicker中当前日期，如果没有日期被选中的话返回null
Dialong Widget 对话框组件，在一个交互覆盖层中打开内容,显示一个对话框
$(div).dialog(); //<div title="对话框标题">
选项：autoOpen:当设置为ture时，dialog会在初始化时自动打开
buttons:指定那些按钮已改在dialog上显示
width/height:设置dialog的宽度/高度
方法：open():打开dialog
事件：open:当对话框打开后，触发此事件
Tabs Widget 标签页组件，是一种多面板的但内容区，每个面板与列表中的标题相关
$(.parent).tabs()； //div.parent> (ul>li*3+div*3)
选项：hide:panel(面板)隐藏时的动画效果
show:panel(面板)显示时的动画效果
方法：load():加载远程选项卡的面板内容
事件：load：远程选项卡加载后触发该事件
Tooltip Widget 工具提示组件，可自定义的、可主体化,替代元素的工具提示框,
$(document).tooltip()； //<ANY title="提示文字的内容">
选项：hide:tooltip(工具提示框)关闭/隐藏时的动画效果
show:tooltip(工具提示框)打开/显示时的动画效果
方法：open():以变成方式打开一个tooltip，这仅供非委派的tooltip调用
事件：open:当tooltip打开，显示时，触发此事件，触发的事件为focusin/mouseover
插件：Plugin
日期插件：Datepicker、My97等
layDate日期插件：兼容包括IE6在内的所有主流浏览器,firefox位置不正确,
http://laydate.layui.com；基于原生JS,不基于jQuery。
laydate({...:... , ...});
选项：
elem:"#id", 需显示日期的元素选择器
event:"click", 触发事件
format:"YYYY-MM-DD hh:mm:ss",//日期格式
istime:false, 是否开启事件选择
isclear:true, 是否显示清空
istoday:true, 是否显示今天
issure:true, 是否显示query
festival:true, 是否显示节日
min:"1900-01-01 00:00:00"/laydate.now(-365*60),最小日期，laydate.now(-1/0/1)昨天/今天/明天
max:"2099-12-31 23:59:59",最大日期
start:"2016-6-15 23:00:00",开始日期
fixed:false, 是否固定在可视区域
zIndex:99999999, css z-index
choose:function(dates){ //选择好日期的回调 }
表单验证插件：针对表单元素的值进行验证，并给出相应的图形以及文字提示
常用插件：
formValidator
jQuery.validator
easyForm
validate.js
jQuery.validator插件：http:jqueryvalidation.org/;可验证网址、电子邮件，自定义验证方法
validate()
$("form").validate({
rules:{ //规则
userPwd:{
required:true,
minlength:6,
},
},
messages:{ //提示
userPwd:{
required:"密码不能为空",
minlength:"不能少于6位",
}, //userPwd:"请输入正确的密码",
}
});
选项：
debug:设置是否为调试模式，如果为调试模式表单不会被提交
submitHandler:表单提交时的回调函数，一般用于提交当前表单
rules:设置表单元素的验证规则，格式为key:value
messages:设置表单元素验证不通过时的错误提示信息
errorClass:自定义错误提示信息的样式
ignore:设置哪些表单元素不进行验证
自定义验证方法：jQuery.validator.addMethod("name",method[,message])方法
name:设置验证方法的名称
method:回调函数,function(value,element,param){}
value:元素的值
element:元素本身
param:参数
message:设置验证不通过的错误提示信息
瀑布流插件：参差不齐的多栏布局，随着页面滚动条向下滚动，不断加载数据并附加至当前尾部
Masonry插件：布局插件，css的浮动布局，根据网格先垂直排列元素，再水平排列元素
http://masonry.desandro.com/
$(‘.container‘).masonry({
itemSelector: ‘.box‘,
columnWidth: 260,
gutter: 8, //槽宽
transitionDuration: ‘1s‘, //重设位置动画持续时间
});
options选项：
itemSelector: 指定使用项目中哪些子元素进行布局
columnWidth: 设置每列的宽度
layout布局：
gutter: 设置每列直接的宽度
percentPosition: 值为true,使用百分之，而不是像素值
stamp: 在布局中标记元素,Masonry将在这些标记的元素下进行布局
isFitWidth： 基于容器的父元素大小设置容器的宽度以适应可用的列数
isOriginLeft: 设置布局的水平对齐，默认为true时，从左到右
isOriginTop: 设置布局的垂直对齐，默认为true时，从上到下
设置：
containerStyle: 对容器中的元素使用css样式
transitionDuration: 设置改变位置/外观的过渡时间，默认0.4s
isResizeBound: 是否根据窗口大小调整大小和位置
isInitLayout: 是否初始化布局，为false时，可以在初始化布局前，使用方法/绑定事件
methods方法：
布局：
masonry():布局容器中所有的元素，当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局
layoutItems():布局指定元素
添加/删除元素：
appended():在布局的最后添加并布局新的元素
remove():从Masonty对象中/DOM中删除指定元素
事件：
on:添加一个..事件的监听器
off:删除.............
使用jq的on()/off()绑定Masonry插件的事件：
layoutComplete:布局完成后触发该事件
removeComplete:删除元素完成后触发该事件
jQuery全局插件函数：有命名冲突的风险，
一般创建常用的函数$.ajax()
向jq命名空间添加一个函数：
jQuery.xxx=function(){....};
$/jQuery.extend({
xxx1:function(){...},
xxx2:function(){...}
});
调用：$/jQuery.xxx();
区别：
jQuery.extend(object)方法：全局函数
$.each(arr,function(index,domEle){})
jQuery.fn.extend(object)方法：对象方法
$().each(function(index,domEle){})
jQuery对象插件函数：把所有全局函数封装到一个对象中
jQuery.fn.xxx1=function(){...};
调用：$(...).xxx1(); //xxx3内有this且指向jQuery对象
对任何插件方法内部，this都引用当前的jQuery对象，因此可以在this上面调用任何内置的jQuery方法/DOM节点
实现左侧固定，右侧占剩余全部box1{width..;float:left;} box2{margin-left:..,}
jQuery.param(url/obj) 将url/obj序列化
4_jquery