jquery学习记录

 

1.选择器实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

2.jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

3.隐藏和显示
     ① $(selector).hide(speed,callback);
 
     ② $(selector).show(speed,callback);

         可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

         可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

        下面的例子演示了带有 speed 参数的 hide() 方法：

       实例

   $("button").click(function(){
     $("p").hide(1000);
   });

   ③$(selector).toggle(speed,callback);

      可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

      可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

4. 淡入淡出

    通过 jQuery，您可以实现元素的淡入淡出效果。

    jQuery 拥有下面四种 fade 方法：

• fadeIn()     用于淡入已隐藏的元素
• fadeOut()    方法用于淡出可见元素
• fadeToggle()        jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。      如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。     如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
• fadeTo()  方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

5.滑动

       jQuery 拥有以下滑动方法：

• slideDown()  方法用于向下滑动元素
• slideUp()   方法用于向上滑动元素
• slideToggle()    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。   如果元素向下滑动，则 slideToggle() 可向上滑动它们。   如果元素向上滑动，则 slideToggle() 可向下滑动它们

      实例

   $("#flip").click(function(){
     $("#panel").slideToggle();
   });

6.动画

 jQuery animate() 方法用于创建自定义动画。

  实例1

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

  实例2

   隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

7.停止

   jQuery stop() 方法

      jQuery stop() 方法用于停止动画或效果，在它们完成之前。

       stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

  实例：
  $("#stop").click(function(){
    $("#panel").stop();
  });

8.回调  jQuery Callback 函数

  $(selector).hide(speed,callback)

       callback 参数是一个在 hide 操作完成后被执行的函数。

       实例：

   $("p").hide(1000,function(){
  alert("The paragraph is now hidden");
   });

9.Chaining 
 Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
实例：

   下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

 $("#p1").css("color","red").slideUp(2000).slideDown(2000);

10.获得内容和属性

     三个简单实用的用于 DOM 操作的 jQuery 方法：

     内容：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

  属性：

• attr() 方法用于获取属性值

11：添加元素

    添加新的 HTML 内容

     我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

 实例：
 function appendText()
 {
  var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
  var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
  var txt3=document.createElement("p");  // 以 DOM 创建新元素
  txt3.innerHTML="Text.";
  $("p").append(txt1,txt2,txt3);         // 追加新元素
 }

12. 删除元素/内容

     如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

       实例：

      $("#div1").remove();

      $("#div1").empty();

     下面的例子删除 class="italic" 的所有 <p> 元素：

   $("p").remove(".italic");

13. 获取并设置 CSS 类

       jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

      实例

     $("button").click(function(){
        $("h1,h2,p").addClass("blue");
        $("div").addClass("important");
    });

    下面的例子将返回首个匹配元素的 background-color 值：

  $("p").css("background-color");

    下面的例子将为所有匹配元素设置 background-color 和 font-size：

 $("p").css({"background-color":"yellow","font-size":"200%"});

14.尺寸

     jQuery 提供多个处理尺寸的重要方法：

• width()   方法设置或返回元素的宽度（不包括内边距、边框或外边距）
• height()   方法设置或返回元素的高度（不包括内边距、边框或外边距）
• innerWidth()   方法返回元素的宽度（包括内边距）
• innerHeight()  方法返回元素的高度（包括内边距)
• outerWidth()   方法返回元素的宽度（包括内边距和边框）
• outerHeight()   方法返回元素的高度（包括内边距和边框）

     实例：

      $("button").click(function(){
         var txt="";
         txt+="Width: " + $("#div1").width() + "</br>";
         txt+="Height: " + $("#div1").height();
        $("#div1").html(txt);
     });

      显示文档和窗口的尺寸

     $(document).ready(function(){
         $("button").click(function(){
           var txt="";
           txt+="Document width/height: " + $(document).width();
           txt+="x" + $(document).height() + "\n";
           txt+="Window width/height: " + $(window).width();
           txt+="x" + $(window).height();
          alert(txt);
         });
    });

15 遍历

 

  ①祖先

    向上遍历 DOM 树

       这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

• parent()  方法返回被选元素的直接父元素。
• parents()   方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
• parentsUntil()   方法返回介于两个给定元素之间的所有祖先元素

     实例：

      $("span").parent().css({"color":"red","border":"2px solid red"});

                
      $("span").parents().css({"color":"red","border":"2px solid red"});
            

     $("span").parents("ul").css({"color":"red","border":"2px solid red"});

               

      $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

              

    ②子孙

    向下遍历 DOM 树

     下面是两个用于向下遍历 DOM 树的 jQuery 方法：

• children()  方法返回被选元素的所有直接子元素。
• find()    方法返回被选元素的后代元素，一路向下直到最后一个后代

    实例 ：

       $("div").children().css({"color":"red","border":"2px solid red"});

                   

      $("div").find("span").css({"color":"red","border":"2px solid red"});

                   

     ③同胞

     在 DOM 树中水平遍历

     有许多有用的方法让我们在 DOM 树进行水平遍历：

• siblings()   方法返回被选元素的所有同胞元素
• next()     方法返回被选元素的下一个同胞元素
• nextAll()   方法返回被选元素的所有跟随的同胞元素
• nextUntil()  方法返回介于两个给定参数之间的所有跟随的同胞元素。
• prev()     工作方式与上面的方法类似，只不过方向相反
• prevAll()
• prevUntil()

     实例:

     $("h2").siblings().css({"color":"red","border":"2px solid red"});

             

     $("h2").nextAll().css({"color":"red","border":"2px solid red"});

             

      $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

               

     ④过滤

        first() 方法返回被选元素的首个元素。

        last() 方法返回被选元素的最后一个元素

        eq() 方法返回被选元素中带有指定索引号的元素。 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

        filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

       not() 方法返回不匹配标准的所有元素。

 

        实例： 

      $("p").eq(1);

      $("div p").first().css("background-color","yellow");

                  

       $("p").filter(".intro").css("background-color","yellow");  //class='intro'

                  

 

 16.  ajax

 

       ①  load() 方法从服务器加载数据，并把返回的数据放入被选元素中

    $(selector).load(URL,data,callback);

       必需的 URL 参数规定您希望加载的 URL。

       可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

       可选的 callback 参数是 load() 方法完成后所执行的函数名称。

       回调函数可以设置不同的参数：

•  responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

         下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

          实例：

        $("button").click(function(){
          $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
             if(statusTxt=="success")
                 alert("外部内容加载成功！");
            if(statusTxt=="error")
              alert("Error: "+xhr.status+": "+xhr.statusText);
           });
         });

   ②$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

      实例：http://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_get

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

   ③$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

  $.post(URL,data,callback);

     必需的 URL 参数规定您希望请求的 URL。

     可选的 data 参数规定连同请求发送的数据。

     可选的 callback 参数是请求成功后所执行的函数名。

     下面的例子使用 $.post() 连同请求一起发送数据：

     实例

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

17 jQuery noConflict() 方法

     其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google        Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法

  noConflict() 方法会释放会 $ 标识符的控制
实例1：
您仍然可以通过全名替代简写的方式来使用 jQuery
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
实例2：

  您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});

    实例3：

   如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

参考文献：http://www.w3school.com.cn/jquery/jquery_selectors.asp

好好学习哟！