jQuery看这一文就够了！

目录

1.环境准备

2. 选择器

3.DOM 操作

4.事件处理

---

jQuery 是一款流行的 JavaScript 库，可以简化编写 JavaScript 代码的难度和复杂度。以下是一些 jQuery 的常用知识点及详细讲解：

1.环境准备

在使用 jQuery 之前，需要先将 jQuery 库文件引入 HTML 文档中。

2. 选择器

选择器是 jQuery 中最重要的概念之一，可以通过选择器来获取 DOM 元素并操作它们。jQuery 支持 CSS3 选择器以及自定义的一些选择器。

• 基础选择器：根据元素的标签名、ID、class、属性等选择。

// 根据标签名选择元素
$('p')

// 根据 ID 选择元素
$('#myid')

// 根据 class 选择元素
$('.myclass')

// 根据属性选择元素
$('[name="myname"]')

• 层次选择器：根据元素之间的层次关系选择。

// 后代选择器
$('ul li')

// 子元素选择器
$('ul > li')

// 相邻兄弟元素选择器
$('p + p')

// 兄弟元素选择器
$('p ~ p')

• 过滤选择器：根据元素的状态或属性等进行过滤。

// 后代选择器
$('ul li')

// 子元素选择器
$('ul > li')

// 相邻兄弟元素选择器
$('p + p')

// 兄弟元素选择器
$('p ~ p')

• 表单选择器：用于选择表单元素。

// :first 选择第一个元素
$('div:first')

// :last 选择最后一个元素
$('div:last')

// :even 选择偶数位置的元素
$('li:even')

// :odd 选择奇数位置的元素
$('li:odd')

// :eq(n) 选择第 n 个元素
$('li:eq(2)')

// :gt(n) 选择位置大于 n 的元素
$('li:gt(2)')

// :lt(n) 选择位置小于 n 的元素
$('li:lt(2)')

// :not(selector) 选择不符合 selector 的元素
$('li:not(.myclass)')

// :has(selector) 选择含有 selector 元素的元素
$('ul:has(li)')

其中：

在jQuery中，":gt" 是 "greater than" 的缩写，表示“大于”的意思；而":lt" 是 "less than" 的缩写，表示“小于”的意思。因此，":gt(n)" 选择位置大于 n 的元素，":lt(n)" 选择位置小于 n 的元素。

3.DOM 操作

jQuery 可以方便地对 DOM 元素进行操作，支持一系列的 DOM 操作方法。

• 获取和设置元素内容

// 获取元素内容
var content = $('#mydiv').html();

// 设置元素内容
$('#mydiv').html('Hello, jQuery!');

• 获取和设置元素属性

// 获取元素属性值
var value = $('#myinput').attr('value');

// 设置元素属性值
$('#myinput').attr('value', 'new value');

• 添加和删除元素类名

// 添加类名
$('#mydiv').addClass('highlight');

// 删除类名
$('#mydiv').removeClass('highlight');

• 遍历和查找 DOM 元素

// 遍历子元素
$('ul li').each(function(index, elem) {
    console.log(index + ": " + $(elem).text());
});

// 查找子元素
$('#mydiv').find('p');

• 创建和插入 DOM 元素

// 创建元素
var newElement = $('<p>New element</p>');

// 插入到指定元素之后
$('#mydiv').after(newElement);

// 插入到指定元素之前
$('#mydiv').before(newElement);

// 插入到指定元素内部
$('#mydiv').append(newElement);

4.事件处理

jQuery 提供了一系列事件处理的方法，可以方便地对元素事件进行绑定、解绑等操作。

• 绑定事件处理函数

// 绑定 click 事件处理函数
$('#mybutton').click(function() {
    alert('Button clicked');
});

• 解绑事件处理函数

• // 解绑 click 事件处理函数
  $('#mybutton').off('click');
  

• 常用的事件类型

• // click 点击事件
  $('#mybutton').click(function() { /* ... */ });
  
  // dblclick 双击事件
  $('#mybutton').dblclick(function() { /* ... */ });
  
  // hover 鼠标悬停事件
  $('#mybutton').hover(function() {
      // 鼠标进入时执行的代码
  }, function() {
      // 鼠标离开时执行的代码
  });
  
  // mouseenter 鼠标进入事件
  $('#mybutton').mouseenter(function() { /* ... */ });
  
  // mouseleave 鼠标离开事件
  $('#mybutton').mouseleave(function() { /* ... */ });
  
  // keydown 按键按下事件
  $(document).keydown(function(event) { /* ... */ });