jquery tip

jQuery 基础概念

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“写更少，做更多”（Write Less, Do More）。

常用方法

选择元素
通过 CSS 选择器快速定位 DOM 元素：

$('#id') // ID 选择器  
$('.class') // 类选择器  
$('div') // 标签选择器  

事件绑定
简化事件监听，例如点击事件：

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

DOM 操作
动态修改内容或样式：

$('#content').html('新内容'); // 修改 HTML  
$('#box').css('color', 'red'); // 修改样式  

Ajax 请求

简化异步数据交互：

$.ajax({  
    url: 'api/data',  
    method: 'GET',  
    success: function(response) {  
        console.log(response);  
    }  
});  

链式调用

支持方法链式书写，提升代码简洁性：

$('div').addClass('highlight').fadeOut(1000);  

注意事项

• 确保引入 jQuery 库（通过 CDN 或本地文件）。
• 使用 $(document).ready() 确保 DOM 加载完成后执行脚本：

  $(document).ready(function() {  
    // 代码逻辑  
  });  

性能优化

• 缓存 jQuery 对象避免重复查询：

  var $element = $('#myElement');  
  $element.hide();  

• 尽量使用 ID 选择器，效率高于类或标签选择器。