JQuery知识汇总

一、关于Jquery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨     是“write Less，Do More”，即倡导      写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模       式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥     有便捷的插件扩展机制和丰富的      插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery提供了对基本JavaScript结构的增强，使用jquery可以省去很多js代码，使开发更加简洁，同时也解决了js在不同浏览器上的兼容性问题。

二、Jquery安装与在线使用

jquery的使用主要分为两种，下载压缩包或源文件至本地，然后导入项目中；通过 CDN（内容分发网络） 引用它（在线，电脑必须联网）

（1） 下载 jquery 文件

下载地址：http://jquery.com/download/

下载后 主要有 jquery.js （ 用于测试和开发，未压缩，是可读的代码）和 jquery.min.js（用于实际的网站中，已被精简和压 缩。），项目开发进行时建议使用jquery.js文                件，可以查看源码；项目完成后建议将jquery.js更换为jquery.min.js压缩型文件再进行发布

（2） 在线引入jquery文件（CDN方式）

几种常用的导入方式：百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

从百度导入：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

从又拍云引入：<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

从新浪引入  ：<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

从谷歌引入 ： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

三、Jquery的简单语法格式

jquery属于js的轻量级库，在代码位置和引入上和js一样，写在页面内都是借助<script>标签，标签内放代码

外部创建独立的js文件时，可以在独立js文件中调用jquery的各种接口，方法等

jquery代码多使用"$"符

在传统js代码中的window.onload=function(){ //jquer代码 }用jquery的

$(document).ready(function(){ // jQuery 代 码... })代替，

也可以简写为:

$(function(){ //jquery代码 })，也是一般的开始代码

四、Jquery对象与DOM对象

DOM对象 ：

Document Object Model for HTML，通俗点说即是javascript进行操作和控制的前端节点，操作包括基础的获取节点，增                           （创）删改查，例：  var dom1  =  document.getElementById("model"); 其中dom1就是DOM对象

Jquery对象：

专供jquery调用操作的对象，带有明确的标志“$”,jquery对于前端节点的所有操作都基于jquery的对象

例：$dom1 = $(“#model”); 其中$dom1就是jquery对象；  注：jquery语法不可直接操作DOM对象

DOM对象与jquery对象的相互转换：

DOM对象转换为jquery对象：

如：var dom = document.getElementsByTagName("div");//DOM对象,获取页面所有div标签（多个，数组形式）

var $dom = $(dom);//转化为jquery对象 ,仍为数组形式，获取相应对象 可用 $dom[i] 方式

var $first = $dom[0];//获取第一个div标签

jquery对象转换为DOM对象：

（1）jQuery对象实际上是一个数据对象，可以通过数组下标的方法获得相应的DOM对象。

如：var $v=$("#v"); //得到jQuery对象

var v=$("v")[0];//转换成DOM对象

（2）jQuery本身可以通过.get(index)方法得到相应的DOM对象

如：var $v=$("#v"); //得到jQuery对象

var v=$v.get(0);

五、Jquery选择器

jquery选择器相对于js更加方便，更加丰富，包含基本的几大选择器（id，类，元素，层级，*）及筛选选择器

（1） 基本选择器

jquery的节点选择与css的语法规则一样，例如id的获取符号为#等

1、id选择器  $("#id名称");//获取唯一的节点

2、类选择器 $(".class名称");//获取class为**的节点，获取后一般为数组形式，对获取的该目标的操作为集群操作

3 、标签选择器 $("input");//获取页面中所有的input标签

4、层级选择器：

例： $("#box>input")//id为box的节点的所有input孩子节点

（2） 筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器

很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

1、基本的筛选选择器：

例：   $(".div:first")//类为div节点的第一个节点

2、属性筛选选择器

根据标签里的属性进行筛选，例：

$("input[type=text]"),$("input[name=password]")......

3、子元素筛选选择器

jquery仍有很多丰富的选择器，这点也是jquery的特点之一，这里只选取比较常用和常见的几种，更多的可以去自己查询jquery的api

六、jquery属性及样式

（1）jquery的属性添加，比如标签的id，class，type等属性

主要有.attr()和removeAttr（）两个方法，attr（）方法主要用于添加属性，而removeAttr（）方法刚好与attr相对

 attr()有4个表达式

attr(传入属性名)：获取属性的值

attr(属性名, 属性值)：设置属性的值

attr(属性名,函数值)：设置属性的函数值

attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

                  removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

（2）标签内容的获取

.html()和.text()两个方法，其中.html()与js中的innerHTML属性一样，获取为标签内的页面内容，.text()则是获取所有的信息，包括子元素的标签

.val（）专门用来获取input标签内的输入内容

html()方法

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：

html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
                                 html( htmlString ) 设置每一个匹配元素的html内容
                                 html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

text()方法

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
                              text( textString ) 用于设置匹配元素内容的文本
                              text( function(index, text) ) 用来返回设置文本内容的一个函数

val()方法

val()无参数，获取匹配的元素集合中第一个元素的当前值
                        val( value )，设置匹配的元素集合中每个元素的值
                        val( function ) ，一个用来返回设置值的函数

.html(),.text()和.val()的差异总结：

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

（3）jquery的样式操作（class的增加删除更迭）

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

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

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

（4）jquery的css属性设置

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
                               .css( propertyNames )：传递一组数组，返回一个对象结果

设置：

css(propertyName, value )：设置CSS
                               css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
                               css( properties )：可以传一个对象，同时设置多个样式

例：    css("font-size","15px")                        css("fontSize","0.9em")

七、jquery的节点操作

八、jquery事件

九、jquery动画

1、隐藏和显示（.hide,.show）

.hide()方法详解：
让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执 行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果
(1) $elem.hide()//最基本用法，将某个元素隐藏
(2) .hide( speed,callback )含参数时
当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作
例：
$(".box").hide("fast");//将以200毫秒速度消失
speed 主要为控制隐藏的速度设置，可以是“fast”“slow”单词，也可以是毫秒数。
callback 参数的前提是必须得设置speed参数，callback为执行后的回调

注意：
jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局

.show()方法详解 ：
css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法，show方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示
(1) $elem.show() //方法与hide刚好相反，将某一被掩藏的元素显现
(2) .show( speed,callback )含参数时,意义与hide相同，即速度与回调
例： $(‘elem‘).hide(3000).show(3000)//先将元素隐藏，后显现
.toggle()方法详解：
show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素
toggle（）基本操作
这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
如果元素是最初显示，它会被隐藏
如果隐藏的，它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline

提供参数：.toggle( [duration ] [, complete ] )

同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法

直接定位：.toggle(display)

直接提供一个参数，指定要改变的元素的最终效果
2、上卷下来
.slideDown()：用滑动动画显示一个匹配元素

.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束

.slideDown( [duration ] [, complete ] )
持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 ‘fast‘ 和 ‘slow‘ 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。

具体使用：

$("ele").slideDown(1000, function() {
//等待动画执行1秒后,执行别的动作....
});
注意：下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
.slideUp() 动画方式上卷一个元素直至隐藏
最简单的使用：不带参数
$("elem").slideUp();
这个使用的含义就是：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了

带参数：
.slideUp( [duration ] [, easing ] [, complete ] )
同样可以提供一个时间，然后可以使用一种过渡使用哪种缓动函数，jQuery默认就2种，可以通过下载插件支持。最后一个动画结束的回调方法。
注意：因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意!!!
.slidetoggle()
slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素,具体性质同toggle（）方法一致
基本的操作：slideToggle();
这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。

提供参数：.slideToggle( [duration ] ,[ complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数
同时也提供了时间的快速定义，字符串 ‘fast‘ 和 ‘slow‘ 分别代表200和600毫秒的延时
3、淡入淡出
.fadeOut淡出动画
fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果
所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。

.fadeOut( [duration ], [ complete ] )
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

字符串 ‘fast‘ 和 ‘slow‘ 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400毫秒的延时
.fadeIn()淡入动画
.fadeIn( [duration ], [ complete ] )
duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
complete: 元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果。

注意：
淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%
如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见
.fadeToggle()切换淡入淡出
函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。
常用语法：.fadeToggle( [duration ] ,[ callback] )
可选的 duration 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
4、这里只介绍基本的几个jquery的动画方法，仅供入门。

十、jquery的ajax封装（使用）

jquery对ajax进行了封装，按层次从低到高分依次为

最底层封装： $.ajax()

第二层：$.load(),$.get(),$.post()，此层使用频率最高

第三层：$.getScript()和$.getJSON()

这里因为第二层方法使用频率最高，这里只介绍第二层的三个方法

（1）$.load(url,data,callback)

url : 类型为String类型，为请求的URL地址；

data（可选参数）:类型为object，为发送至服务器端的数据

callback（可选参数）： 类型为function ，请求完成时的回调函数，无论请求成功与否

load方法主要用于请求静态的数据文件，例如不同页面的html文件

（2）$.get(url,data,callback,type)

url :  类型为String类型，为请求的URL地址；    （传值时也可用？key=value的方式）

data（可选参数）:类型为object，为发送至服务器端的数据

callback（可选参数）： 类型为function ，载入成功时回调函数，自动将请求结果和状态传递给该方法，

function（data，textStatus）{

data:  //返回的内容，可以是xml，JSON，html片段等

textStatus://请求状态：success，error，timeout，notmodified四种

}

type（可选参数）：服务器返回内容的格式，有html，json，xml，text等

（3）$.post( url,data,callback,type)

参数及使用与get相同，但是与get相比，仍有以下几点不同

1.get请求会将参数放在url后面，在地址栏可见，post则是作为http请求的消息实体发出去，地址栏不可见

2.两者请求的数据量也不相同，get（通常不大于2KB），post则要大的多（理论上无限）

3.安全性不一，get方式请求的数据会被浏览器缓存，可以通过查看浏览历史记录中读取这些数据，不安全，post则避免这些问题。

原文地址：https://www.cnblogs.com/TheGCC/p/8729068.html