jQuery的基本使用

在学习jQuery之前 现回顾一下原生js是如何获取dom元素的：

1.通过 ID 获取

使用 document.getElementById() 方法可以通过元素的 ID 获取单个元素。

const elementById = document.getElementById('myElementId');

2.通过标签名获取

使用 document.getElementsByTagName() 方法可以获取一个包含指定标签名的 HTML 集合（类似于数组的对象）

const elementsByTagName = document.getElementsByTagName('div');
// 可以通过索引访问特定的元素，例如 elementsByTagName[0] 表示第一个 `<div>` 元素。

3.通过类名获取

1. document.getElementsByClassName()：
   • 此方法返回一个包含具有指定类名的元素的 HTML 集合。

  const elementsByClassName = document.getElementsByClassName('myClassName');

2. 在现代浏览器中，还可以使用 querySelectorAll() 方法结合类选择器来获取具有特定类名的元素集合。

  const elementsByQuerySelector = document.querySelectorAll('.myClassName');

四、通过 CSS 选择器获取

1. document.querySelector()：
   • 此方法返回匹配指定 CSS 选择器的第一个元素。

   const firstElementBySelector = document.querySelector('#myId.myClassName div');
   // 这个选择器将查找具有 ID 为“myId”的元素下的具有类名“myClassName”的 `<div>` 元素中的第一个。

2. document.querySelectorAll()：
   • 与 querySelector() 类似，但它返回所有匹配指定 CSS 选择器的元素集合。

   const allElementsBySelector = document.querySelectorAll('p.myParagraphClass');
   // 这个选择器将查找所有具有类名“myParagraphClass”的 `<p>` 元素。

相对比与原生js操作dom元素 jQuery提供了一套非常快速、简洁的 方法，极大地简化了 JavaScript 编程。以下是 jQuery 的基本使用方法：

一、引入 jQuery

在 HTML 文件中，可以通过以下方式引入 jQuery：

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

二、jQuery 选择元素

1. 使用 CSS 选择器：
   • jQuery 可以使用类似于 CSS 的选择器来选取 HTML 元素。例如，选取所有的 <p> 元素：

  $('p');

• 选取具有特定类名的元素，如 .my-class：

  $('.my-class');

• 选取具有特定 ID 的元素，如 #my-id：

  $('#my-id');

2. 层级选择：
   • 选取某个元素下的所有子元素：

 $('#parent').children();

• 选取某个元素的直接子元素，比如 <ul> 下的直接 <li> 元素：

 $('ul > li');

三、操作元素内容和属性

1. 获取和设置元素内容：
   • 获取元素的文本内容：

 var text = $('p').text();

• 设置元素的文本内容：

 $('p').text('新的文本内容');

• 获取和设置 HTML 内容：

 var htmlContent = $('#my-div').html();
   $('#my-div').html('<p>新的 HTML 内容</p>');

2. 获取和设置元素属性：
   • 获取元素的属性值，如获取 <img> 元素的 src 属性：

 var srcValue = $('img').attr('src');

• 设置元素的属性值：

 $('img').attr('src', 'new-image.jpg');

四、事件处理

1. 绑定事件：
   • 为元素绑定点击事件：

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

• 为元素绑定鼠标悬停事件：

$('div').hover(function() {
       $(this).css('background-color', 'yellow');
   }, function() {
       $(this).css('background-color', '');
   });

2. 解绑事件：
   • 解绑点击事件：

 $('button').off('click');

五、DOM 操作

1. 创建和添加元素：
   • 创建一个新的 <p> 元素并添加到页面中：

var newParagraph = $('<p>这是一个新的段落。</p>');
   $('body').append(newParagraph);

2. 删除和移除元素：
   • 删除一个元素：

 $('p').remove();

• 清空一个元素的内容：

  $('#my-div').empty();

六、动画效果

1. 显示和隐藏元素：
   • 淡入显示元素：

  $('div').fadeIn();

• 淡出隐藏元素：

   $('div').fadeOut();

2. 滑动效果：
   • 向上滑动显示元素：

 $('div').slideDown();

• 向下滑动隐藏元素：

  $('div').slideUp();