jquery对象$

jQuery 对象 $ 简介

jQuery 对象 $ 是 jQuery 库的核心标识符，它是 jQuery 函数的别名。通过 $ 可以快速访问 jQuery 的功能，包括 DOM 操作、事件处理、动画效果等。

$ 的基本用法

• 选择元素：通过 CSS 选择器获取 DOM 元素并包装为 jQuery 对象。

  $('div') // 选择所有 <div> 元素
  $('#myId') // 选择 id 为 "myId" 的元素
  $('.myClass') // 选择 class 为 "myClass" 的元素

• 创建元素：直接传入 HTML 字符串创建新的 DOM 元素。

  $('<p>Hello</p>') // 创建一个 <p> 元素

• DOM 就绪事件：通过 $(document).ready() 或简写的 $() 确保代码在 DOM 加载完成后执行。

  $(function() {
    // DOM 就绪后执行的代码
  });

$ 与其他库的冲突

如果其他 JavaScript 库（如 Prototype）也使用了 $ 符号，可以通过 jQuery.noConflict() 释放 $ 的控制权，改用 jQuery 关键字。

var jq = jQuery.noConflict(); // 此后使用 jq 代替 $
jq('div').hide();

jQuery 对象与 DOM 对象的区别

• jQuery 对象：通过 $() 返回的对象，包含一组 DOM 元素和 jQuery 方法。
• DOM 对象：原生 JavaScript 对象，如 document.getElementById() 返回的结果。

转换方法：

// DOM 对象转 jQuery 对象
var domObj = document.getElementById('myId');
var jqObj = $(domObj);

// jQuery 对象转 DOM 对象
var domElement = jqObj[0]; // 或 jqObj.get(0)

常用 jQuery 方法示例

• 操作类名：

  $('div').addClass('highlight'); // 添加类
  $('div').removeClass('highlight'); // 移除类

• 事件绑定：

  

  $('button').click(function() {
    alert('Clicked!');
  });

• AJAX 请求：

  $.ajax({
    url: 'data.json',
    success: function(data) {
      console.log(data);
    }
  });

性能优化建议

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

  var $divs = $('div'); // 缓存结果
  $divs.hide();

• 链式调用：利用 jQuery 的链式语法减少代码量。

  $('div').addClass('active').fadeIn().html('Updated');

通过 $ 可以高效地完成前端开发中的常见任务，其链式调用和跨浏览器兼容性是核心优势。