程序员必知35个jQuery 代码片段

本文将介绍35个常用的jQuery代码片段，以帮助程序员更快更方便地进行网页开发。

代码片段

以下是本文介绍的35个jQuery代码片段：

1. 获取当前时间

var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var time = hours + ':' + minutes + ':' + seconds;

2. 改变文本字体大小

$("#myText").css("font-size", "20px");

3. 改变文本颜色

$("#myText").css("color", "red");

4. 显示/隐藏元素

$("#myElement").toggle();

5. 显示/隐藏元素（带过渡效果）

$("#myElement").fadeToggle();

6. 滚动到页面最顶端

$("html, body").animate({ scrollTop: 0 }, "slow");

7. 滚动到页面最底部

$("html, body").animate({ scrollTop: $(document).height() }, "slow");

8. 实现弹出窗口效果

$("#myPopup").fadeIn();

9. 实现图片缩放效果

$("#myImage").animate({ width: "50%", height: "50%" });

10. 鼠标移上去显示文本

$("#myElement").hover(function() {
   $(this).text("Hello World!");
});

11. 鼠标移开隐藏文本

$("#myElement").mouseout(function() {
   $(this).text("");
});

12. 更改文本颜色（带过渡效果）

$("#myText").animate({ color: "red" }, "slow");

13. 更改元素背景颜色（带过渡效果）

$("#myElement").animate({ backgroundColor: "red" }, "slow");

14. 加载外部HTML文件

$("#myElement").load("myFile.html");

15. 给元素添加HTML内容

$("#myElement").html("<b>Hello World!</b>");

16. 给元素添加文本内容

$("#myElement").text("Hello World!");

17. 判断元素是否存在

if ($("#myElement").length > 0) {
   // do something
}

18. 用正则表达式替换文本

var myText = $("#myText").html();
myText = myText.replace(/Hello/g, "Goodbye");
$("#myText").html(myText);

19. 对URL进行编码

var myUrl = encodeURIComponent("http://www.example.com");
$("#myLink").attr("href", myUrl);

20. 对HTML进行编码

var myHtml = $("<div>").text("<b>Hello World!</b>").html();
$("#myElement").html(myHtml);

21. 对字符串进行编码

var myString = "Hello World!";
myString = escape(myString);

22. 对字符串进行解码

var myString = "Hello%20World%21";
myString = unescape(myString);

23. 复制文本到剪贴板

var myText = "Hello World!";
$("#myButton").click(function() {
   window.prompt("请使用Ctrl+C或鼠标右键复制当前文本到剪贴板后，关闭弹出框", myText);
});

24. 隐藏滚动条

$("body").css("overflow", "hidden");

25. 导入外部CSS文件

$("head").append('<link rel="stylesheet" type="text/css" href="myFile.css">');

26. 判断元素是否可见

if ($("#myElement").is(":visible")) {
   // do something
}

27. 设置元素不可用

$("#myElement").attr("disabled", "disabled");

28. 遍历所有子元素

$("#myElement").children().each(function() {
   // do something
});

29. 判断鼠标是否在元素上

$("#myElement").mouseover(function() {
   // mouse is over the element
});

30. 判断鼠标是否离开元素

$("#myElement").mouseout(function() {
   // mouse has left the element
});

31. 禁用拖拽

$(document).bind("dragstart", function() {
   return false;
});

32. 停止所有正在进行的动画

$(":animated").stop();

33. 获取当前元素的宽度和高度

var width = $("#myElement").width();
var height = $("#myElement").height();

34. 获取鼠标点击的位置

$("#myElement").click(function(event) {
   var x = event.clientX;
   var y = event.clientY;
});

35. 显示/隐藏下拉列表

$("#myList").slideToggle();

示例说明

示例一

以下代码可以滚动到页面最底部：

$("html, body").animate({ scrollTop: $(document).height() }, "slow");

在这个代码中，我们使用了 animate 方法来设置滚动动画，将页面滚动到了文档高度处。

示例二

以下代码可以禁用拖拽：

$(document).bind("dragstart", function() {
   return false;
});

在这个代码中，我们使用了 bind 方法来绑定拖拽事件，返回了 false 来阻止默认行为，从而实现禁用拖拽的效果。