jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
下面是一个简单的例子
<html>
<head><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//当鼠标停留在此段落时背景颜色将会变化
$("p").mouseover(function(){
$("p").css("background-color","yellow")
})
//将此段落的背景颜色设为红色
$("p").css("background-color","red")
//class为test的操作
$("p.test").hide();
//id为test的操作
$("#test").hide();
$("button").click(function(){
$("p").hide();
})
})
</script>
</head>
<body>
<h2>你好</h2>
<p>点击我会隐藏哦</p>
<!class為test的将会隐藏 -->
<p class="test">一開始我就隱藏</p>
<!id为test的将会隐藏 -->
<p id="test">一開始我就隱藏</p>
<button type="button">
hello!点击我!
</button>
</body>
</html>