什么是jQuery?
JQuery是JavaScript的函数库。
虽然网上有很多开源的JS框架,但目前JQuery是JS最流行的框架,且提供了大量的拓展。
包含以下功能
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML时间函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery的下载与安装
- 从https://jquery.com/download/下载 jQuery 库
- 从 CDN 中载入 jQuery
使用HTML的<scirpt>标签引用:
<head> <script src="jquery-1.10.2.min.js"></script> </head>
jQuery语法
基础语法: $(selector).action()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery入口函数:
Jquery入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
$(document).ready(function(){
// 执行代码
}); //添加函数到 $(document).ready(); 文档就绪事件 --> 该方法允许我们在文档完全加载完后执行函数
或者
$(function(){
// 执行代码
});
JavaScript入口函数:
window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
window.onload = function () { // 执行代码 }
jQuery选择器
jQuery选择器可以对HTML元素组或单个元素进行操作。
元素选择器
选取页面中所以<p>元素:$(P)
实例:
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
#id选择器
选取页面中id为test的元素:$("#test)
.class选择器
查找指定class的元素:$(.test)
更多实例:
$("*") 选取所有元素 $(this) 选取当前 HTML 元素 $("p.intro") 选取 class 为 intro 的 <p> 元素 $("p:first") 选取第一个 <p> 元素 $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 $("[href]") 选取带有 href 属性的元素 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even") 选取偶数位置的 <tr> 元素 $("tr:odd") 选取奇数位置的 <tr> 元素
jQuery事件
常见DMO事件
鼠标事件 click,dbclick,mouseenter,mouserleave,mouseup,mousedown,hover
键盘事件 keypress,keydown,keyup
表单事件 submit,change,focus,blur
文档/窗口事件 load,resize,scroll,unload
jQuery事件方法语法
大多DOM事件都有一个等效的jQuery方法。
$("p").click(function(){ // 动作触发后执行的代码!! });