一.学习目标
- 掌握元素与节点的操作。
- 掌握 jQuery 事件处理机制。
- 掌握事件与动画特效的实现。
- 掌握 jQuery 中 Ajax 的操作。
- 掌握 jQuery 中插件机制的使用
- 能够使用 jQuery 实现事件处理。
- 能够使用 jQuery 实现页面动画效果。
- 能够实现综合项目实训的消除方块功能。
- 能够实现综合项目实训的胜负判断功能。
二.jQuery 选择器
jQuery 作为 JavaScript 封装的库,它的目的就是为了简化开发者使用 JavaScript.
使用<script>标记将该文件导入到自己的页面中即可.
<script src="js/jquery-3.5.1.min.js" ></script>
1.第一个 jQuery 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2>nihao</h2>
<script>
$('h2').text('HelloWorld!')//设置页面上h2的文体
</script>
</body>
</html>
该段代码的作用是使用 jQuery 的 text()方法,为 h2 标题元素设置文本内容“Hello world!”。
- 第一步:在$()函数中传入字符串 h2,表示 h2 元素
- 调用操作方法,如带有文本参数的 text(),方法用来给元素设置文本
下面我们通过代码对比 jQuery 和 JavaScript 原生代码的区别。
//jQuery 代码(为了方使对比,将代码分成两行书写)
//获取元素
var h2=$('h2'); //获取页面元素
h2.text('Hello world!'); //对元素操作
// Javascript 原生代码
var h2=document.querySelector('h2'); //获取页面元素
h2.innerText='Hello world!'; //对元素操作
2.jQuery 加载事件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
$(function(){
var h2 =$('h2'); //获取页面元素h2 jQuery
console.log('h2');
he.text('HelloWorld');//对元素操作
});
</script>
</body>
</html>
3.jQuery 对象
将 jQuery 引入后,在全局作用域下会新増“$”和“jQuery”两个全局变量,这两个变 量引用的是同一个对象,称为 jQuery 顶级对象。在代码中可以使用 jQuery 代替$,但一般为 了方便,通常都直接使用$。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2>0909</h2>
<script>
//使用$
$(function(){
$('h2').text('Hello world!');
});
//使用 jQuery
// jQuery(function(){
// jQuery('h2').text('Hello world!');
// });
</script>
</body>
</html>
jQuery 顶级对象类似一个构造函数,用来创建 jQuery 实例对象(简称 jQuery 对象),但 它不需要使用 new 进行实例化,它内部会自动进行实例化,返回实例化后的对象。
DOM 对象是用原生JavaScript 的 DOM 操作获取的对象,jQuery 对象是通过 jQuery 方式获取到的对象。这两种 对象的使用方式不同,不能混用。
3.1DOM 对象转换成 jQuery 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
var myh2=document.querySelector('h2'); //获取 DOM 对象
var h2=$(myh2); //转换成 jQuery 对象
h2.text('Hello world!'); //使用 jQuery 方法
</script>
</body>
</html>
3.2jQuery 对象转换成 DOM 对象
//从 jQuery 对象中取出 DOM 对象
$('h2')[0]; //方法 1
$('h2').get(0); //方法 2
//再对 DOM 对象进行操作
$('h2')[0].innerText='Hello world!';
$('h2').get(0).innerText='Hello world!';
4.基本选择器
名称 | 用法 | 描述 |
id 选择器 | $("#id") | 获取指定 id 的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | Index 页面的结构文件获取同一类 |
标签选择器 | $("div") | 获取相同标签名的所有元素 |
并集选择器 | $("div,p,li") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
4.1jQuery 的基本选择器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='color'>颜色列表</h2>
<div class="red">红色</div>
<div class="yellow">黄色</div>
<div class="blue">蓝色</div>
<h2 id='city'>城市列表</h2>
<p>常州</p>
<p>南京</p>
<h2>水果列表</h2>
<ul>
<li class="red">苹果</li>
<li class="yellow">香蕉</li>
<li class="blue">蓝莓</li>
<li class="red">樱桃</li>
</ul>
<script>
console.log($("h2"));
console.log($("ul"));
console.log($(".red"));
console.log($("#city"));
console.log($("p,li"));
console.log($("li.red"));
console.log($("*"));
</script>
</body>
</html>
5.层级选择器
层级选择器可以完成多层级元素之间的获取
名称 | 用法 | 描述 |
子代选择器 | $("ul > li") | $("ul > li")子代选择器获取子级元素 |
后代选择器 | $("ul li") | $("ul li")后代选择器获取后代元素 |
jQuery 层级选择器的使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<li>红色</li>
<li>黄色</li>
<li>蓝色</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>蓝莓</li>
</ul>
</div>
<li>我是 div 外面的 li</li>
<script>
console.log($("div>li")); //获取 div 里的直接子元素 li
console.log($("div li")); //获取 div 里的所有 li 元素
</script>
</body>
</html>
代码$("div>li")只选择出 div 里的直接的三个 li 子元素,而代码$("div li")则选择出 div里的所有六个 li 元素
6.筛选选择器
筛选选择器用来筛选元素,通常和别的选择器搭配使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<div>
<li>红色</li>
<li>黄色</li>
<li>紫色</li>
<li>红色</li>
</div>
<script>
$('ul li :first').css('color','red');//为匹配的元素设置文字颜色
$('ul li:last').css('color','red');
$('ul li:eq(2)').css('color','purple');
$('div li:even').css('background-color','yellow');
$('div li:odd').css('background-color','pink');
</script>
</body>
</html>
代码$('ul li:first')将筛选出 ul 里的第一个 li 元素,即苹果。代码.css('color','red');
方法的作用是为匹配元素设置文本的颜色为红色。代码$('ul li:eq(2)')将筛选出 ul 里的索引为
2 的 li 元素,即葡萄,索引是从 0 开始的。代码$('div li:even')将筛选出 div 里的偶数
li 行,并通过 css('background-color','yellow');设置偶数行的背景色为黄色,注意是从第 0 行开 始计算的,并且第 0 行被看作偶数行。代码$('div li:odd').css('background-color','pink');将筛选 出 div 里的奇数 li 行,并设置背景色为粉色
实际开发中,有时需要对一个已经用选择器获取到的集合进行筛选,这时可以使用筛选 方法
jQuery 的常用筛选方法的使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul class='fruit'>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p>常州</p>
<p>南京</p>
<p>无锡</p>
<p>苏州</p>
</div>
<h1 id='list3'>动物乐园</h1>
<ol>
<li>猴子</li>
<li>兔子</li>
<li>大象</li>
<li>斑马</li>
</ol>
<script>
console.log($('#list2').parent());
$('ul').children('li').css('color', 'blue');
$('body').find('h2').css('color', 'red');
$('body').find('#list3').css('color', 'pink');
$('div>p').eq(2).siblings('p').css('font-style','italic');
$('ol li').eq(0).nextAll().css('font-style','italic');
$('ol li').eq(3).prevAll().css('text-decoration', 'underline');
console.log($('ul').hasClass('fruit'));
console.log($('ol').hasClass('fruit'));
</script>
</body>
</html>
7.其他选择器
(1)获取同级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id="list1"></h2>
<ul class="fruit">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<ul>
<p>常州</p>
<p>南京</p>
<p>无锡</p>
<p>苏州</p>
</ul>
<script>
console.log($('h2~ul'));
$('h2~ul').css('color','blue');
console.log($('h2+ul'));
$('h2 + ul').css('color','red');
</script>
</body>
</html>
(2)筛选元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul class="fruit">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p>常州</p>
<p>南京</p>
<p>无锡</p>
<p>苏州</p>
</div>
<h1 id='list3'>动物乐园</h1>
<ol>
<li>猴子</li>
<li>兔子</li>
<li>大象</li>
<li>斑马</li>
<li></li>
</ol>
<script>
$('p:gt(1)').css('color', 'blue');
$('p:lt(1)').css('color', 'red');
$('ul li:not(li:eq(1))').css('text-decoration', 'underline');
$('li:contains("子")').css('color', 'green');
$('li:empty').css('color', 'red');
console.log($('div:has("h2")'));
console.log($('h2:parent'));
</script>
</body>
</html>
(3)属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul id="fruit">
<li class='fruit'>苹果</li>
<li class='fruit'>香蕉</li>
<li class='fruit'>葡萄</li>
<li class='fruit'>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p class='city1'>常州</p>
<p class='city1'>南京</p>
<p class='city2'>无锡</p>
<p class='city2'>苏州</p>
</div>
<h2 id='list3' class="animal">动物乐园</h2>
<ol>
<li class='animal'>猴子</li>
<li class='animal'>兔子</li>
<li class='animal'>大象</li>
<li class='animal'>斑马</li>
<li class='animal'></li>
</ol>
<script>
console.log($('li[class]'));
$('li[class="fruit"]').css('color', 'blue');
$('li[class^="an"]').css('color', 'red');
$('p[class*="y2"]').css('color', 'green');
$('h2[id][class="animal"]').css('color', 'orange');
</script>
</body>
</html>
(4).子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul id="fruit">
<li class='fruit'>苹果</li>
<li class='fruit'>香蕉</li>
<li class='fruit'>葡萄</li>
<li class='fruit'>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p class='city1'>常州</p>
<p class='city1'>南京</p>
<p class='city2'>无锡</p>
<p class='city2'>苏州</p>
</div>
<h2 id='list3' class="animal">动物乐园</h2>
<ol>
<li class='animal'>猴子</li>
<li class='animal'>兔子</li>
<li class='animal'>大象</li>
<li class='animal'>斑马</li>
<li class='animal'></li>
</ol>
<h2 id='list4'>鲜花列表</h2>
<ul>
<li>百合花</li>
</ul>
<script>
$('ul li:first-child').css('color', 'blue');
$('ul li:last-child').css('color', 'red');
$('ul li:only-child').css('color', 'hotpink');
$('p:first-of-type').css('text-decoration', 'underline');
$('p:last-of-type').css('font-style','italic');
$("ol li:nth-child(odd)").css('color', 'orange');
$("ol li:nth-child(even)").css('color', 'green');
</script>
</body>
</html>
(5).表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<form>
用户名:<input type="text" width="150px" /><br>
密 码:<input type="password" width="150px" /><br>
重复密码:<input type="password" width="150px" />
<hr />
男<input type="radio" name="rb" checked="checked" />
女<input type="radio" name="rb" />
未知<input type="radio" name="rb" /><br />
足球<input type="checkbox" value="football" />
篮球<input type="checkbox" value="basketball" />
羽 毛 球 <input type="checkbox" checked="checked" value="badminton"
/><br />
上传头像:<input type="file" />
<textarea>自我介绍...</textarea>
<hr />
按钮:<input type="button" value="form 里的 input 按钮" /><br>
重置:<input type="reset" value="重置" /><br>
提交:<input type="submit" value="提交" />
<hr />
</form>
下面的都是 form 外的元素。<br />
<button>ok</button>
<select>
<option>a</option>
<option>b</option>
</select>
<textarea disabled="disabled">我是不可用的文本域。</textarea>
<hr />
<script>
$(":text").css("border-color", "red");
$(":password").css("border-color","red");
$(":submit").css("border-color","red");
$(":reset").css("border-color","red");
$(":button").css("border-color","red");
console.log($(":checkbox"));
console.log($(":radio"));
console.log($(":file"));
console.log($(":disabled"));
console.log($("form:checked"));
console.log($(":input"));
console.log($("form :input"));
</script>
</body>
</html>
三.jQuery 操作 DOM
Query 中的操作元素内容方法,主要包括 html()方法、text()方法和 val()方法。开发者 可以根据不同的需求选择使用
语法 | 说明 |
html() | 获取第一个匹配元素的 HTML 内容 |
html(content) | 设置所有匹配元素的 HTML 内容 |
text() | 获取所有匹配元素包含的文本内容组合起来的文本 |
text(content) | 设置所有匹配元素的文本内容 |
val() | 获取第一个匹配的表单元素的 value 值 |
val(value) | 设置所有匹配表单元素的 value 值 |
val()方法可以操作表单(select、radio 和 checkbox)的选中情况。当要 获取的元素是元素时,返回结果是一个包含所选值的数组;当要为表单元素设置选 中情况时,可以传递数组参数。
1.操作元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素内容</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<span>我是span1的内容</span>
</div>
<div>
<span>我是span2的内容</span>
</div>
<p>我是段落1的内容</p>
<p>我是段落2的内容</p>
<input type="text" value="我是默认文本">
<input type="button" value="提交按扭">
<script>
//1.获取设置元素内容html()
console.log($("div").html());
$("div").html("<span>hello</span>");
// 2. 获取设置元素文本内容 text()
console.log($("p").text());
$("p").text("我是新的段落内容");
// 3. 获取设置表单值 val()
console.log($("input").val());
$('input').val('我是新值');
</script>
</body>
</html>
使用 html()方法获取的是第一个 div 中的内容,包含 html 标签的 span
元素,设置的是所有 div 的 html 内容。使用 text()方法获取的是所有 p 元素的文本内容,设 置的也是所有 p 元素的文本内容。val()方法获取的是第一个 input 的 value 属性的值,设置 的是所有 input 的 value 属性的值
2.jQuery 操作元素样式
jQuery 提供了两种用于样式操作的方法,分别是 css()方法和设置类样式的方法,css()方法可以直接读取或设置元素的样式,如 color、width、height 等,类样式需要通过给元素 添加或者删除类名来操作元素的样式。
2.1.css()方法
(1).获取样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css获取样式</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div>CCIT</div>
<script>
console.log($("div").css("width"));//结果为:200px
console.log($("div").css("fontSize"));//结果为:16px
</script>
</body>
</html>
$("div").css("width") 用 来 获 取 div 元 素 的 宽 度 值 , 结 果 为 200px ,$("div").css("fontSize")用来获取 div 中文本的字号,如果没有定义字号,则返回当前默认的 字号,结果为 16px,其他未明显定义的样式,也可以通过 css()方法来获取样式的默认值。
(2).设置单个样式
css()方法的参数若是由一个属性名和对应的属性值组成,中间以逗号分隔,表示设置一 组样式,注意属性必须加引号,值如果是数字,可以不用跟单位和引号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$("div").css("width","200px");
$("div").css("height","200px");
$("div").css("background-color", "pink");
</script>
</body>
</html>
(3).设置多个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$("div").css({
width:200,
height:200,
backgroundColor:"pink",
border:"2px solid blue"
})
</script>
</body>
</html>
在 css()方法的参数中设置了四组样式,分别设置 div 的宽、高、背景色和边框样 式。宽和高的值是数字,可以不用写引号,也可以写成"200px"的形式
2.类操作
类操作就是通过操作元素的类名进行元素样式操作
而通过写一个类名,把类名加上或去掉就会显得很方便。下面我们通过代码演示类的添加、删除和切换。语法如 下。其中 className 表示要添加或删除的类名。
- 添加类:$(selector).addClass(className)
- 移除类:$(selector).removeClass(className)
- 切换类:$(selector).toggleClass(className,switch)
(1).addClass()添加类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p type="para"data-index='1'>我是段落</p>
<script>
$("p").attr("type","paragraph");
$("p").attr("data-index","2");
$('p').attr("style","color:red");
console.log($("p").attr('type'));
console.log($("p").attr('data-index'));
</script>
</body>
</html>
代码 addClass('red')为第一个 div 添加了类名 red,使 div 呈现出红色的背景色。代码addClass('border') 为第二个 div 添加了类名 border,使 div 呈现了绿色边框。代码 addClass('redborder')为第三个 div 添加了两个类名,使 div 同时呈现了红色的背景和绿色的边框,注意两 个类名要写在一个引号里,用空格隔开。
(2).removeClass()移除类
通过 removeClass 方法给页面元素删除一个或多个指定样式类。
(3).toggleClass()切换类
该方法用来为元素添加或移除某个类,如果类不存在,就添加该类,如果类存在,就移 除该类,即在两种状态间进行切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<style>
div{
margin: 20px;
width: 200px;
}
.red{
background-color: red;
}
.border{
border: 2px solid green;
}
</style>
<div>first div</div>
<div>second div</div>
<div>third div</div>
<script>
$("div").click(function() {
$(this).toggleClass("red border");
});
</script>
</body>
</html>
使用 click()方法为所选择的多个 div 元素添加单击事件,当单击某个 div 时, 使用代码$(this).toggleClass ("red border")检查该 div 元素是否有类 red 和 border,若有则进行 移除,若无则进行添加
3 .jQuery 操作元素属性
3.1prop()方法
prop()方法用来设置或获取元素的固有属性值。元素固有属性是指元素本身自带的属性, 如 img 元素的 src 属性。具体语法示例如下。
prop()方法获取属性值语法。
$(selector).prop("属性名")
prop()方法设置属性值语法。
$(selector).prop("属性", "属性值")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<a href="http://www.ccit.js.cn" title="无标题">我是超链接</a>
<p type='para' style='color:red'>我是段落</p>
<script>
console.log($("a").prop('href'));
$("a").prop("title", "首页");
console.log($("a").prop('title'));
console.log($("p").prop('type'));
console.log($("p").prop('style'));
</script>
</body>
</html>
3.2attr()方法
attr()用来设置或获取元素的自定义属性,自定义属性是指用户给元素添加的非固有属性。
- attr()方法获取属性值语法: $(selector).attr("属性名")
- attr()方法设置属性值语法: $(selector).attr("属性名" , "属性值")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p type="para"data-index='1'>我是段落</p>
<script>
$("p").attr("type","paragraph");
$("p").attr("data-index","2");
$('p').attr("style","color:red");
console.log($("p").attr('type'));
console.log($("p").attr('data-index'));
</script>
</body>
</html>
3.3.data()方法
用来在指定的元素上存取数据,数据保存在内存中,并不会修改DOM元素结构;一旦 页面刷新,之前存放的数据都将被移除。语法如下。
- data()方法获取数据值语法: $(selector).data("数据名")
- data()方法设置数据值语法: $(selector).data("数据名" , "数据值")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>This is a DIV.</div>
<script>
$("div").data("uname", "Tom");
$("div").data({
"gender": "male",
"age": 18
});
console.log($("div").data("uname"));
console.log($("div").data("gender"));
console.log($("div").data("age"));
</script>
</body>
</html>
4.jQuery操作DOM节点
jQuery提供了一系列方法可以实现对DOM节点进行操作,如对节点进行遍历、创 建、添加和删除等。
4.1遍历元素
jQuery本身具有隐式迭代的效果,当一个jQuery对象中包含多个元素时,jQuery会对这 些元素进行相同的操作。如果想要对这些元素进行遍历,可以使用jQuery提供的each()方法。
$(selector).each(function(index, domEle) {
//对每个元素进行操作的语句
});
说明:index参数是每个元素的索引号 ,domEle是每个DOM元素的对象(不 是 jQuery对象),如果要想使用 jQuery方法,需要将这个DOM对象转换成 为 jQuery对象,即$(domEle)。
(1).each方法遍历元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
var arr=["20px","25px","30px"];
$("div").each(function(index,domEle){
console.log(index);//查看索引号
console.log(domEle);//查看DOM元素
$(domEle).css("frontSize",arr[index]);//对每个元素设置字号
$(domEle).css("marginTop","20px");//对每个元素设置顶外边距
})
</script>
</body>
</html>
使用数组 arr 保存了三个像素值。使用 each 方法对获取到的三个 div 进行遍 历,分别查看三个 div 元素的索引号和 DOM 元素。代码$(domEle).css("fontSize", arr[index]), 用来对每个 div 元素设置文本的字号,值来自于 arr 数组,使用$(domEle).css("marginTop", "20px")对每个元素设置相同的顶外边距。
2).each 方法遍历数组和对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
// 遍历数组
var arr = ["JavaScript", "MySQL", "HTML5"];
$.each(arr, function(index, element) {
console.log(index); //数组的索引
console.log(element); //数组元素
});
// 遍历对象
var stud = {
name: "Tom", gender: "male", age: 20, };
$.each(stud, function(index, element) {
console.log(index); //对象中的每个成员名
console.log(element); //对象中的每个成员的值
});
</script>
</body>
</html>
4.2创建元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
var li=$("<li>new li</li>");
console.log(li);
</script>
</body>
</html>
4.3.添加元素
(1).内部添加
内部添加的方式可以实现在元素内部添加元素,并且可以放到内部的最后面或者最前 面,分别可以使用 append()和 prepend()实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul>
<li>我是原来的</li>
</ul>
<ol>
<li>我是原来的</li>
</ol>
<script>
var li_1 = $("<li>new li in ul</li>");
$("ul").append(li_1); // 内部添加,放到 ul 内部的最后面
var li_2 = $("<li>new li in ol</li>");
$("ol").prepend(li_2); //内部添加,放到 ol 内部的最前面
</script>
</body>
</html>
(2).外部添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul>
<li>我是原来的</li>
</ul>
<ol>
<li>我是原来的</li>
</ol>
<script>
var h2 = $("<h2>new h2</h2>");
$("ul").after(h2);//外部添加,放到ul外部的后面
var h4 = $("<h4>new h4</h4>");
$("ol").before(h4); //外部添加,放到 ol 外部的前面
</script>
</body>
</html>
外部添加就是把元素放入目标元素的后面或者前面,分别使用 after()和 before()方法来 实现。
4.删除元素
删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节点两种情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
ul{
width: 200px;
height: 100px;
background-color: pink;
}
ol{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>apple</li>
<li>orange</li>
</ul>
<ol>
<li>红色</li>
<li>橙色</li>
</ol>
<!-- <script>
$('ul').empty(); //删除匹配的元素里面的子元素
$('ol').remove(); //删除匹配的元素
</script> -->
</body>
</html>
四.jQurey事件处理机制
1.页面加载事件
jQuery提供了ready事件作为页面加载事件,它在DOM元素加载完成后就可以被触发,响应 速度得到提高。 ready事件的语法如下:
//写法1 $(document).ready(function(){
//页面加载后要执行的代码
});
//写法2 $(function(){
//页面加载后要执行的代码
});
1.1.jQuery的事件方法
常用的事件方法如表所示。大部分事件方法可以接收两个参数,data和handler。其中data为可选 参数,当传入data的时候,事件处理程序可以接收到这个参数,并通过事件对象的data属性获取。
大部分事件方法可以接收两个参数,data 和 handler,其中 data 为可选参数,当传入 data的时候,事件处理程序可以接收到这个参数,并通过事件对象的 data 属性获取。
1).change 事件方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
form {
width: 400px;
margin: 20px;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
$(document).ready(function() {
var data = {
name: 'JavaScript',
tool: 'jQuery'
};
var email = $('#email');
email.change(data, function (e) {
console.log('change 事件被触发');
console.log('传入的数据为:', e.data);
});
});
</script>
</body>
</html>
2)hover事件方法
相比于其它事件方法,hover()方法比较特殊,它可以接收一个或两个事件处 理程序作为参数。
- 当传入两个事件处理程序时,这两个程序会在鼠标移入(mouseenter) 和移出(mouseleave)元素时分别执行
- 若只传入一个事件处理程序,那么当鼠标移入移出元素时,都执行该事件 处理程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">服务</a></li>
<li id="dropdown" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">社区 <span class="caret"></span></a>
<ul id="dropdown-menu" class="dropdown-menu">
<li><a href="#">商城</a></li>
<li><a href="#">广场</a></li>
<li><a href="#">圈子</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script>
$(function(){
$('#dropdown').hover(function(){
$('#dropdown-menu').show();
}, function(){
$('#dropdown-menu').hide();
});
});
</script>
</body>
</html>
左部有一个导航栏,最下面“社区”是一个下拉菜单,通过 hover()事 件方法绑定两个事件处理程序,当鼠标移入“社区”时,执行 show()方法,下拉菜单显示出 来,当鼠标移出“社区”时,执行 hide()方法,下拉菜单收起。
2.通过 on 方法绑定
(1)on处理方法
on 方法的基本语法如下所示:
$(selector).on( events [, childSelector ] [, data ], handler )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="btn">点击</button>
<script>
$('#btn').on('click',function(){
alert('按钮被点击');
})
</script>
</body>
</html>
(2).on 多个事件绑定同一个事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="text" id="input">
<script>
$(function(){
$('#input').on('focus blur',function(){
console.log('事件被触发');
})
})
</script>
</body>
</html>
文本输入框同时绑定了 focus 事件和 blur 事件,这里需要使用空格分隔。 当文本输入框获得焦点和失去焦点时,调试窗口都会打印出“事件被触发”的字符串。
(3).on 多个事件绑定不同事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="text" id="input">
<script>
$(function(){
$('#input').on({
'focus': function(){
$(this).css('background', 'pink');
},
'blur': function(){
$(this).css('background', '');
}
});
});
</script>
</body>
</html>
on 方法也可以给不同的事件分别绑定不同的事件处理程序,此时 on 方法传入一个对象 作为参数,该对象的键(key)为事件类型,值(value)为事件处理程序。
(4)on 事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>on事件委托</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
form{
width: 400px;
height: 20px;
}
</style>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">表单项</label>
<div class="col-sm-5">
<input type="text" class="form-control">
</div>
<button type="button" class="btn btn-default btn-add">新增</button>
<button type="button" class="btn btn-default btn-delete">删除</button>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$('form').on('click', '.btn-add', function(){
var group = $(this).parent('.form-group');
var clone = group.clone();
group.after(clone);
})
$('form').on('click', '.btn-delete', function(){
var group = $(this).parent('.form-group');
group.remove();
})
</script>
</body>
</html>
在某些表单中,表单项是不固定的,需要根据自己的需求新增或删除表单项,点击新增按钮会增加一行表单项,点击删除按钮会将当前行删除。
上例在 on 方法中传入了可选参数 childSelector,表示使用事件委托的方式,委托父元 素 form 监听新增、删除按钮点击事件。这样做的好处在于,对于因为点击新增按钮而动态 生成的表单行,点击这一行的新增或删除按钮,其功能也是有效的。如果是在$(‘.btn-add’)、$(‘.btn-delete’)上绑定事件,因为这两个选择器在绑定事件的瞬间,并不能包含动态生成 表单行内的按钮,所以后添加到页面中的按钮不能正常作用,需要做额外的事件处理。
2.事件解绑
off 方法的基本语法如下所示:
$(selector).of ( events [, childSelector ] [, handler] )
1.off 移除单个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<button id="remove">移除click事件</button>
<script>
$(function(){
$('#btn').on({
'click': function(){
console.log('触发click事件');
},
'mouseenter': function(){
console.log('触发 mouseenter 事件');
}
}); //按钮绑定 click 事件和 mouseenter 事件
$('#remove').on('click', function(){
$('#btn').off('click'); // 移除 click 事件
});
});
</script>
</body>
</html>
id 为 btn 的按钮绑定了两个事件:click 事件和 mouseenter 事件,当鼠标 移到 btn 上并点击时,调试窗口会打印出‘触发 mouseenter 事件’和‘触发 click 事件’的 字符串。
id 为 remove 的按钮在点击时会移除 btn 上的 click 事件,而 mouseenter 事件保留,因此 鼠标再次移到 btn 上并点击时,调试窗口只会打印出‘触发 mouseenter 事件’。
2.off 移除事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="remove">off移除事件委托</button>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">表单项</label>
<div class="col-sm-5">
<input type="text" class="form-control">
</div>
<button type="button" class="btn btn-default btn-add">新增</button>
<button type="button" class="btn btn-default btn-delete">删除</button>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$('form').on('click', '.btn-add', function(){
var group = $(this).parent('.form-group');
var clone = group.clone();
group.after(clone);
});
$('form').on('click', '.btn-delete', function(){
var group = $(this).parent('.form-group');
group.remove();
});
$('form').on('click', function(){
console.log('form 被点击');
});
$('#remove').on('click', function(){
$('form').off('click', '**');
});
</script>
</body>
</html>
“新增按钮”和“删除按钮”的单击事件委托在了表单 form 的单击事 件上,所以点击“新增按钮”会增加表单行,点击“删除按钮”会删除当前表单行。同时表 单 form 本身也绑定了点击事件,点击表单 form,控制台会输出“form 被点击”的字符串。
当点击 id 为 remove 的按钮时,会移除委托在 form 上的单击事件,但是不会移除 form本身绑定的单击事件,所以此时再去点击“新增按钮”和“删除按钮”,表单行不会发生增 加,但是控制台仍会输出“form 被点击”的字符串。
3.事件触发
trigger 方法
- trigger 的 基 本 语 法 是 $(selector).trigger( 事 件 类 型 ) , 如 点 击 事 件 可 以 $(selector).trigger(‘click’)触发。使用这种方式触发事件和使用事件方法触发事件的效果是相 同的。
triggerHandler 方法
- trigger 的基本语法是$(selector).triggerHandler(事件类型)。这种方式与前两种方法唯一的区别是不会触发浏览器的默认行为,如文本输入框在获得焦点时不会有光标闪烁等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<input id="input1" type="text">
<button id="btn1">事件方法触发点击 a 标签</button>
<br>
<input id="input2" type="text">
<button id="btn2">trigger 触发点击 a 标签</button>
<br>
<input id="input3" type="text">
<button id="btn3">triggerHandler 方法触发点击 a 标签</button>
<script>
$(function(){
$('#input1, #input2, #input3').focus(function(){
$(this).css('background', 'beige');
});
$('#input1, #input2, #input3').blur(function(){
$(this).css('background', '');
});
$('#btn1').click(function(){
$('#input1').focus(); // 事件方法触发
});
$('#btn2').click(function(){
$('#input2').trigger('focus'); // trigger 方法触发
});
$('#btn3').click(function(){
$('#input3').triggerHandler('focus'); // triggerHandler 方法触发
});
});
</script>
</body>
</html>
三个文本输入框都绑定了 focus 事件和 blur 事件,在获得焦点时背景色变为beige 色,在失去焦点时背景色还原。有三个按钮分别用三种方式触发同一行文本框的 focus事件。当使用事件方法触发时,第一个文本框获得焦点,背景色发生改变,光标在文本框内 闪烁,如图 6-38 所示;当使用 trigger 方法触发时,第二个文本框获得焦点,背景色发生改 变,光标在文本框内闪烁,如图 6-39 所示;当使用 triggerHandler 方法触发时,第三个文本 框获得焦点,背景色发生改变,但是文本框内没有光标。
4.事件对象
通过事件对象可以获取事件的状态,如触发事件的元素、绑定事件的元素、按键的键 码等。但是由于市面上浏览器种类很多,各浏览器在事件对象的获取方式、事件对象的属性 等方面可能存在差异。在此背景下,jQuery 在遵循 W3C 规范的前提下,对事件对象做了统 一封装,使得可以兼容各大主流浏览器。在绑定事件处理程序时,jQuery 会将封装过的事件 对象作为唯一参数传递给事件处理程序,语法如下所示:
$(selector).on(事件类型, function(event){
console.log(event); // 获取到事件对象
});
阻止冒泡事件的发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
#red{
width:200px;
height:200px;
background: red;
}
#blue{
width:400px;
height:400px;
background: blue;
}
#green{
width:600px;
height:600px;
background: green;
}
</style>
</head>
<body>
<div id="green">
<div id="blue">
<div id="red"></div>
</div>
</div>
<script>
$('#red').on('click', function(e) {
console.log('点击了红色方块');
});
$('#blue').on('click', function(e) {
console.log('点击了蓝色方块');
e.stopPropagation();
});
$('#green').on('click', function(e) {
console.log('点击了绿色方块');
});
</script>
</body>
</html>
这个案例中从外到内嵌套了绿色、蓝色和红色三个方块,当点击最内层的红色方块时, 触发了红色方块的点击事件处理程序,随后点击事件向上冒泡,触发蓝色方块的点击事件处 理程序,由于这里调用了 jQuery 事件对象的 stopPropagation()方法,阻止了事件的继续冒泡, 所以最外层绿色方块上的点击事件处理程序没有触发
五.jQuery 动画和 Ajax 操作
1.jQuery 动画
1.显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
margin: 20px;
background: red;
}
</style>
</head>
<body>
<button id="showAll" class="btn">全部显示</button>
<button id="hideAll" class="btn">全部隐藏</button>
<button id="toggle" class="btn">toggle</button>
<button id="hideTwo" class="btn">隐藏第2个元素</button>
<div class="box-ward">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<script>
$(function(){
$('#showAll').click(function(){
$('.box').show('slow');
});
$('#hideAll').click(function(){
$('.box').hide('fast', 'linear');
});
$('#toggle').click(function(){
$('.box').toggle();
});
$('#hideTwo').click(function(){
$('.box').eq(1).hide(function(){
console.log('第二个元素已被隐藏');
});
});
});
</script>
</body>
</html>
全部显示 :
全部隐藏:
当点击“toggle”按钮时,编号为 2 的方块显示,而其它方块都被隐藏
再次点击“toggle”按钮时,编号为 2 的方块被隐藏,而其它方块显示出来.
2上滑和下滑
元素的淡入、淡出也被称为元素的渐显、渐隐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
.block {
margin-top: 30px;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
background: rgb(29, 93, 212);
}
</style>
</head>
<body>
<button id="slideUp">slideUp</button>
<button id="slideDown">slideDown</button>
<button id="slideToggle">slideToggle</button>
<div class="block">
方块
</div>
<script>
$(function () {
$('#slideUp').click(function () {
$('.block').slideUp();
});
$('#slideDown').click(function () {
$('.block').slideDown();
});
$('#slideToggle').click(function () {
$('.block').slideToggle();
});
});
</script>
</body>
</html>
3.自定义动画
可伸缩导航栏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
#navigation li a {
position: relative;
left: -120px;
transition: left 0.3s;
}
#navigation li:hover a {
left: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="navigation">
<li class="nav0 current_page">
<a href="#">我的日志</a>
</li>
<li class="nav1">
<a href="#">资源下载</a>
</li>
<li class="nav2">
<a href="#">相册</a>
</li>
<li class="nav3">
<a href="#">人文知识</a>
</li>
<li class="nav4">
<a href="#">标签记录</a>
</li>
<li class="nav5">
<a href="#">友情链接</a>
</li>
<li class="nav6">
<a href="#">联系我们</a>
</li>
</ul>
</div>
<script>
$(function () {
$('#navigation li').each(function () {
if (!$(this).hasClass('current_page')) {
$('a', this).css('left', '-120px');
$(this).hover(function () {
$('a', this).animate({left: 0}, 'fast');
}, function () {
$('a', this).animate({left: '-120px'}, 'fast');
});
}
});
});
</script>
</body>
</html>
使用 animate 方法实现了一个可伸缩的导航栏,当鼠标移动到“我的日志”之 外的导航栏时,该导航栏会快速地从左侧页面伸出,而鼠标移开时,该导航栏又会快速地从 左侧收回