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 事件
鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave
blur unload
hover
常用的 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 htmljquery 提供一系列与 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() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。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() 方法返回不匹配标准的所有元素。本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的jquery教程视频栏目！
以上就是jquery方法的总结（附示例）的详细内容。