jQuery知识点简列

jQuery是常用的前端框架，插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等，在编码过程中只需注意与后台交换数据的格式和字段便可轻松实现通信。

**JQuery的几个重要特点**

集合处理功能，对于jQuery返回的集合内容无需我们自己循环遍历并对每个对象分别作处理，iQuery已经为我们提供了方便的方法：$("p").each(function(){        ...})

扩展自定义功能：$.extend({});<!--花括号内以键值对的形式-->如下，为jQuery扩展了两个函数，使用$.函数名调用。$.extend({       min: function(a, b){return a < b?a:b; },       max: function(a, b){return a > b?a:b; } });调用：     $.max(10,20);          $.min(10,20)

几个实用特效功能其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。slideToggle()方法包括了slideDown()和slideUp方法。

几个有用的jQuery方法$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如$.each( [0,1,2], function(i, n){         alert( "Item #" + i + ": " + n );         }); 等价于：var tempArr=[0,1,2];for(var i=0;i<tempArr.length;i++){           alert("Item #"+i+": "+tempArr[i]);}<!-- 也可以处理json数据，如 -->$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });<!--结果为：Name:name, Value:JohnName:lang, Value:JS-->$.trim(str)：删除字符串两端的空白字符。 如：$.trim(" hello, how are you?   ");        //返回"hello,how are you? "

使用XPath选择符： 属性选择：$("a[@title]") 选择所有带title属性的链接 $("div[ol]") 选择包含一个ol元素的所有div元素 $('a[@href^="mailto:%22]') 选择所有带href属性[@href]且该属性值以mailto开头 ^="mailto"（^标识字符串开始，$标识字符串结尾，*表示字符串中任意位置） $('a[@href$=".pdf"]') 选择带有href属性且该属性值以.pdf结尾的所有链接 $('a[@href*="mysite.com"]') 选择mysite.com出现在href任意位置(包含mysite.com)的所有 链接

JQuery自定义选择符（过滤器，从已选择的结果集中过滤出符合某一条件的所有元素），与CSS的伪类选择符相似，使用“:”开头 1.$('div.horizontal:eq(1)') 选择带有类horizontal的div集合中的第2个项 $('div:nth-child(1)') 选择作为其父元素第1个子元素的所有div 2.自定义选择符:odd和:even选择奇偶行 $('tr:odd').addClass('odd'); //过滤选择结果集中的奇数元素 $('tr:even').addClass('even'); //过滤选择结果集中的偶数元素 3.自定义选择符:contains() $('td:contains("Henry")') 选择包含Henry字符串的所有表格

复合函数绑定事件 $("#some-id").toggle(function(){ } ,function(){ }); //交替执行 $(“#some-id”).toggleClass("hidden"); // 添加/删除类交替进行 $("#some-id").hover(function(){ }, function(){ }); //鼠标进入元素时执行第一个函数，离开元素时执行第二个函数 $("#some-id").one("click", functionName); //只需触发一次，随后便立即解除绑定

模仿用户触发某一事件 $("#some-id").trigger("click"); //触发特定元素的click事件

隐藏和显示 $('#some-id').show(); //无效果，会自动记录原来的display属性值（如：block, inline），再回复display值 $('#some-id').hide(); //无效果，等效于：$('#some-id').css('display', 'none'); 隐藏元素，不保留物理位置 大小、透明度逐渐变化的显示或隐藏 $('#some-id').show('slow'); //指定显示速度，在指定时间内元素的高、宽、不透明度逐渐增加到 属性值，有：slow是0.6秒，normal是0.4秒，fast是0.2秒，或者直接填入毫秒数 $('#some-id').hide(800); //与.show()指定速度显示一样，指定时间内高、宽、不透明度逐渐减小到0 淡入淡出 $('some-id').fadeIn('slow'); //指定时间内不透明度属性值由0增加到1 $('some-id').fadeOut('slow'); //指定时间内不透明度值由1减小到0

构建具有动画效果的show 主要调用.animate()方法，其有4个参数：包含样式属性及值的映射；可选的速度参数；可选的缓动类型； 可选的回调函数； 1.并发显示多个效果 $('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow',  function(){ alert('动画显示元素');}); $('div .button').animate({left:600, height:44}, 'slow');  //水平位置从0移动到600，高度由0增加到44 2.排队显示多个效果，级联多个.animate()，一个效果显示完了再显示下一个效果 $('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');

<!--以上是JQuery的基础。在web开发中，修改页面元素的属性和样式使我们需要常用的功能：区分元素属性和dom属性，例如img的class属性，在表现为元素时是class；在表现为Dom时，属性名为className；在JavaScript中，我们可以直接获取或者设置Dom属性，但是在Jquery中有些不同，因为jQuery都是针对包装集进行操作，所以在jquery中没有包装操作“Dom属性”的函数，但是Jquery提供了each()函数用于遍历jQuery包装集，其中this指向当前的Dom对象，我们可以应用这一点配合源生的JavaScript来操作元素的dom属性。-->

<script type="text/javascript">     $(document).ready(function(){         $.each($('img'),function(index) {              alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);              this.alt = "这里改变了！";              alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);         });     })   </script><!--$.each()函数的解析：上例代码中的$.each()中第一个参数为数组或者对象，第二个是回调函数，这个回调函数可以存在两个参数，第一个参数是数组或者对象的索引，第二个参数是数组或者对象的值。-->

位置相关：在设计一些弹出对象的脚本中，经常需要动态获取弹出坐标并设置元素的位置，jQuery为我们提供了位置相关的各个函数：

注意:offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移要特别注意区分attr()和css()，比如说：$comment_text.css("background-color","white");$comment_text.attr("disabled",false);

重点：JQuery中的ajax
ajax最常见的用法就是把一块html代码加载到页面的某个区域中，为此只需要简单地选择所需要的
元素，然后使用load( )函数即可。

$().load(url,[data],[callback]):载入远程的html文件或者是代码段插入dom中。主要用于返回html的ajax接口，返回的是一个jQuery包装集，也就是html加载到Dom对象中，即使设置了回调函数也还是会加载。

$().get(url,[data],[callback]):使用get方式来进行异步请求。[callback]载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。如果需要在出错时执行函数，请使用 $.ajax。

$.ajax(options)

<!--$.ajax({ })只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。-->$.ajax({          type: "get",          url: "http://www.blog.csdn.net",          beforeSend: function(XMLHttpRequest){              //ShowLoading();          },          success: function(data, textStatus){              $(".ajax.ajaxResult").html("");              $("item",data).each(function(i, domEle){                  $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");              });          },          complete: function(XMLHttpRequest, textStatus){              //HideLoading();          },          error: function(){              //请求出错处理          }  });  

点击：options参数文档请见

Ajax相关函数

1. jQuery.ajaxSetup( options )<!--设置全局 AJAX 默认options选项。有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项, 此后所有的Ajax请求的默认options将被更改。-->

$.ajaxSetup({  url: "../data/AjaxGetMethod.aspx",                  data: { "param": "ziqiu.zhang" },                  global: false,                  type: "POST",                  success: function(data, textStatus) { $("#divResult").html(data); }              });<!--注意当使用get()或者post()方法时, 除了type参数将被重写为"GET"或者"POST"外, 其他参数只要不传递都是使用默认的全局option. 如果传递了某一个选项, 比如最后一个按钮传递了url和参数, 则本次调用会以传递的选项为准. 没有传递的选项比如回调函数还是会使用全局option设置值.-->

全局Ajax事件

在jQuery.ajaxSetup( options ) 中的options参数属性中, 有一个global属性:global类型:布尔值默认值: true说明:是否触发全局的Ajax事件.这个属性用来设置是否触发全局的Ajax事件. 全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:名称      说明ajaxComplete( callback )    AJAX 请求完成时执行函数ajaxError( callback )       AJAX 请求发生错误时执行函数ajaxSend( callback )        AJAX 请求发送前执行函数ajaxStart( callback )       AJAX 请求开始时执行函数ajaxStop( callback )        AJAX 请求结束时执行函数ajaxSuccess( callback )     AJAX 请求成功时执行函数<!--我们可以通过将默认options的global属性设置为false来取消全局Ajax事件的触发-->

事件时编写脚本的灵魂

让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.

我们首先应该摒弃<div onclick="..."></div>这种通过修改元素属性添加事件的方式. 尽量使用添加多播事件委托的方式为一个事件绑定多个事件处理函数, 比如为document对象的单击事件添加一个关闭弹出层的方法, 使用多播就不会影响document对象原有的事件处理函数.

$("#testDiv").bind("click", showMsg);  <!--我们为id是testDiv的元素, 添加列click事件的事件处理函数showMsg.-->

下面我们来看一下这些常用的事件函数

使用jQuery事件对象
关于event对象的详细说明, 可以参考jQuery官方文档

Jquery动画

假设有如下需求:
单击图中的”显示提示文字”按钮,在按钮的下方显示一个弹出
单击任何空白区域或者弹出层,弹出层消失

<html xmlns="http://www.w3.org/1999/xhtml">   <head>      <title>jQuery – 弹出层动画</title>      <script type="text/javascript" src="jquery-1.7.2.js"></script>      <script type="text/javascript">          $(document).ready(function(){              //动画速度              var speed = 500;              //绑定事件处理              $("#btnShow").click(function(event){                  //取消事件冒泡，所谓事件冒泡就是在子控件触发事件时父控件也触发相应的事件                  event.stopPropagation();                  //获得触发事件控件的位置                  var offset = $(event.target).offset();                              //设置弹出层的位置                  $("#divPop")                .css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                  //动画显示弹出层                  $("#divPop").show(speed);              });              //单击空白区域隐藏弹出层              $(document).click(function(event) { $("#divPop").hide(speed) });              //单击弹出层则自身隐藏              $("#divPop").click(function(event) { $("#divPop").hide(speed) });          });      </script>  </head>  <body>      <div>          <br /><br /><br />          <button id="btnShow">弹出层</button>      </div>      <!-- 弹出层 -->      <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;          width: 300px; height: 100px;">          <div style="text-align: center;">这里是弹出层</div>      </div>  </body>    </html> 

jQuery的动画函数主要分为三类:#1.基本动画函数:既有透明度渐变,又有滑动效果. 是最常用的动画效果函数.#2.滑动动画函数:仅使用滑动渐变效果.<!--slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle的滑动效果版本.参数完全相同:$("#divPop").slideDown(200);$("#divPop").slideUp("fast");$("#divPop").slideToggle("slow");-->#3.淡入淡出动画函数:仅使用透明度渐变效果.<!--fadeIn( speed, [callback] );fadeOut( speed, [callback] );fadeTo(speed, opacity, [callback])-->

自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。2、stop([clearQueue],[gotoEnd])停止所有在指定元素上正在运行的动画。