jQuery
jQuery简介
一个轻量级的JavaScript代码库,具有快速、简洁的特点。
封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
-
核心特性
- 具有独特的链式语法和短小清晰的多功能接口;
- 具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;
- 拥有便捷的插件扩展机制和丰富的插件。
-
版本支持
jQuery 2版本以上是不支持 IE6,7,8 浏览器
<!--[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.com 下载 jQuery 库,将下载的文件放在网页的同一目录下,就可以使用jQuery。
有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的标签引用它:
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
- 从 CDN 中载入 jQuery
可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
也可以使用国内的CDN,如百度、又拍云、新浪
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
jQuery语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。
- 基础语法**$(selector).action()**
$(this).hide() | 隐藏当前元素 |
---|---|
$(“p”).hide() | 隐藏所有段落 |
$(“p .test”).hide() | 隐藏所有 class=“test” 的段落 |
$("#test").hide() | 隐藏所有 id=“test” 的元素 |
- 为了防止文档在完全加载(就绪)之前运行 jQuery 代码
$(document).ready(function(){
// 开始写 jQuery 代码...
});
//也可以使用以下写法
$(function(){
// 开始写 jQuery 代码...
});
jQuery选择器
基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
所有选择器都以美元符号开头:$()。
- 元素选择器
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
- #id选择器
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
- .class选择器
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
- CSS选择器
$("p").css("background-color","red");
//改变 HTML 元素的 CSS 属性
- 实例
$(“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事件
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
- 常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
- 常用的jQuery事件
方法 | 触发条件 |
---|---|
$(document).ready() | 文档加载完毕 |
click() | 鼠标单击元素 |
dblclick() | 鼠标双击元素 |
mouseenter() | 鼠标指针穿过元素 |
mouseleave() | 鼠标指针离开元素 |
mousedown() | 鼠标指针移动到元素上方,并按下鼠标按键 |
mouseup() | 在元素上松开鼠标按钮 |
hover() | 模拟光标悬停事件 |
focus() | 元素获得焦点(通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点) |
blur() | 元素失去焦点 |
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
//当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
-
比较keypress、keydown与keyup
-
- keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
-
- keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
-
- keyup:用户松开某一个按键时触发,与keydown相对,返回键盘代码.
jQuery DOM操作
-
获取内容
-
- text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
-
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
-
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
- 获取属性
$("button").click(function(){
alert($("#w3s").attr("href"));
});
- 设置内容
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
- 设置属性
$("button").click(function(){
$("#w3s").attr("href","//www.w3cschool.cn/jquery");
});
//允许设置多个属性值
$("button").click(function(){
$("#w3s").attr({
"href" : "//www.w3cschool.cn/jquery",
"title" : "jQuery 教程"
});
});
attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法:
$("button").click(function(){
$("#w3cschool").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
-
添加元素
-
- append() 方法在被选元素的结尾插入内容。
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<li>追加列表项</li>");
});
});
-
- prepend() 方法在被选元素的开头插入内容。
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
-
- 添加若干元素
function appendText()
{
var txt1="<p>Text.</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("Text."); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("p").append(txt1,txt2,txt3); // 追加新元素
}
-
- after() 方法在被选元素之后插入内容。
- before() 方法在被选元素之前插入内容。
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
-
删除元素
-
- remove() 方法删除被选元素及其子元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
$("p").remove(".italic");
//允许对要删除的元素进行过滤
});
});
-
- empty() 方法删除被选元素的子元素
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
//只删除子元素
});
});
jQuery CSS操作
- 添加class属性,addClass()方法
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important blue");
//添加多个类
});
- 删除class属性,removeClass()方法
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
- 添加/删除class属性,toggleClass()方法
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
//已经有blue属性则删除,没有则添加
});
});
-
- 语法:$(selector).toggleClass(classname,function(index,currentclass),switch)
参数 | 描述 |
---|---|
classname | 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。 |
function*(index,currentclass)* | 可选。规定返回需要添加/删除的一个或多个类名的函数。index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。 |
switch | 可选。布尔值,规定是否仅仅添加(true)或移除(false)类。 |
- 获取CSS属性
<script>
$(document).ready(function(){
$("button").click(function(){
alert("背景颜色 = " + $("p").css("background-color"));
});
});
</script>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
- 修改CSS属性
$("p").css("background-color","yellow");
//设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery Size操作
-
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
-
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
-
innerWidth() 方法返回元素的宽度(包括内边距)。
-
innerHeight() 方法返回元素的高度(包括内边距)。
-
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
-
outerHeight() 方法返回元素的高度(包括内边距和边框)。
jQuery 效果
- 隐藏和显示
-
- hide(),隐藏
- show(),显示
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
//语法:
$(selector).hide(speed,callback); //speed 参数单位毫秒,规定隐藏/显示的速度
$(selector).show(speed,callback); //callback 参数是隐藏或显示完成后所执行的函数名称。
//使用 toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
$("p").toggle();
});
//语法
$(selector).toggle(speed,callback);
-
淡入淡出
-
-
fadeIn(),淡入
-
fadeOut(),淡出
-
fadeToggle(),切换淡入淡出
-
fadeTo(),给与一定的不透明度
-
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
//speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
//opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
-
滑动
-
- slideDown(),向下滑动
- slideUp(),向上滑动
- slideToggle(),切换滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
-
动画
-
- 创建自定义动画,animate()
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
//默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
//如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
//同时操作多个属性
//当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,如使用 paddingLeft 而不是 padding-left
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
//定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
//编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列,然后逐一运行这些 animate 调用
-
- 停止动画,stop()
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
//stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//goToEnd 参数规定是否立即完成当前动画。默认是 false。
jQuery Callback
由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加 Callback 函数。
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
//在隐藏效果完全实现后回调函数
jQuery Chaining
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动
jQuery遍历
jQuery 提供了多种遍历 DOM的方法。
遍历方法中最大的种类是树遍历(tree-traversal)
- 向上遍历
$(document).ready(function(){
$("span").parent();//返回每个 <span> 元素的的直接父元素
$("span").parents();//返回所有 <span> 元素的所有祖先
$("span").parents("ul"); //返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素
$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素
});
- 向下遍历
$(document).ready(function(){
$("div").children();//返回每个 <div> 元素的所有直接子元素
$("div").children("p.1");//返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
$("div").find("span");//返回属于 <div> 后代的所有 <span> 元素
});
- 水平遍历
$(document).ready(function(){
$("h2").siblings();//返回 <h2> 的所有同胞元素
$("h2").next();//返回 <h2> 的下一个同胞元素
$("h2").nextAll();//返回 <h2> 的所有之后的同胞元素
$("h2").nextUntil("h6")//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$("h2").prev();//返回 <h2> 的上一个同胞元素
$("h2").prevAll();//返回 <h2> 的所有之前的同胞元素
$("h6").prevUntil("h2")//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
});
- 过滤遍历
$(document).ready(function(){
$("div p").first();
$("div p").last();
$("p").eq(1);//返回被选元素中带有指定索引号的元素,索引号从0开始
$("p").filter(".intro");//返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro");//返回不带有类名 "intro" 的所有 <p> 元素
});
jQuery Ajax
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
- load() 方法从服务器加载数据,并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
//必需的 URL 参数规定您希望加载的 URL。
//可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
//可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt");
//可以把 jQuery 选择器添加到 URL 参数
$("#div1").load("demo_test.txt #p1");
//把id="p1" 的元素的内容,加载到指定的 <div> 元素中
//回调函数可以设置不同的参数:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
//responseTxt - 包含调用成功时的结果内容
//statusTXT - 包含调用的状态
//xhr - 包含 XMLHttpRequest 对象
//在jQuery的load()方法中,无论AJAX请求是否成功,一旦请求完成(complete)后,回调函数(callback)立即被触发。
- get()和post()方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
GET 基本上用于从服务器获得(取回)数据。注:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
$.get(URL,callback);
//必需的 URL 参数规定您希望请求的 URL。
//可选的 callback 参数是请求成功后所执行的函数名。
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
//第一个回调参数data存有被请求页面的内容,第二个回调参数status存有请求的状态。
$.post(URL,data,callback);
//必需的 URL 参数规定您希望请求的 URL。
//可选的 data 参数规定连同请求发送的数据。
//可选的 callback 参数是请求成功后所执行的函数名。
$("button").click(function(){
$.post("demo_test_post.html",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
//第一个参数是我们希望请求的 URL ("demo_test_post.php")。
//然后我们连同请求(name 和 city)一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '';
echo 'Dear ' . $name;
echo 'Hope you live well in ' . $city;
?>