jquery个人笔记

jQuery基本概念

jQuery的版本

官网下载地址：http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x

大版本分类：

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版：

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery入口函数

• 第一种写法：

  $(document).ready(function() {});

• 第二种写法：

  $(function() {});

jQuery入口函数与js入口函数的对比：

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象与DOM对象的区别（重点）

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象

• 第一种方法：（推荐）

var $li = $('li');
$li[0];

• 第二种方法：

$li.get(0);

选择器（重要）

基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

基础

方法	描述
.eq( index )	匹配元素的集合为指定的索引的那一个元素。返回的是jQuery对象。
.get( index )	通过jQuery对象获取一个对应的DOM元素。返回的是js对象。
.index()	返回被选中元素在所有兄弟元素中的索引。

mouseover与mouseenter区别

不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。

只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

操作样式

css操作

功能：设置或者修改样式，操作的时style属性

操作单个样式

返回被选元素css值

• .css( name )
  • name：一个CSS属性名。

设置被选元素css值

设置一个样式

• .css( propertyName, value )
  • propertyName：一个CSS属性名。
  • value：设置这个CSS属性的值。
  • 注意：当css属性名含有-的，需要将属性名转化为驼峰命名法。

设置多个样式

• .css( properties )
• properties：一个用来设置的 属性-值 对的对象。

$('li').css({
   color: 'red',
   fontSize: '32px'
});

注意：

隐私迭代：

• 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
• 获取的时候：只会返回第一个元素对应的值。

class操作

添加样式类（常用）

为每个匹配的元素添加指定的样式类名。

• .addClass( className )
  • className：为每个匹配元素所要增加的一个或多个样式名。

移除样式类（常用）

移除集合中每个匹配元素上一个，多个或全部样式。

• .removeClass( [className] )
  • className：每个匹配元素移除的一个或多个用空格隔开的样式名。

判断类

确定任何一个匹配元素是否有被分配给定的（样式）类。 返回Boolean值

• .hasClass( className )
  • className：要查询的样式名。

切换类

为匹配的元素集合中的每个元素上添加或删除一个或多个样式类（class）,取决于这个样式类（class）是否存在或state参数的值。

• .toggleClass( className )
  • className：用来切换匹配集合中的每个元素的一个或多个样式类名（用空格隔开）。

操作属性

attr操作

对于布尔类型的属性，不要用attr方法，应用prop方法。

返回被选元素指定属性

获取匹配的元素集合中的第一个元素的属性的值。

• .attr( attributeName )
  • attributeName：要获取的属性名称 。

$('img').attr('src');

设置被选元素指定属性

设置每一个匹配元素的一个或多个属性。

设置单个属性

• .attr( attributeName, value )
  • attributeName：要设置值的属性名。
  • value：要设置的属性值。如果为null， 指定的属性将被删除。

$('img').attr('src', '01.jpg');

设置多个属性

• .attr( attributes )
  • attributes：一个要设置的 属性-值 集合对象。

prop操作

多用于设置布尔类型的属性。

返回被选元素指定属性

获取匹配的元素集中第一个元素的属性（property）值

• .prop( propertyName )
  • propertyName：要得到的属性的名称 。

设置被选元素指定属性

为匹配的元素设置一个或多个属性（properties）。

设置单个属性

• .prop( propertyName, value )
  • propertyName：要设置的属性（properties）的名称 。
  • value：一个值来设置属性值。

设置多个属性

• .prop( properties )
  • properties：用来设置的 属性 - 值对 的对象。

动画

jquery提供了三组基本动画，这些动画都是标准的，有规律的效果。jquery还提供了自定义动画功能。

基本动画

显示隐藏动画（show、hide）

显示隐藏的匹配元素。

• .show( [speed] [,callback] )
  • speed：一个字符串或者数字决定动画将运行多久。 默认400。字符串有fast（200ms）、normal（400ms）、slow（600ms）。
  • callback：在动画完成时执行的函数。

隐藏匹配的元素。

• .hide( [speed] [,callback] )
  • speed：一个字符串或者数字决定动画将运行多久。
  • callback：在动画完成时执行的函数。

滑入滑出动画（slideUp、slideDown）

用滑动动画隐藏一个匹配元素。

• .slideUp( [speed] [, callback] )

用滑动动画显示一个匹配元素。

• .slideDown( [speed] [, callback] )

用滑动动画显示或隐藏一个匹配元素。 (切换)

• .slideToggle( [speed] [, callback] )

淡入淡出动画（fadeIn、fadeOut）

通过淡入的方式显示匹配元素。

• .fadeIn( [speed] [,callback] )

通过淡出的方式隐藏匹配元素。

• .fadeOut( [speed] [,callback] )

通过匹配的元素的不透明度动画，来显示或隐藏它们。 （切换）

• .fadeToggle([speed] [, callback] )

自定义动画

animate：根据一组 CSS 属性，执行自定义动画（类似css3中的animate）。

• .animate( properties [, speed ] [, easing ] [, callback] )
  • properties：一个CSS属性和值的对象,动画将根据这组对象移动。
  • speed：一个字符串或者数字决定动画将运行多久。
  • easing：一个字符串，表示过渡使用哪种缓动函数。（“linear” 匀速和 "swing"先慢后快）
  • callback：在动画完成时执行的函数。

$('div').animate({left: 800}, 1000, linear, function() {
    console.log('动画执行完毕')。
});

动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

• .stop( [queue ] [,clearQueue ] [, jumpToEnd ] )
  • queue：停止动画队列的名称。
  • clearQueue：一个布尔值，指示是否取消以列队动画。默认 false。
  • jumpToEnd：一个布尔值指示是否当前动画立即完成。默认false。

节点操作

创建节点

• $(htmlStr)
  • htmlStr：html格式的字符串

$('<span>这是一个span元素</span>');

添加节点

在每个匹配元素里面的末尾处插入参数内容。

• .append(content [, content ] )
  • content：一个或多个DOM 元素，文本节点，元素和文本节点的数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。

var $p = $('<p>这是p标签</p>');
$('div').append($p);

将匹配的元素插入到目标元素的最后面（内部插入）（常用）。

• .appendTo( target )
  • target：一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象；符合的元素们会被插入到由参数指定的目标的末尾。

$('p').appendTo($('div'));

将参数内容插入到每个匹配元素的前面（元素内部）。

• .prepend( content [, content ] )
  • content：一个或多个DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

将所有元素插入到目标前面（元素内）。

• .prependTo( target )
  • target：一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

• .after( content[, content ] )
  • content：一个或多个附加的DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或jQuery对象，用来插入到集合中每个匹配元素的后面（外部插入）。

根据参数设定，在匹配元素的前面插入内容（外部插入）

• .before(content [, content ] )
  • content：一个或多个附加的DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或jQuery对象，用来插入到集合中每个匹配元素的后面（外部插入）。

清空节点和删除节点

从DOM中移除集合中匹配元素的所有子节点。

推荐使用，会清除子元素上绑定过的内容，源码

• .empty()

也可清空节点，但不推荐，因为会造成内存泄漏，绑定的事件不会被清除。

• .html("")

将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）和.empty()相似。

• .remove( [selector ] )
  • selector ：一个选择器表达式用来过滤将被移除的匹配元素集合。

克隆节点

创建一个匹配的元素集合的深度拷贝副本。

• .clone( [withDataAndEvents ] )
  • withDataAndEvents：一个Boolean值，表示是否会复制元素上的事件处理函数。 默认值是 false。

特殊属性操作

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值。

获取表单元素的值

• .val()

设置值

• .val( value )
  • value：一个文本字符串,一个数字，或一个以字符串形式的数组来设定每个匹配元素的值。

html方法与text方法

html方法相当于innerHTML，text方法相当于innerText。

区别：html方法会识别html标签，text方法会直接当成字符串，并不会识别html标签。

获取集合中第一个匹配元素的HTML内容。

• .html()

设置每一个匹配元素的html内容。

• .html( htmlString )
  • htmlString：用来设置每个匹配元素的一个HTML 字符串。

得到匹配元素集合中每个元素的合并文本，包括他们的后代 。

• .text()

设置匹配元素集合中每个元素的文本内容为指定的文本内容。

• .text( textString )
  • textString：用于设置匹配元素内容的文本。当提供的是一个数值或布尔值得时候，那么将被转换成一个字符串表现形式，提供给这个方法。

width方法与height方法

获取宽高值（只包含width和height属性）

• .width()
• .height()

设置宽高值

• .width( value )

  • value：一个正整数代表的像素数,或是整数和一个可选的附加单位（默认是：“px”）(作为一个字符串)。

• .height( value )

  • value：一个正整数代表的像素数,或是整数和一个可选的附加单位（默认是：“px”）(作为一个字符串)。

附加：（了解）

为匹配的元素集合中获取第一个元素的当前计算宽度或高度值,包括padding，但是不包括border。即width+padding。

• innerWidth()
• innerHeight()

获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin)

• .outerWidth( [includeMargin ] )
  • includeMargin：一个布尔值，表明是否在计算时包含元素的margin值。
• .outerHeight( [includeMargin ] )

scrollTop和scrollLeft

设置或者获取垂直滚动条的位置。

获取当前垂直滚动条的位置

• .scrollTop()

获取当前水平滚动条的位置

• .scrollLeft()

offset方法与position方法（了解）

在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档(document)。

• .offset()

设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。

• .offset( coordinates )
  • coordinates：一个包含top 和 left属性的对象，用整数指明元素的新顶部和左边坐标。

获取匹配元素中第一个元素的当前坐标，相对于有定位的父元素的坐标。

• .position()

事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

jQuery事件发展历程(了解)

简单事件绑定>>bind事件绑定（不建议）>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

click(handler)			// 单击事件

缺点：不能同时注册多个事件

bind方式注册事件

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点：不支持动态事件绑定

delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件：

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件（重点）：

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click","span", function() {});

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

事件解绑

unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式（推荐）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件

$(selector).click(); //触发 click事件
$(selector).trigger("click");

• .trigger( eventType [, extraParameters ] )
  • eventType：一个包含JavaScript事件类型的字符串，比如click 或 submit。

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

screenX和screenY	  //对应屏幕最左上角的值
clientX和clientY	  //距离页面左上角的位置（忽视滚动条）
pageX和pageY	  //距离页面最顶部的左上角的位置（会计算滚动条的距离）

event.keyCode	//按下的键盘代码
event.data	    //存储绑定事件时传递的附加数据

event.stopPropagation()	//阻止事件冒泡行为
event.preventDefault()	//阻止浏览器默认行为
return false;    //既能阻止事件冒泡，又能阻止浏览器默认行为。

补充知识点

链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

• .end()
  • 终止在当前链的最新过滤操作，并返回匹配的元素的以前状态。

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一 表示当前元素在所有匹配元素中的索引号
// 参数二 表示当前元素（DOM对象）
$(selector).each(function(index,element){});

多库共存

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c