jQuery入门

Posted on Views:

jQuery是一个 JavaScript 库，用于简化网页开发。

核心思想：

少写代码，快速完成 DOM 操作、事件处理、AJAX 请求。

1. jQuery核心功能

功能 作用
DOM操作 查找、修改HTML元素
事件处理 点击、输入等事件绑定
AJAX 异步请求数据
动画效果 显示、隐藏、滑动

2. 基础语法

1
$(选择器).方法()

示例：

1
$("#id").hide();

含义：

  • $()：获取元素
  • #id：选择器
  • hide()：隐藏元素

3. 常用选择器

1
2
3
$("#id")       // ID
$(".class")    // 类
$("div")       // 标签

4. DOM操作

修改内容：

1
$("#p").text("hello");

修改样式：

1
$("#p").css("color","red");

添加元素：

1
$("body").append("<p>test</p>");

5. 事件

点击事件：

1
2
3
$("#btn").click(function(){
    alert("click");
});

推荐：

1
2
$("#btn").on("click",function(){
});

6. AJAX请求

1
2
3
4
5
6
$.ajax({
    url:"/api",
    success:function(data){
        console.log(data);
    }
});

7. jQuery特点

优点：

  • 简单易用
  • 浏览器兼容好
  • 插件丰富

缺点：

  • 现代项目多使用 Vue / React
  • 不适合大型前端应用