jquery 常用方法:DOM 选择与遍历、DOM 操作、事件处理、动画与效果、AJAX 请求、工具方法、文档就绪事件、链式调用

发布时间:2025-05-13      访问量:39
jQuery 是一个快速、简洁的 JavaScript 库,提供了强大的 DOM 操作、事件处理、动画效果和 AJAX 功能。以下是其核心方法和常见用法:


**1. DOM 选择与遍历**
**(1) 选择器**
- `$(selector)`:通过 CSS 选择器匹配元素。
- `$('element')`、`$('.class')`、`$('#id')`、`$('[attr=value]')`。

**示例**:
javascript $('p') // 选择所有 <p> 元素 $('.highlight') // 选择所有 class="highlight" 的元素 $('#main') // 选择 id="main" 的元素 $('a[href^="https"]') // 选择所有 href 以 https 开头的链接

**(2) 遍历方法**
- `parent()`、`children()`、`siblings()`:父子兄弟元素。
- `find(selector)`:查找后代元素。
- `next()`、`prev()`:下一个/上一个同级元素。

**示例**:
javascript $('li').parent() // 获取所有 li 的父元素 $('#container').find('p') // 获取 #container 内的所有 p 元素 $('h1').next() // 获取 h1 后的下一个元素


**2. DOM 操作**
**(1) 修改内容**
- `text()`:获取或设置文本内容。
- `html()`:获取或设置 HTML 内容。
- `val()`:获取或设置表单元素的值。

**示例**:
javascript $('h1').text('新标题') // 设置 h1 的文本 $('p').html('<b>粗体</b>') // 设置 p 的 HTML $('#input').val('默认值') // 设置输入框的值

**(2) 属性操作**
- `attr(name, value)`:获取或设置属性。
- `removeAttr(name)`:移除属性。
- `addClass()`、`removeClass()`、`toggleClass()`:操作 CSS 类。

**示例**:
javascript $('img').attr('src', 'new-image.jpg') // 修改图片 src $('a').removeAttr('target') // 移除 target 属性 $('div').addClass('active') // 添加 active 类

**(3) DOM 元素操作**
- `append()`、`prepend()`:在元素内部添加内容。
- `after()`、`before()`:在元素外部添加内容。
- `remove()`、`empty()`:移除或清空元素。

**示例**:
javascript $('ul').append('<li>新项目</li>') // 在 ul 末尾添加 li $('h2').after('<p>副标题</p>') // 在 h2 后添加 p $('.delete-me').remove() // 移除所有 class="delete-me" 的元素


**3. 事件处理**
- `on(event, handler)`:绑定事件处理函数。
- `click()`、`submit()`、`hover()`:简写方法。
- `event.preventDefault()`:阻止默认行为。
- `event.stopPropagation()`:阻止事件冒泡。

**示例**:
javascript $('button').click(function() { // 点击事件 alert('按钮被点击!'); }); $('form').submit(function(e) { // 表单提交事件 e.preventDefault(); // 阻止表单默认提交 console.log('表单提交被拦截'); }); $('a').on('mouseenter', function() { // 鼠标进入事件 $(this).addClass('hover'); });


**4. 动画与效果**
- `show()`、`hide()`、`toggle()`:显示/隐藏元素。
- `fadeIn()`、`fadeOut()`、`fadeToggle()`:淡入淡出。
- `slideDown()`、`slideUp()`、`slideToggle()`:滑动效果。
- `animate(properties, duration, easing, callback)`:自定义动画。

**示例**:
javascript $('div').hide(500); // 500ms 内隐藏元素 $('p').fadeIn(1000); // 1s 内淡入显示 $('img').animate({ // 自定义动画 width: 'toggle', height: '50%' }, 800);


**5. AJAX 请求**
- `$.ajax(options)`:通用 AJAX 方法。
- `$.get(url, callback)`:GET 请求。
- `$.post(url, data, callback)`:POST 请求。
- `$.getJSON(url, callback)`:获取 JSON 数据。

**示例**:
javascript $.get('https://api.example.com/data', function(data) { console.log('成功获取数据:', data); }); $.ajax({ url: '/submit', method: 'POST', data: { name: 'Alice', age: 30 }, success: function(response) { console.log('提交成功:', response); }, error: function(error) { console.error('请求失败:', error); } });


**6. 工具方法**
- `$.each(collection, callback)`:遍历数组或对象。
- `$.trim(string)`:去除字符串两端空格。
- `$.parseJSON(jsonString)`:解析 JSON 字符串。
- `$.extend(target, source)`:合并对象。

**示例**:
javascript $.each([1, 2, 3], function(index, value) { console.log(`索引 ${index} 的值是 ${value}`); }); var obj = $.extend({}, {a: 1}, {b: 2}); // 合并对象 console.log(obj); // 输出: {a: 1, b: 2}


**7. 文档就绪事件**
确保 DOM 完全加载后执行代码:
javascript $(document).ready(function() { // 代码在这里执行 }); // 简写形式 $(function() { // 等价于上面的写法 });


**8. 链式调用**
jQuery 方法通常返回 jQuery 对象,支持链式调用:
javascript $('p') .addClass('highlight') .css('font-size', '18px') .fadeIn(500);


**9. 常见场景**
**(1) 表单验证**
javascript $('form').submit(function(e) { var input = $('#username').val(); if (input.trim() === '') { e.preventDefault(); alert('用户名不能为空!'); } });

**(2) 选项卡切换**
javascript $('.tab-button').click(function() { var tabId = $(this).attr('data-tab'); $('.tab-content').hide(); $(`#${tabId}`).show(); });

**(3) 动态加载内容**
javascript $('#load-more').click(function() { $.get('/more-data', function(data) { $('#content').append(data); }); });


**10. 注意事项**
1. **版本差异**:jQuery 3.x 移除了一些旧特性,确保版本兼容。
2. **性能优化**:缓存选择器结果,避免重复查询 DOM。
3. **替代方案**:现代项目可考虑使用原生 JavaScript(如 `document.querySelector`)或框架(React、Vue)。

掌握这些方法后,你可以高效地操作 DOM、处理事件和实现交互效果。
堆内存
多线程
strdup
初始化器
冒泡排序
增删改查
BufferedReader
输入输出
面向对象
生命周期
闭包的概念
原型链
Flask
mysql-connector-python
单例模式
浅拷贝
隔离级别
索引
InnoDB
左连接
聚合函数
PuTTY
TRUNCATE
str_starts_with_many
DateTime
array_combine
闭包的概念