您的位置：首页 > Web前端 > JQuery

JQuery学习笔记（1）

2015-08-25 09:29 537 查看

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();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航