JQ教程：动画效果、事件处理与节点操作详解

本文主要介绍了jQuery中的动画效果、尺寸处理、事件及事件委托，同时还涉及到了元素节点操作。 在jQuery中，动画效果是通过`animate()`方法实现的。这个方法允许开发者平滑地改变元素的样式属性，如宽度、高度等。例如，将一个`div`元素的宽度和高度分别设置为300像素，动画持续1000毫秒，使用`swing`作为缓动效果，并在动画完成时触发回调函数： ```javascript $('#div1').animate({ width: 300, height: 300 }, 1000, 'swing', function() { alert('done!'); }); ``` 动画的参数可以包含数字表达式，例如增加宽度100像素： ```javascript $('#div1').animate({ width: '+=100', height: 300 }, 1000, 'swing', function() { alert('done!'); }); ``` 尺寸相关的操作包括获取和设置元素的宽度、高度，以及内边距、外边距和边框的尺寸。例如，`width()`、`height()`分别获取元素的宽度和高度，而`outerWidth(true)`则获取包括margin在内的总宽度。同时，可以使用`offset()`来获取元素相对于页面的位置，`$(window).width()`和`$(window).height()`获取浏览器可视区域的大小，`$(document).scrollTop()`和`$(document).scrollLeft()`获取页面滚动的距离。 事件处理在jQuery中非常灵活。可以直接绑定事件，如`click`、`mouseover`等，也可以利用事件冒泡机制。事件委托是另一种高效的事件处理方式，它允许在父元素上绑定事件，处理子元素的点击等行为，比如： ```javascript $('ul').on('click', 'li', function() { console.log('点击了列表项'); }); ``` 在这个例子中，即使动态添加的`li`元素也能响应点击事件，因为事件是在`ul`元素上被委托的。 在属性操作方面，`html()`用于获取或设置元素的HTML内容，而`prop()`用于处理元素的属性值。例如，获取图片的`src`属性： ```javascript var src = $('#img1').prop('src'); ``` 并可以设置新的`src`： ```javascript $('#img1').prop('src', 'new_image.jpg'); ``` 以上就是关于jQuery动画、尺寸处理、事件和属性操作的基本介绍，它们是jQuery库中的核心功能，对于网页交互和动态效果的实现至关重要。