jQuery是一个JavaScript函数库。
JQuery的基本语法
参考:http://www.runoob.com/jquery/jquery-syntax.html
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
举例:
$(document).ready(function(){
//alert("文档加载完毕");
$("p").click(function(){
$(this).hide(); //当点击事件触发后,将p元素中的内容隐藏
})
});
对应的html文件:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<!-- app必须在jquery之下,因为其依赖于jquery-->
<script src="js/app.js"></script>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</body>
</html>
2 JQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
实例:
$(document).ready(function(){
$("button").click(function(){
$("p").text("p被修改");
$("#pid").text("P2也被修改");
$(".p3").text("p3被修改");
});
});
对应的html;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/app1.js"></script>
</head>
<body>
<p>p1</p>
<p id="pid">p2</p>
<p class="p3">p3</p>
<button>click me</button>
</body>
</html>
3. JQuery事件
参考:http://www.runoob.com/jquery/jquery-events.html
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
$(document).ready(function(){
$("button").dblclick(function(){
$(this).hide();
});
});
4. 绑定事件和解除绑定事件:
$(document).ready(function(){
//添加绑定
$("#clickme").bind("click",clickHander);
$("#clickme").bind("click",clickHander2);
//解除绑定
$("#clickme").unbind("click", clickHander);
});
function clickHander(e){
console.log("clickhander");
}
function clickHander2(e){
console.log("clickhander2");
}
jquery1.7之后可以用on/off方法代替:
$(document).ready(function(){
//添加绑定
$("#clickme").on("click",clickHander);
$("#clickme").on("click",clickHander2);
//解除绑定
$("#clickme").off("click", clickHander);
});
5 时间的目标和时间的冒泡
$(document).ready(function(){
$("body").bind("click", bodyHandler);
$("div").bind("click", divHandler);
});
function bodyHandler(event){
console.log(event);
}
function divHandler(event){
console.log(event);
event.stopPropagation();
}