jQuery功能一览

// 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.

1. List item 1
2. List item 2
3. 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 的尺寸