首先jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action() 定义,选择,执行
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){ // 开始写 jQuery 代码... })
;
简写:
$(function(){ // 开始写 jQuery 代码...})
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
例如:
简写:
$(function(){ // 开始写 jQuery 代码...})
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
例如:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
jQuery 选择器
元素选择器 $("p")#id 选择器 $("#test")
类选择器...
jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$("p").click(function(){ // 动作触发后执行的代码!!});
实例:单击隐藏
实例:单击隐藏
$("p").click(function(){ $(this).hide();});
综上完整示例:
<script>
$(function(){//加载完文档后执行
$("p").click(function(){//单击p元素后触发函数
$(this).hide();//隐藏当前p标签
})
<p>点我就隐藏</p>
})
</script>
综上完整示例:
<script>
$(function(){//加载完文档后执行
$("p").click(function(){//单击p元素后触发函数
$(this).hide();//隐藏当前p标签
})
<p>点我就隐藏</p>
})
</script>