Jquery学习笔记

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

1、JQuery教程：

---JQuery语法：

          语法示例：            

   $(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

          文档就绪函数：         目的是为了防止文档在完全加载之前运行JQuery代码  

$(document).ready(function(){

--- jQuery functions go here ----

});

---JQuery选择器：

          

jQuery 元素选择器 -----jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取

元素。

$("p.intro") 选取所有 class="intro" 的

元素。

$("p#demo") 选取所有 id="demo" 的

元素。

          

jQuery 属性选择器 -----jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

          

jQuery CSS 选择器 -----jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

---

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

---Jquery事件：

           jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到 部分的事件处理方法中：

          

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

          

单独文件中的函数

     如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中

2、JQuery效果：

                 --隐藏和显示       

$("#hide").click(function(){

  $("p").hide();

});

$("#show").click(function(){

  $("p").show();

});

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

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

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

                  --jQuery toggle()-----切换显示和隐藏

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){

  $("p").toggle();

});

              - --Jquery的淡入淡出效果

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

jQuery 拥有下面四种 fade 方法：

• • • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo()

              - --Jquery的滑动效果：    

jQuery 拥有以下滑动方法：

• • • slideDown()
    • slideUp()
    • slideToggle()

                - --Jquery的动画效果：

                         

jQuery 动画 - animate() 方法

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

语法：

$(selector).animate({params},speed,callback);

          必需的 params 参数定义形成动画的 CSS 属性。

          可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

                   ---Jquery停止动画：

jQuery stop() 方法

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

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

语法

$(selector).stop(stopAll,goToEnd);

          可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

          可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

                      ---Jquery Callback函数：

                                   

jQuery Callback 函数

当动画 100% 完成后，即调用 Callback 函数。

典型的语法：

$(selector).hide(speed,callback)

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

                        ---Jquery Chaining：

                                       

通过 jQuery，您可以把动作/方法链接起来。

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

                              举例：

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

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

3、JQuery HTML：

                       ---JQuery获取内容和属性：

                              Jquery     Dom操作：

                                        

获得内容 - text()、html() 以及 val()

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

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

$("#btn1").click(function(){

  alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

  alert("HTML: " + $("#test").html());

});

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()：

$("button").click(function(){
  alert($("#w3s").attr("href"));

});

                          ---Jquery 设置内容和属性：

                                        

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

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

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

实例

$("#btn1").click(function(){

  $("#test1").text("Hello world!");

});

$("#btn2").click(function(){

  $("#test2").html("Hello world!");

});

$("#btn3").click(function(){

  $("#test3").val("Dolly Duck");

});

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

实例

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

                              

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

实例

$("button").click(function(){

  $("#w3s").attr({

    "href" : "http://www.w3school.com.cn/jquery",

    "title" : "W3School jQuery Tutorial"

  });

});

                    ---Jquery 添加元素：

                              

添加新的 HTML 内容

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

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

                              

$("p").append("Some appended text.");

$("p").prepend("Some prepended text.");

                              

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$("img").after("Some text after");

$("img").before("Some text before");

                    ---Jquery删除元素：

                              

删除元素/内容

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

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

                    

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

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

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有

元素：

实例

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

                        ---- Jquery 获取并设置css类：

                         

jQuery 操作 CSS

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

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

$("button").click(function(){
  $("#div1").addClass("important blue");

});

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

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");

});                    

css("propertyname");               //返回css属性

css("propertyname","value");        //设置css属性

                         ----Jquery  尺寸

     

jQuery 尺寸 方法

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

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

                               

$("button").click(function(){

  var txt="";

  txt+="Width: " + $("#div1").width() + "
";

  txt+="Height: " + $("#div1").height();

  $("#div1").html(txt);

});        

$("button").click(function(){

  var txt="";

  txt+="Inner width: " + $("#div1").innerWidth() + "
";

  txt+="Inner height: " + $("#div1").innerHeight();

  $("#div1").html(txt);

});

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "
";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);

});           

$("button").click(function(){

  var txt="";

  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "
";

  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);

  $("#div1").html(txt);

});

4、Jquery遍历

                jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

                ---遍历-祖先           通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先

向上遍历 DOM 树

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

• • • • parent()··parent() 方法返回被选元素的直接父元素。
      • parents()··parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
      • parents("ul")··下面的例子返回所有 元素的所有祖先，并且它是
        元素
        • parentsUntil()··parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

                              

$(document).ready(function(){
  $("span").parent();
});

$(document).ready(function(){
  $("span").parents();
});

$(document).ready(function(){
  $("span").parents("ul");
});

$(document).ready(function(){
  $("span").parentsUntil("div");
});

                ----Jquery遍历-后代

                    

向下遍历 DOM 树

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

• • • • children()--children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
      • find()-- find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){
  $("div").children();
});

$(document).ready(function(){
  $("div").find("span");
});

                ----遍历-同胞

               

在 DOM 树中水平遍历

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

• • • siblings()--返回被选元素的所有同胞元素
    • next()--方法返回被选元素的下一个同胞元素
    • nextAll()-- 方法返回被选元素的所有跟随的同胞元素。
    • nextUntil()--返回介于两个给定参数之间的所有跟随的同胞元素
    • prev()
    • prevAll()
    • prevUntil()

$(document).ready(function(){
  $("h2").siblings();
});

$(document).ready(function(){           返回属于

的同胞元素的所有

元素

  $("h2").siblings("p");
});

$(document).ready(function(){
  $("h2").next();
});

$(document).ready(function(){
  $("h2").nextAll();

});

$(document).ready(function(){               返回介于

与

元素之间的所有同胞元素

  $("h2").nextUntil("h6");

});

                ---遍历-过滤：

               

jQuery first() 方法

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

下面的例子选取首个

元素内部的第一个

元素：

实例

$(document).ready(function(){

  $("div p").first();

});

jQuery last() 方法

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

下面的例子选择最后一个

元素中的最后一个

元素：

实例

$(document).ready(function(){
  $("div p").last();
});

          

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

元素（索引号 1）：

实例

$(document).ready(function(){

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

});

jQuery filter() 方法

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

下面的例子返回带有类名 "intro" 的所有

元素：

实例

$(document).ready(function(){

  $("p").filter(".intro");

});

jQuery not() 方法

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

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "intro" 的所有

元素：

实例

$(document).ready(function(){
  $("p").not(".intro");
});

5、Jquery-Ajax：

           AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

                    ----Jquery-Ajax加载：

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

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

语法：

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

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

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

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

                               jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。         

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• • • • GET - 从指定的资源请求数据
      • POST - 向指定的资源提交要处理的数据

                         

$.get( URL, callback);

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

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

$.post( URL, data, callback);

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

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

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