jQuery方法的总结（附示例）
2020-11-27
来源：华拓网
文档加载就绪事件
$(document).ready(function() {
// 代码...
});
// 简写方式
$(function() {
// 代码...
});$(document).ready 与 window.onload 的区别
$(document).ready 和 window.onload 都是在都是在页面加载完执行的函数，大多数情况下差别不大。
$(document).ready:是 DOM 结构绘制完毕后就执行，不必等到加载完毕。 意思就是 DOM 树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。
jQuery 选择器
jQuery 选择器基于已经存在的 CSS 选择器
$('*')$('p')
$('ul li')
$('ul li:last-child')
...
jQuery 事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
常用的 jQuery 事件方法
jQuery 效果
$(selector).action(speed,callback)| 变量 | 说明 |
|---|---|
| selector | 选择器 |
| action | 事件 |
| speed | 速度，毫秒，也可以为‘slow’、‘fast‘ |
| callback | 回掉函数 |
显示隐藏
淡入淡出
fadeTo() 渐变为给定不透明度
$(selector).fadeTo(speed,opacity,callback);opacity 值为 0 与 1 之间
滑动
动画
$(selector).animate({params},speed,callback);| 参数 | 说明 | 是否必须 |
|---|---|---|
| params | 定义形成动画的 css 属性 | 必须 |
| speed | 速度，毫秒，也可以为‘slow’、‘fast‘ | 可选 |
| callback | 回掉函数 | 可选 |
实例
$("button").click(function() {
$("p").animate({
left: "250px",
opacity: "0.5",
height: "150px",
width: "150px"
});
});停止动画
$(selector).stop(stopAll, goToEnd);| 参数 | 说明 | 是否必须 |
|---|---|---|
| stopAll | 是否应该清除动画队列，默认是 false | 可选 |
| goToEnd | 是否立即完成当前动画 | 可选 |
jQuery 链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上，浏览器就不必多次查找相同的元素。
$("#p1")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);
// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动jQuery HTML
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
获取内容和属性
获取内容
获取属性
// 获取属性
$('#test').attr('href'）
// 设置属性
$('#test').attr('href','http://www.baidu.com')
$('#test').attr({
href: 'http://www.baidu.com',
title: '百度'
})
// 回掉函数
$('#test').attr('href', function(i, origValue){
// i 被选元素列表中当前元素的下标
// origValue 原始值
return origValue + '/jquery'
})添加删除元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素
$('p').remove('.italic')获取并设置 css 类
// 返回样式属性
$("p").css("background-color");
// 设置样式属性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });尺寸方法
元素遍历
祖先元素：
$(document).ready(function() {
// p > ul > li > span
$("span").parentsUntil("p");
// 返回 ul 和 li
});后代元素：
$(document).ready(function() {
$("p").find("span");
});同胞元素：
元素过滤：
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！