jQuery基本

1.JQuery框架侧重于JavaScript本身，主要功能：

  1）使用JavaScript查找需要的HTML元素；

  2）处理JavaScript事件；

  3）使用JavaScript开发新的组件；（如菜单、对话框、选项卡、日历等）

  4）使用JavaScript实现页面动画；

  5）使JavaScript可以兼容主流浏览器；

2.jQuery由以下部分组成：

  1）核心：简化JavaScript开发；

  2）UI：常用的组件，可更换主题

  3）插件：第三方提供的组件

3.jQuery核心优点：

  1）纯JavaScript框架，程序小巧；

  2）兼容主流浏览器（IE6.0+，Firefox 2+,Safari 3.0,Opera 9.0+,Chrome）;

  3）支持利用从CSS第一版至第三版中规定的选择器选取元素；

  4）可定制程度高，结构合理。

4.jQuery下载：www.jquery.com

  引用jQuery的语句：<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

5.jQuery将核心部分分为Production(生产模式，经过压缩的js文件)和Development(开发模式，未经压缩的js文件)两种，两种功能相同，前者

体积小巧，后者利于调试：UI组件可以选择下载全部组件或部分组件，下载的组件中自带了默认的主题。

6.jQuery核心方法：

  用法一：查找元素语法：jQuery（表达式，[内容]）或$(表达式，[内容])，返回jQuery对象。

  返回所有元素：表达式1, 表达式2, … , 表达式n 

  返回满足表达式的集合，如$('DIV, SPAN')返回所有DIV元素和SPAN元素

  其他常用型

  表达式1 表达式2---》 返回表达式1中满足表达式2 的子元素，如查找表单中的输入元素，可以使用#(‘form input’)

  表达式:first---》返回满足表达式的第一个元素，如$('TABLE TR:first')返回第一个表格中的第一行

  表达式:last---》返回满足表达式的最后一个元素，如$('TABLE TR:last')返回第一个表格中的最后一行

  表达式:even---》返回满足表达式的偶数个元素，如$('TABLE TR:even')返回第一个表格中的偶数行

  表达式:odd---》返回满足表达式的奇数个元素，如$('TABLE TR:odd')返回第一个表格中的奇数行

  表达式:first-child---》返回满足所有表达式的第一个元素，如$('TABLE TR:first-child')返回每一个表格中的第一行

  表达式:last-child---》返回满足所有表达式的最后一个元素，如$('TABLE TR:last-child')返回每一个表格中的最后一行

  表达式:nth-child(索引/odd/even)---》返回满足所有表达式的索引位置/奇数/偶数元素，如$('TABLE TR:nth-child(odd)')返回每一个表格中的奇数行

  [属性]---》返回具有该属性的元素，如$('input[cheked]')返回具有checked属性的输入元素

  [属性=值]---》返回属性等于该值的元素，如$('input[type=radio]')返回所有的单选框

  表单元素表达式 :radio, :checkbox, :button, :submit等---》返回表达元素，如$('form input:radio')返回所有单选框

7.在jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个jQuery 包装集,比如获取包含一个元素的jQuery包装集:

    var jQueryObject = $("#testDiv");

  jQuery包装集都是作为一个对象一起调用的

  jQuery包装集拥有丰富的属性和方法, 这些都是jQuery 特有的

8.jQuery 包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素,例如：

    var domObject = $("#testDiv")[0];

注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象

jQuery 包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this 也是Dom元素,比如:

    $("#testDiv").each(function() { alert(this) })

如果我们要使用jQuery 的方法操作Dom 对象,用上面介绍过的转换方法即可:

    $("#testDiv").each(function() { $(this).html("修改内容") })

9.JQuery对象的常用方法

  当使用JQuery中方法查找元素时，返回的是JQuery对象，通过JQuery对象中的方法可以对对象进行各种操作,包括

    a.显示效果类操作：show,hide,css,addClass,removeClass等方法；

    1）show和hide方法能够显示、隐藏元素，并能够指定动画效果和时间。

    2）也可以使用toggle方法代替show和hide，toggle会根据当前元素的显示状态进行显示或隐藏。

    3）css方法用于读取或设置元素的css属性，语法为css（样式名，[值]），如果不传入第二个参数，为读取样式；如果穿第二个参数，为设置样

式。

    4）addClass和removeClass方法可以为元素添加或移除样式；定义好的样式直接写名字前面不加点；

    b.文档处理类操作：append,appendTo,empty,remove,after,before,html,text,attr等方法来实现插入、删除、修改文档等操作；

    1).append和appendTo方法的区别：功能相同但用法相反；

    $("<p>这是第二段内容</p>").appendTo("div");//先添加内容，再选容器

    $('div').append("<p>这是第一段内容</p>");//先选容器，再添加内容

    2)empty与remove的区别：

      empty用来清空元素内容，元素本身包括样式依然保留；

      remove用来移除元素；

    3）after和before方法的区别？

      after和before方法用来在元素外插入另一个HTML元素，如果想在页面的一个图片后面增加换行，可以使用$("img").after("<br/>"),

      before是在元素之前添加内容；

    4）html与text的区别及用法？

       html和text方法用来获取或设置元素的内容，html方法返回的是元素中的HTML代码（类似于innerHTML属性），text方法返回的是元素中

的文本内容（类似于innerText属性）。语法分别为html([值])和text([值])，如果不传参数则为获取元素的内容，传参数则为设置元素的内容

；

    5）attr方法用来获取或设置元素的属性，语法为attr(属性名，[值])，如果不传第二个参数为获取属性，传第二个参数为设置属性；

    c.事件处理类操作：bind,unbind方法为元素增加或移除事件；在jQuery1.7以前用bind方法，以后用on方法，绑定事件；

    d.其他操作：

    1）size方法和length属性用于获取jQuery对象中元素的个数，如$("div").size()或$("div").length都可以获取页面上的div元素的数量；

    2)each方法用于遍历jQuery对象中的每一个元素，并且得到元素的位置，如：为表格的第一列填充序号：

         $("table tbody tr td:first-child").each(function(i){

                    $(this).html(i+1);

                });

    3）find("")====>document.getElementsByTagName("");

    4).children("") ====>获取标签名为加的子元素；

常用方法：

1.load()方法：用于载入远程的HTML代码并插入DOM中；

  语法：$.load(url,[data],[callback])

    url:请求的html页的url地址；

    data(Map):(可选参数)发送至服务器的key/value数据/向被导入的文件传递的数据，类似于url?key=value；

    callback(Callback):(可选参数)请求完成时的回调函数/回调方法；

2.get()方法：通过HTTP GET请求从服务器上请求数据；

  语法：$.get(url,data,callback)

    url(String):请求的html页的url地址；

    data：（可选参数）传递的数据

    callback：（可选参数）请求完成时的回调函数；

    callback(data,status)有两个参数，第一个表示：从服务端响应的数据；第二个：从服务端返回的状态（fail/success）；

3.post()方法：通过HTTP POST请求从服务器上请求数据；

  语法：$.post(url,data,callback)

    url(String):请求的html页的url地址；

    data(Map):(可选参数)发送至服务器的key/value数据。

    callback(data,status):请求完成时的回调函数；

  post()方式传参的时候后台不用去解析参数字符串，直接根据参数名称获取；

5.JSON.parse()：服务端返回的是JSON字符串，一定要记得转换成JSON对象；

6.each(function(索引下标，value){}):相当于for循环；

7.serialize()方法：用于将表单中的元素名称和值转换成url参数形式，其语法格式为：

   语法：$(selector).serialize();

8.ajax()方法：$.ajax是jQuery的底层ajax实现，返回其创建的XMLHttpRequest对象。如果指定了dataType选项，就确保服务器返回正确的

MIME信息，（如xml返回“text/xml”）；

  $.ajax()只有一个参数：参数key/value对象，包含各配置及回调函数信息。

  参数如下：

    url:String  （默认：当前页地址）发送请求的地址；

    type:String  请求方式，默认为get；

    timeout:Number  设置请求超时时间（毫秒），此设置将覆盖全局变量；

    async:Boolean   (默认true)，默认设置下，所有请求均为异步请求。false表示同步

    beforeSend:Function  ajax事件，发送请求后触发该事件；

    cache:Boolean   （默认true）设置为false将不会从浏览器缓存中加载请求信息；

    complete：Function  请求结束后触发该事件；

    contentType:String  (默认：“application/x-www-form-urlencoded”)发送信息至服务器时内容编码类型。

    data：Object,String   发送到服务器的数据。将自动转换为请求字符串格式。get请求中将附加在url后，查看processData选项说明以禁止此自动转换。必须为key/value格

式。如果为数组，jQuery将自动为不同值对应同一个名称。如：{foo:["bar1","bar2"]}转换为‘&foo=bar1&foo=bar2’.

    dataType:String   预期服务器返回的数据类型；如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递，可用值：

    “xml”：返回xml文档，可用jQuery处理；

    “html”：返回纯文本html信息；包含script元素；

    “script”：返回纯文本JavaScript代码。不会自动缓存结果；

    “json”：返回JSON数据；

    “jsonp”:JSONP格式。使用JSONP（跨域访问的）形式调用函数时，如：“myurl?callback=？”jQuery将自动替换？为正确的函数名，以执行回调函数。

    error：Function   (默认：自动判断（xml或html）)请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest对象，错误信息（可能）捕获的错误对象；

    success:Function   请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态：function（data，status）{}；