$("p").css("width", "400px"); // 为所有段落添加一个宽度 $("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色 $("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc
在网页中添加、移除、追加 DOM 元素或内容
jQuery 中同样提供了好多种方法来操作 DOM 元素，例如改变操作标签中的文本。。。几个例子如下：
var myElementHTML = $("#myElement").html(); // 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签 // 这种方法类似于传统 JavaScript 中的 innerHTML var myElementHTML = $("#myElement").text(); // 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外
类似以上两种方法，还可以改变 DOM 元素中的 HTML 或文本：
$("#myElement").html("<p>This is the new content.</p>"); // #myElement 中的内容将被这个段落替换掉 $("#myElement").text("This is the new content."); // #myElement 中的内容将被这行文本替换掉
在元素内追加内容：
$("#myElement").append("<p>This is the new content.</p>"); // 保留标签内原有内容，并在末尾处追加新内容
对于向元素上追加内容，jQuery 还有其它几种用法，如： appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter()，各有其特点，但使用方法和 append() 类似。
jQuery 之事件处理
一些特定的事件处理程序可以用如下方法来实现：
$("a").click(function() { // 可以在这里写一些代码 // 当超链接被点击的时候这里的代码将被执行 });
当超链接被点击的时候，function() 里面的代码将被执行。还有其它的一些事件使用方法也一样，如：blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select。
用 jQuery 隐藏或显示元素
jQuery 也可以非常方便地显示或隐藏 DOM 元素，示例代码如下：
$("#myElement").hide("slow", function() { // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行 }); $("#myElement").show("fast", function() { // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行 }); $("#myElement").toggle(1000, function() { // 这里可以写一些代码，当元素被隐藏/显示后，这里的代码将被执行 });
可以看到，当元素显示或隐藏的时候，是慢慢的渐渐变化的，这是因为上面用到了几个速度参数，如 slow，fast，除此之外还有 normal，数字 1000 表示毫秒数，可以自定义。如果没有设置速度参数，那么元素将直接显示或隐藏，一闪而过，没有任何动画效果。后面的第二个参数是一个 function，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。
另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：
$("#myElement").fadeOut("slow", function() { // 这里的代码在 fade out 完成后执行 }); $("#myElement").fadeIn("slow", function() { // 这里的代码在 fade in 完成后执行 });
调整元素的透明度：
$("#myElement").fadeTo(2000, 0.4, function() { // 这里的代码在在调整透明度完成后执行 }); 其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。 jQuery 之动画效果 jQuery 可以为 DOM 元素添加上下滑动效果： $("#myElement").slideDown("fast", function() { // ....... }); $("#myElement").slideUp("slow", function() { // ....... }); $("#myElement").slideToggle(1000, function() { // ....... });
jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：
$("#myElement").animate({ opacity: 0.3, width: "500px", height: "700px" }, 1000, function() { // ...... });
总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。
您可能感兴趣的文章: