jQuery
- 什么是jQuery
1. 是一个JavaScript函数库
2. 是一个轻量级的“写得少,做的多的”JavaScript
3. 其功能包括有:
- HTML 元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- AJAX
- Utilities
- 还有部分插件 - jQuery使用方式
1. 从 jquery.com 下载 jQuery 库
2. 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
Production version - 用于实际的网站中,已被精简和压缩。
Development version - 用于测试和开发(未压缩,是可读的代码)
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
从 CDN 中载入
1.Staticfile CDN:
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
2.百度 CDN:
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
3.又拍云 CDN:
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>
4.新浪 CDN:
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
5.Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
6.Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">
</script>
</head>
jQuery 语法
**基础语法**: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
入口函数
1.原始方式
$(document).ready(function(){
// 开始写 jQuery 代码...
});
2.简略方式
$(document).ready(function(){
// 开始写 jQuery 代码...
});
- jQuery 入口函数与 JavaScript 入口函数的区别:
1. jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
2. JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
jQuery选择器
- jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。
- 元素选择器
- jQuery 元素选择器基于元素名选取元素。
-$("p")
:在页面中选取所有< p>元素
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
- .class 选择器
- jQuery 类选择器可以通过指定的 class 查找元素
- 语法:$(".test")
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
- #id 选择器
- jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
- 语法:$("#test")
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(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> 元素 |
事件
- 鼠标事件
- click:单击事件,指单击元素时发生click事件,click()方法触发单击事件
- 语法:$(selector).click()
或$(selector).click(function)
(参数:function,描述: 可选。规定当 click 事件发生时运行的函数。)
- 实例:单击 < p> 元素时警报文本:$("p").click(function(){ alert("段落被点击了。"); });
- dblclick:双击事件,指双击元素时触发 dblclick 事件,dblclick() 方法触发 dblclick 事件
- 语法:$(selector).dblclick()
或$(selector).dblclick(function)
(参数:function,描述: 可选。规定当 dblclick 事件发生时运行的函数。)
- 实例:双击 < p> 元素时警报文本:$("p").dblclick(function(){ alert("这个段落被双击。"); });
- mouseenter:鼠标指针悬浮事件,指当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件,mouseenter() 方法触发 mouseenter 事件
- 语法:$(selector).mouseenter()
或$(selector).mouseenter(function)
(参数:function,描述: 可选。规定 mouseenter 事件触发时运行的函数)
- 实例:当鼠标指针进入 < p> 元素时,设置背景色为黄色:$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
- mouseleave:鼠标指针离开事件,指当鼠标指针离开被选元素时,会发生 mouseleave 事件,mouseleave() 方法触发 mouseleave 事件
- 语法:$(selector).mouseleave()
或$(selector).mouseleave(function)
(参数:function,描述: 可选。规定 mouseleave 事件触发时运行的函数)
- 实例:当鼠标指针离开 < p> 元素时,设置背景色为灰色:$("p").mouseleave(function(){ $("p").css("background-color","gray"); });
- hover :鼠标悬停事件,指鼠标指针在元素位置,会发生hover事件,hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数,方法触发 mouseenter 和 mouseleave 事件
- 语法:$(selector).hover(inFunction,outFunction)
(参数:inFunction,描述: 必需。规定 mouseenter 事件发生时运行的函数。 参数:outFunction。描述: 可选。规定 mouseleave 事件发生时运行的函数。 )
- 实例:当鼠标指针悬停在上面时,改变元素的背景颜色:
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
$( selector ).hover( handlerIn, handlerOut )
相当于
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
$(selector).hover(handlerInOut)
相当于
$( selector ).on( "mouseenter mouseleave", handlerInOut );
- 键盘事件
- keypress:键被按下事件,keypress() 方法触发 keypress 事件
- 语法:$(selector).keypress()
或$(selector).keypress(function)
(参数:function。描述:可选。规定 keypress 事件触发时运行的函数)
- 实例:计算在 字段内的按键次数:$("input").keypress(function(){ $("span").text(i+=1); });
- keydown :键按下的过程事件,keydown() 方法触发 keydown 事件
- 语法:$(selector).keydown()
或$(selector).keydown(function)
(参数:function。描述:可选。规定 keydown 事件触发时运行的函数)
- 实例:当键盘键被按下时,设置 < input> 字段的背景颜色:$("input").keydown(function(){ $("input").css("background-color","yellow"); });
- keyup:键被松开事件,keyup() 方法触发 keyup 事件
- 语法:$(selector).keyup()
或$(selector).keyup(function)
(参数:function。描述:可选。规定 keyup 事件触发时运行的函数。)
- 实例:当键盘键被松开时,设置 < input> 字段的背景颜色:$("input").keyup(function(){ $("input").css("background-color","pink"); });
event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下
实例:
返回哪个键盘键被按下:
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
- 表单事件
- submit:提交表单事件,submit() 方法触发 submit 事件,该事件只适用于 < form> 元素,当提交表单时,会发生 submit 事件
- 语法:$(selector).submit()
或$(selector).submit(function)
(参数:function。描述:可选。规定当 submit 事件被触发时运行的函数。)
- 实例:当提交表单时,显示警告框:$("form").submit(function(){ alert("提交"); });
event.preventDefault();:阻止表单被提交。
实例:$(document).ready(function(){ $("form").submit(function(event){ event.preventDefault(); alert("阻止表单提交"); }); });
- change:当元素的值改变时发生 change 事件(仅适用于表单字段),change() 方法触发 change 事件 注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。
- 语法:$(selector).change()
或$(selector).change(function)
(参数:function。描述:可选。规定针对被选元素当 change 事件发生时运行的函数。)
- 实例:当 < input> 字段改变时警报文本:$("input").change(function(){ alert("文本已被修改"); });
- **focus **:当元素获得焦点时(当通过鼠标点击选中元素或者通过tab键定位到元素时),发生foucs事件,focus() 方法触发 focus 事件
- 语法:$(selector).focus()
或$(selector).focus(function)
(参数:function。描述:可选。规定当 focus 事件发生时运行的函数。)
- 实例:添加函数到 focus 事件。当 < input> 字段获得焦点时发生 focus 事件在这里插入代码片$("input").focus(function(){ $("span").css("display","inline").fadeOut(2000); });
- blur:当元素失去焦点时发生blur事件,blur() 方法触发 blur 事件
- 语法:$(selector).blur()
或$(selector).blur(function)
(参数:function。描述:可选。规定当 blur 事件发生时运行的函数)
- 实例:添加函数到 blur 事件。当 < input> 字段失去焦点时发生 blur 事件:$("input").blur(function(){ alert("输入框失去了焦点"); });
- 文档/窗口事件
- load:当指定的元素加载时,会发生load事件。该事件适用于任何带有URL的元素(比如:图像、脚本、框架、内联框架)以及window对象。根据不同浏览器(Firefox和IE),如果图像已被缓存,则不会触发load事件。注意:还存在一个名为load()的jQuery AJAX方法。根据不同参数决定调用哪个方法( jQuery 版本 1.8 中已废弃。)
- 语法:$(selector).load(function)
(参数:function 。描述:必需。规定当指定元素加载完成时运行的函数。)
- 实例:当图像全部加载时警报文本:$("img").load(function(){ alert("图片已载入"); });
- resize:当调整浏览器大小时,发生resize事件。resize() 方法触发 resize 事件
- 语法:$(selector).resize()
或$(selector).resize(function)
(参数:function。描述:可选。规定当 resize 事件被触发时运行的函数。)
- 实例:对浏览器窗口调整大小进行计数:$(window).resize(function(){ $('span').text(x+=1); });
- scroll:事件适用于所有可滚动的元素和window对象(浏览器窗口)。scroll() 方法触发 scroll 事件
- 语法:$(selector).scroll()
或$(selector).scroll(function)
(参数:function。描述:可选。规定当 scroll 事件被触发时运行的函数。)
- 实例:对元素滚动的次数进行计数:$("div").scroll(function(){ $("span").text(x+=1); });
jQuery效果
- jQuery hide() 和 show() 方法来隐藏和显示 HTML 元素;Callback 函数在当前动画 100% 完成之后执行。
语法:$(selector).hide(speed,callback);
和$(selector).hide(speed,callback);
(可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒;可选的 callback 参数是隐藏或显示完成后所执行的函数名称。)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
</script>
</head>
<body>
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
</body>
第二个参数(linear)是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。
- jQuery toggle() 使用 toggle() 方法来切换 hide() 和 show() 方法
语法:$(selector).toggle(speed,callback);
(可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒;可选的 callback 参数是隐藏或显示完成后所执行的函数名称。)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
jQuery HTML
- 获得内容和设置内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
text() 和 html() 方法来获得内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
/val() 方法获得输入字段的值:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button>
</body>
</html>
/设置内容 - text()、html() 以及 val():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
});
</script>
</head>
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
- 获取属性和设置属性 - attr()
///atrr()获得属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>
/atrr()设置多个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
// 通过修改的 title 值来修改链接名称
title = $("#runoob").attr('title');
$("#runoob").html(title);
});
});
</script>
</head>
<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后,可以查看 href 和 title 是否变化。</p>
</body>
</html>
- prop()函数与attr()函数的区别
- prop()函数:
1. 如果有相应的属性,返回指定属性值。
2. 如果没有相应的属性,返回值是空字符串
- attr()函数:
1. 如果有相应的属性,返回指定属性值。
2. 如果没有相应的属性,返回值是 undefined。
- 在HTML中:
1. 元素本身就带有的固有属性,在处理时,使用prop方法。
2. 元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。
3. 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()。 - 添加新的 HTML 内容:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
/通过 append() 和 prepend() 方法添加若干新元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>
/通过 after() 和 before() 方法添加若干新元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
</script>
</head>
<body>
<img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>
- 删除元素/内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
//jQuery remove() 方法删除被选元素及其子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>移除div元素</button>
</body>
</html>
///jQuery empty() 方法删除被选元素的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>清空div元素</button>
</body>
</html>
///过滤被删除的元素,remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
</html>
- jQuery 尺寸方法
- width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
- height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
- innerWidth() 方法返回元素的宽度(包括内边距)。
- innerHeight() 方法返回元素的高度(包括内边距)。
- outerWidth() 方法返回元素的宽度(包括内边距和边框)。
- outerWidth() 方法返回元素的宽度(包括内边距和边框)。
/width() 和 height() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>";
txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>
</body>
</html>
/innerWidth() 和 innerHeight() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>
</body>
</html>
///outerWidth() 和 outerHeight() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>
</body>
</html>
- jQuery 元素标签的关系
标签家谱
jQuery AJAX
- AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。
方法 | 描述 |
---|---|
$.ajax() | 执行异步 AJAX 请求 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
$.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
$.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
$.param() | 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串) |
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
- $.ajax()
- 定义: ajax() 方法用于执行 AJAX(异步 HTTP)请求。
- 语法:$.ajax({name:value, name:value, ... })
参数
名称 | 值/描述 |
---|---|
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
dataType | 预期的服务器响应的数据类型。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。 |
data | 规定要发送到服务器的数据。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
async | 布尔值,表示请求是否异步处理。默认是 true。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
scriptCharset | 规定请求的字符集。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>
</body>
</html>
- $.get()
- 定义: $ .get() 方法使用 HTTP GET 请求从服务器加载数据。
- 语法:$.get(URL,data,function(data,status,xhr),dataType)
参数
参数 | 描述 |
---|---|
URL | 必需。规定您需要请求的 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。默认地,jQuery 会智能判断。 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>
- $.post()
- $ .post() 方法使用 HTTP POST 请求从服务器加载数据。
- 语法:$(selector).post(URL,data,function(data,status,xhr),dataType)
参数
参数 | 描述 |
---|---|
URL | 必需。规定将请求发送到哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。 默认地,jQuery 会智能判断。 |
实例
/使用 HTTP POST 请求从服务器加载数据:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>
///使用 AJAX 的 POST 请求来改变 <div> 元素的文本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
txt=$("input").val();
$.post("demo_ajax_gethint.php",{suggest:txt},function(result){
$("span").html(result);
});
});
});
</script>
</head>
<body>
<p>在以下输入框中输入名字:</p>
第一个名称:
<input type="text" />
<p>匹配项: <span></span></p>
<p>该实例的PHP代码 (<a href="demo_ajax_gethint.txt" target="_blank">demo_ajax_gethint</a>) </p>
</body>
</html>
- param()
- param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
- 语法:$.param(object,trad)
参数
参数 | 描述 |
---|---|
object | 必需。规定要序列化的数组或对象。 |
trad | 可选。布尔值,指定是否使用参数序列化的传统样式。 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body>
<button>序列化对象</button>
<div></div>
</body>
</html>
- load()
- 定义:load() 方法从服务器加载数据,并把返回的数据放置到指定的元素中。
- 语法:$(selector).load(url,data,function(response,status,xhr))
参数
参数 | 描述 |
---|---|
url | 必需。规定您需要加载的 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function | 可选。规定 load() 方法完成时运行的回调函数。 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
如何使用其他框架并与jQuery共存
- noConflict() 方法
- 定义:noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。
实例
通过全名替代简写的方式来使用 jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>
/noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>