本篇文章给大家带来的内容是关于jQuery方法的总结（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
jQuery 简介
jquery 是一个轻量级操作 dom 的 js 库，主要包含以下功能：
HTML 元素选取和操作
HTML 事件函数
HTML DOM 遍历和修改
CSS 操作
JavaScript 特效和动画
AJAX
基于 jQuery 的插件
jQuery 的优势在于兼容于所有主流浏览器, 包括 Internet Explorer 6!
jQuery 语法
$(selector).action()
文档加载就绪事件
$(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 事件
鼠标事件 键盘事件 表单事件 文档/窗口事件clickkeypresssubmitloaddbclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave
blurunloadhover
常用的 jQuery 事件方法
click() 点击事件dbclick() 双击事件mouseenter() 鼠标穿过元素事件mouseleave() 鼠标离开元素事件mousedown() 鼠标移动到元素上方按下鼠标事件mouseup() 鼠标按住移动到元素上方松开鼠标事件hover() 鼠标悬停事件focus() 表单元素聚焦事件blur() 表单元素失去焦点事件submit() 表单提交事件change() 表单元素值改变事件keypress() 键盘键按住事件keydown() 键盘键按下事件keyup() 键盘键松开事件load() 指定元素加载完成式执行事件 （1.8 版本后废弃）resize() 窗口大小改变事件scroll() 滚动监听事件
jQuery 效果
变量 说明$(selector).action(speed,callback)
selector选择器action事件speed速度，毫秒，也可以为‘slow’、‘fast‘callback回掉函数
显示隐藏
hide() 隐藏元素show() 显示元素toggle() 显示被隐藏的元素，隐藏已显示的元素
淡入淡出
fadeIn() 淡入fadeOut() 淡出fadeToggle() 已淡出的元素淡入，已淡入的元素淡出
fadeTo() 渐变为给定不透明度
$(selector).fadeTo(speed,opacity,callback);
opacity 值为 0 与 1 之间
滑动
slideDown() 向下滑动展开元素slideDown() 向上滑动收起元素slideToggle() 已展开元素上滑收起，已收起元素下滑展示
动画
参数 说明 是否必须$(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 相关的方法，这使访问和操作元素和属性变得很容易。
获取内容和属性
获取内容
text() 设置或返回所选元素的文本内容html() 设置或返回所选元素的内容（包括 HTML 标记）val() 设置或返回表单字段的值
获取属性
attr() 设置或者返回所选的属性的值
// 获取属性$('#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' })
登录后复制
添加删除元素
append() 在被选元素的结尾插入内容prepend() 在被选元素的开头插入内容after() 在被选元素之后插入内容before() 在被选元素之前插入内容
remove() 删除被选元素（及其子元素）empty() 从被选元素中删除子元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素
$(‘p’).remove(‘.italic’)
获取并设置 css 类
addClass() 向被选元素添加一个或多个类removeClass() 从被选元素删除一个或多个类toggleClass() 对被选元素进行添加/删除类的切换操作css() 设置或返回样式属性
// 返回样式属性$("p").css("background-color");// 设置样式属性$("p").css("background-color", "yellow");// 或者$("p").css({ "background-color": "yellow", "font-size": "200%" });
登录后复制
尺寸方法
width() 元素宽度height() 元素高度innerWidth() 包含 padding 宽度innerHeight() 包含 padding 高度outerWidth() 包含 padding、border 宽度outerHeight() 包含 padding、border 高度outerWidth(true) 包含 padding、border、margin 宽度outerHeight(true) 包含 padding、border、margin 高度
元素遍历
祖先元素：
parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function() { // p > ul > li > span $("span").parentsUntil("p"); // 返回 ul 和 li});
登录后复制
后代元素：
children() 返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(document).ready(function() { $("p").find("span");});
登录后复制
同胞元素：
siblings() 返回被选元素的所有同胞元素。next() 返回被选元素的下一个同胞元素。nextAll() 返回被选元素的所有跟随的同胞元素。nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。prev() 返回被选元素的上一个同胞元素。prevAll() 返回被选元素之前的所有的同胞元素。prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。
元素过滤：
first() 返回被选元素的首个元素。last() 返回被选元素的最后一个元素。eq() 返回被选元素中带有指定索引号的元素。filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。not() 方法返回不匹配标准的所有元素。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！
以上就是jQuery方法的总结（附示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2732226.html
