jQuery学习笔记

   Click me 

的第一个
• 元素；
    $(“div#intro .head”)  id=”intro” 的
  元素中的所有 class=”head” 的元素；
  
    $(“[href$=’.jpg’]”) 所有带有以 “.jpg” 结尾的属性值的 href 属性。
    
      jqFunc是泛指jQuery的函数，并不存在“jqFunc”这么个函数。params是函数的参数，不同函数对参数的要求不一样。
     
      关于’$’这个符号，它jQuery的简介方式，实际上，所有案例的’$’换成 ‘jQuery’ （注意大小写）也是可以跑得通的。
      某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。
      $.noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用$了。例如：var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ （jQuery）符号。
     
      四. jQuery常用函数
      jQuery函数（教程里称它们为“事件”，感觉还是挺妥当的，我土人就用函数了）有很多，教程里有详细的说明是案例，就不做搬运工了：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
      其中，最常用的稍微说下，大家可以着重看看：
     
      1. 隐藏/显示
      hide()和show()分别实现选定元素的隐藏和显示功能。这两个函数还可以增加参数，比如hide(2000)，表示在2000毫秒时间里逐渐的隐藏。懒得算时间，也可以用”slow”/”fast”作为参数，表示慢速或快速的隐藏/显示元素。除了速度，还可以再增加一个参数，比如hide(2000,callback)，这里的callback是一个回调函数，是“在元素隐藏之后，需要调用的函数”。比如隐藏后，想弹出个提示框，或者其它操作，只要合法的函数都可以。
      此外，还有一个有趣的函数toggle()，它会让隐藏的元素显示、显示的元素隐藏。参数问题同上。
      另外，请大家记住toggle这个单词（单词的翻译是“切换”），后面还有几个函数会包含这个单词。
     
      2. 淡入/淡出
      fadeIn()和fadeOut()分别实现选定元素的淡入和淡出功能。这两个和hide/show非常相像，最终结果展现的页面一样，参数处理也一样。不同之处在于hide/show隐藏/显示的效果是从下至上或从右下到左上的慢慢折叠缩小或扩大，而fadeOut/fadeIn的淡出/淡入效果是整体淡化或淡入。
      fadeToggle（二次出现），与toggle类似，在淡入、淡出之间切换。参数的处理相同。
      此外，淡入淡出还有个方法fadeTo() ，语法：$(selector).fadeTo(speed,opacity,callback);它将一个元素“淡入或淡出到指定的不透明度”，opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间，0-完全透明不可见，1-完全可见），可以简单理解为，为0时相当于fadeOut效果，为1时相当于fadeIn效果。
     
      3. 滑动
      slideDown和slideUp：
      $(selector).slideDown(speed,callback)   用于向下滑动元素，此时会滑动到元素设置的height为止
      $(selector).slideUp(speed,callback)     用于向上滑动元素，会将元素收敛起来不显示
      参数效果同上面两个。
      还有一个slideToggle（三次出现）方法，语法：$(selector).slideToggle(speed,callback);将收敛的元素下滑显示出来，将已显示的元素上滑收敛起来不显示。
     
      这前三类方法的区别大家可以做些demo对比，一目了然。
     
      4. 动画效果
      animate函数实现简单的动画效果。语法：$(selector).animate({params},speed,callback);
      后两个参数都好理解，一个是空值动画的速度，一个是动画结束后的回调函数。第一个参数是一组CSS属性，就是动画最终要达到的效果。这种效果可以是绝对值，也可以是相对值。
      绝对值的写法：{left:’250px’,opacity:’0.5′,height:’150px’,width:’150px’}，动画最终移动到左边距250px，透明度0.5，高度150px，宽度150px；相对值写法：{left:’+=50px’,opacity:’-=0.5′,height:’+=50px’,width:’+=50px’}，动画最终效果，左边距在当前边距值基础上增加50px，透明度在原基础上减0.5，高度在原基础上加50px，宽度增加50px。此外还可以设置参数为toggle（四次出现），实现“从无到有，从有到无”的变化。
     
      五. 节点遍历
      这属于选择器相关的一些函数，不多，也很好记：
      1. 选择当前元素的祖先节点（向上遍历）
      $(“p”).parent();//选中

  的祖先，直到

  之前的所有节点，不包括p和ul;
  
     
      2. 选择当前元素的子孙节点（向下遍历）
      $(“p”).children(); 返回
  元素的后代元素，一路向下直到找到

  元素内部的第一个

  元素中的最后一个

  元素；

   function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功！"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }

  $.get(URL,callback);

   $("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); $.post(URL,data,callback);

  $.post(URL,data,callback);

   $("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });

    这几个都是异步请求，load是将内容加载到选定元素的位置处；get是发送get请求；post是发送post请求（有点像废话）。它们底层都是由$.ajax([settings])实现的。