jquery笔记 jquery笔记手写

jQuery基础入门

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，本篇笔记将介绍jQuery的基本概念和使用方法。

引入jQuery库

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

1、下载jQuery库文件，将其放在项目的js文件夹中，然后在HTML文件中通过script标签引入：

<script src="jquery-3.6.0.min.js"></script>

2、使用CDN（内容分发网络）引入jQuery库，只需在HTML文件中添加一个script标签，指定jQuery的URL地址：

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

选择器

jQuery使用选择器来选取HTML元素，然后对其进行操作，常用的选择器有以下几种：

1、ID选择器：通过元素的ID来选取元素，语法为#id，选取ID为myDiv的元素：

$("#myDiv")

2、类选择器：通过元素的class属性来选取元素，语法为.class，选取class为myClass的元素：

$(".myClass")

3、元素选择器：通过元素的标签名来选取元素，语法为element，选取所有的div元素：

$("div")

4、后代选择器：通过元素的子元素或后代元素来选取元素，语法为ancestor descendant，选取ID为myDiv的元素下的p元素：

$("#myDiv p")

5、属性选择器：通过元素的属性来选取元素，语法为[attribute]，选取href属性值为https://www.example.com的a元素：

$("a[href='https://www.example.com']")

事件处理

jQuery提供了丰富的事件处理方法，用于处理用户的操作和浏览器的事件，常用的事件处理方法有以下几种：

1、click()：处理点击事件，为所有按钮元素绑定点击事件：

$("button").click(function() {
  alert("按钮被点击");
});

2、hover()：处理鼠标悬停事件，当鼠标悬停在图片上时，改变图片的边框颜色：

$("img").hover(function() {
  $(this).css("border", "1px solid red");
}, function() {
  $(this).css("border", "none");
});

3、keydown()：处理键盘按下事件，当按下回车键时，提交表单：

$("#myForm").keydown(function(event) {
  if (event.keyCode == 13) {
    event.preventDefault(); // 阻止默认行为（表单提交）
    // 在这里执行提交表单的操作
  }
});

动画效果

jQuery提供了丰富的动画效果方法，用于实现元素的移动、缩放、旋转等动画效果，常用的动画效果方法有以下几种：

1、hide()和show()：隐藏和显示元素，隐藏ID为myDiv的元素：

$("#myDiv").hide();

2、fadeIn()和fadeOut()：淡入和淡出元素，淡入ID为myDiv的元素：

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

3、slideUp()和slideDown()：向上滑动和向下滑动元素，向下滑动ID为myDiv的元素：

$("#myDiv").slideDown();