jQuery功能一览

//
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});

$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});

$("#flip1").click(function(){
$("#panel1").slideDown(3000);
});

$("#stop").click(function(){
$("#panel1").stop();
});

$("#flip2").click(function(){
$("#panel2").slideUp(3000);
});

$("#start").click(function(){
$(".sta").animate({left:'100px'},5000);
$(".sta").animate({fontSize:'3em'},1000);
});

$("#stop1").click(function(){
$(".sta").stop();
});

$("#stop2").click(function(){
$(".sta").stop(true);
});

$("#stop3").click(function(){
$(".sta").stop(true,true);
});

$("#hideh4").click(function(){
$("#hideh4").hide();
});

$("#hideid").click(function(){
$("#hideid").hide();
});

$(".hideclass").click(function(){
$(".hideclass").hide();
});

$("#neirong").click(function(){
jQuery("#neirong").text("瞧，我的内容真的变了");
});

$("#red").click(function(){
$("#red").css("background-color","red");
});

$("#hide1").click(function(){
$("#get").hide();
});

$("#show1").click(function(){
$("#get").show();
});

$("#button1").click(function(){
$("p").hide(50);
});

$("#button2").click(function(){
$("#qiehuan").toggle();
});

$("#button3").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

$("#button4").click(function(){
$("#div4").fadeOut();
$("#div5").fadeOut("slow");
$("#div6").fadeOut(3000);
});

$("#button5").click(function(){
$("#div7").fadeToggle();
$("#div8").fadeToggle("slow");
$("#div9").fadeToggle(3000);
});

$("#button6").click(function(){
$("#div10").fadeTo("slow",0.5);
$("#div11").fadeTo("slow",0.4);
$("#div12").fadeTo("slow",0.7);
});

$("#button7").click(function(){
$(".sta").animate({left:'250px'});
});

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

$("#button9").click(function(){
$(".sta").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

$("#button10").click(function(){
$(".sta").animate({
height:'toggle'
});
});

$("#button11").click(function(){
var div=$(".sta");
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");
});

$("#button12").click(function(){
var div=$(".sta");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

$("#button13").click(function(){
$("#p1").hide(2000);
alert("文章被隐藏了");
});

$("#button14").click(function(){
$("#p2").hide(1000,function(){
alert("文章被隐藏了");
});
});

$("#button15").click(function(){
$("#p3").css("color","red").slideUp(2000).slideDown(2000);
});

$("#button16").click(function(){
alert($("#test2").val());
});

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

$("#btn1").click(function(){
alert($("#test").text());
});

$("#btn2").click(function(){
alert( $("#test").html());
});

$("#btn3").click(function(){
$("#test3").text("Hello world!");
});

$("#btn4").click(function(){
$("#test4").html("Hello world!");
});

$("#btn5").click(function(){
$("#test5").val("Dolly Duck");
});

$("#btn6").click(function(){
$("#p").append(" Appended text.");
});

$("#btn7").click(function(){
$("#ol").append("Appended item
");
});

$("#btn8").click(function(){
$("#p").prepend("Prepended text. ");
});

$("#btn9").click(function(){
$("#ol").prepend("Prepended item
");
});

$("#btn10").click(function(){
$("#div13").remove();
});

$("#btn11").click(function(){
$("#div14").empty();
});
$("#btn12").click(function(){
$("#h1").addClass("blue");
$("#div15").addClass("important");
});

$("#btn13").click(function(){
$("#h1").removeClass("blue");
$("#div15").removeClass("important");
});
$("#btn14").click(function(){
$("#h1").toggleClass("blue");
$("#div15").toggleClass("important");
});

$("#btn15").click(function(){
alert("Background color = " + $("#p4").css("background-color"));
});

$("#btn16").click(function(){
$("#p5").css("background-color","yellow");
});

$("#btn17").click(function(){
$("#p6").css({"background-color":"yellow","font-size":"200%"});
});

$("#btn18").click(function(){
var txt="";
txt+="Width of div: " + $("#div16").width() + "";
txt+="Height of div: " + $("#div16").height() + "";
txt+="Inner width of div（包括内边距）: " + $("#div16").innerWidth() + "";
txt+="Inner height of div（包括内边距）: " + $("#div16").innerHeight() + "";
txt+="Outer width of div（包括内边距和边框）: " + $("#div16").outerWidth() + "";
txt+="Outer height of div（包括内边距和边框）: " + $("#div16").outerHeight() + "";
txt+="Outer width (包括内边距、边框和外边距): " + $("#div16").outerWidth(true) + "";
txt+="Outer height (包括内边距、边框和外边距): " + $("#div16").outerHeight(true);
$("#div16").html(txt);
});

$("#btn19").click(function(){
$("#div17").width(500).height(500);
});

});
// ]]>

如果您点击我，我会消失。

我设置了id消失，点击我会消失
我设置了class消失，点击我会消失

我设置了添加背景颜色，点击我会加背景颜色

我设置了变化内容，点击我的内容会变

中国办事处

隐藏

联系人：张先生

北三环中路 100 号

北京

让你显示你就显示，让你滚你就滚

给我滚
给我出来

隐藏

这个内容会被隐藏。

切换

这是内容会被隐藏或显示

演示带有不同参数的 fadeIn() 方法。

点击这里，使三个矩形淡入

演示带有不同参数的 fadeOut() 方法。

点击这里，使三个矩形淡出

演示带有不同参数的 fadeToggle() 方法。

点击这里，使三个矩形淡入淡出

演示带有不同参数的 fadeTo() 方法。

点击这里，使三个矩形淡出

停止滑动

点击这里，向下滑动面板
Hello world!

HelloWorld

点击这里，向上滑动面板

展开的内容

显示或隐藏内容

开始
停止
停止所有
停止但要完成

"开始" 按钮会启动动画。

"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。

"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

"停止但要完成" 会立即完成当前活动的动画，然后停下来。

右移
右移框变大
右移框变大
隐藏与显示
变大变小
左移字体变化

默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

Hello

隐藏

这是文章

隐藏

这是文章

jQuery 乐趣十足！

点击这里

哈哈哈粗体文本。

显示文本
显示 HTML

姓名：

显示值

W3School.com.cn

显示 href 值

这是段落。

这是另一个段落。

Input field:

设置文本
设置 HTML
设置值

This is a paragraph.

List item 1

List item 2

List item 3

追加文本
追加列表项
添加文本
添加列表项

This is some text in the div.
This is a paragraph in the div.

This is another paragraph in the div.

删除 div 元素

This is some text in the div.
This is a paragraph in the div.

This is another paragraph in the div.

删除 div 元素

标题 1

这是非常重要的文本！

向元素添加类
向元素删除类
切换CSS类

这是一个段落。

返回 p 元素的背景色

这是一个段落。

设置 p 元素的背景色

这是一个段落。

设置 p 元素的多个属性

显示 div 的尺寸

调整 div 的尺寸