JQuery
1. 简介
- 简化DOM操作，AJAX调用和Event处理
- 特点
- 处理DOM是容易的
- 多浏览器适配
2. JQuery安装
- 网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery。
- jquery.com 下载 jQuery 库。
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery。
- 有两个版本的 jQuery 可供下载。
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发(未压缩，是可读的代码)
- 下载 jQuery
- jQuery 库是一个 JavaScript 文件，可以使用 HTML 的
<script>标签引用它：
<head>
<script src = "jquery-1.10.2.min.js"></script>
</head>3. JQuery语法
- 选择HTML元素，并对选取的元素执行某些操作
- 选择器
.:class - 选择器
#:id
$(selector).action()
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素- 所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在完全加载 (就绪)之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。 如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
- 试图隐藏一个不存在的元素。
- 获得未完全加载的图像的大小。
$(document).ready(function(){
})4. JQuery事件
- 页面对不同访问者的响应叫做事件。
- 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 在元素上移动鼠标。
- 选取单选按钮。
- 点击元素。
4.1. $(document).ready()
- $(document).ready() 方法允许我们在文档完全加载完后执行函数。之前已经介绍过了。
4.2. click()
- click() 方法是当按钮点击事件被触发时会调用一个函数。 在下面的实例中，当点击事件在某个
<p>元素上触发时，隐藏当前的<p>元素。
$("p").click(function(){
$(this).hide();
})4.3. mousedown()
- 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下");
})4.4. mouseup()
- 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
$("#p1").mouseup(function(){
alert("鼠标在该段落上松开");
})4.5. hover()
- hover()方法用于模拟光标悬停事件。
$("#p1").hover{
function(){
alert("你进入了p1");
},
function(){
alert("你离开了p1");
}
}4.6. focus()
- 当元素获得焦点时，发生 focus 事件。
- 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){
$(this).css("background-color","#cccccc");//修改css
})4.7. blur()
- 当元素失去焦点时，发生 blur 事件。
- 点击了另一个元素
$("input").blur(function(){
$(this).css("background-color","#ffffff");//修改css
})4.8. 事件绑定
- 以绑定click为例
$().事件名(事件处理函数) 如： $("#d").click(function(){})
$().on("事件名",事件处理函数) 如：$("#d").on("click",function(){})
$().bind("事件名",事件处理函数) 如：$("#d").bind("click",function(){})4.9. 解除事件绑定
- 函数写在外面，才能通过名字绑定
$().unbind("事件名")
