jQuery 范例
你想增进 jQuery 技能吗 ？
那么下面这些范例绝对不能错过
jQuery 选择器
| 函数 | 说明 |
|---|---|
| $(this).hide() | 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素 |
| $("p").hide() | 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素 |
| $(".test").hide() | 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素 |
| $("#test").hide() | 演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素 |
jQuery 事件
| 函数 | 说明 |
|---|---|
| jQuery click() | 演示 jQuery jQuery click() 事件 |
| jQuery dblclick() | 演示 jQuery dblclick() 事件 |
| jQuery mouseenter() | 演示 jQuery mouseenter() 事件 |
| jQuery mouseleave() | 演示 jQuery mouseleave() 事件 |
| jQuery mousedown() | 演示 jQuery mousedown() 事件 |
| jQuery mouseup() | 演示 jQuery mouseup() 事件 |
| jQuery hover() | 演示 jQuery hover() 事件 |
| jQuery focus() 和 blur() | 演示 jQuery focus() 和 blur() 事件 |
jQuery 隐藏/显示
| 函数 | 说明 |
|---|---|
| jQuery hide() | 演示 jQuery hide() 方法 |
| jQuery hide() 和 show() | 演示 jQuery hide() 和 show() 方法 |
| jQuery toggle() | jQuery toggle() 用于切换 hide() 和 show() 方法 |
| jQuery hide() | 另外一个隐藏文本的实例 |
jQuery 淡入淡出
| 函数 | 说明 |
|---|---|
| jQuery fadeIn() | 演示 jQuery fadeIn() 方法 |
| jQuery fadeOut() | 演示 jQuery fadeOut() 方法 |
| jQuery fadeToggle() | 演示 jQuery fadeToggle() 方法 |
| jQuery fadeTo() | 演示 jQuery fadeTo() 方法 |
jQuery 滑动
| 函数 | 说明 |
|---|---|
| jQuery slideDown() | 演示 jQuery slideDown() 方法 |
| jQuery slideUp() | 演示 jQuery slideUp() 方法 |
| jQuery slideToggle() | 演示 jQuery slideToggle() 方法 |
jQuery 动画
| 函数 | 说明 |
|---|---|
| jQuery animate() | 演示简单的 jQuery animate() 方法 |
| jQuery animate() - 设置多个css属性 | 演示通过 jQuery animate() 方法 改变样式 |
| jQuery animate() - 使用相关值 | 演示如何在 jQuery animate() 方法中使用相关值 |
| jQuery animate() - 使用预定义值 | 演示通过 animate() 方法预定义 "hide", "show", "toggle" 值 |
| jQuery animate() | 演示更多 jQuery animate() 方法实例 |
| jQuery animate() | 演示更多 jQuery animate() 方法实例 (多个 animate() 回调). |
jQuery 停止动画
| 函数 | 说明 |
|---|---|
| jQuery stop() 滑动 | 演示 jQuery stop() 方法 |
| jQuery stop() 动画 (带参数) | 演示 jQuery stop() 方法 |
jQuery HTML 获取 和 属性
| 函数 | 说明 |
|---|---|
| jQuery text() 和 html() - 获取文本和内容 | 使用jQuery text() 和 html() 方法获取内容 |
| jQuery val() - 获取值 | 使用jQuery val() 方法获取表单的字段值 |
| jQuery attr() - 获取属性值 | 使用jQuery attr() 方法获取属性值 |
jQuery HTML 设置内容和属性
| 函数 | 说明 |
|---|---|
| jQuery text(), html(), 和 val() - 设置内容 | 使用 jQuery text(), html() 和 val() 方法设置内容 |
| jQuery text() 和 html() - 设置内容并使用回调函数 | 使用 text() 和 html() 设置内容并使用回调函数 |
| jQuery attr() - 设置属性值 | 使用 jQuery attr() 方法设置属性值 |
| jQuery attr() - 设置 多个属性值 | 使用jQuery attr() 方法设置多个属性值 |
| jQuery attr() - 设置属性值并使用回调函数 | 设置属性值 + 并使用回调函数调用attr(). |
jQuery HTML 添加元素/内容
| 函数 | 说明 |
|---|---|
| jQuery append() | 在选取元素的末尾添加内容 |
| jQuery prepend() | 在选取元素的开头添加内容 |
| jQuery append() -插入多个元素 | 创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM 添加在新元素文本后 |
| jQuery after() 和 before() | 在选取元素的前后添加 HTML 元素 |
| jQuery after() - 插入多个元素 | 创新新的 text/HTML 元素,jQuery和 JavaScript/DOM。在选取元素的末尾插入新元素 |
jQuery HTML 移除元素/内容
| 函数 | 说明 |
|---|---|
| jQuery remove() | 移除选取的元素 |
| jQuery empty() | 移除选取元素的所有子元素 |
| jQuery remove() - 使用参数 | 过滤元素并移除 |
jQuery Get 和 设置 CSS 类
| 函数 | 说明 |
|---|---|
| jQuery addClass() | 不同元素添加 class 属性 |
| jQuery addClass() - 多个类 | 使用 addClass() 方法添加多个类 |
| jQuery removeClass() | 移除指定元素的类 |
| jQuery toggleClass() | 在选取的元素切换（添加/删除）类 |
jQuery css() 方法
| 函数 | 说明 |
|---|---|
| jQuery css() - 返回 CSS 属性 | 返回第一个匹配元素的css属性值 |
| jQuery css() - 设置 CSS 属性 | 设置 所有配置元素指定的 CSS 属性 |
| jQuery css() - 设置 CSS 属性 | 设置多个匹配元素的 CSS 属性 |
jQuery 尺寸
| 函数 | 说明 |
|---|---|
| jQuery width() 和 height() | 返回指定元素的 width 和 height |
| jQuery innerWidth() 和 innerHeight() | 返回指定元素的 inner-width/height |
| jQuery outerWidth() 和 outerHeight() | 返回指定元素的 outer-width/height |
| jQuery outerWidth(true) 和 outerHeight(true) | 返回指定元素的 outer-width/height (包含外边框) |
| jQuery width() 和 height() of document 和 window | 返回 HTML 文档和窗口的 width 和 height |
| jQuery width() 和 height() | 设置指定元素的 width 和 height |
jQuery 遍历 - 祖先
| 函数 | 说明 |
|---|---|
| jQuery parent() | 演示 jQuery parent() 方法 |
| jQuery parents() | 演示 jQuery parents() 方法 |
| jQuery parentsUntil() | 演示 jQuery parentsUntil() 方法 |
jQuery 遍历 - 后代
| 函数 | 说明 |
|---|---|
| jQuery children() | 演示 jQuery children() 方法 |
| jQuery find() | 演示 jQuery find() 方法 |
jQuery 遍历 - 同胞(siblings)
| 函数 | 说明 |
|---|---|
| jQuery siblings() | 演示 jQuery siblings() 方法 |
| jQuery next() | 演示 jQuery next() 方法 |
| jQuery nextAll() | 演示 jQuery nextAll() 方法 |
| jQuery nextUntil() | 演示 jQuery nextUntil() 方法 |
jQuery AJAX load() 方法
| 函数 | 说明 |
|---|---|
| jQuery load() | 异步载入文件内容并插入到 <div> 元素中 |
| jQuery load() | 异步载入文件内容中指定的元素内容并插入到 <div> 元素 |
| jQuery load(callback) | 使用 jQuery load() 方法的回调函数 |
jQuery AJAX get() 和 post() 方法
| 函数 | 说明 |
|---|---|
| jQuery get() | 使用 $.get() 方法从服务端异步获取数据 |
| jQuery post() | 使用 $.post() 方法从服务端异步获取数据 |