文章目录
什么JQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的avaScript框架。jQuery设计的宗旨是“write Less，Do More”，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQuery的作用
0.快速获取文档元素
1.简化js的Dom树的操作
2.将我们页面的JS代码和HTML页面代码进行分离
…
jQuery的引入
引入与测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入jQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 测试jQuery -->
<script>
$(function(){
alert("引入jQuery了");
});
</script>
</head>
<body>
</body>
</html>
文档加载完成事件js与JQuery写法对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入jQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 文档加载完成事件js与JQuery写法对比 -->
<script>
/*使用js，文档加载完成的事件*/
window.onload = function(){
alert("使用js，window.onload");
}
/*使用jQuery，文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*jQuery简写成 $ */
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*最简单的写法 */
$(function(){
//写在这个函数中的代码，就是文档加载完毕之后执行的
alert("$(function(){");
});
</script>
</head>
<body>
</body>
</html>
JQuery使用的注意点：
1.使用jQuery的选择器获取到的对象就是jQuery对象，否则就是js对象。
2.针对jQuery对象的命名，前面加上一个$以示区分。
3.jQuery对象只能调用jQuery框架里面的方法，js对象调用js的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--引入jQuery文件-->
<script src="../js/jquery-3.3.1.js"></script>
<!--使用jQuery来编写js代码-->
<script>
//获取div中的文本内容
$(function () {
//根据id获取div标签
/* 使用jQuery的选择器获取到的对象就是jQuery对象，否则就是js对象 针对jQuery对象的命名，前面加上一个$以示区分 */
var $d = $("#d1");
//获取标签里面的文本，jQuery对象只能调用jQuery框架里面的方法
var content = $d.html();
alert(content)
})
</script>
<body>
<div id="d1">jQuery</div>
</body>
</html>
扩展：开发版本与生产版本（部署项目时用的版本）
开发版本与生产版本的源码是一样的，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本。开发版本源码格式良好，方便开发人员查看源码，但体积大。而生产版本去掉了换行和空行，没有代码缩进和注释，不方便开发人员查看源码，体积小。
jQuery对象与js对象之间的转换
将js对象转换成jQuery对象: $(js对象)
示例：
var d = document.getElementById("d1");//js对象
var content=$(d).html();//js对象转换成jQuery对象并使用jQuery的方法得到其内容
将jQuery对象转换成js对象(jQuery对象是一个数组，这个数组里面的每一个元素都是js对象):遍历出来每一个元素
示例：
var $d = $("#d1");//jQuery对象
var content=$d[0].innerHTML;//jQuery对象转换成js对象并使用js的方法得到其内容
jQuery的选择器
基本选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 标签选择器 | $(“html标签名”) | 获得所有匹配标签名称的元素 |
| id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
| 类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
层级选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 后代选择器 | $("A B ") | 选择A元素内部的所有B元素(A内的B全选) |
| 子选择器 | $(“A > B”) | 选择A元素内部的所有B子元素 (A内的儿子级的B才选，即儿子以下的不选) |
| 相邻兄弟选择器（找同级的下一个） | $("#one + div") | 找到 id 为 one 的下一个兄弟 |
| 找出后面同级元素 | $("#two ~ div") | 找到id为two的元素后面的所有兄弟 |
属性选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 属性选择器 | $(“A[属性名]”) | 找包含指定属性名的元素 |
| 属性选择器 | $(“A[属性名=‘属性值’]”) | 找包含属性名等于该属性值的元素 |
| 属性选择器 | $(“标签[属性名!=‘属性值’]”) | 找包含属性名不等于该属性值的元素 |
| 属性选择器 | $(“标签[属性名 ^=‘属性值’]”) | 找包含属性名以该属性值开始的元素 |
| 属性选择器 | $(“标签[属性名 $=‘属性值’]”) | 找包含属性名以该属性值结束的元素 |
| 属性选择器 | $(“标签[属性名 *=‘属性值’]”) | 找包含属性名且含有该属性值的元素 |
| 复合属性选择器 | $(“A[属性名=值] [属性名 *= ‘xx’]…”) | 找包含多个属性条件的元素 |
基本过滤选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 首元素选择器 | 选择器 :first | 获得选择的元素中的第一个元素 |
| 尾元素选择器 | 选择器:last | 获得选择的元素中的最后一个元素 |
| 非元素选择器 | 选择器 :not(selecter) | 不包括指定内容的元素 |
| 偶数选择器 | 选择器:even | 偶数，从 0 开始计数 |
| 奇数选择器 | 选择器 :odd | 奇数，从 0 开始计数 |
| 等于索引选择器 | 选择器 :eq(index) | 指定索引元素 |
| 大于索引选择器 | 选择器 :gt(index) | 大于指定索引元素 |
| 小于索引选择器 | 选择器:lt(index) | 小于指定索引元素 |
| 标题选择器 | 选择器 :header | 获得标题元素，固定写法 |
表单属性选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 可用元素选择器 | 选择器 :enabled | 获得可用表单项 |
| 不可用元素选择器 | 选择器:disabled | 获得不可用元素 |
| 选中选择器 | 选择器（如：input:checkbox）:checked | 获得单选/复选框选中的元素 |
| 选中选择器 | 选择器（如：option）:selected | 获得下拉框选中的元素 |
jQuery的DOM操作
jQuery对DOM树中的文本和值进行操作
| API方法 | 解释 |
|---|---|
| val() / val(“value”) | 相当于js的value属性，获得/设置元素value属性相应的值(只能获取表单属性标签的value) |
| text() / text(“value”) | 相当于js的innerText属性，获得/设置元素中的文本内容(标签体) |
| html() / html(“value”) | 相当于js的innerHTML属性，获得/设置元素中的html内容 (标签体) |
注：val（），text（），html（）不传入参数，就表示获取属性相应的值，传入参数，就表示设置属性。
jQuery对DOM树中的属性进行操作
| API方法 | 解释 |
|---|---|
| attr(“属性名”) / attr(“属性名”,“属性值”) | 获得/设置属性的值,一般都使用这个方法 |
| prop(“属性名”) / prop(“属性名”,“属性值”) | 获得/设置属性的值(checked，selected)，boolean类型的属性 |
| removeAttr(“属性名”) | 移除某一个属性 |
注：attr()方法可以获取和设置任意标签的任意属性,但是如果该属性是boolean类型，则使用prop()方法
什么时候使用prop()方法: 获取和设置属性值为boolean类型的属性
什么时候使用attr()方法: 获取和设置属性值不为boolean类型的属性
使用jQuery操作标签的css样式
| API方法 | 解释 |
|---|---|
| css(“属性名”," 属性值 ") | 设置指定的CSS样式 |
| addClass(类样式名) | 给指定的对象添加新的类样式，指定类样式名字即可 |
| removeClass(类样式名) | 删除指定的类样式 |
jQuery添加标签
| API方法 | 解释 |
|---|---|
| append(element) | 添加到最后一个子元素后面，两者之间是父子关系 |
| prepend(element) | 添加到第一个子元素前面，两者之间是父子关系 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系 |
注：appendTo()方法，prependTo()方法是 某标签（调用者）调用该方法添加到一个标签中，而调用者应是jq对象。如是js对象，则可把js对象转为jq对象，即 $("<a></a>")（创建a元素的jQuery对象）。
......
<select id="city">
<option value="">--选择市--</option>
</select>
......
$("<option></option>").html(江西).appendTo("#city");
jQuery删除标签
| API方法 | 解释 |
|---|---|
| remove() | 删除指定元素 |
| empty() | 清空指定元素的所有子元素 |
扩展
| API方法 | 解释 |
|---|---|
| clone() | 复制一个标签 |
| addClass(“类名”) | 添加类名 |
| removeClass(“类名”) | 移除类名 |
| toggleClass(“类名”) | 切换类名 |
jQuery的动画
| 使用方法 | 效果 |
|---|---|
| jQuery对象.show(毫秒值, 函数对象) | 显示 |
| jQuery对象.hide(毫秒值, 函数对象) | 隐藏 |
| jQuery对象.toggle(毫秒值, 函数对象) | 切换 |
| jQuery对象.slideDown(毫秒值, 函数对象) | 滑动显示（窗帘效果） |
| jQuery对象.slideUp(毫秒值, 函数对象) | 滑动隐藏 （窗帘效果） |
| jQuery对象.slideToggle(毫秒值, 函数对象) | 滑动切换 |
| jQuery对象.fadeIn(毫秒值, 函数对象) | 淡入显示 |
| jQuery对象.fadeOut(毫秒值, 函数对象) | 淡出隐藏 |
| jQuery对象.fadeToggle(毫秒值, 函数对象) | 淡入淡出切换 |
参数说明：
毫秒值：动画要用多长时间执行完成
函数对象：动画执行完毕之后，浏览器调用的函数对象（可不写）
jQuery的事件方法
| js的事件 | jQuery的事件 |
|---|---|
| onclick (点击事件) | click(fn) |
| ondblclick (双击事件) | dblclick(fn) |
| onmousedown | mousedown(fn) |
| onmouseup | mouseup(fn) |
| onmouseover | mouseover(fn) |
| onmouseout | mouseout(fn) |
| onmousemove | mousemove(fn) |
| onkeydown | keydown(fn) |
| onkeyup | keyup(fn) |
| onkeypress | keypress(fn) |
| onsubmit (提交事件) | submit(fn) |
| onchange (失去焦点后值改变了) | change(fn) |
| onload (页面加载完成事件 ) | $(fn) |
| onfocus | focus(fn) |
| onblur （失去焦点） | blur(fn) |
参数说明：
fn：触发的响应行为作为对象传给jQuery的事件的方法中
jQuery事件和js事件对比：
- jQuery事件和js事件，写法不同，但是意义相同
- js事件名称带on；jQuery事件名称不带on
- js事件是属性；jQuery事件是方法
- js事件响应行为是属性值；jQuery事件响应行为是方法的实参
扩展：事件切换
鼠标移入移出切换函数写法：
jQuery对象.hover(fn1, fn2)
说明：鼠标移入时，执行fn1， 鼠标移出时，执行fn2
jQuery对象.hover(fn)
说明：鼠标移入、移出，使用共同的响应行为fn
jQuery的事件绑定与解绑
- on绑定事件
jQuery元素对象.on(事件名称,function(){
//逻辑代码
})
说明：事件名称是jQuery的事件方法的方法名称，例如：click。当响应是则执行逻辑代码
- off解绑事件
jQuery元素对象.off(事件名称);
说明：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件
- 给后来添加的元素(未来元素)绑定或解绑事件（一个元素里的子元素绑定事件之后，又新增或了修改的新元素）
给未来元素绑定事件：jQuery对象.on("事件名称","给jQuery对象里的哪些元素绑定（写选择器）", fn)
给未来元素解绑事件：jQuery对象.off("事件名称","给jQuery对象里的哪些元素解绑（写选择器）")
jQuery的循环遍历
js的循环遍历
for(var i=0; i<<元素数组.length; i++){
元素数组[i];
}
jQuery的循环遍历
1.jQuery框架的全局each方法：
$.each(jquery对象,function(index,element){});
说明：
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
jQuery框架全局each方法可以循环遍历任何能够循环的对象，不论是js对象还是jQuery对象
示例：
$.each($("li"), function (index, element) {
alert("索引：" + index + ", 元素内容：" + element.innerHTML)
})
2.jQuery对象的each方法：
jQuery对象.each(function(index, element){})
3.新增的遍历写法（jQuery3.0新特性for of语句遍历）：
for(var item of items){
item;
}
说明：items：要遍历的元素数组 item：遍历出的元素
jQuery简单案例
网页定时弹出广告（定时器+JQ动画）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入jQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!--
1. 导入JQ相关的文件
2. 文档加载完成事件: $(function(){}) 启动定时器 setTimeout
3. 确定相关操作的事件:2秒后显示广告,过3秒隐藏广告
4. 事件触发函数: slideDown(); slideUp();
5. 函数里面再去操作相关的元素 $("#img1").slideDown(); $("#img1").slideUp();
-->
<script>
//文档加载完成
$(function(){
setTimeout(function(){
//2秒后显示广告
$("#img1").slideDown();
setTimeout(function(){
//3秒后隐藏广告
$("#img1").slideUp();
},3000)
},2000)
})
</script>
</head>
<body>
<img src="img/show.jpg" id="img1" width="100%" style="display: none"/>
</body>
</html>
表格的隔行换色（JQ选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
//获得所有的行:层级选择器
//偶数行变色（从0开始计数）：基本过滤选择器
$("tbody > tr:even").css("background-color","red");
//奇数行变色：基本过滤选择器
$("tbody > tr:odd").css("background-color","blue");
});
</script>
</head>
<body>
<table border="1px" width="600px" id="tab" align="center">
<thead>
<tr >
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
全选-全不选-反选（选择器的使用+JQ对DOM树属性操作）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script>
//实现全选和全不选功能
//给全选按钮绑定点击事件
function checkAll(obj){
//设置所有子选框的选中状态和全选框一样,即设置其"checked"属性
$(".itemSelect").prop("checked",obj.checked)
}
//实现反选功能
//给反选按钮绑定点击事件
function reverseCheck(){
//方法一
// //遍历出每一个子选框
// for (var i = 0; i < $(".itemSelect").length; i++) {
// //设置该子选框的选中状态和原来的状态相反
// $(".itemSelect")[i].checked=!$(".itemSelect")[i].checked
// }
//方法二
//将所有的子选框每个都点击一遍，也可实现发选
$(".itemSelect").click()
}
//解决问题：当所有子选框都选中的时候，全选框才选中，有一个子选框不选中那么全选框也不选中。
//文档加载完成事件
$(function(){
//实现点击子选框控制全选框的选中状态
//这里使用点击事件，实现反选功能时要使用方法二，这样反选时也能实现子选框控制全选框的选中状态效果
$(".itemSelect").click(function(){
//选中的子选框个数=总子选框个数,代表所有子选框都选中,则全选框也选中
$("#all").prop("checked",$(".itemSelect").length == $(".itemSelect:checked").length)
})
})
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" id="reverse" onclick="reverseCheck()" value="反选"></td>
</tr>
<tr>
<th><input type="checkbox" id="all" onclick="checkAll(this)" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td></td>
<td></td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td></td>
<td></td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td></td>
<td></td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td></td>
<td></td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
省市联动效果（JQ遍历+JQ的DOM操作）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script>
var cities = [
["深圳市","东莞市","惠州市","广州市"],//provinces[0] -->广东省的市
["长沙市","岳阳市","株洲市","湘潭市"],//provinces[1] -->湖南省的市
["厦门市","福州市","漳州市","泉州市"],//provinces[2] -->福建省的市
["赣州市","南昌市","九江市","景德镇市"]//provinces[3] -->江西省的市
];
/* 1. 导入JQ的文件 2. 文档加载事件:页面初始化 3. 确定事件: change事件 ***触发函数: 得到当前选中省份，根据选中的省份得到城市信息, 遍历城市数据，将遍历出来的城市添加到城市的select中 */
$(function(){
$("#province").change(function(){
// alert(this.value); // select的索引，从0开始（广东省）
//得到选中的省份的城市信息
var citiesInSelectedProvinces = cities[this.value];
//清空城市select中的option
//采用JQ的方式清空
$("#city").empty();
//遍历城市数据，参数i：citiesInSelectedProvinces的索引 参数n：对应索引的值（元素对象)
$(citiesInSelectedProvinces).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
//方法二：
/* $("#province").change(function(){ //清除掉city里原有的下拉选项，留一个提示选项 $("#city").html("<option value=''>--选择市--</option>"); //获取到省的值，根据省获取市的数据 var myCities = cities[this.value];//字符串数组 $(myCities).each(function(){ //创建标签，把当前市的名称设置到option标签里 $("<option></option>").html(this).appendTo("#city"); }); }); */
});
</script>
</head>
<body>
<!--选择省份-->
<select id="province">
<option value="-1" >--选择省--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
<option value="3">江西省</option>
</select>
<!--选择城市-->
<select id="city">
<option value="-1">--选择市--</option>
</select>
</body>
</html>
抽奖案例（实现定时调用的函数+JQ的DOM操作）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 奖品变换框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="img/00.png" style="width:160px;height:100px"/>
</div>
<!-- 获奖显示框 -->
<div style="border-style:double;width:430px;height:330px;position:absolute;left:300px;top:10px">
<img id="img2ID" src="img/00.png" width="430px" height="330px"/>
</div>
<!-- 开始抽奖按钮 -->
<input id="startID" type="button" value= style="width:50px;height:50px;font-size:5px" onclick="imgStart()">
<!-- 停止按钮 -->
<input id="stopID" type="button" value="停止" style="width:50px;height:50px;font-size:5px" onclick="imgStop()">
<script language='javascript' type='text/javascript'>
//准备一个一维数组，奖项图片
var imgs = [
"img/00.png",
"img/01.png",
"img/02.png",
"img/03.png",
"img/04.png",
"img/04.png"
];
var timer = null;
function imgStart() {
//防止重复点击开始按钮，创建多个timer，点击停止时小像框还会变换。
if (timer === null) {
//setInterval(code,millisec[,"lang"]) 方法可按照指定的周期（以毫秒计）来调用函数。
//参一(code )：必须有，要调用的函数或要执行的代码。参二(millisec)：必须有，周期性执行或调用 code 之间的时间间隔，以毫秒计。
//返回值:一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
timer = setInterval(function () {
//切换奖品变换框的图片：根据奖项图片数组的索引,通过Math随机生成奖项图片数组的索引值，通过索引值得到图片对象，使用attr(“属性名”,“属性值”)方法更改img标签的src属性，属性值即随机索引值得到图片对象。
//根据奖项图片数组得到索引index范围：[0, 5] 要使用整数取随机数
// Math.random()的范围是： [0, 1) * 6 ==> [0, 6) ==>向下取整 ==> [0, 5]
var index = Math.floor(Math.random() * 6);
var imgSrc = imgs[index];
$("#img1ID").attr("src", imgSrc);
}, 10);
}
}
function imgStop() {
clearInterval(timer);
timer = null;
//获取小像框里图片的路径， 把路径设置到大像框里
var imgSrc = $("#img1ID").attr("src");
$("#img2ID").attr("src", imgSrc);
}
</script>
</body>
</html>
京公网安备 11010502036488号