jQuery
了解jQuery
jQuery是一个免费、开源的JavaScript库——也可将其称为框架,最初由John Resig开发,于2006年1月在BarCamp(NYC)会议上发布。现在,jQuery已发展成为一个开源项目,由jQuery基金(现在的JS基金)提供支持。jQuery UI以jQuery为基础,提供用于构建Web图形界面的UI组件。jQuery Mobile则是以jQuery为基础,用移动平台专用组件进行了扩展,用于移动应用开发。
1 jQuery主要功能
jQuery库主要提供下列功能。
• HTML元素选取:通过jQuery函数快速选择HTML页面中的一个或多个元素。
• HTML元素操作:控制HTML元素的外观和行为。
• CSS 操作:操作页面中的CSS样式单,为HTML元素添加或删除样式。
• HTML事件函数:处理HTML事件。
• 特效和动画:通过预定义的函数实现各种特效和动画。
• HTML DOM遍历和修改:调用函数实现HTML文档中DOM的遍历和修改。
• AJAX:调用函数完成AJAX请求,开发人员只需要关心如何处理响应结果。
• 各种工具函数。
2 jQuery主要特点
jQuery具有以下主要特点。
•1简洁
•jQuery库非常小,最新版的压缩库(jquery-3.2.min.js)只有85KB左右。
•2.功能强大
•传统JavaScript脚本编程方式,需要开发人员具备良好的程序设计功底,并熟练掌握HTML、CSS和DOM等各种Web开发技术。JavaScript脚本在客户端浏览器中解释执行,在大型Web应用中调试和维护JavaScript脚本往往会成为开发人员的噩梦。
•jQuery改变了传统的JavaScript编程方式,使用jQuery提供的函数,即可快速实现各种功能,代码更加简洁、结构清晰。
•3.兼容各种浏览器
•本书前面的章节回避了JavaScript的浏览器兼容问题,一是因为目前的各种浏览器对JavaScript的支持越来越全面,另一原因就是使用jQuery不需要考虑浏览器兼容问题。
jQuery具有良好的浏览器兼容能力,支持各种主流浏览器:Chrome、Edge、Firefox、IE、Safari和Opera等等。在http://jquery.com/browser-support可查看jQuery支持的各种桌面和移动浏览器,
jQuery资源
•jQuery主页http://jquery.com提供各种相关资源
2.1 下载jQuery
•在jQuery主页中单击“Download”链接,可进入jQuery下载页面http://jquery.com/download
2.2 查看jQuery文档
•在jQuery主页中单击“API Documentation”链接,可进入jQuery文档中心http://api.jquery.com
2.3 jQuery学习中心
•在jQuery主页右侧的资源列表中单击“jQuery Learning Center”链接,可进入jQuery学习中心页面http://learn.jquery.com
使用jQuery
要使用jQuery库,需要在HTML文件中将其引入。引入后,即可在脚本中调用jQuery库提供的各种函数。
引入jQuery
在HTML文件中使用
引入本地jQuery库
通常将jQuery库下载到本地,放在和HTML文件相同的文件夹中,或者放在本地Web服务器的指定文件夹中。对初学者而言,建议将jQuery库下载到本地,放在和HTML文件相同的文件夹中。然后,在HTML文件中使用下面的语句将其引入。
jquery-3.2.min.js是下载到本地的jQuery库文件名,该名称包含了版本号,“min”表示是压缩版的库文件。
引入CDN上的jQuery库
CDN(Content Delivery Network,内容分发网络)是互联网中免费提供文本、图片、脚本、应用程序或其他资源的网络服务器。通常,CDN只提供各类资源的稳定版本。
几个常用的CDN和其上的jQuery最新版本查询页面如下。
• jQuery CDN:https://code.jquery.com,jQuery 3.2.1引用地址为https://code.jquery.com/jquery-3.2.js。
• 微软CDN:https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0,jQuery 3.2.1引用地址为http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.min.js。
• 谷歌CDN:https://developers.google.com/speed/libraries/#jquery,jQuery 3.2.1引用地址为https://ajax.
googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js。
• 百度CDN:http://cdn.code.baidu.com,jQuery 2.4引用地址为http://apps.bdimg.com/
libs/jquery/2.4/jquery.min.js。
例如,下面的语句从jQuery CDN引入压缩版的jQuery库。
<script src="https://code.jquery.com/jquery-3.2.js"></script>
jQuery()函数
jQuery()函数是jQuery库中最重要的一个函数,大多数jQuery脚本均从jQuery()函数开始。
$是jQuery的别名,绝大多数开发人员喜欢使用$()而不是jQuery()。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
1.0jquery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象
jQuery对象实际上就是DOM对象的一个集合
1.1 匹配HTML标记
•jQuery()函数的第一个参数有多种形式:字符串形式的CSS选择器、字符串形式的HTML标记、一个或多个DOM元素或者是一个函数调用(包括匿名函数)。
•jQuery()函数返回一个jQuery对象,该对象封装了参数匹配的HTML标记或者是新建的HTML标记。如果有多个匹配的HTML标记,则返回对象是一个jQuery对象数组。对jQuery对象执行的操作将作用于其包含的所有标记。
1.2 上下文
•jQuery()函数的第二个参数指定上下文——HTML标记的选择范围。如果没有指定上下文,则在整个HTML文档中寻找选择标记。
例:选择<div>标记内部的<p>标记。
…
<script>
$(document).ready(function () {
var ps = $('p','div') //返回<div>标记内部的<p>标记
…
})
</script>
1.3 使用$(document).ready()
将所有jQuery脚本放在$(document).ready()回调函数中,jQuery也推荐这种做法。例1和例2也是这样。不同浏览器构建DOM有所区别,如果HTML文档的DOM还未构造完成就访问DOM结点,这会导致脚本出错。ready()函数在浏览器构建完DOM之后才调用,从而保证脚本正确执行。
jQuery提供了多种调用ready()函数的方式。
• $(回调函数)
• $(document).ready(回调函数)
• $(“document”).ready(回调函数)
• $(“img”).ready(回调函数)
• $().ready(回调函数)
jQuery 3.x推荐使用第1种方法,其他方法仍可使用但已过时。参数“回调函数”可以是函数名称,也可以是一个匿名函数。
法一:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
法二:提示:简洁写法(与以上写法效果相同)
$(function(){
// 开始写 jQuery 代码...
});
1.4 封装现有标记
将现有标记作为参数时,jQuery()函数可将其封装为jQuery对象。
1.5 使用链接方法调用
jQuery中的大部分方法都会返回其操作的jQuery对象,所以可使用句点符号来实现链接方法调用,使代码更简洁、紧凑。
…
<body>
<div>原始数据</div>
<script>
$(function () {
$('div').append('<br>第2行')
.css({ color: "red" })
.append('<br>')
.append('第3行')
})
</script>
1.6 jQuery命名空间
jQuery引入了命名空间的概念。jQuery脚本中的所有全局变量均属于jQuery命名空间,jQuery和$均表示jQuery命名空间。
在与其他JavaScript库使用时,可能会出现$标识符冲突的情况。jQuery提供了noConflict()方法用于避免冲突。noConflict()方法返回全局jQuery对象,可将其赋值给一个变量,然后用该变量来代替$标识符。
例:使用变量代替$标识符
…
<body>
<script>
var $j = jQuery.noConflict();
$j(function () { alert('页面中的<script>标记个数:' + $j('script').length) })
</script>
1.基础选择器
基础选择器包括ID选择器、类名选择器、元素选择器、复合选择器和通配符选择器等。
1.1ID选择器
ID选择器利用HTML元素的id属性值来选择元素,其基本格式为:
•$("#id属性值")
例:使用ID选择器。
…
<body>
<div class="tgdiv">第一个DIV元素</div><div id="tgdiv">第二个DIV元素</div>
<script>
$(function () { alert($('#tgdiv').text()) }) //用对话框显示<div>文本
</script>
1.2类名选择器
类名选择器利用HTML元素的class属性值来选择元素,其基本格式为:
•$(".class属性值")
…
<body>
<div class="tgdiv">第一个DIV元素</div> <div id="tgdiv">第二个DIV元素</div>
<script>
$(function () {alert($('.tgdiv').text()) }) //用对话框显示<div>文本
</script>
1.3元素选择器
元素选择器使用HTML元素名称来匹配HTML元素,其基本格式为:
•$(“元素名称”)
…
<body>
<div class="tgdiv">第一个DIV元素</div><div id="tgdiv">第二个DIV元素</div>
<script>
$(function () { alert($('div').text()) })
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
</head>
1、在html中,可能存在多个相同的tag,所以通过tag选择到是一个数组
2、语法:$('tag')
<script>
$(function(){
var $ids=$('div');
console.log("length="+$ids.length);
$ids.text("welcome") //两个div的文本都被修改了
//如果只修改第一个div的文本
//$ids[0].text("welcome juqery") //$ids[0]得到的是一个dom元素,而不是jquery对象
//$ids[0].innerText="你好"
$($ids[0]).text("welcome juqery")
})
</script>
<body>
<div style="color:blue; font-size:12pt">Hello</div>
<div style="color:blue; font-size:12pt">jquery</div>
</body>
</html>
1.4复合选择器
复合选择器使用多个ID选择器、类名选择器或元素选择器的组合来匹配HTML元素,其基本格式为:
•$(“选择器1,选择器2,…”)
…
<body>
<div class="tgdiv">第一个DIV元素</div><div id="tgdiv">第二个DIV元素</div>
<script>
$(function () { alert( $('#tgdiv,.tgdiv').text()) })
</script>
1.5通配符选择器
*(星号)作为通配符选择器,用于选择页面中所有的HTML元素,其基本格式为:
•$("*")
…
<body>
<div class="tgdiv">第一个DIV元素</div><div id="tgdiv">第二个DIV元素</div>
<script>
$(function () {
all = $('*')
s=""
for (i = 0; i < all.length;i++)
s += (i+1) + "、" + all[i].nodeName+';'
alert("页面包含的HTML元素有:\n"+s)//用对话框显示<div>文本
})
</script>
例:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="tgdiv">第一个DIV元素</div><div id="tgdiv">第二个DIV元素</div>
<script>
$(function () {
all = $('*')
s=""
for (i = 0; i < all.length;i++)
s += (i+1) + "、" + all[i].nodeName+';'
alert("页面包含的HTML元素有:\n"+s)//用对话框显示<div>文本
})
</script>
</body>
</html>
结果为:
2.层级选择器
层级选择器根据页面中的HTML元素在DOM树中的位置关系来选择HTML元素。
2.1祖孙选择器
祖孙选择器基本格式为:
•$(“选择器1 选择器2”)
在DOM树中,“选择器2”匹配的元素是“选择器1”匹配元素的子孙结点。祖孙选择器返回“选择器2”匹配的HTML元素。
<div id="books1">脚本程序设计教材:
<ol id="s1">
<li id="s11">Python 3基础教程</li>
<li id="s12">JavaScript+jQuery教程</li>
<li id="s13">JavaScript教程</li>
</ol>
</div>
<div id="books2">程序设计教材:
<div id="books2">程序设计教材:
<ol><li>Java程序设计</li><li>C++程序设计</li></ol>
</div>
<script>
$(function () {alert("教材总数:"+$('div li').length) })
</script>
//结果:教材总数为:5
2.2父子选择器
父子选择器基本格式为:
•$(“选择器1>选择器2”)
父子选择器与祖孙选择器类似,只是“选择器2”匹配的元素是“选择器1”匹配元素直接子结点,选择器返回“选择器2”匹配的HTML元素。
…
<body>
<div id="books1">脚本程序设计教材:
<ol id="s1">
<li id="s11">Python 3基础教程</li>
<li id="s12">JavaScript+jQuery教程</li>
<li id="s13">JavaScript教程</li>
</ol>
</div>
<div id="books2">程序设计教材:
<ol><li>Java程序设计</li><li>C++程序设计</li></ol>
</div>
<script>
$(function () { alert($('#s1>li')[1].innerText) })
</script>
//结果为:JavaScript+jQuery教程
2.3相邻结点选择器
相邻结点选择器基本格式为:
$(“选择器1+选择器2”)
“选择器1”和“选择器2”匹配的元素在DOM树中父结点相同。“选择器2”匹配的结点为“选择器1”匹配的结点之后的第一个兄弟结点。
....
<div id="books1">脚本程序设计教材:
<ol id="s1">
<li id="s11">Python 3基础教程</li>
<li id="s12">JavaScript+jQuery教程</li>
<li id="s13">JavaScript教程</li>
</ol>
</div>
<script>
$(function () { alert($('#s11+li').text())})
</script>
</body>
//结果为:JavaScript+jQuery教程
2.4兄弟结点选择器
兄弟结点选择器的基本格式为:
$(“选择器1~选择器2”)
兄弟结点选择器与相邻结点选择器类似,“选择器2”匹配的结点为“选择器1”匹配的结点之后的所有兄弟结点。
....
<div id="books1">脚本程序设计教材:
<ol id="s1">
<li id="s11">Python 3基础教程</li>
<li id="s12">JavaScript+jQuery教程</li>
<li id="s13">JavaScript教程</li>
</ol>
</div>
<script>
$(function () { alert($('#s11~li').text())})
</script>
</body>
//结果为:JavaScript+jQuery教程JavaScript教程
3.过滤器
过滤器是在选择器之后用冒号分隔的筛选条件,对选择器匹配的元素进一步进行筛选。
3.1基础过滤器
常用基础过滤器如表所示。
过滤器 | 说明 |
---|---|
:animated | 正在执行动画的元素 |
:eq(n) | 索引值等于n的元素 |
:gt(n) | 索引值大于n的元素 |
:lt(n) | 索引值小于n的元素 |
:even | 索引值为偶数的元素 |
:odd | 索引值为奇数的元素 |
:first | 第一个元素 |
:last | 最后一个元素 |
:focus | 获得焦点的元素 |
:header | 所有标题元素(h1、h2、h3……等) |
:lang(语言代码) | lang属性值与指定语言代码相同的元素 |
**:not(选择器) ** | 与指定选择器不匹配的元素 |
3.2内容过滤器
过滤器 | 说明 |
---|---|
:contains(文本) | 内容包含指定文本的元素 |
:empty | 没有子结点的元素(包括文本结点) |
:has(选择器) | 选择器至少能够匹配一个元素,该元素为直接子结点或后代子结点 |
:parent | 所有父元素 |
3.3子元素过滤器
过滤器 | 说明 |
---|---|
:first-child | 选择第一个子元素。例如,$(“li:first-child”) |
:last-child | 选择最后一个子元素。例如,$(“li:last-child”) |
:only-child | 选择是其父结点的唯一子结点的元素。例如,$(“li:only-child”) |
:nth-child() | 选择符合参数指定规则的子元素,参数可以是索引值(最小值为1)、even(索引为偶数)、odd(索引为奇数)或者是“n”的等式。例如,3n表示3的倍数,3n+1表示3的倍数加1。例如,$(“li:nth-child(2n)”)选择偶数项 |
:nth-last-child() | 选择符合参数指定规则中的最后一个子元素,参数含义与:nth-child()相同。例如,$(“li:nth-last -child(2n)”)选择偶数项中的最后一项 |
:first-of-type | 选择相邻的多个相同类型HTML元素中的第一个子结点,该结点不一定是父结点的第一个子结点。例如,$(“li:first-of-type”) |
:last-of-type | 选择相邻的多个相同类型HTML元素中的最后一个子结点,该结点不一定是父结点的最后一个子结点。例如,$(“li:last-of-type”) |
:only-of-type | 选择的元素没有相同类型的兄弟结点。例如,button:only-of-type表示选择兄弟结点中唯一的button元素。例如,$("li: only-of-type ") |
:nth-of-type() | 选择符合参数指定规则的某类型子元素,参数含义与:nth-child()相同。例如,$(“li: nth-of-type(2n)”) |
:nth-last-of-type() | 选择符合参数指定规则的某类型子元素中的最后一个,参数含义与:nth-child()相同。例如,$(“li: nth-last-of-type(2n)”) |
3.4可见性过滤器
可见性过滤器通过元素的可见状态(显示或隐藏)来匹配元素,:visible过滤器匹配所有可见元素,:hidden过滤器匹配所有不可见元素。
<script>
$(function(){
$("tr:hidden").show();
//将下面display:none的元素显示出来
})
</script>
<body>
<table>
<thead>
<tr style="display: none;">
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>21</td>
</tr>
<tr>
<td>03</td>
<td>马三</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计3人</td>
</tr>
</tfoot>
</table>
</body>
3.5表单过滤器
过滤器 | 说明 |
---|---|
:button | 选择类型为button的元素 |
:checkbox | 选择类型为checkbox的元素 |
:checked | 选择所有选中的radio、checkbox或option |
:disabled | 选中状态为disabled的元素 |
:enabled | 选中状态为enabled的元素 |
:file | 选择类型为file的元素 |
:focus | 选择获得焦点的元素 |
:image | 选择类型为image的元素 |
:input | 选择所有的input、textarea、select和button元素 |
:password | 选择类型为password的元素 |
:radio | 选择类型为radio的元素 |
:reset | 选择类型为reset的元素 |
:selected | 选择选中的元素 |
:submit | 选择类型为submit的元素 |
:text | 选择类型为text的元素 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-caHvmi1r-1592477970932)(https://raw.githubusercontent.com/bakabakabeng/PicGoStore/master/img/image-20200617151558162.png)]
3.6属性过滤器
过滤器 | 说明 |
---|---|
[p|=“value”] | 选择的元素的p属性值等于value,或者以“value-”作为前缀 |
[p*=value] | 选择的元素的p属性值包含value |
[p~=value] | 选择的元素的p属性值包含单词value |
[p$=value] | 选择的元素的p属性值以value结尾 |
[p=value] | 选择的元素的p属性值等于value |
[p!=value] | 选择的元素的p属性值不等于value |
[p^=value] | 选择的元素的p属性值以字符串value开头 |
[p] | 选择的元素有p属性 |
[p=value] [p2=value2] | 通过多个属性过滤器来选择元素 |
DOM元素的查找
jquery元素操作
1 元素内容操作
jQuery提供的html()、text()、val()和attr()等方法用于访问元素内容。
1.1 html()和text()
html()方法类似传统DOM的innerHTML属性,用于读取或设置元素的HTML内容。text()方法类似传统DOM的innerText属性,用于读取或设置HTML元素的纯文本内容。方法指定参数时,参数设置为元素的新内容。
<div><b>人邮教材:</b><u>JavaScript基础教程</u></div>
<button id="btn1">用html()读内容</button>
<button id="btn2">用text()读内容</button>
<button id="btn3">用html()写内容</button>
<button id="btn4">用text()写内容</button>
<script>
$(function () {
$('#btn1').click(function () { alert($('div').html()) })
//结果图一
$('#btn2').click(function () { alert($('div').text()) })
//结果图二
$('#btn3').click(function () {
$('div').html('<a href="http://www.baidu.com/">百度</a>')
})
//结果图三
$('#btn4').click(function () {
$('div').text('<a href="http://www.baidu.com/">百度</a>')
})
//结果图四
})
</script>
代码视图:
图一:
图二:
图三:
图四:
1.2 val()
val()方法用于读取或设置表单字段的值,无参数时方法返回字段的值,有参数时将参数设置为字段值。
例:使用val()方法访问表单字段
<form><input type="text"/> </form>
<button id="btn1">读内容</button><button id="btn2">写内容</button>
<div id="show"></div>
<script>
$(function () {
$('#btn1').click(function () {$('div').text($(':text').val())})//读输入框内容
$('#btn2').click(function () {$(':text').val('请输入新内容') })//设置输入框内容
})
</script>
1.3 attr()
attr()方法在指定一个参数时,返回参数对应的元素属性值;同时指定第二个参数时,将设置指定属性的值。
例:使用attr()方法访问<img>元素src属性。
<img src="images/img0.jpg" width="200" height="100"/>
<button id="btn1">上一张</button> <button id="btn2">下一张</button>
<div id="show"></div>
<script>
n=0
$(function () {
$('#btn1').click(function () {
n--
if(n<0) n=5
$('img').attr('src', 'images/img' + n + '.jpg')//读输入框内容
$('#show').text($('img').attr('src')) })
$('#btn2').click(function () {
n++
if (n > 5) n = 0
$('img').attr('src', 'images/img' + n + '.jpg')//读输入框内容
$('#show').text($('img').attr('src')) })
})
</script>
2 插入结点
html()方法可将包含HTML元素的字符串作为当前结点内容。也可用jQuery提供的append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()和insertBefore()等方法向文档插入结点。
2.1 append()和appendTo()
•append()和appendTo()将添加的元素作为当前元素的最后一个子结点,方法基本格式如下。
$(选择器).append(参数1[,参数2]…)
$(参数).appendTo(选择器)
•选择器匹配的目标元素作为添加元素的父元素。若匹配多个元素,则同时为这些元素添加相同子结点。
•参数可以是HTML字符串、HTML元素、文本、数组或jQuery对象,也可以是返回这些内容的函数。append()方法提供多个参数时,同时添加多个子结点。
使用append()和appendTo()方法添加子结点
<div class="div1">顶层DIV1
<div class="div11">子元素11</div>
<div class="div11">子元素12</div>
</div>
<button id="btn1">append添加子元素</button>
<button id="btn2">appendTo添加子元素</button>
<script>
$(function (){
$('#btn1').click(function () { $('.div11').append('<b>append子元素</b>')})
//结果:图一
$('#btn2').click(function () { $('<b>appendTo子元</b>').appendTo('.div11') }) //结果:图二
})
</script>
代码视图:
图一:
图二:
2.2 prepend()和prependTo()
prepend()和prependTo()方法与append()和appendTo()方法类似,只是将添加的元素作为当前元素的第一个子结点,方法基本格式如下。
$(选择器). prepend(参数1[,参数2]…)
$(参数).prependTo(选择器)
使用prepend()和prependTo()方法添加子结点
<style>div{border:1px solid red;padding:1px;margin:1px}</style>
</head>
<body>
<div id="div1">顶层DIV1<div>div子元素</div></div>
<div id="div2">顶层DIV2<div>div子元素</div> </div>
<button id="btn1">prepend添加子元素</button>
<button id="btn2">prependTo添加子元素</button>
<script>
$(function () {
$('#btn1').click(function () {$('#div1').prepend('<div>prepend子元素</div>') })
//结果为:图一
$('#btn2').click(function () {$('<div>prependTo子元素</div>').prependTo('#div2') })
//结果为:图二
})
</script>
</body>
代码视图:
图一:
图二:
2.3 after()和insertAfter()
after()和insertAfter()方法将新结点作为兄弟结点添加到当前结点之后,方法基本格式如下。
$(选择器). after(参数1[,参数2]……)
$(参数). insertAfter(选择器)
使用after()和insertAfter()方法添加子结点
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>div{border:1px solid red;padding:1px;margin:1px}</style>
</head>
<body>
<div class="div1">顶层DIV1
<div class="div11">子元素11</div>
<div class="div11">子元素12</div>
</div>
<button id="btn1">after添加子元素</button><button id="btn2">insertAfter添加子元素</button>
<script>
$(function () {
$('#btn1').click(function () {$('.div11').after('<b>after子元素</b>') })
//结果:图一
$('#btn2').click(function () {$('<b>insertAfter子元素</b>').insertAfter('.div11') })
//结果:图二
})
</script>
</body>
代码视图:
图一:
图二:
2.4 before()和insertBefore()
before()和insertBefore()方法将新结点作为兄弟结点添加到当前结点之前,方法基本格式如下。
$(选择器). before(参数1[,参数2]……)
$(参数). insertBefore(选择器)
使用before()和insertBefore()方法添加子结点
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>div{border:1px solid red;padding:5px;margin:5px}</style>
</head>
<body>
<div class="div1">顶层DIV1
<div class="div11">子元素11</div>
<div class="div11">子元素12</div>
</div>
<button id="btn1">before添加子元素</button>
<button id="btn2">insertBefore添加子元素</button>
<script>
$(function () {
$('#btn1').click(function () {$('.div11').before('<b>before子元素</b>') })
//结果为:图一
$('#btn2').click(function () {$('<b>insertBefore子元素</b>').insertBefore('.div11') })
//结果为:图二
})
</script>
</body>
</html>
代码视图:
图一:
图二:
3 包装结点
包装结点指用指定HTML结构包装现有元素,被包装元素成为结构的子节点。
3.1 wrap()方法
wrap()方法用指定HTML结构包装结点,参数可以是HTML字符串、选择器或者jQuery对象。匹配多个结点时,分别包装各个结点。
用wrap()方法包装页面中的<span>元素
…
<script src="jquery-3.2.1.min.js"></script>
<style>div { border: 1px solid red; padding: 5px; margin: 5px} </style>
</head>
<body>操作页面元素<span>百度</span>在线<span>JavaScript教程</span>
<button id="btn1">wrap元素</button>
<script>
$(function () { $('#btn1').click(function () {$('span').wrap('<div><b></b></div>') }) })
</script>
3.2 wrapAll()方法
wrapAll()方法将所有选中的结点包装在一个HTML结构中,参数可以是HTML字符串、选择器或者jQuery对象。
用wrapAll()方法包装页面中的<span>元素
…
<script src="jquery-3.2.1.min.js"></script>
<style>
div {border: 1px solid red; padding: 5px; margin: 5px}
</style>
</head>
<body>操作页面元素<span>百度</span>在线<span>JavaScript教程</span>
<button id="btn1">wrapAll元素</button>
<script>
$(function () { $('#btn1').click(function () {$('span').wrapAll('<div><b></b></div>') }) })
</script>
3.3 wrapInner()方法
wrapInner()方法用指定HTML结构包装选中结点的内部元素。
用wrapInner()方法包装页面中的<span>元素
…
<script src="jquery-3.2.1.min.js"></script>
<style>
div {border: 1px solid red; padding: 5px; margin: 5px}
</style>
</head>
<body>
操作页面元素<span>百度</span>在线<span>JavaScript教程</span>
<button id="btn1">wrapInner元素</button>
<script>
$(function () {
$('#btn1').click(function () { $('span').wrapInner('<div><b></b></div>') }) })
</script>
3.4 unwrap()方法
解除包装,即删除其父结点,原来的祖父结点成为其父结点。
用unwrap()方法解包页面中的<span>元素
…
<script src="jquery-3.2.1.min.js"></script>
<style>div {border: 1px solid red; padding: 1px; margin: 1px}</style>
</head>
<body>
操作页面元素<div><b><span>百度</span></b></div>在线
<div><b><span>JavaScript教程</span></b></div>
<button id="btn1">wrap元素</button>
<script>
$(function () {$('#btn1').click(function () {$('span').unwrap()})})
4 替换结点
使用jQuery提供的replaceWith()和replaceAll()方法可将页面中的元素替换为新的内容。
4.1 replaceWith()
replaceWith()方法用指定参数替换选中的结点,参数可以是HTML字符串、DOM元素、DOM元素数组或者jQuery对象。
用replaceWith ()方法替换元素。
<body>
操作页面元素
<span>百度</span>
在线
<span>JavaScript教程</span>
<button id="btn1">替换元素</button>
<script>
$(function () {
$('#btn1').click(function () {$('span').replaceWith('<B>新段落</B>') })
//结果为:图一
})
</script>
</body>
代码视图:
图一:
4.2 replaceAll()
replaceAll()和replaceWith()作用相同,但语法格式不同。replaceAll()将被替换对象作为方法参数,其语法基本格式为:
•$(参数).replaceAll(选择器)
•“参数”可以是HTML字符串、DOM元素、DOM元素数组或者jQuery对象。页面中“选择器”匹配的元素都会被“参数”替换。
修改上面例4.2,使用replaceAll ()方法完成替换
<script>
$(function () {
$('#btn1').click(function () {$('<B>新段落</B>').replaceAll('span') })
})
</script>
//结果与上图一样
5 删除结点
除了可用unwrap()方法删除父结点外,jQuery还提供了detach()、empty()和remove()等方法用于删除页面中的结点。
5.1 empty()
empty()方法删除匹配结点的全部子结点。
使用empty()方法删除子结点
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style> div {border: 1px solid red; padding: 5px; margin: 5px } </style>
</head>
<body>
<div class="c1">段落1</div>
<div class="c1"><div>段落2</div></div>
<button id="btn1">empty删除</button>
<script>
$(function () { $('#btn1').click(function () {$('.c1').empty()}) })
//结果为:图一
</script>
</body>
</html>
代码视图:
图一:
5.2 remove()
remove()方法删除匹配结点及其子结点。
使用remove ()方法删除子结点
将上面5.1例子中的“empty”替换为“remove
结果如下图所示:
5.3 detach()
detach()方法与remove()方法类似,但detach()方法可返回被删除的结点,以便将其重新插入页面或做他用。被删除的结点重新插入页面时,原有的数据和事件处理器保持不变。
使用detach()方法删除结点,并将其重新插入页面
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>
div {border: 1px solid red;padding: 5px;margin: 5px}
.c1.back{background-color:aqua}
</style>
</head>
<body>
<div id="out">使用detach()方法:
<div class="c1">段落1</div>
<hr />
<div class="c1"><div>段落2</div></div>
</div>
<button id="btn1">删除</button>
<button id="btn2">插入</button>
<span id="show"></span>
<script>
$(function () {
var obj
$('#btn1').click(function () { obj = $('.c1').detach() })
//结果:图一
$('#btn2').click(function () {
if (obj)
$('#show').append(obj)//将删除的结点重新插入页面
})
$('.c1').click(function () {$(this).toggleClass('back') }) //单击时切换背景
})
</script>
</body>
</html>
代码视图:
图一:
图二:
6 复制结点
clone()方法可用于复制结点,并可修改其内容。
使用clone()方法复制结点
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>
span {border: 1px solid red;padding: 5px;margin: 5px}
</style>
</head>
<body>
<span id="c1">文本</span>
<span id="out"></span>
<button id="btn1">复制结点</button>
<script>
$(function () {
var n=0
$('#btn1').click(function () {
obj = $('#c1').clone()
n++
obj.text(obj.text()+" 副本"+n)
$('#out').append(obj)
})
//结果为:图一
})
</script>
</body>
</html>
代码视图:
图一:
7 样式操作
在HTML文件中,CSS(Cascading Style Sheet,层叠样式表)用于格式化元素。jQuery提供了用于操作CSS的方法。
7.1 css()
css()方法可获取或设置CSS样式。
使用css()方法设置和查看元素CSS样式
<div>文本1</div>
<div>文本2</div>
<button id="btn1">设置样式</button>
<button id="btn2">查看样式</button>
<div id="out"></div>
<script>
$(function () {
$('#btn1').click(function () {
$('div:lt(2)').css({padding: "5px", margin: "5px" }) //为前两个div设置样式
$('div:lt(2)').css("border","1px solid red") //为前两个div设置样式
})
//结果为:图一
$('#btn2').click(function () {$('#out').text($('div').css("borderTopWidth")) })//获取样式
//结果为:图二
})
</script>
代码视图:
图一:
图二:
•本例中用到了css()方法设置样式的两种格式。第一种是用对象常亮作为参数。例如:
$(‘div:lt(2)’).css({padding: “5px”, margin: “5px” })
•这种格式中CSS样式属性名可直接使用,属性值必须为字符串。当属性名为多个单词组合时,可使用CSS样式名字符串,例如:{“background-color”:“red”};或者带大写的多单词格式,例如:{backgroundColor:“red”}。
•第二种格式用CSS样式属性名和属性值作为参数。例如:
$(‘div:lt(2)’).css(“border”,“1px solid red”)
•该语句中的border使用了CSS样式名称的简略写法,但在获取样式时不支持简略写法。所以本例在btn2按钮的click事件处理程序中,用了“$(‘div’).css(“borderTopWidth”)”来获取
•在获取样式时,css()方法只返回匹配的多个元素中的第一个元素的样式设置。
7.2 CSS类操作方法
jQuery提供了直接操作元素class属性的方法。
• addClass():添加类。
• removeClass():删除类。
• toggleClass():切换类。若元素无指定类,则为其添加该类;若有指定类,则将其删除。
使用CSS类操作方法
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>
.bp{border: 1px solid red;padding:5px}
.c{color:red}
.bc{background-color:aqua}
</style>
</head>
<body>
<span id="s1">文本1</span>
<span id="s2">文本2</span><br>
<button id="btn1">添加样式</button>
<button id="btn2">删除样式</button>
<button id="btn3">切换样式</button>
<script>
$(function () {
$('#btn1').click(function () { $('span').addClass("bp c") })//添加类
//结果:图一
$('#btn2').click(function () { $('span:last').removeClass("c") })//删除类
//结果:图二
$('#btn3').click(function () { $('span').toggleClass("bc") })//切换类
//结果:图三
})
</script>
</body>
</html>
代码视图:
图一:
图二:
图三:
第一次点击切换样式
第二次点击切换样式
jquery事件编程
1.jQuery事件对象
jQuery事件对象封装了浏览器差异,并按照W3C标准进行了规范和统一,确保在所有浏览器中采用统一的处理方法。
1.1 事件对象构造函数
jQuery的Event()构造函数用事件名称作为参数来创建事件对象。使用构造函数创建事件对象时,可不使用new关键字。例如:
var e1 = $.Event('click') //创建事件对象
var e2 = new $.Event('click') //创建事件对象
事件对象可作为trigger()方法的参数来触发事件。例如:
$('body').trigger(e1) //触发事件
1.2 事件对象属性
•事件对象封装了事件相关的所有信息,其常用属性如下。
• event.currentTarget:事件冒泡过程中的当前DOM结点。
• event.data:事件对象存储的附加数据。
• event.pageX,event.pageY:鼠标事件发生时,鼠标指针在浏览器窗口中的坐标。
• event.relatedTarget:和事件有关的其他DOM元素。例如,鼠标离开的对象。
• event.result:事件处理程序的最新返回值。
• event.target:最初发生事件的DOM元素。
• event.timeStamp:事件发生的时间戳,单位为毫秒。
• event.type:事件类型。
• event.which:在发生键盘事件时,属性返回按键的ASCII码。发生鼠标事件时,属性返回所按下的鼠标键(1表示左键,2表示右键)。
•jQuery将事件对象作为第一个参数传递给事件处理函数,在事件处理函数中通过它来访问事件对象属性。
1.3 事件对象方法
事件对象常用方法如下。
event.preventDefault():阻止事件默认行为。
event.stopImmediatePropagation():停止执行元素的所有事件处理函数,同时阻止事件冒泡。。
event.stopPropagation():阻止事件冒泡。
2.附加和解除事件处理函数
附加事件处理函数指将函数和事件关联起来,在发生事件时执行该函数来处理事件。解除事件处理函数则是解除函数和事件的关联关系。
Jquery事件处理方式
(1)on() 方法在被选元素及子元素上添加一个或多个事件处理程序。on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
现在建议使用on
常用语法:$(selector).on(eventname,function)
(2) one() 绑定事件,事件只能触发一次
(3) off() 取消事件
$('#img_01').click(function(){
console.log("你点击了图片。。。。。")
})
//one使用
$('#btn_01').one("click",function()
{
alert("利用one绑定事件")
})
$('#btn_02').one("click",function()
{
$('#img_01').off("click")
})
2.1 附加事件处理函数
on()方法用于为事件关联处理函数,早期的bind()方法已被弃用。on()方法基本语法格式如下。
$(‘selector’).on(‘eventname’,func)
$(‘selector’)为要附加事件处理函数的目标对象。eventname为事件名称,如click。func可以是函数名或者匿名函数。可以为元素的同一个事件附加多个处理函数。
2.2 解除事件处理函数
off()方法用于解除附加到元素事件的处理函数,其基本语法格式如下。
$(‘selector’).off(‘eventname’,func)
解除$(‘selector’)匹配元素的eventname事件附加的func函数。不带参数的off()方法解除匹配元素所有的事件处理函数。
3 事件快捷方法
jQuery提供了一系列事件快捷方法来处理事件处理函数。例如,click()方法可以为对象附加click事件处理函数,不带参数时则可触发click事件。
3.1 浏览器事件快捷方法
浏览器事件快捷方法如下。
• resize():带参数时,为对象附加resize事件处理函数。
• scroll():带参数时,为对象附加scroll事件处理函数。
3.2 表单事件快捷方法
表单事件快捷方法如下。
• blur():带参数时为对象附加blur事件处理函数。
• change():带参数时为对象附加change事件处理函数。
• focus():带参数时为对象附加focus事件处理函数。
• focusin():带参数时为对象附加focusin事件处理函数。
• focusout():带参数时为对象附加focusout事件处理函数。
• select():带参数时为对象附加select事件处理函数。
• submit():带参数时为对象附加submit事件处理函数。
无参数时的方法触发对象的对应事件。
3.3 键盘事件快捷方法
键盘事件快捷方法如下。
• keydown():带参数时附加keydown事件处理函数。
• keypress():带参数时附加keypress事件处理函数。
• keyup():带参数时附加keyup事件处理函数。
无参数时的方法触发对象的对应事件。
3.4 鼠标事件快捷方法
鼠标事件快捷方法如下。
• click():带参数时附加click事件处理函数。
• contextmenu():带参数时附加contextmenu事件处理函数。
• dblclick():带参数时附加dblclick事件处理函数。
• hover():只带一个参数时附加mouseleave事件处理函数。带两个参数时,第一个为mouseenter事件处理函数,第二个为mouseleave事件处理函数。
• mousedown():带参数时附加mousedown事件处理函数。
• mouseenter():带参数时附加mouseenter事件处理函数。
• mouseleave():带参数时附加mouseleave事件处理函数。
• mousemove():带参数时附加mousemove事件处理函数。
• mouseout():带参数时附加mouseout事件处理函数。
• mouseover():带参数时附加mouseover事件处理函数。
• mouseup():带参数时附加mouseup事件处理函数。
4.事件冒泡
<script>
// 一个页面中的多个dom如果呈现父子类关系,并且都绑定了事件,则会有事件冒泡的情况发生
// 事件冒泡的走向是由子节点向父节点去触发同名事件
// 事件捕获的走向是由父节点向子节点去触发同名事件 ,jquery不支持事件捕获
$(document).ready(function(){
$('#btn_01').on("click",function(){
console.log("我是按钮")
event.stopPropagation();
})
$('#div0').on("click",function(){
console.log("我是div")
})
})
</script>
<body>
<div style="width: 200px;height: 50px; background: blue;" id="div0">
<button id="btn_01">我是按钮</button>
</div>
</body>
jquery动画
1 简单特效
简单特效是利用jQuery提供的方法来实现元素的隐藏和显示,隐藏和显示的过程可具有动画特效。
1.1 隐藏元素
hide()方法用于隐藏元素,并可根据参数实现不同的动画效果。
1.直接隐藏
无参数的hide()方法直接隐藏元素,没有动画效果。
【例1】 单击隐藏图片。
<img width="200" height="80" src="images/用户.png" />
<script>
$(function () {
$('img').click(function () { $(this).hide() })
})
</script>
//结果:一点击图片就隐藏了,无动画
2.控制隐藏的快慢
可用3个字符串控制动画完成的快慢:“slow”、“normal"和"fast”,这适用于所有特效方法。为hide()方法提供参数后,会以动画的方式完成隐藏。
【例2】 慢速完成图片隐藏
为例1脚本中的hide()方法加上"slow"作为参数,即可以较慢的动画效果完成图片的隐藏。
…
$('img').click(function () { $(this).hide("slow") })
//结果:图片缓慢的隐藏,有动画效果(宽高都在缩小)
3.设置完成动作的时间
可为特效方法指定一个时间(单位为毫秒)作为参数,以限制完成动作的时间。
jQuery默认动作完成时间为400毫秒,'fast’为200毫秒,'normal’为默认的400毫秒,'slow’为600毫秒。
【例3】 按指定时间完成图片隐藏
为例1脚本中的hide()方法加上5000作为参数,在5秒内完成图片的隐藏。
…
$('img').click(function () { $(this).hide(5000) })//5秒内完成隐藏
…
4.指定完成函数
可以为hide()方法指定的一个函数,该函数在动作完成时执行,基本格式为:
•.hide(param1,func)
参数param1是表示动画快慢的字符串或完成时间。参数func为函数名或者匿名函数。
【例4】 完成图片隐藏,并显示完成提示
修改例1,在5秒内完成图片隐藏,然后显示文字。
.....
<img width="200" height="80" src="images/用户.png" />
<script>
$(function () {
$('img').click(function () { $(this).hide(5000, function () { //5秒内完成隐藏,然后显示文字
$('body').append('已完成图片的隐藏')})
})
})
</script>
.....
1.2 显示元素
show()方法与hide()方法作用刚好相反,用于将隐藏的元素显示出来。在不指定参数时,show()方法直接显示元素。也可通过指定完成动作的快慢、完成时间以及完成动作时的回调函数来显示元素。
【例5】 以多种方法完成图片显示。
<body>
<img width="200" height="80" src="images/用户.png" style="display:none" /><br>
<button id="btn1">直接显示</button>
<button id="btn2">slow显示</button>
<button id="btn3">5秒显示</button>
<button id="btn4">显示完成提示</button><br>
<button id="btn5">隐藏</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').show() }) //直接显示
$('#btn2').click(function () { $('img').show('slow') }) //慢动作完成显示
$('#btn3').click(function () { $('img').show(5000) }) //5秒内完成显示
$('#btn4').click(function () {
$('img').show(5000, function () { //5秒内完成显示,然后显示文字
$('body').prepend('<div>已完成图片的隐藏<div>')
})
})
$('#btn5').click(function () {
$('img').hide() //隐藏图片
$('div').remove() //删除显示的文字
})
})
</script>
</body>
1.3 隐藏/显示切换
toggle()方法兼具hide()和show()方法两者的功能,用法类似,可隐藏已显示的元素,或者显示已隐藏的元素。
【例6】 修改例5,将脚本中的show()方法替换为toggle()方法。
<img width="200" height="80" src="images/用户.png" style="display:none" /><br>
<button id="btn1">直接显示</button>
<button id="btn2">slow显示</button>
<button id="btn3">5秒显示</button>
<button id="btn4">显示完成提示</button><br>
<button id="btn5">隐藏</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').toggle() }) //直接切换
$('#btn2').click(function () { $('img').toggle('slow') }) //慢动作完成切换
$('#btn3').click(function () { $('img').toggle(5000) }) //5秒内完成切换
$('#btn4').click(function () {
$('img').toggle(5000, function () {//5秒内完成切换,然后显示对话框
alert('动作完成')
})
})
})
</script>
2 透明度特效
透明度特效通过改变元素的透明度来实现动画效果。
2.1 淡入效果
fadeIn()方法实现淡入效果,将透明元素的透明度从100减到0,即从不可见变为可见。
【例7】 图片淡入。
<img width="200" height="80" src="images/用户.png" style="display:none" /><br>
<button id="btn1">fadeIn</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').fadeIn(5000) })//5秒淡入
})
</script>
//结果:一开始图片大小位置显示出来,然后图片透明度变小,最后全部清晰显示出来
2.2 淡出效果
fadeOut()方法实现淡出效果,将可见元素的透明度从0增加到100,即从可见变为不可见。
【例8】 图片淡出
.....
<img width="200" height="80" src="images/用户.png"/><br>
<button id="btn1">fadeOut</button>
<script>
$(function () {
$('#btn1').click(function(){$('img').fadeOut(5000) })//5秒淡入
})
</script>
.....
//结果:开始图片位置大小不变,图片透明度逐渐变暗,最后图片位置消失
2.3 调整透明度
fadeTo()方法调整元素的透明度,参数取值范围为[0,1]。
【例9】 动态调整透明度。
....
<img width="200" height="80" src="images/用户.png"/><br>
<button id="btn1">fadeTo</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').fadeTo(5000,0.2) })//5秒调整透明度
})
</script>
....
//结果:与淡入淡出不一样,图片仅仅在5s内变淡一些(0.2),但图片位置大小不变,还在,淡入淡出直接消失(位置大小一起消失)
3 滑动特效
滑动特效通过调整元素的高度来实现动画效果。
3.1 滑入效果
slideDown()方法将不可见元素的高度从0增加到实际高度。
【例11】 实现图片滑入效果。
....
<img width="200" height="100" src="images/用户.png" style="display:none"/><br>
<button id="btn1">slideDown</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').slideDown(5000) })//5秒调整高度
})
</script>
....
//结果:图片高度慢慢变高
3.2 滑出效果
slideUp()方法将可见元素的高度从实际高度减少到0。
【例12】 实现图片滑出效果。
...
<img width="200" height="100" src="images/用户.png"/><br>
<button id="btn1">slideUp</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').slideUp(5000) })//5秒调整高度
})
</script>
...
//结果:图片慢慢变瘪,高度逐渐减小,直至消失
3.3 滑入滑出切换效果
slideToggle()方法对可见元素施加滑出效果,对不可见元素施加滑入效果。
【例13】 实现图片滑入滑出切换效果。
...
<img width="200" height="100" src="images/用户.png"/><br>
<button id="btn1">slideToggle</button>
<script>
$(function () {
$('#btn1').click(function () { $('img').slideToggle(5000) })//5秒调整高度
})
</script>
...
//结果:滑入与滑出切换
4 自定义动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSyiotmA-1592477971008)(https://raw.githubusercontent.com/bakabakabeng/PicGoStore/master/img/image-20200617164548038.png)]
animate()方法可实现自定义动画,其基本语法格式如下。
.animate( properties [, duration ] [, complete ] )
其中,properties为以对象格式表示的CSS属性,例如,{width:“200”,left:“100px”}。duration为动画完成时间(单位为毫秒),或者是表示快慢的字符串(“slow”“normal"或"fast”),complete为动画完成时调用的函数。
animate()方法只支持直接用数字表示的CSS属性动画,例如width、height、left、opacity等。
4.1 直接量动画
在animate()方法中使用直接量设置CSS属性时,jQuery将会把现有的属性值通过动画效果调整为新的值。
【例14】 使用直接量调整图片宽度和高度。
...
<img width="20" height="10" src="images/用户.png"/><br>
<button id="btn1">animate</button>
<script>
$(function () {
$('#btn1').click(function () {
$('img').animate({ width: '200', height: '80' }, 5000, function () {
$('img').after('动画结束')
})
})
})
</script>
...
//结果:图片由原来的大小突然在5s内变大为自定义动画的大小,动画结束后触发函数事件
4.2 相对量动画
相对量动画指使用相对量来设置CSS属性。例如,{width: ‘+=200’}表示元素宽度在原来的基础上增加200,{width: ‘-=200’}则表示元素宽度在原来的基础上减少200。
【例15】 使用相对量调整图片宽度和高度。
...
<img width="20" height="100" src="images/用户.png"/><br>
<button id="btn1">animate</button>
<script>
$(function () {
$('#btn1').click(function () {
$('img').animate({ width: '+=200', height: '-=50' }, 5000)
})
})
</script>
4.3 自定义显示或隐藏
在使用animate()方法定义动画时,CSS属性可使用"show"、"hide"或"toggle"字符串,来实现元素的显示或隐藏,类似于show()、hide()或toggle()方法。例如,{ width: ‘toggle’}表示在元素可见时,将其宽度逐渐减为0;元素不可见时,增加其宽度,直到其实际宽度。
【例16】 通过调整宽度和高度实现图片的显示和隐藏。
...
<img width="200" height="80" src="images/用户.png"/><br>
<button id="btn1">animate</button>
<script>
$(function () {
$('#btn1').click(function () {
$('img').animate({ width: 'toggle',height:'toggle'}, 5000)//5秒完成宽度和高度调整
})
})
</script>
...
//
4.4 位置动画
在animate()方法中改变元素的left或top属性,可实现位置动画。实现元素位置动画时,需要将CSS position属性设置为absolute、relative或fixed。position属性值为static(默认值)时,无法实现元素的移动。
【例17】 移动图片
<button id="btn1">animate</button><br>
<img width="120" height="60" src="images/用户.png" style="position:absolute"/>
<script>
$(function () {
$('#btn1').click(function () {
$('img').animate({ left: '160px',top:'60px'}, 5000)//5秒完成边距调整
})
})
</script>
4.5动画延时
delay()方法用于实现延时操作,参数为时间(单位为毫秒)。
【例18】 使用delay()方法实现延时操作。
...
<button id="btn1">延时淡出淡入</button><br>
<img width="120" height="60" src="images/用户.png" style="position:absolute"/>
<script>
$(function () {
$('#btn1').click(function () {
$('img').fadeOut(1000)//1秒淡出
.delay(1000)//延时1秒
.fadeIn(1000)//1秒淡入
})
})
</script>
...
4.6停止动画
stop()方法用于停止正在执行的动画,目标对象的CSS属性为动画停止时的状态。
【例19】 使用stop ()方法停止动画。
...
<button id="btn1">淡出淡入</button><button id="btn2">停止</button><br>
<img width="120" height="60" src="images/用户.png" style="position:absolute"/>
<script>
$(function () {
$('#btn1').click(function () { $('img').fadeToggle(2000) })//2秒完成切换
$('#btn2').click(function () { $('img').stop() })//停止动画
})
</script>
...
4.7结束动画
finish()方法结束正在执行的动画,目标对象的CSS属性设置为动画正常结束时的状态——即跳过还未完成的动画过程,直接显示结束状态。
【例20】 使用finish ()方法结束动画。
...
<button id="btn1">左移入</button><button id="btn2">结束</button><br>
<img width="120" height="60" src="images/用户.png" style="position:absolute"/>
<script>
$(function () {
$('#btn1').click(function () { $('img').animate({left:"+=100px"},2000) })//2秒完成左移
$('#btn2').click(function () { $('img').finish() })//结束动画
})
</script>
...
4.8禁止动画效果
jQuery.fx.off属性设置为true时,可禁止页面中所有的动画效果,直接将目标元素设置为最终状态。
【例21】 禁止动画效果。
...
<button id="btn1">右移</button><button id="btn2">禁止效果</button><br>
<img width="120" height="60" src="images/用户.png" style="position:absolute"/>
<script>
$(function () {
$('#btn1').click(function () { $('img').animate({ left: "+=100px" }, 2000) })//2秒右移
$('#btn2').click(function () { $.fx.off=true })//禁止效果
})
</script>
...
在浏览器中运行时,若未禁止效果,单击“右移”按钮时,图片以动画方式向右移动100px。单击“禁止效果”按钮禁止效果,再单击“右移”按钮时,图片直接向右跳动(左边距增加100px)。
jquery ajax
ajax概述:
原生js实现ajax步骤:(但jQuery简化了ajax开发过程)
1 加载服务器数据
jQuery提供的load()方法可通过AJAX请求来获取服务器数据,并将其显示在当前页面元素中。
1.1 加载简单数据
load()方法最简单的用法是直接将服务器返回数据加载到页面元素中,其基本语法格式为:
$(选择器).load(url)
其中,$(选择器)匹配的页面元素用于显示服务器返回的数据。url为请求的服务器资源的URL,返回的数据通常为HTML格式的文本。
【例13-1】 从服务器加载简单数据。源文件:13\test13-1.html、data.txt。
data.txt是一个文本文件,包含一段HTML代码,代码如下。
<h2>jQuery AJAX load()方法载入的数据</h2>
<b>jQuery AJAX so easy</b>
test13-1.html使用load()方法请求data.txt,将其内容显示在页面的两个<div>元素中,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div></div><div></div>
<script>
$(function () {
$('#btn1').click(function () { $('div').load('data.txt')})
…
1.2 筛选加载的数据
可对load()方法返回的服务器数据应用选择器,只将选择器匹配的元素加载到当前页面元素中。load()方法应用选择器的基本语法格式如下。
$(选择器).load(“url 选择器”)
【例13-2】 筛选加载的数据。源文件:13\test13-2.html、data2.txt。
data2.txt代码如下。
<div>jQuery教程</div>
<span>apple</span>
<div>JavaScript教程</div>
<span>pear</span>
test13-2.html在load()方法应用筛选器,将data2.txt中的两个<div>元素加载到当前页面中,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div></div>
<script>
$(function () {
$('#btn1').click(function () { $('div').load('data2.txt div')})
1.3 向服务器提交数据
可在load()方法的第2个参数中指定提交给服务器的数据,其基本语法格式如下。
$(选择器).load(url,data)
其中,参数data为提交的数据,可以是对象或字符串。
【例13-3】 向服务器提交数据。源文件:13\test13-3.html、test13-server.asp。
test13-server.asp是一个ASP文件,在服务器端处理客户端提交的数据,并返回处理结果,代码如下。
<%
Response.Write("你上传的数据是:")
Response.Write(Request("data"))
%>
test13-3.html请求test13-server.asp并提交数据,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div></div>
<script>
$(function () {
$('#btn1').click(function () {
$('div').load('test13-server.asp',{data:'jQuery AJAX'})
1.4 指定回调函数
可为load()方法指定一个回调函数,该函数在AJAX请求返回数据且数据已经显示到当前页面后执行。基本语法格式如下。
$(选择器).load(url[,data][,callback])
其中,callback为回调函数名称,也可是一个匿名函数。
【例13-4】 在load()方法中使用回调函数。源文件:13\test13-4.html、test13-server.asp。
test13-4.html请求test13-server.asp,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div></div>
<script>
$(function () {
$('#btn1').click(function () {
$('div').load('test13-server.asp', { data: 'jQuery AJAX' },
function (text, code, xhr) {
msg ='状态码:' + xhr.status + '\n状态:' + code+'\n响应文本:' + text
$('div').text(msg)
…
1.5 执行脚本
load()方法返回的数据包含脚本时,是否执行脚本由load()方法的url参数是否附带了选择器来决定。如果url参数中没有附带选择器,则脚本作为数据的一部分加载到当前页面元素中,脚本被执行;否则脚本不会执行。
【例13-5】 执行来自服务器的脚本。源文件:13\test13-5.html、test13-5-2.html。
test13-5-2.html作为服务器端被请求加载的文件,代码如下。
<h3>包含脚本的HTML</h3>
<div>jQuery Ajax</div>
<script>
$(function () { $('div').css('border','1px solid red') })
</script>
test13-5.html使用load()方法请求加载test13-5-2.html,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div></div>
<script>
$(function () { $('#btn1').click(function () { $('div').load('test13-5-2.html') }) })
…
2 get()和post()方法
客户端向服务器端发起请求通常采用GET或POST方式。在使用load()方法发起AJAX请求时,如果参数包含了向服务器提交的数据,则采用POST方式,否则采用GET方式。
jQuery对象的get()方法用于采用GET方式发起AJAX请求,post()方法用于采用POST方式发起AJAX请求。
2.1 get()方法
get()方法基本语法格式如下。
jQuery.get( url [, data ] [, success ] [, dataType ] )
或者:
jQuery.get( {url:请求url [, data:提交的数据 ] [, success:回调函数 ] [, datatype:返回数据的类型 ]})
其中,参数url为请求的服务器资源的URL。参数data为对象或字符串,包含向服务器提交的数据。参数success为AJAX请求成功完成时调用的回调函数。参数dataType为服务器返回数据的数据类型,通常jQuery可自动决定数据类型。常用的数据类型可以是xml、json、script、text或html等。
get()方法的参数url是必须的,其他参数均可省略。load()方法类似于get(url, data, success)。
get()方法返回的数据通常在success参数指定的回调函数中进行处理。回调函数的3个参数依次为:封装了返回数据的简单对象、表示AJAX请求完成状态的字符串(通常为success)和执行当前AJAX请求的XMLHTTPRequest对象。
【例13-6】 使用get()方法执行AJAX请求。源文件:13\test13-6.html、test13-server.asp。
…
<body>
<button id="btn1">载入数据</button> <div></div>
<script>
$(function () {
$('#btn1').click(function () {
$.get('test13-server.asp', {data:'实例test13-6'}, function (data, status, xhr) {
msg = '状态码:' + xhr.status + ' 状态:' + status + ' 响应数据:' + data
$('div').text(msg)
2.2 post()方法
post()方法基本语法格式如下。
jQuery.post( url [, data ] [, success ] [, dataType ] )
或者:
jQuery.post( {url:请求url [, data:提交的数据 ] [, success:回调函数 ] [, datatype:返回数据的类型 ]})
各参数含义与get()方法参数相同
【例13-7】 使用post()方法执行AJAX请求。源文件:13\test13-7.html、test13-server.asp。
…
<body>
<button id="btn1">载入数据</button> <div></div>
<script>
$(function () {
$('#btn1').click(function () {
$.post('test13-server.asp', {data:'实例test13-7'}, function (data, status, xhr) {
msg = '状态码:' + xhr.status + ' 状态:' + status + ' 响应数据:' + data
$('div').text(msg)
…
3 获取JSON数据
getJSON()方法用于从服务器返回JSON格式的数据,其基本语法格式如下。
jQuery.getJSON( url [, data ] [, success ])
其中,参数url为请求的服务器资源的URL。参数data为对象或字符串,包含向服务器提交的数据。参数success为AJAX请求成功完成时调用的回调函数。回调函数的3个参数依次为:封装了JSON数据的简单对象、表示AJAX请求完成状态的字符串(通常为success)和执行当前AJAX请求的XMLHTTPRequest对象。
【例13-8】 获取服务器端的JSON数据。源文件:13\test13-8.html、test13-json.asp。
服务器端的脚本test13-json.asp向客户端写入一个JSON数据,代码如下。
<%
Response.Write("{"+chr(34)+"name"+chr(34)+":"+chr(34)+"韩梅梅"+chr(34)+",")
Response.Write(chr(34)+"sex"+chr(34)+": "+chr(34)+"女"+chr(34)+",")
Response.Write(chr(34)+"age"+chr(34)+": "+"20}")
%>
test13-8.html请求test13-json.asp,并将返回的JSON数据显示在页面中,代码如下。
…
<body>
<button id="btn1">载入数据</button> <div></div>
<script>
$(function () {
$('#btn1').click(function () {
$.getJSON('test13-json.asp', function (data) {
msg=''
$.each(data, function (key, val) {msg +=key+':'+val+'<br>' })
$('div').html(msg)
…
4 获取脚本
getScript ()方法用于请求服务器端的JavaScript脚本文件,其基本语法格式如下。
jQuery.getJSON( url [, success ])
其中,参数url为请求的服务器资源的URL。参数success为AJAX请求成功完成时调用的回调函数。回调函数的3个参数依次为:包含脚本代码的字符串、表示AJAX请求完成状态的字符串(通常为success)和执行当前AJAX请求的XMLHTTPRequest对象。
【例13-9】 获取服务器端的脚本。源文件:13\test13-9.html、test13-9.js。
服务器端的脚本test13-9.js使页面中的<div>元素在页面中左右移动,代码如下。
$(function () { run() })
function run() {
$('div').animate({ left: "+=200px" }, 2000)
.delay(1000)
.animate({ left: "-=200px" }, 2000)
run()//循环动画
}
test13-9.html加载test13-9.js,代码如下。
…
<body>
<button id="btn1">载入脚本</button>
<div style="width:100px;height:60px;background-color:blue;position:absolute"></div>
<script>
$(function () {
$('#btn1').click(function () {
$.getScript('test13-9.js', function () { alert('脚本加载完毕!') }) }
3.事件处理
jQuery在处理AJAX请求时,会产生一系列AJAX事件。可为这些事件注册事件处理函数,在AJAX事件发生时执行相应的处理操作。
3.1AJAX事件
jQuery定义的AJAX事件可分为两种类型:本地事件和全局事件。本地AJAX事件指执行AJAX请求的XMLHTTPRequest对象所发生的事件。全局AJAX事件是在执行AJAX请求时,document对象发生的事件,对当前页面中执行的所有AJAX请求均有效。
jQuery定义的AJAX事件如下。
• ajaxStart:全局事件,在开始一个AJAX请求会发生该事件。
• beforeSend :本地事件,在开始一个AJAX请求之前发生该事件,此时,允许修改XMLHTTPRequest对象(例如添加HTTP请求头参数等)
• ajaxSend:全局事件,在开始一个AJAX请求之前发生该事件。
• succes:本地事件,在AJAX请求成功完成时发生该事件。
• ajaxSuccess:全局事件,在AJAX请求成功完成时发生该事件。
• error:本地事件,在AJAX请求执行过程中出现错误时发生该事件。
• ajaxError:全局事件,在AJAX请求执行过程中出现错误时发生该事件。
• complete:本地事件,在AJAX请求结束时发生该事件。
• ajaxComplete:全局事件,在AJAX请求结束时发生该事件。
• ajaxStop:全局事件,在当前页面中所有的AJAX请求结束时发生该事件。
3.3全局AJAX事件方法
jQuery定义了几个全局AJAX事件方法,用于注册全局AJAX事件处理函数。jQuery中的全局AJAX事件方法如下。
• .ajaxComplete(handler):注册ajaxComplete事件处理函数,处理函数原型为:Function(Event event, jqXHR jqXHR, PlainObject ajaxOptions)。其中,event为事件对象,jqXHR为执行当前AJAX请求的XMLHTTPRequest对象,ajaxOptions对象包含AJAX请求的相关参数。
• .ajaxError(handler):注册ajaxError事件处理函数。处理函数原型为:Function(Event event,jqXHR jqXHR,PlainObject ajaxOptions, String thrownError)。其中,thrownError为包含错误描述信息的字符串,其他参数与ajaxComplete事件处理函数参数含义相同。
• .ajaxSend(handler):注册ajaxSend事件处理函数,处理函数原型为:Function(Event event,jqXHR jqXHR,PlainObject ajaxOptions),参数与ajaxComplete事件处理函数参数含义相同。
• .ajaxStart(handler):注册ajaxStar事件处理函数,处理函数无参数。
• .ajaxStop(handler):注册ajaxStop事件处理函数,处理函数无参数。
• .ajaxSuccess(handler):注册ajaxSucces事件处理函数,处理函数原型为:Function(Event event, jqXHR jqXHR, PlainObject ajaxOptions, PlainObject data)。其中,data对象包含服务器返回的数据,其他参数与ajaxComplete事件处理函数参数含义相同。
其中,handler为函数名称或者是一个匿名函数。
【例13-10】 使用全局AJAX事件方法。源文件:13\test13-10.html、test13-server.asp。
test13-10.html请求服务器端的脚本test13-server.asp,并记录AJAX事件,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div id="data"></div><div id="log"></div>
<script>
$(function () {
$('#btn1').click(function () {
$.get('test13-server.asp', { data: '实例test13-10' }, function (data) {
$('#data').text('响应数据:' + data)
})
})
$(document).ajaxStart(function () {
$('#log').append("<div>ajaxStart:AJAX请求已开始</div>") })
$(document).ajaxSend(function () {
$('#log').append('<div>ajaxSend:AJAX请求已发送</div>') })
$(document).ajaxSuccess(function () {
$('#log').append('<div>ajaxSuccess:AJAX请求成功完成</div>') })
$(document).ajaxStop(function () {
$('#log').append('<div>ajaxStop:AJAX请求已停止</div>') })
$(document).ajaxComplete(function () {
$('#log').append('<div>ajaxComplete:AJAX请求已结束</div>') })
$(document).ajaxError(function () {
$('#log').append('<div>ajaxError:AJAX请求出错了</div>')
全局事件,在开始一个AJAX请求会发生该事件。
• beforeSend :本地事件,在开始一个AJAX请求之前发生该事件,此时,允许修改XMLHTTPRequest对象(例如添加HTTP请求头参数等)
• ajaxSend:全局事件,在开始一个AJAX请求之前发生该事件。
• succes:本地事件,在AJAX请求成功完成时发生该事件。
• ajaxSuccess:全局事件,在AJAX请求成功完成时发生该事件。
• error:本地事件,在AJAX请求执行过程中出现错误时发生该事件。
• ajaxError:全局事件,在AJAX请求执行过程中出现错误时发生该事件。
• complete:本地事件,在AJAX请求结束时发生该事件。
• ajaxComplete:全局事件,在AJAX请求结束时发生该事件。
• ajaxStop:全局事件,在当前页面中所有的AJAX请求结束时发生该事件。
3.3全局AJAX事件方法
jQuery定义了几个全局AJAX事件方法,用于注册全局AJAX事件处理函数。jQuery中的全局AJAX事件方法如下。
• .ajaxComplete(handler):注册ajaxComplete事件处理函数,处理函数原型为:Function(Event event, jqXHR jqXHR, PlainObject ajaxOptions)。其中,event为事件对象,jqXHR为执行当前AJAX请求的XMLHTTPRequest对象,ajaxOptions对象包含AJAX请求的相关参数。
• .ajaxError(handler):注册ajaxError事件处理函数。处理函数原型为:Function(Event event,jqXHR jqXHR,PlainObject ajaxOptions, String thrownError)。其中,thrownError为包含错误描述信息的字符串,其他参数与ajaxComplete事件处理函数参数含义相同。
• .ajaxSend(handler):注册ajaxSend事件处理函数,处理函数原型为:Function(Event event,jqXHR jqXHR,PlainObject ajaxOptions),参数与ajaxComplete事件处理函数参数含义相同。
• .ajaxStart(handler):注册ajaxStar事件处理函数,处理函数无参数。
• .ajaxStop(handler):注册ajaxStop事件处理函数,处理函数无参数。
• .ajaxSuccess(handler):注册ajaxSucces事件处理函数,处理函数原型为:Function(Event event, jqXHR jqXHR, PlainObject ajaxOptions, PlainObject data)。其中,data对象包含服务器返回的数据,其他参数与ajaxComplete事件处理函数参数含义相同。
其中,handler为函数名称或者是一个匿名函数。
【例13-10】 使用全局AJAX事件方法。源文件:13\test13-10.html、test13-server.asp。
test13-10.html请求服务器端的脚本test13-server.asp,并记录AJAX事件,代码如下。
…
<body>
<button id="btn1">载入数据</button>
<div id="data"></div><div id="log"></div>
<script>
$(function () {
$('#btn1').click(function () {
$.get('test13-server.asp', { data: '实例test13-10' }, function (data) {
$('#data').text('响应数据:' + data)
})
})
$(document).ajaxStart(function () {
$('#log').append("<div>ajaxStart:AJAX请求已开始</div>") })
$(document).ajaxSend(function () {
$('#log').append('<div>ajaxSend:AJAX请求已发送</div>') })
$(document).ajaxSuccess(function () {
$('#log').append('<div>ajaxSuccess:AJAX请求成功完成</div>') })
$(document).ajaxStop(function () {
$('#log').append('<div>ajaxStop:AJAX请求已停止</div>') })
$(document).ajaxComplete(function () {
$('#log').append('<div>ajaxComplete:AJAX请求已结束</div>') })
$(document).ajaxError(function () {
$('#log').append('<div>ajaxError:AJAX请求出错了</div>')