jquery 学习笔记一

下面是关于 jquery 学习笔记一的完整攻略：

标题

Jquery 学习笔记一

概述

Jquery 是一款快速、简洁的 JavaScript 库，封装了大量常用的操作，可以极大地简化 JavaScript 编程。本篇笔记将介绍 Jquery 的选择器、事件绑定、动画效果等基础功能，并提供示例代码，帮助入门者快速上手。

选择器

基本选择器

在 Jquery 中，选择器用于选择 HTML 元素，并返回被选元素的集合。基本选择器包括以下几种：

• 元素选择器：$('element')
• ID 选择器：$('#id')
• 类选择器：$('.class')
• 属性选择器：$('[attribute]')

示例代码如下：

$('body') //选择 body 元素
$('#header') //选择 id 为 header 的元素
$('.title') //选择 class 为 title 的元素
$('[href]') //选择带有 href 属性的元素

层级选择器

层级选择器可以选择 HTML 元素的子元素、后代元素、兄弟元素等，常用的有以下几种：

• 后代选择器：$('parent descendant')
• 直接子元素选择器：$('parent > child')
• 兄弟元素选择器：$('element + sibling') 或 $('element ~ sibling')

示例代码如下：

$('.container li') //选择 class 为 container 的元素下的所有 li 子元素
$('#menu > li') //选择 id 为 menu 的元素下的直接子元素 li
$('h1 + p') //选择紧接在 h1 元素后的第一个 p 元素

过滤选择器

通过过滤选择器，可以对所选元素进行过滤，常用的过滤选择器包括以下几种：

• :first：选取第一个元素
• :last：选取最后一个元素
• :even：选取偶数位置的元素
• :odd：选取奇数位置的元素
• :not：选取不匹配选择器的元素

示例代码如下：

$('li:first') //选择第一个 li 元素
$('li:last') //选择最后一个 li 元素
$('li:even') //选择所有偶数位置的 li 元素
$('li:odd') //选择所有奇数位置的 li 元素
$('li:not(.active)') //选择不带有 class 为 active 的 li 元素

事件绑定

在 Jquery 中，事件绑定是通过 on() 方法实现的。语法格式为：

$('selector').on('event', function() {
  // 事件处理程序
})

其中，event 表示绑定的事件类型，如 click、focus、keydown 等。事件处理程序则是定义在函数中的一段代码，会在事件触发时执行。

示例代码如下：

$('button').on('click', function() {
  alert('Hello, Jquery!')
})

以上代码会选择页面中的所有 button 元素，并在点击按钮时弹出对话框，显示“Hello, Jquery!”。

动画效果

Jquery 提供了一系列的动画效果，可以让元素在页面上展示出各种各样的动态效果。常用的动画效果有以下几种：

• show/hide：显示/隐藏元素
• fadeIn/fadeOut：淡入/淡出元素
• slideDown/slideUp：向下/向上滑动元素

示例代码如下：

$('button').click(function() {
  $('p').toggle(1000) //显示/隐藏 p 元素，操作时间为 1 秒钟
})

以上代码会在页面中选择所有 button 元素，并为其绑定点击事件。当用户点击按钮时，页面中的所有 p 元素将会显示或隐藏，过程持续 1 秒钟。

总结

以上就是 Jquery 学习笔记一的完整攻略。通过本文的介绍，您应该已经掌握了 Jquery 的选择器、事件绑定、动画效果等基础知识，并能够通过示例代码进行实践。希望这篇笔记能够为您的学习提供一些帮助！