快速学习 Jquery

Huy大约 8 分钟javascriptjavascript

因为工作需要，需要用 jQuery 写一些 Demo 页面。但此前只会用框架或元素 js 写法去渲染页面，对于 jQuery 一直是半吊子。因此打算花点时间快速学习一下这个前端老前辈。

Jquery
Jquery

概述

jQuery 是一个 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

jQuery 的核心特性：

  • 选择器：jQuery 提供了强大的选择器功能，可以方便地选择 HTML 元素。
  • DOM 操作：jQuery 提供了丰富的 DOM 操作方法，可以方便地修改 HTML 元素的内容、属性和样式。
  • 事件处理：jQuery 提供了简单的事件处理方法，可以方便地绑定事件处理程序。
  • 动画效果：jQuery 提供了丰富的动画效果，可以方便地实现元素的动画效果。
  • Ajax 交互：jQuery 提供了简单易用的 Ajax 交互方法，可以方便地实现与服务器的异步通信。

基本用法

引入 jQuery

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

<!-- 通过 CDN 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<!-- 通过本地文件引入 jQuery -->
<script src="path/to/jquery.min.js"></script>

入口函数

在 jQuery 中，可以使用 $(document).ready() 方法来代替传统的 window.onload 事件，确保在 DOM 完全加载后再执行代码。

$(document).ready(function () {
  // 在这里编写 jQuery 代码
})

顶级对象$

jQuery 的顶级对象是 $，它是一个函数，可以用来选择元素、绑定事件、执行动画等。

// 选择元素
var $element = $('selector')

// 绑定事件
$element.on('click', function () {
  // 在这里编写事件处理程序
})

// 执行动画
$element.animate({ opacity: 0 }, 1000)

值得注意的是，$ 获取的元素对象是 jQuery 对象，而不是原生的 DOM 对象。jQuery 对象提供了一些额外的方法和属性，可以方便地操作元素。

因此，一般需要先将 DOM 对象转换为 jQuery 对象，可以使用 $(DOMElement) 方法。在 chrome 浏览器中，打断点获取到的 DOM 对象为 string 类型，这并不是 DOM 对象。

选择器

jQuery 提供了丰富的选择器，可以方便地选择 HTML 元素。

基本选择器

  • #id：选择具有指定 id 的元素。
  • .class：选择具有指定 class 的元素。
  • element：选择具有指定标签名的元素。
  • *：选择所有元素。
// 选择 id 为 "myElement" 的元素
var $element = $('#myElement')

// 选择 class 为 "myClass" 的元素
var $element = $('.myClass')

// 选择标签名为 "div" 的元素
var $element = $('div')

// 选择所有元素
var $element = $('*')

层级选择器

  • ancestor descendant：选择祖先元素的所有后代元素。
  • parent > child：选择父元素的所有直接子元素。
  • prev + next：选择紧接在 prev 元素后的 next 元素。
  • prev ~ siblings：选择 prev 元素后面的所有兄弟元素。
// 选择 id 为 "myElement" 的元素的所有后代元素
var $element = $('#myElement descendant')

// 选择 id 为 "myElement" 的元素的直接子元素
var $element = $('#myElement > child')

// 选择紧接在 id 为 "prevElement" 的元素后的 id 为 "nextElement" 的元素
var $element = $('#prevElement + #nextElement')

// 选择 id 为 "prevElement" 的元素后面的所有兄弟元素
var $element = $('#prevElement ~ siblings')

链式编程

jQuery 支持链式编程，可以在一行代码中连续调用多个方法。

// 选择 id 为 "myElement" 的元素，并设置其背景颜色为红色，然后添加一个点击事件
$('#myElement')
  .css('background-color', 'red')
  .on('click', function () {
    // 在这里编写事件处理程序
  })

操作元素

jQuery 提供了一些方法，可以方便地操作 HTML 元素。

获取和设置属性

元素属性分为俩种，一种是固有属性（Property），即元素本身自带的属性；还有一种是自定义属性（Attribute），即用户自定义的属性。俩种的获取和设备方法也不同。

  • prop(name)：获取固有指定属性的值。
  • prop(name, value)：设置固有指定属性的值。
  • removeProp(name)：移除固有指定属性。
// 获取 id 为 "myElement" 的元素的 checked 属性值
var checked = $('#myElement').prop('checked')

// 设置 id 为 "myElement" 的元素的 checked 属性值为 true
$('#myElement').prop('checked', true)

// 移除 id 为 "myElement" 的元素的 checked 属性
$('#myElement').removeProp('checked')
  • attr(name)：获取自定义指定属性的值。
  • attr(name, value)：设置自定义指定属性的值。
  • removeAttr(name)：移除自定义指定属性。
// 获取 id 为 "myElement" 的元素的 href 属性值
var href = $('#myElement').attr('href')

// 设置 id 为 "myElement" 的元素的 href 属性值为 "https://www.example.com"
$('#myElement').attr('href', 'https://www.example.com')

// 移除 id 为 "myElement" 的元素的 href 属性
$('#myElement').removeAttr('href')

获取和设置内容

  • html()：获取元素的 HTML 内容，包括子元素的 HTML 标签，相当于原生的 innerHTML 属性。
  • html(value)：设置元素的 HTML 内容。
  • text()：获取元素的文本内容。
  • text(value)：设置元素的文本内容。
// 获取 id 为 "myElement" 的元素的 HTML 内容
var htmlContent = $('#myElement').html()

// 设置 id 为 "myElement" 的元素的 HTML 内容为 "<p>Hello, World!</p>"
$('#myElement').html('<p>Hello, World!</p>')

// 获取 id 为 "myElement" 的元素的文本内容
var textContent = $('#myElement').text()

// 设置 id 为 "myElement" 的元素的文本内容为 "Hello, World!"
$('#myElement').text('Hello, World!')

获取和设置样式

  • css(name)：获取指定样式的值。
  • css(name, value)：设置指定样式的值。
// 获取 id 为 "myElement" 的元素的背景颜色
var backgroundColor = $('#myElement').css('background-color')

// 设置 id 为 "myElement" 的元素的背景颜色为红色
$('#myElement').css('background-color', 'red')

// 一次设置多组样式
$('#myElement').css({
  'background-color': 'red',
  'font-size': '16px',
  color: 'white',
})

添加和移除类

  • addClass(className)：添加指定类。
  • removeClass(className)：移除指定类。
  • toggleClass(className)：切换指定类（存在则移除，不存在则添加）。
// 添加 id 为 "myElement" 的元素的 active 类
$('#myElement').addClass('active')

// 移除 id 为 "myElement" 的元素的 active 类
$('#myElement').removeClass('active')

// 切换 id 为 "myElement" 的元素的 active 类，存在则移除，不存在则添加
$('#myElement').toggleClass('active')

操作 DOM 元素

  • append(content)：在元素内部末尾添加内容。
  • appendChild(content)：在元素内部末尾添加内容。
  • prepend(content)：在元素内部开头添加内容。
  • before(content)：在元素外部之前添加内容。
  • after(content)：在元素外部之后添加内容。
  • remove()：移除元素。
  • empty()：清空元素内容。
  • each()：遍历元素，并对每个元素执行指定的函数。
    1. $(selector).each(function(index, element){})，遍历元素，并传入索引和元素本身；
    2. $(selector).each(function(index){})
    3. $.each(object, function(index, value){})，遍历对象；
    4. $.each(array, function(index, value){})，遍历数组。
// 在 id 为 "myElement" 的元素内部末尾添加一个 <p> 元素
$('#myElement').append('<p>Hello, World!</p>')

// 在 id 为 "myElement" 的元素内部开头添加一个 <p> 元素
$('#myElement').prepend('<p>Hello, World!</p>')

// 在 id 为 "myElement" 的元素外部之前添加一个 <p> 元素
$('#myElement').before('<p>Hello, World!</p>')

// 在 id 为 "myElement" 的元素外部之后添加一个 <p> 元素
$('#myElement').after('<p>Hello, World!</p>')

// 移除 id 为 "myElement" 的元素
$('#myElement').remove()

// 清空 id 为 "myElement" 的元素内容
$('#myElement').empty()

// 遍历 id 为 "myElement" 的元素，并对每个元素执行指定的函数
$('#myElement').each(function () {
  // 在这里编写函数体
})

事件处理

  • on(events, selector, data, handler)：绑定事件。
  • off(events, selector, handler)：解绑事件。
  • one(events, selector, data, handler)：绑定一次性事件。
  • trigger(event, extraParameters)：触发事件。
  • triggerHandler(event, extraParameters)：触发事件，并返回事件处理函数的返回值。
// 绑定 id 为 "myElement" 的元素的 click 事件
$('#myElement').on('click', function () {
  // 在这里编写事件处理函数
})

// 批量绑定 id 为 "myElement" 的元素的 click 和 mouseover 事件
$('#myElement').on({
  click: function () {
    // 在这里编写 click 事件处理函数
  },
  mouseover: function () {
    // 在这里编写 mouseover 事件处理函数
  },
})

// 解绑 id 为 "myElement" 的元素的 click 事件
$('#myElement').off('click')

// 绑定 id 为 "myElement" 的元素的 click 事件，只执行一次
$('#myElement').one('click', function () {
  // 在这里编写事件处理函数
})

// 触发 id 为 "myElement" 的元素的 click 事件
$('#myElement').trigger('click')

// 触发 id 为 "myElement" 的元素的 click 事件，并传递额外的参数
$('#myElement').trigger('click', ['param1', 'param2'])

手动触发事件

// 类似原生触发
$('#myElement').click()

// jQuery 触发
$('#myElement').trigger('click')

// 阻止事件冒泡
$('#myElement').click(function (e) {
  e.stopPropagation()
})

ajax 请求

jQuery 提供了 $.ajax() 方法来发送 AJAX 请求，该方法接受一个配置对象作为参数，配置对象中可以指定请求的类型、URL、数据、回调函数等。

基本语法：

$.ajax({
  type: 'GET', // 请求类型，默认为 GET
  url: 'example.php', // 请求的 URL
  data: { name: 'John', age: 30 }, // 请求的数据，可以是一个对象或字符串
  dataType: 'json', // 预期服务器返回的数据类型，默认为 json, 若为 xml 则 jQuery 可直接处理
  contentType: 'application/json', // 发送的数据类型，默认为 application/x-www-form-urlencoded
  async: true, // 是否异步请求，默认为 true, 若为 false 则请求会阻塞页面
  beforeSend: function (XMLHttpRequest) {
    // 请求发送前的回调函数, XMLHttpRequest 对象是唯一的参数
    console.log('请求发送前', XMLHttpRequest)
    // this 可调用本次 Ajax 请求时传递的 options 参数
    // 若返回 false 则请求不会发送
  },
  success: function (response) {
    // 请求成功时的回调函数
    console.log(response)
  },
  error: function (xhr, status, error) {
    // 请求失败时的回调函数
    console.error(error)
  },
  complete: function (xhr, status) {
    // 请求完成时的回调函数
    console.log(status)
  },
})

请求数据类型:

  • GET：从服务器获取数据。这是默认的请求类型。
  • POST：向服务器发送数据。
  • PUT：更新服务器上的资源。
  • DELETE：删除服务器上的资源。
  • HEAD：获取资源的元数据，如内容长度、最后修改时间等。
  • OPTIONS：获取服务器支持的请求类型。
Loading...
本站原创内容基于 CC BY-SA 4.0 共享, 转载请注明出处。
Copyright © 2025 Huy