jquery试题

以下是关于jQuery的常见试题及解答，涵盖基础语法、DOM操作、事件处理等核心知识点：

基础语法

$() 是jQuery的核心函数，用于选择元素或创建DOM对象。
示例：$('#id') 选择ID为"id"的元素，$('<div>') 创建一个新的div元素。

jQuery链式调用通过连续调用方法实现，如：
$('p').css('color', 'red').hide().show();

DOM操作

选择器示例：
$('.class') 选择所有class为"class"的元素
$('ul li:first') 选择第一个li元素

修改内容：
$('#id').html('<b>新内容</b>') 修改HTML
$('#id').text('纯文本') 修改文本内容

属性操作：
$('img').attr('src', 'new.jpg') 修改src属性
$('input').val('默认值') 设置表单值

事件处理

绑定点击事件：

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

事件委托：

$('ul').on('click', 'li', function() {
  $(this).toggleClass('active');
});

AJAX请求

GET请求示例：

$.get('url', {param: 'value'}, function(data) {
  console.log(data);
});

POST请求示例：

$.post('url', {param: 'value'}, function(data) {
  $('#result').html(data);
});

动画效果

显示/隐藏：
$('#box').hide(500) 在500毫秒内隐藏
$('#box').show('slow') 慢速显示

自定义动画：

$('#box').animate({
  left: '+=50px',
  opacity: 0.5
}, 1000);

实用工具方法

遍历元素：

$('li').each(function(index) {
  console.log(index + ': ' + $(this).text());
});

数组合并：
var newArr = $.merge([1,2], [3,4]);

插件开发

基础插件模板：

(function($) {
  $.fn.myPlugin = function(options) {
    var settings = $.extend({
      color: 'red'
    }, options);

    return this.each(function() {
      $(this).css('color', settings.color);
    });
  };
})(jQuery);

性能优化

选择器优化：
避免过度具体的选择器如 $('div#id .class')，直接使用ID选择器 $('#id')更高效。

事件委托优势：
对动态添加的元素有效，减少事件绑定数量。

DOM操作建议：
批量操作DOM，避免频繁读写。