零基础学习jQuery第二天

最新推荐文章于 2025-12-02 23:40:44 发布

原创

最新推荐文章于 2025-12-02 23:40:44 发布 · 921 阅读

CC 4.0 BY-SA版权

文章标签：

恭喜你开启 jQuery 学习的第二天！经过第一天的基础认知（比如引入 jQuery、基础语法 $() 等），今天我们可以聚焦 DOM 操作 和 事件处理—— 这两块是 jQuery 最核心、最常用的功能，也是提升前端开发效率的关键。

在开始新内容前，先快速回顾第一天的核心点：

引入方式：本地文件或 CDN（推荐开发阶段用 CDN 快速测试）

html

预览

<!-- 引入 jQuery（百度 CDN 示例） -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

DOM（文档对象模型）是 HTML 页面的结构树，jQuery 简化了原生 JS 对 DOM 的增、删、改、查操作。

第一天我们学了基础选择器（如 $("#id")、$(".class")、$("tag")），今天补充几个高频实用的：

层级选择器：
- $("parent child")：选中父元素下的所有子元素（包括孙子辈）
  html
  
  预览
```
<ul>
  <li>item1</li>
  <li>item2 <span>子元素</span></li>
</ul>
<script>
  $("ul li").css("color", "red"); // 所有 li 变红（包括嵌套的）
</script>
```
- $("parent > child")：只选中父元素的直接子元素（不包括孙子辈）
  javasc