jQuery 实例总结

jQuery 语法实例

$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。





Click me






$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 < p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。

例子解释

Hiding - Sliding- Fading

jQuery fadeOut()
演示简单的 jQuery fadeout() 函数(按时间淡出)。
jQuery hide()
演示简单的 jQuery hide() 函数。
Hide explanations
演示如何隐藏部分文本。

$(document).ready(function(){
  $(".ex .hide").click(function(){
    /* 在类名为ex的div中，点击其中一个类名为hide的元素，
       则隐藏该div视图，另一个同样包含类名为hide元素的
       div不受影响，除非也被点击。*/
    $(this).parents(".ex").hide("slow");
  });
});

Slide panel
演示简单的 Slide Panel 效果。

$(document).ready(function(){
  $(".flip").click(function(){ // 点击类名为filp的元素（点击奇数次展开，偶数次收缩）
     $(".panel").slideToggle("slow"); // 向下展开显示类名为panel的元素
  });
});

jQuery animate()
演示简单的 jQuery animate() 函数。

例子解释

HTML 操作
改变 HTML 元素的内容。

$("p").html("W3School");

向 HTML 元素追加内容。
在 HTML 元素之后追加内容。
例子解释

CSS 操作
改变 HTML 元素的 CSS 属性。
改变多个 CSS 属性。
获得元素的 CSS 属性。
例子解释

AJAX 和 jQuery
使用 $(selector).load(url) 来改变 HTML 内容。
使用 $.ajax(options) 来改变 HTML 内容。
例子解释