jQuery
jQuery
1了解jQuery
JQuery是一个兼容多浏览器的javascript类库，核心理念是write less,do more(写得更少,做得更多)。是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。在2006年1月由美国人John Resig在纽约的barcamp发布。
1.1 jQuery实现原理
1.jQuery构造函数。
2.jQuery实例对象：jQuery('#box');//得到jquery对象（实例）。jquery对象只能用jquery的方法。
3.jQuery实例属性。length: 返回jQuery对象中匹配元素的个数；jquery: 当前jquery类库版本号（一般用于判断是否jquery对象）；下标（索引）: DOM节点。
4.jQuery的别名：$ 。
5.延迟代码执行：jQuery(document).ready(fn)：此方法传入一个匿名函数；页面DOM渲染完成时执行，用来替代window.onload；简写方式:$(function(){})；安全写法jQuery(function($){})或jQuery($=>{})。
6.编写jquery代码只需两步：选择元素；操作元素。
2 选择器
选择页面中的元素，得到jQuery实例对象。
2.1常用选择器
2.1.1 ID选择器
$(“#save”);
2.1.2类选择器
$(“.class”);
2.1.3标签选择器
$(“div”);
2.1.4复合选择器
$(“div,span,p.myClass”);
2.1.5属性选择器$(‘[id=box]’)；
$(‘li[data-index]’):获取有data-index属性的所有元素；
$(‘li[data-index!=10]’):data-index属性不等于10的元素,css目前未支持；
$(‘li[data-index^=10]’):data-index属性以10开头的元素；
$(‘li[data-index$=10]’):data-index属性以10结尾的元素；
$(‘li[data-index*=10]’):data-index属性包含10的元素。
2.1.6表单选择器$(‘:input’)
:radio //匹配所有单选按钮；
:checkbox //匹配所有复选按钮；
:selected //获取已选择的option元素；
:checked //匹配所有被选中的元素(复选框、单选框等，select中的option)；
:submit //匹配所有提交按钮；
:reset //匹配所有重置按钮；
:button //匹配所有按钮；
:text //匹配所有的单行文本框；
:password //匹配所有密码框。
2.1.7可见性
:hidden //匹配所有不可见元素(display:none)，或者type为hidden的元素；
:visible //匹配所有可见元素。
以上两个选择器配合is()方法通常用于判断，返回布尔值:
if(box.is(':visible')){
box.css('display','none');
}
2.2常用操作
2.2.1 jquery对象与原生对象转换
1.jquery转原生:get(0)/[0]获取集合中第一个DOM节点；get()不传参得到集合中所有的dom节点。
2.原生转jquery: $(dom);。
3.判断一个jquery对象是否存在(是否能获取到元素)：通过jquery对象的length；转成原生对象再判断。
2.3筛选
利用选择器得到得结果不一定是我们想要得最终结果，有时需要进一步筛选。
2.3.1基本筛选
:odd/:even,:gt(n)/:lt(n) 筛选范围（索引支持负数）。
:contains(奥巴马) 筛选出包含“奥巴马”这三个字的元素。
2.3.2筛选方法
2.3.2.1 first()/last()
获取集合中第一个/最后一个元素。
2.3.2.2 eq(index|-index)
获取第N个元素,n支持负数（表示从后面查找）。
2.3.2.3 filter(expr|obj|ele|fn)
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配* 的范围。用逗号分隔多个表达式。Expr为表达式。
过滤的条件作用于元素自身，非后代，筛选的结果为符合条件的元素组成的集合。$checkedbox = $checkbox.filter(':checked'); 筛选出了符合属性值为checked的$checkbox中的元素。
2.3.2.4 map(fn)
将一组元素转换成其他数组（不论是否是元素数组）。
2.3.2.5 slice(start,[end])
选取一个从start到end(不包括end)匹配的子集。
2.3.2.6 has(expr|ele)
保留包含特定后代的元素，去掉那些不含有指定后代的元素。筛选条件作用于元素的后代，筛选结果当前元素组成的集合。
2.3.2.7 not(expr|ele|fn)
删除与指定表达式匹配的元素。
2.4查找
利用当前元素去查找其他元素。
2.4.1查找子元素
1. find(expr|obj|ele): 查找后代元素。删选条件作用于当前元素的后代，删选结果为符合条件的当前元素的后代。
2. children([expr]): 取得匹配元素的所有子元素。(原生js:children)。
2.4.2查找父元素
1.parent([expr]): 获取父元素。
2.parents([expr]): 取得所有父级元素。
3.closest(expr|obj|ele): 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。
4.offsetParent(): 返回第一个有定位属性(absolute,relative,fixed)* 的父元素,如果没有定位父级，则返回html元素。
2.4.3查找兄弟元素
1.next([expr]): 返回下一个同辈元素 ==> nextElementSibling。
2.prev([expr]): 获取前一个同辈元素 ==> previousElementSibling。
3.nextAll([expr]): 获取当前元素之后所有的同辈元素。
4.prevAll([expr]): 获取当前元素之前所有的同辈元素。
5.siblings([expr]): 获取当前元素的所有兄弟元素（除自身以外的所有兄弟元素 = * prevAll + nextAll）。
3 jQuery动画
3.1基本动画效果
PS：jQuery动画由三种预设速度slow,normal,fast（600，400，200）。
3.1.1显示隐藏：show()/hide()
hide(duration)通过改变元素的高度、宽度、和不透明度，直到这三个属性值到0。
show(duration)通过改变元素的高度、宽度、和不透明度，直至内容完全可见。
3.1.2滑动（通过改变高度）
1. slideDown([speed,callback])：显示元素；不断改变高度，直到样式内设定的值。
2.slideUp([speed,callback])：不断改变高度，直到0；隐藏元素。
3. slideToggle([speed,callback])：当元素隐藏时调用slideDown()，当元素显示时调用slideUp()。
3.1.3淡入淡出（通过改变不透明度）
1. fadeIn:1)显示元素；2)不断改变透明度直到1。
2. fadeOut:1)不断改变透明度直到0；2)隐藏元素。
3.fadeToggle([speed,callback])
4.fadeTo([[speed],opacity,[fn]]) 不断改变透明度opacity，直到设定的值，并在动画完成后可选地触发一个回调函数。
3.2自定义动画
1.animate (params,[speed],[fn])
2. :animated 获取正在执行动画的元素，一般与is()方法配合使用，用于判断元素是否处于动画状态。
jQuery($=>{
$('#go').click(function(){
$('.box').animate({width:200,height:200},2000,function(){
$('.box2').animate({opacity:0.5});
}).delay(3000).animate({opacity:0.5});
});
$('#btnAdd').click(()=>{
$('.box').animate({left:100});
});
});
3.3动画队列
3.3.1一个元素上的动画
当animate中存在多个属性时，动画同时发生。
当同一个元素链式调用animate时，动画是按顺序发生(队列)。
3.3.2多个元素上的动画
默认情况下，动画同时发生。
回调函数内的动画等到当前动画执行完后才接着执行。
3.3.3stop([clearQueue],[jumpToEnd])
不加参数：停止当前元素所有《正在运行》的动画：
clearQueue:值为true时，清除队列；
jumpToEnd:值为true时，跳到当前动画的最后一帧。
3.3.4delay(duration)
设置一个延时来推迟执行队列中之后的动画：duration:延迟的时间。
4 DOM节点操作
4.1增删改
4.1.1创建jquery对象
$('');
$('
4.1.2元素添加
4.1.2.1内部添加（添加为子元素）
1.append(content|obj|ele|fn): 在元素内部最后面追加内容（后置）。
2.prepend: 向元素内部增加内容（前置）。
appendTo,prependTo
4.1.2.2外部插入内容（添加为兄弟元素）
1. after: 在元素后面插入内容。
2. before: 在元素前面插入内容。
如果页面上已经存在了要添加的元素，append,prepend,after,before会把元素移动到页面相应的位置。
4.1.3元素删除
1. remove(); 删除元素, 虽然元素从文档中删除了，但js内部依然保留对它引用。
2. empty(); 清空内容。
4.1.4元素复制
clone([Event[,deepEvent]])：
Event：（true 或 false）是否复制元素的行为，默认为false；
deepEvent: （true 或 false）是否复制子元素的行为，默认为Even的值。
4.2盒模型属性
4.2.1 .offset()
获取匹配元素相对于根元素的偏移量，返回一个对象，包含当前元素的top,left值。
4.2.2 position()
获取匹配元素相对(有定位属性)父元素的偏移量，如果没有定位父级，则相对于根元素(html)，返回一个对象，包含当前元素的top,left值。
4.2.3 width(v) = width
/取值/赋值,当传入v时，相当于css(‘width’,v);
4.2.4 innerWidth()
= width + padding; <==> clientWidth
4.2.5 outerWidth()
= width + padding + border; <==> offsetWidth
4.2.6 outerWidth(true)
= width + padding + border + margin;
5事件
5.1常用事件方法
5.1.1鼠标事件
1. click([[data],fn]) //点击时触发 click = mousedown + mouseup
2. dblclick([[data],fn]) //双击事件 dblclick = 2*click
3. mousedown([[data],fn])
4. mouseup([[data],fn])
5. mousemove([[data],fn])
6. mouseout([[data],fn])
7. mouseover([[data],fn])
8. mouseenter([[data],fn]) //事件不会冒泡
9. mouseleave([[data],fn]) ) //事件不会冒泡
5.1.2 键盘事件
1. keydown([[data],fn]) //键盘按下时触发。
2. keypress([[data],fn])//字符按键。
3. keyup([[data],fn]) //键盘弹起时触发。
5.1.3 表单事件
1. blur([[data],fn]) //失去焦点时触发。
2. focus([[data],fn]) //获得焦点。
3. change([[data],fn]) //值改变并失去焦点时触发。
4. submit([[data],fn])
5.1.4其他事件
1. resize([[data],fn]) //元素大小改变时触发。
2. scroll([[data],fn]) //滚动时触发。
5.2 jQuery事件绑定与移除
5.2.1 on(type,[selector],fn)
1. selector: 把本来绑定给selector的事件委托给它的父级。
例如：
$accordion.on('click','h4',function(){
//h4为$accordion的子元素
$(this).next().slideDown().siblings('.content').slideUp();
});
2. 事件命名空间, 自定义事件（对事件加以细分）。格式：事件类型.自定名字。
3.一次性绑定多个事件，事件之间以空格隔开。
4.支持自定义事件的绑定：$(ele).on('laowang',function(){})；触发自定义事件：$(ele).trigger(‘laowang’);
5.2.2 off: 清除绑定事件
1. off(‘click’);//清除当前元素的点击事件。
2. off();//清除当前元素所有事件。
3. off(‘click mouseover’) 一次性清除多个事件，事件之间以空格隔开。
4. off(‘click.output’) 清除命名空间事件。
5.3其他事件方法
5.3.1 hover(over[,out])
over:鼠标移入时执行；out:鼠标移出时执行。
hover方法内部使用mouseenter + mouseleave来实现效果。
5.3.2 trigger(type)
手动触发事件（即使事件没有发生，也能执行事件处理函数）。
5.3.3 triggerHandler(type)
这个方法会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认行为，也不会产生事件冒泡。
5.3.4阻止浏览器默认行为
event.preventDefault();
5.3.5阻止事件传播
event.stopPropagation();
5.3.6两者一起阻止
return false;
6 jQuery的ajax方法
6.1 $.ajax(settings)
1. type:请求类型，默认GET。
2. url:数据请求地址（API地址）。
3. data:发送到服务器的数据对象，格式：{Key:value}。
4. success:请求成功时回调函数。
5. dataType:设定返回数据的格式，json, jsonp, text(默认), html, xml, script。
6. async：是否为异步请求，默认true。
6.2 $.get(url,[data],[fn],[dataType])
6.3 $.post(url,[data],[fn],[dataType])
6.4 $.getJSON(url,[data],[fn])
type:’get’, dataType:’json’。
6.5 $.getScript(url,[callback])
type:’get’, dataType:’script’。
6.6load(url,[data],[callback])
载入远程 HTML 文件代码并插入页面中。
7插件
插件(Plugin)也称为jQuery的扩展。以jQuery核心代码为基础编写的符合一定规范的应用程序。通过js文件的方式引用。
插件分类：UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
1. jqueryUI //官方插件，功能多且全面，官网：www.jqueryui.com。
2. jquery.validation //表单验证插件,官网：https://jqueryvalidation.org/。
3.jquery.easyUI //是一组基于jQuery的UI插件集合,Demo：http://www.jeasyui.net/。
4. bootstrap //是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，官网：http://v3.bootcss.com/。
5. highcharts http://www.hcharts.cn。
7.1编写jQuery插件
7.1.1插件形式
1. 封装对象方法插件，扩展原型对象方法。
2. 封装全局函数插件，如$.each,$.map,$.makeArray…
3. 选择器插件(类似于.find())。
7.1.2自定义插件规范
降低各种插件之间的冲突，减少错误机率。
1. 命名规范：jquery.插件名.js。
2. 插件中的this应该指向jQuery实例。
3. 使用this.each()迭代元素,为了实现多个调用。
4. 插件内部必须返回jQuery实例(this)，便于链式调用。
5. 所有的对象法附加在jQuery.fn对象(jQuery.prototype)上面，所有全局函数附加在jquery上。
6. 所有的方法或插件必须用分号结尾，避免出问题,为了保证插件的安全性，也可以在插件开始的地方加分号。
7. 避免插件内部的$冲突，请传递jQuery($并不是总等于jQuery，另外其他js框架也可能使用$)。
最终格式：;(function($){$.fn.插件名=function(){}})(jQuery);
两个’;’为了防止之前的代码没有’;’，fn就是prototyp。
7.2编写插件常用方法
7.2.1 $.extend()
$.extend([d],target,obj1,obj2,…,[objN]) //扩展对象或jQuery对象本身。用来扩展jQuery全局函数。
1. 用obj1-objN对象来扩展target对象。
2. 只有一个参数时，用来扩展jQuery全局函数：$.extend({‘hobby’:’撸串’})
$.ajax,$.map,$.each 。
3. :是否深拷贝,布尔类型（true,false）。
7.2.2 $.fn.extend()
扩展 jQuery元素集合提供新的方法（扩展jQuery原型对象，通常用来制作插件）。
8常用jQuery原型对象方法
写在jQuery原型对象中的方法，通过jQuery实例调用。
8.1 css(attr[,val])
获取/改变元素style属性（内联样式）。
1. 取值：css(attr),css([‘color’,’text-align’]) <==> getComputedStyle[attr]。
2. 赋值：css(attr,val),css({attr:val});。
8.2 val(v)
获取/设置匹配表单元素的值（等同于原生js中的value属性）。
1. 取值：input.val() 。
2. 赋值：input.val(v)
· v:字符串
· v:数组（一般用于单选/复选框的勾选）
· v:函数function(idx,val){ return 值}//函数内部一定要返回值
8.3 html()
等同于原生js中的innerHTML。
取值div.html()：取得第一个匹配元素的html内容；
赋值div.html(‘:’)：设置匹配元素的内容。
8.4 text()
取得所有匹配元素的文本内容。
8.5 addClass()/removeClass()
添加/删除类,支持多个类同时添加或删除。
1. toggleClass(): 如果存在（不存在）就删除（添加）类。
2. hasClass(‘con’): 判断当前元素是否包含con这个类，返回布尔值（不支持多个类进行判断）。
8.6 eq(n)
获取第N个jquery对象（元素）,n支持负数（表示从后面查找）。
8.7 index()
获取当前元素在同辈元素中的索引值。
$(this).index();
8.8显示/隐藏
show()：显示元素
hide()：隐藏元素
带参数：同时改变width,height,opacity的动画
8.9 is(expr|obj|ele|fn)
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，其中如果有一个元素符合这个给定的选择器表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。
8.10 attr(name[,val])
设置/获取元素的属性值（用于一般属性）。
8.11 prop(attr[,val])
获取/设置布尔类型属性（用于布尔类型属性）。
获取：获取在匹配的元素集中的第一个元素的属性值。
赋值：给集合中所有元素属性赋值，val为函数。
$(':checkbox').prop('checked',function(idx,oldVal){
return !oldVal;
}
8.12 each(function(idx,ele){})
用于遍历jquery对象。
return true;// 跳过当前循环，进入下一个循环（等效原生js中得continue）。
return false;// 退出整个each循环（等效原生js中得break）。
8.13jquery大部分方法的共性
1. 无参数时为取值，带参数时为赋值。
2. 取值：取得第一个匹配元素的值。
3. 赋值：设置所有匹配元素的值。
4. 隐式迭代（隐式遍历）：看不见的遍历，大部分的jquery方法都支持隐式迭代。
9 常用 jQuery全局方法
1. $.each(arr|obj,callback)：通用遍历方法，用于遍历对象和数组：callback(idx,item)。
2. $.map(arr|obj,callback)：根据现有数组生成一个新的数组，新数组的元素为callback内return的值：callback(item,idx)。
3. $.type(n)：检测参数n的数据类型。
4. $.makeArray(obj) //将类数组对象转换为数组。
5. $.parseJSON(json) //接受一个JSON字符串，返回解析后的对象。类似原生js中的JSON.parse。
6. $.inArray(value,array,[fromIndex]) //确定value在数组array中的位置，从0开始计数(如果没有找到则返回 -1 )，一般用于判断数组中是否包含某一字符。
7. serialize()/serializeArray() : 只能在form表单中使用，并且表单元素必须有name属性。