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对象

$('<div/>');

$('<div>生成一个div</div>');

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属性。