什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示: 除此之外,Jquery还提供了大量的插件。
jQuery 版本 2 以上不支持 IE6,7,8 浏览器。
如果需要支持 IE6/7/8,那么请选择1.9
可以通过条件注释在使用 IE6/7/8 时只包含进1.9。
<!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]-->
网页中添加 jQuery
有两个版本的 jQuery 可供下载:(从 jquery.com 下载 jQuery 库)
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
<head> <script src="jquery-1.10.2.min.js"></script> </head>
如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。
例:百度 CDN:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
基础语法: $(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 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
(1) 元素选择器——基于元素名选取元素
例:用户点击按钮后,所有 <p> 元素都隐藏:
$(document).ready(function(){ $("buttom").click(function(){ $("p").hide(); }); })
(2) #id 选择器——通过 HTML 元素的 id 属性选取指定的元素( id 是唯一的)
例:用户点击按钮后所有带有 id="test" 属性的元素都隐藏:
$(document).ready(function(){ $("buttom").click(function(){ $("#test").hide(); }); })
(3) #id 选择器——通过 HTML 元素的class属性选取指定的一或多个元素(class可以多个)
例:用户点击按钮后所有带有 class="test" 属性的元素都隐藏:
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
$("*") $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") | 选取所有元素 |
独立文件中使用 jQuery 函数
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见 DOM 事件:
鼠标事件:click单击\dblclick双击\mouseenter鼠标指针穿过元素\mouseleave鼠标指针离开元素
键盘事件:keypress\keydown\keyup
表单事件:submit\change\focus元素获得焦点\blur元素失去焦点
文档窗口事件:load\resize\scroll\unload
jQuery 事件方法语法
1.页面中指定一个点击事件:$("p").click();
2.下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$("p").click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法
(1)$(document).ready():允许我们在文档完全加载完后执行函数
(2)click():当按钮点击事件被触发时会调用一个函数
例:当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:
<script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>
(3)dblclick():当双击元素时,会发生 dblclick 事件
例:当双击某个 <p> 元素时,触发事件,隐藏当前的 <p> 元素:
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); });
(4)mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件
例:鼠标移到了 id="p1" 的元素上,会看到弹窗“提示:您的鼠标移到了 id="p1" 的元素上!”
$(document).ready(function(){ $("#p1").mouseenter(function(){ alert('提示:您的鼠标移到了 id="p1" 的元素上!'); }); });
(5)mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件
例:鼠标离开 id="p1" 的元素,会看到弹窗“提示:再见,您的鼠标离开了该段落。”
$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("再见,您的鼠标离开了该段落。"); }); });
(6)mousedown():当鼠标移动到元素上方,并按下鼠标按键时,会发生mousedown事件
例:当鼠标在 id="p1" 的元素上并按下鼠标按键时,会看到弹窗“提示:鼠标在段落上按下。”
$(document).ready(function(){ $("#p1").mousedown(function(){ alert("鼠标在段落上按下。"); }); });
(7)mouseup():当在元素上松开鼠标按钮时,会发生mouseup事件
例:在 id="p1" 的元素上松开鼠标按钮时,会看到弹窗“提示:鼠标在段落上松开。”
$(document).ready(function(){ $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); });
(8)hover():用于模拟光标悬停事件
例:当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave);
$(document).ready(function(){ $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ) });
(9)focus():当元素获得焦点时,发生 focus 事件。blur():当元素失去焦点时,发生 blur 事件。
注:当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); });
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">