正文

学会jQuery轻松入门：50个实战经典例子解析

/0 浏览量
1113

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。对于初学者来说，通过实战例子来学习 jQuery 是一种非常有效的方法。本文将为你介绍 50 个实战经典例子，帮助你轻松入门 jQuery。

1. 获取和设置元素内容

// 获取元素内容
var text = $("#myElement").text();
console.log(text);

// 设置元素内容
$("#myElement").text("Hello, jQuery!");

2. 隐藏和显示元素

// 隐藏元素
$("#myElement").hide();

// 显示元素
$("#myElement").show();

3. 添加和移除类

// 添加类
$("#myElement").addClass("myClass");

// 移除类
$("#myElement").removeClass("myClass");

4. 切换类

// 切换类
$("#myElement").toggleClass("myClass");

5. 添加事件监听器

// 点击事件
$("#myElement").click(function() {
    console.log("Clicked!");
});

// 鼠标悬停事件
$("#myElement").mouseover(function() {
    console.log("Mouse over!");
});

6. 动画效果

// 淡入效果
$("#myElement").fadeIn();

// 淡出效果
$("#myElement").fadeOut();

// 滑入效果
$("#myElement").slideDown();

// 滑出效果
$("#myElement").slideUp();

7. Ajax 请求

// GET 请求
$.get("example.json", function(data) {
    console.log(data);
});

// POST 请求
$.post("example.json", { param1: "value1", param2: "value2" }, function(data) {
    console.log(data);
});

8. 选择器

// ID 选择器
$("#myElement");

// 类选择器
$(".myClass");

// 标签选择器
$("p");

// 属性选择器
$("#myElement[type='text']");

9. 表单操作

// 获取表单值
var value = $("#myInput").val();

// 设置表单值
$("#myInput").val("Hello, jQuery!");

10. 滚动效果

// 滚动到顶部
$(window).scrollTop(0);

// 滚动到指定元素
$("#myElement").offset().top;

11. 窗口事件

// 窗口加载事件
$(window).load(function() {
    console.log("Window loaded!");
});

// 窗口关闭事件
$(window).unload(function() {
    console.log("Window unloaded!");
});

12. 日期选择器

// 创建日期选择器
$("#myElement").datepicker();

13. 表格操作

// 获取表格数据
var data = $("#myTable").find("tr").map(function() {
    return $(this).find("td").eq(0).text();
}).get();

console.log(data);

14. 表单验证

// 验证表单
$("#myForm").validate();

15. 弹窗

// 弹出消息框
alert("Hello, jQuery!");

// 弹出确认框
confirm("Are you sure?");

// 弹出输入框
prompt("Enter your name:");

16. 自定义插件

$.fn.myPlugin = function() {
    // 插件代码
};

// 使用插件
$("#myElement").myPlugin();

17. 模板引擎

// 模板引擎
var template = $("#myTemplate").html();
var data = { name: "John" };
var result = $.template(template, data);

console.log(result);

18. 跨浏览器兼容性

// 检测浏览器
var isIE = $.browser.msie;

// 检测浏览器版本
var version = $.browser.version;

19. 事件委托

// 事件委托
$("#myElement").on("click", ".myClass", function() {
    console.log("Clicked!");
});

20. 自定义事件

// 自定义事件
$("#myElement").trigger("myEvent");

// 绑定自定义事件
$("#myElement").on("myEvent", function() {
    console.log("My event!");
});

21. 选择器性能优化

// 优化选择器
$("#myElement > .myClass");

// 避免使用通配符选择器
// $("#*");

22. 缓存 DOM 操作

// 缓存 DOM 操作
var $myElement = $("#myElement");

// 使用缓存的元素
$myElement.text("Hello, jQuery!");

23. 阻止默认行为

// 阻止默认行为
$("#myElement").on("click", function(event) {
    event.preventDefault();
});

24. 阻止事件冒泡

// 阻止事件冒泡
$("#myElement").on("click", function(event) {
    event.stopPropagation();
});

25. 捕获事件

// 捕获事件
$("#myElement").on("click", ".myClass", function(event) {
    console.log("Clicked!");
    event.stopImmediatePropagation();
});

26. 键盘事件

// 键盘事件
$("#myElement").on("keydown", function(event) {
    console.log(event.keyCode);
});

27. 表单提交

// 表单提交
$("#myForm").on("submit", function(event) {
    event.preventDefault();
    // 表单提交逻辑
});

28. 日期范围选择器

// 日期范围选择器
$("#myElement").daterangepicker();

29. 树形菜单

// 树形菜单
$("#myElement").treeview();

30. 时间轴

// 时间轴
$("#myElement").timepicker();

31. 滚动条

// 滚动条
$("#myElement").scrollbar();

32. 模态框

// 模态框
$("#myElement").modal();

33. 弹幕

// 弹幕
$("#myElement").marquee();

34. 网格布局

// 网格布局
$("#myElement").gridster();

35. 选项卡

// 选项卡
$("#myElement").tabs();

36. 树形下拉菜单

// 树形下拉菜单
$("#myElement").treeview();

37. 搜索框

// 搜索框
$("#myElement").searchable();

38. 轮播图

// 轮播图
$("#myElement").slider();

39. 验证码

// 验证码
$("#myElement").captcha();

40. 地图

// 地图
$("#myElement").gmap();

41. 标签云

// 标签云
$("#myElement").tagcloud();

42. 树形控件

// 树形控件
$("#myElement").tree();

43. 水平菜单

// 水平菜单
$("#myElement").menu();

44. 纵向菜单

// 纵向菜单
$("#myElement").accordion();

45. 面包屑

// 面包屑
$("#myElement").breadcrumbs();

46. 导航条

// 导航条
$("#myElement").navbar();

47. 表格分页

// 表格分页
$("#myElement").tablePagination();

48. 数据表格

// 数据表格
$("#myElement").dataTable();

49. 日期时间选择器

// 日期时间选择器
$("#myElement").datetimepicker();

50. 图片懒加载

// 图片懒加载
$("#myElement").lazyload();

通过以上 50 个实战经典例子，相信你已经对 jQuery 有了一定的了解。在实际开发中，你可以根据自己的需求选择合适的例子进行学习和实践。祝你学习愉快！

-- 展开阅读全文 --