jQuery 库可以通过一行简单的标记被添加到网页中。
需要具备的基础知识
在开始学习 jQuery 之前,我们应该对以下知识有基本的了解:
- HTML
- CSS
- JavaScript
什么是 jQuery ?
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。
jQuery 库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示: 除此之外,jQuery 还提供了大量的插件。
目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库,而且提供了大量的扩展。
很多大公司都在使用 jQuery, 例如:
- Microsoft
- IBM
- Netflix
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide()
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() - 使用参数
过滤元素并移除