jquery练习 jquery教程实例

jQuery基础教程

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，jQuery的设计目标是让Web开发更加简单、快速，本教程将介绍jQuery的基本概念和使用方法，帮助初学者快速入门。

1、引入jQuery库

在使用jQuery之前，需要先引入jQuery库，可以通过以下两种方式之一引入：

- 下载jQuery库文件，然后在HTML文件中引用，下载地址：https://code.jquery.com/

- 使用CDN（内容分发网络）引入，在HTML文件中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2、选择器

jQuery使用选择器来选取HTML元素，常用的选择器有：

- ID选择器：通过元素的ID选择元素，如$("#myId")。

- 类选择器：通过元素的class属性选择元素，如$(".myClass")。

- 标签选择器：通过元素的标签名选择元素，如$("p")。

- 层级选择器：通过元素的层级关系选择元素，如$("#parent > child")。

- 属性选择器：通过元素的属性选择元素，如$("[name=myName]")。

3、事件处理

jQuery提供了丰富的事件处理方法，如点击、鼠标移动、键盘输入等，事件处理方法通常以on()开头，后面跟事件类型和回调函数，为按钮添加点击事件：

$("#myButton").on("click", function() {
  alert("按钮被点击");
});

4、HTML操作

jQuery提供了丰富的HTML操作方法，如获取、设置元素的内容和属性等，以下是一些常用的HTML操作方法：

- text()：获取或设置元素的文本内容。

- html()：获取或设置元素的HTML内容。

- attr()：获取或设置元素的属性值。

- addClass()：为元素添加一个class。

- removeClass()：为元素移除一个class。

- toggleClass()：切换元素的class。

- append()：在元素的内部追加内容。

- prepend()：在元素的内部前置内容。

- after()：在元素之后插入内容。

- before()：在元素之前插入内容。

- remove()：删除元素及其子元素。

- empty()：清空元素的内容。

5、CSS操作

jQuery提供了丰富的CSS操作方法，如获取、设置元素的样式等，以下是一些常用的CSS操作方法：

- css()：获取或设置元素的样式属性值。

- height()：获取或设置元素的高度。

- width()：获取或设置元素的宽度。

- offset()：获取元素的位置信息。

- scrollTop()：获取元素的垂直滚动条位置。

- scrollLeft()：获取元素的水平滚动条位置。

- animate()：创建自定义动画效果。

6、动画效果

jQuery提供了丰富的动画效果，如淡入淡出、滑动、缩放等，以下是一些常用的动画效果方法：

- fadeIn()：淡入效果。

- fadeOut()：淡出效果。

- slideDown()：向下滑动效果。

- slideUp()：向上滑动效果。

- slideToggle()：切换滑动效果。

- animate()：自定义动画效果。