Web前端JQuery基础

                                                                   JQuery知识汇总

1、关于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在不一样浏览器上的兼容性问题。

2、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>          

3、Jquery的简单语法格式

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

       外部建立独立的js文件时，能够在独立js文件中调用jquery的各类接口，方法等

       jquery代码多使用"$"符

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

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

       也能够简写为:

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

4、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);

5、Jquery选择器

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

         （1） 基本选择器

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

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

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

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

                    四、层级选择器：

                               

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

         （2） 筛选选择器

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

                    不少都不是CSS的规范，而是jQuery本身为了开发者的便利延展出来的选择器         

                          一、基本的筛选选择器：

                                       

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

                        二、属性筛选选择器  

                               

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

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

                    三、子元素筛选选择器

                               

                 jquery仍有不少丰富的选择器，这点也是jquery的特色之一，这里只选取比较经常使用和常见的几种，更多的能够去本身查询jquery的api

6、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")

7、jquery的节点操做

        

8、jquery事件

        

9、jquery动画

              一、隐藏和显示（.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)

直接提供一个参数，指定要改变的元素的最终效果
二、上卷下来
.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毫秒的延时
三、淡入淡出
.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() 会向元素添加淡出效果。
四、这里只介绍基本的几个jquery的动画方法，仅供入门。

10、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则避免这些问题。