JQuery
1、JQuery快速入门
1.1、JQuery介绍
- jQuery 是一个 JavaScript 库。
- 所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就 是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。
- jQuery 官网:
版本
jquery-1xx.js
jquery-1xxx.min.js
jquery-2xx.js
jquery-2xxx.min.js
jquery-3xx.js
jquery-3xxx.min.js
xxx.js 和 xxx.min.js: 一个是源码, 一个是压缩文件
1xx以后的版本, 不支持IE6、7、8版本浏览器
1.2、JQuery快速入门
- 开发思路
- 编写 HTML 文档。
- 引入 jQuery 文件。
- 使用 jQuery 获取元素。
- 使用浏览器测试。
- 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门</title>
</head>
<body>
<div id="div">我是div</div>
</body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// JS方式,通过id属性值来获取div元素
let jsDiv = document.getElementById("div");
//alert(jsDiv);
//alert(jsDiv.innerHTML);
// jQuery方式,通过id属性值来获取div元素
let jqDiv = $("#div");
alert(jqDiv);
alert(jqDiv.html());
</script>
</html>
1.3、小结
- jQuery 是一个 JavaScript 库。
- 说白了就是定义好的一个 JS 文件,内部封装了很多功能,可以大大简化我们的 JS 操作步骤。
- jQuery 官网:https://www.jquery.com。
- 要想使用,必须要引入该文件。
- jQuery 的核心语法 $();
2、JQuery基本语法
2.1、JS对象和JQuery对象转换
-
jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象,而不是 JS 方式获得的 DOM 对象,二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。
-
JS 的 DOM 对象转换成 jQuery 对象
//$(JS 的 DOM 对象); // JS方式,通过id属性值获取div元素 let jsDiv = document.getElementById("div"); alert(jsDiv.innerHTML); //alert(jsDiv.html()); JS对象无法使用jQuery里面的功能 // 将 JS 对象转换为jQuery对象 let jq = $(jsDiv); alert(jq.html());
-
jQuery 对象转换成 JS 对象
/*jQuery 对象[索引]; jQuery 对象.get(索引);*/ // jQuery方式,通过id属性值获取div元素 let jqDiv = $("#div"); alert(jqDiv.html()); // alert(jqDiv.innerHTML); jQuery对象无法使用JS里面的功能 // 将 jQuery对象转换为JS对象 let js = jqDiv[0]; alert(js.innerHTML);
2.2、事件的基本使用
-
常用的事件
-
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件的使用</title> </head> <body> <input type="button" id="btn" value="点我"> <br> <input type="text" id="input"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //单击事件 $("#btn").click(function(){ alert("点我干嘛?"); }); //获取焦点事件 // $("#input").focus(function(){ // alert("你要输入数据啦..."); // }); //失去焦点事件 $("#input").blur(function(){ alert("你输入完成啦..."); }); </script> </html>
事假绑定:
1. 建议: 编写一个页面加载事件
2. 获取元素对象,绑定事件
例如:
$(function () {
$("#btn").click(function () {
alert("单击");
});
$("#input").blur(function () {
alert("校验用户名~");
});
})
2.3、事件的绑定和解绑
-
绑定事件
//jQuery 对象.on(事件名称,执行的功能);
//给btn1按钮绑定单击事件 $("#btn1").on("click",function(){ alert("点我干嘛?"); });
-
解绑事件
如果不指定事件名称,则会把该对象绑定的所有事件都解绑
//jQuery 对象.off(事件名称);
//通过btn2解绑btn1的单击事件 $("#btn2").on("click",function(){ $("#btn1").off("click"); });
2.4、事件的绑定(链式)
事件的切换:需要给同一个对象绑定多个事件,而且多个事件还有先后顺序关系。
-
方式一:单独定义
$(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
//方式一 单独定义 $("#div").mouseover(function(){ //背景色:红色 //$("#div").css("background","red"); // this: 表示当前操作JS对象 $(this).css("background","red"); }); $("#div").mouseout(function(){ //背景色:蓝色 //$("#div").css("background","blue"); $(this).css("background","blue"); });
-
方式二:链式定义
$(元素).事件方法名1(要执行的功能)
.事件方法名2(要执行的功能);
//方式二 链式定义 $("#div").mouseover(function(){ // this: 表示当前操作JS对象 $(this).css("background","red"); }).mouseout(function(){ $(this).css("background","blue"); });
2.5、事件绑定 --了解
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
注意: toggle 1.8以后版本不支持了
<input type="button" value="事件切换" id="btn">
<script>
$('#btn').toggle( // toggle 1.8以后版本不支持了
function () {
alert("吃饭")
},
function () {
alert("睡觉")
},
function () {
alert("打游戏")
}
);
</script>
2.6、遍历操作
-
方式一:传统方式
for(let i = 0; i < 容器对象长度; i++){ 执行功能; }
//方式一:传统方式 $("#btn").click(function(){ let lis = $("li"); for(let i = 0 ; i < lis.length; i++) { alert(i + ":" + lis[i].innerHTML); } });
-
方式二:对象.each()方法
容器对象.each(function(index,ele){ 执行功能; });
//方式二:对象.each()方法 $("#btn").click(function(){ let lis = $("li"); lis.each(function(index,ele){ alert(index + ":" + ele.innerHTML); }); });
-
方式三:$.each()方法
$.each(容器对象,function(index,ele){ 执行功能; });
//方式三:$.each()方法 $("#btn").click(function(){ let lis = $("li"); $.each(lis,function(index,ele){ alert(index + ":" + ele.innerHTML); }); });
-
方式四:for of语句
jQuery 3.0 新特性 – 了解
for(ele of 容器对象){ 执行功能; }
//方式四:for of 语句遍历 $("#btn").click(function(){ let lis = $("li"); for(ele of lis){ alert(ele.innerHTML); } });
2.6、小结
- JS 对象和 jQuery 对象相互转换
- $(JS 的 DOM 对象):将 JS 对象转为 jQuery 对象。
- jQuery 对象[索引] jQuery
- 对象.get(索引):将 jQuery 对象转为 JS 对象。
- 事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
- on(事件名称,执行的功能):绑定事件。
- off(事件名称):解绑事件。
- 遍历
- 传统方式。
- 对象.each() 方法。
- $.each() 方法。
- for of 语句。
3、JQuery选择器
3.1、基本选择器
-
选择器:类似于 CSS 的选择器,可以帮助我们获取元素。
-
例如:id 选择器、类选择器、元素选择器、属性选择器等等。
-
jQuery 中选择器的语法:$();
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基本选择器</title> </head> <body> <div id="div1">div1</div> <div class="cls">div2</div> <div class="cls">div3</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.元素选择器 $("元素的名称") let divs = $("div"); //alert(divs.length); //2.id选择器 $("#id的属性值") let div1 = $("#div1"); //alert(div1); //3.类选择器 $(".class的属性值") let cls = $(".cls"); alert(cls.length); </script> </html>
3.2、层级选择器
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层级选择器</title> </head> <body> <div> <span>s1 <span>s1-1</span> <span>s1-2</span> </span> <span>s2</span> </div> <div></div> <p>p1</p> <p>p2</p> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1. 后代选择器 $("A B"); A下的所有B(包括B的子级) let spans1 = $("div span"); //alert(spans1.length); // 2. 子选择器 $("A > B"); A下的所有B(不包括B的子级) let spans2 = $("div > span"); //alert(spans2.length); // 3. 兄弟选择器 $("A + B"); A相邻的下一个B let ps1 = $("div + p"); //alert(ps1.length); // 4. 兄弟选择器 $("A ~ B"); A相邻的所有B let ps2 = $("div ~ p"); alert(ps2.length); </script> </html>
A B: A的孩儿们B
A>B: A的儿子们B
A+B: A的大弟弟B
A~B: A的弟弟们B
3.3、属性选择器
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性选择器</title> </head> <body> <input type="text"> <input type="password"> <input type="password"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.属性名选择器 $("元素[属性名]") let in1 = $("input[type]"); //alert(in1.length); //2.属性值选择器 $("元素[属性名=属性值]") let in2 = $("input[type='password']"); alert(in2.length); </script> </html>
3.4、过滤器选择器
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过滤器选择器</title> </head> <body> <div>div1</div> <div id="div2">div2</div> <div>div3</div> <div>div4</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.首元素选择器 $("A:first"); let div1 = $("div:first"); //alert(div1.html()); // 2.尾元素选择器 $("A:last"); let div4 = $("div:last"); //alert(div4.html()); // 3.非元素选择器 $("A:not(B)"); let divs1 = $("div:not(#div2)"); //alert(divs1.length); // 4.偶数选择器 $("A:even"); let divs2 = $("div:even"); //alert(divs2.length); //alert(divs2[0].innerHTML); //alert(divs2[1].innerHTML); // 5.奇数选择器 $("A:odd"); let divs3 = $("div:odd"); //alert(divs3.length); //alert(divs3[0].innerHTML); //alert(divs3[1].innerHTML); // 6.等于索引选择器 $("A:eq(index)"); let div3 = $("div:eq(2)"); //alert(div3.html()); // 7.大于索引选择器 $("A:gt(index)"); let divs4 = $("div:gt(1)"); //alert(divs4.length); //alert(divs4[0].innerHTML); //alert(divs4[1].innerHTML); // 8.小于索引选择器 $("A:lt(index)"); let divs5 = $("div:lt(2)"); alert(divs5.length); alert(divs5[0].innerHTML); alert(divs5[1].innerHTML); </script> </html>
3.5、表单属性选择器
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单属性选择器</title> </head> <body> <input type="text" disabled> <input type="text" > <input type="radio" name="gender" value="men" checked>男 <input type="radio" name="gender" value="women">女 <input type="checkbox" name="hobby" value="study" checked>学习 <input type="checkbox" name="hobby" value="sleep" checked>睡觉 <select> <option>---请选择---</option> <option selected>本科</option> <option>专科</option> </select> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.可用元素选择器 $("A:enabled"); let ins1 = $("input:enabled"); //alert(ins1.length); // 2.不可用元素选择器 $("A:disabled"); let ins2 = $("input:disabled"); //alert(ins2.length); // 3.单选/复选框被选中的元素 $("A:checked"); let ins3 = $("input:checked"); //alert(ins3.length); //alert(ins3[0].value); //alert(ins3[1].value); //alert(ins3[2].value); // 4.下拉框被选中的元素 $("A:selected"); let select = $("select option:selected"); alert(select.html()); </script> </html>
3.6、小结
- 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。
- jQuery 中选择器的语法:$();
- 基本选择器
- $(“元素的名称”);
- $("#id的属性值");
- $(".class的属性值");
- 层级选择器
- $(“A B”);
- $(“A > B”);
- 属性选择器
- $(“A[属性名]”);
- $(“A[属性名=属性值]”);
- 过滤器选择器
- $(“A:even”);
- $(“A:odd”);
- 表单属性选择器
- $(“A:disabled”);
- $(“A:checked”);
- $(“A:selected”);
4、JQuery DOM
4.1、操作文本
-
常用方法
格式: xxx() : 获取数据 xxx(...): 设置数据 html(): 获取标签体HTML代码 html(..): 给标签设置HTML代码, 浏览器会解析 text(): 获取标签体纯文本内容 text(..): 给标签设置纯文本内容,若有标签,浏览器不进行解析,原样输出了
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作文本</title> </head> <body> <div id="div">我是div</div> <input type="button" id="btn1" value="获取div的文本"> <input type="button" id="btn2" value="设置div的文本"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1. html() 获取标签的文本内容 $("#btn1").click(function(){ //获取div标签的文本内容 let value = $("#div").html(); alert(value); }); //2. html(value) 设置标签的文本内容,解析标签 $("#btn2").click(function(){ //设置div标签的文本内容 //$("#div").html("我真的是div"); $("#div").html("<b>我真的是div</b>"); }); </script> </html>
4.2、操作对象
-
常用方法
A.append(B) B.appendTo(A) 将B元素添加到A元素内部的后面.
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作对象</title> </head> <body> <div id="div"></div> <input type="button" id="btn1" value="添加一个span到div"> <br><br><br> <input type="button" id="btn2" value="将加油添加到城市列表最下方"> <input type="button" id="btn3" value="将加油添加到城市列表最上方"> <input type="button" id="btn4" value="将雄起添加到上海下方"> <input type="button" id="btn5" value="将雄起添加到上海上方"> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <ul id="desc"> <li id="jy">加油</li> <li id="xq">雄起</li> </ul> <br><br><br> <input type="button" id="btn6" value="将雄起删除"> <input type="button" id="btn7" value="将描述列表全部删除"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> /* 1. $("元素") 创建指定元素 2. append(element) 添加成最后一个子元素,由添加者对象调用 3. appendTo(element) 添加成最后一个子元素,由被添加者对象调用 4. prepend(element) 添加成第一个子元素,由添加者对象调用 5. prependTo(element) 添加成第一个子元素,由被添加者对象调用 6. before(element) 添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用 7. after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用 8. remove() 删除指定元素(自己移除自己) 9. empty() 清空指定元素的所有子元素 */ // 按钮一:添加一个span到div $("#btn1").click(function(){ let span = $("<span>span</span>"); $("#div").append(span); }); //按钮二:将加油添加到城市列表最下方 $("#btn2").click(function(){ //$("#city").append($("#jy")); $("#jy").appendTo($("#city")); }); //按钮三:将加油添加到城市列表最上方 $("#btn3").click(function(){ //$("#city").prepend($("#jy")); $("#jy").prependTo($("#city")); }); //按钮四:将雄起添加到上海下方 $("#btn4").click(function(){ $("#sh").after($("#xq")); }); //按钮五:将雄起添加到上海上方 $("#btn5").click(function(){ $("#sh").before($("#xq")); }); //按钮六:将雄起删除 $("#btn6").click(function(){ $("#xq").remove(); }); //按钮七:将描述列表全部删除 $("#btn7").click(function(){ $("#desc").empty(); }); </script> </html>
4.3、操作样式
-
常用方法
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作样式</title> <style> .cls1{ background: pink; height: 30px; } </style> </head> <body> <div style="border: 1px solid red;" id="div">我是div</div> <input type="button" id="btn1" value="获取div的样式"> <input type="button" id="btn2" value="设置div的背景色为蓝色"> <br><br><br> <input type="button" id="btn3" value="给div设置cls1样式"> <input type="button" id="btn4" value="给div删除cls1样式"> <input type="button" id="btn5" value="给div设置或删除cls1样式"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.css(name) 获取css样式 $("#btn1").click(function(){ alert($("#div").css("border")); }); // 2.css(name,value) 设置CSS样式 $("#btn2").click(function(){ $("#div").css("background","blue"); }); // 3.addClass(value) 给指定的对象添加样式类名 $("#btn3").click(function(){ $("#div").addClass("cls1"); }); // 4.removeClass(value) 给指定的对象删除样式类名 $("#btn4").click(function(){ $("#div").removeClass("cls1"); }); // 5.toggleClass(value) 如果没有样式类名,则添加。如果有,则删除 $("#btn5").click(function(){ $("#div").toggleClass("cls1"); }); </script> </html>
4.4、操作属性
-
常用方法
实际开发中, 一般优先使用prop, 不行再使用attr val(): 获取标签value属性值 val(...): 给标签设置value属性值.
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作属性</title> </head> <body> <input type="text" id="username"> <br> <input type="button" id="btn1" value="获取输入框的id属性"> <input type="button" id="btn2" value="给输入框设置value属性"> <br><br> <input type="radio" id="gender1" name="gender">男 <input type="radio" id="gender2" name="gender">女 <br> <input type="button" id="btn3" value="选中女"> <br><br> <select> <option>---请选择---</option> <option id="bk">本科</option> <option id="zk">专科</option> </select> <br> <input type="button" id="btn4" value="选中本科"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.attr(name,[value]) 获得/设置属性的值 //按钮一:获取输入框的id属性 $("#btn1").click(function(){ alert($("#username").attr("id")); }); //按钮二:给输入框设置value属性 $("#btn2").click(function(){ $("#username").attr("value","hello..."); }); // 2.prop(name,[value]) 获得/设置属性的值(checked,selected) //按钮三:选中女 $("#btn3").click(function(){ $("#gender2").prop("checked",true); }); //按钮四:选中本科 $("#btn4").click(function(){ $("#bk").prop("selected",true); }); </script> </html>
4.5、小结
- 操作文本
- html() html(…):获取或设置标签的文本,解析标签。
- 操作对象
- $(“元素”):创建指定元素。
- append(element):添加成最后一个子元素,由添加者对象调用。
- prepend(element):添加成第一个子元素,由添加者对象调用。
- before(element):添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用。
- after(element):添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用。
- remove():删除指定元素(自己移除自己)。
- 操作样式
- addClass(value):给指定的对象添加样式类名。
- removeClass(value):给指定的对象删除样式类名。
- 操作属性
- attr(name,[value]):获得/设置属性的值。
- prop(name,[value]):获得/设置属性的值(checked,selected)。
5、综合案例 复选框
5.1、案例效果
5.2、分析和实现
功能分析
- 全选
-
- 为全选按钮绑定单击事件。
- 获取所有的商品项复选框元素,为其添加 checked 属性,属性值为 true。
-
- 全不选
-
- 为全不选按钮绑定单击事件。
- 获取所有的商品项复选框元素,为其添加 checked 属性,属性值为 false。
-
- 反选
-
- 为反选按钮绑定单击事件
- 获取所有的商品项复选框元素,为其添加 checked 属性,属性值是目前相反的状态。
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复选框</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th style="text-align: left">
<input style="background:lightgreen" id="selectAll" type="button" value="全选">
<input style="background:lightgreen" id="selectNone" type="button" value="全不选">
<input style="background:lightgreen" id="reverse" type="button" value="反选">
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//全选
//1.为全选按钮添加单击事件
$("#selectAll").click(function(){
//2.获取所有的商品复选框元素,为其添加checked属性,属性值true
$(".item").prop("checked",true);
});
//全不选
//1.为全不选按钮添加单击事件
$("#selectNone").click(function(){
//2.获取所有的商品复选框元素,为其添加checked属性,属性值false
$(".item").prop("checked",false);
});
//反选
//1.为反选按钮添加单击事件
$("#reverse").click(function(){
//2.获取所有的商品复选框元素,为其添加checked属性,属性值是目前相反的状态
let items = $(".item");
items.each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
});
</script>
</html>
6、综合案例 随机图片 - 了解
6.1、案例效果
6.2、动态切换小图的分析和实现
-
功能分析
- 准备一个数组
- 定义计数器
- 定义定时器对象
- 定义图片路径变量
- 为开始按钮绑定单击事件
- 设置按钮状态
- 设置定时器,循环显示图片
- 循环获取图片路径
- 将当前图片显示到小图片上
- 计数器自增
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机图片</title> </head> <body> <!-- 小图 --> <div style="background-color:red;border: dotted; height: 50px; width: 50px"> <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;"> </div> <!-- 大图 --> <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px"> <img src="" id="big" style="width: 400px; height: 400px; display:none;"> </div> <!-- 开始和结束按钮 --> <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始"> <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.准备一个数组 let imgs = [ "img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg", "img/06.jpg", "img/07.jpg", "img/08.jpg", "img/09.jpg", "img/10.jpg"]; //2.定义计数器变量 let count = 0; //3.声明定时器对象 let time = null; //4.声明图片路径变量 let imgSrc = ""; //5.为开始按钮绑定单击事件 $("#startBtn").click(function(){ //6.设置按钮状态 //禁用开始按钮 $("#startBtn").prop("disabled",true); //启用停止按钮 $("#stopBtn").prop("disabled",false); //7.设置定时器,循环显示图片 time = setInterval(function(){ //8.循环获取图片路径 let index = count % imgs.length; // 0%10=0 1%10=1 2%10=2 .. 9%10=9 10%10=0 //9.将当前图片显示到小图片上 imgSrc = imgs[index]; $("#small").prop("src",imgSrc); //10.计数器自增 count++; },10); }); </script> </html>
6.3、显示大图的分析和实现
-
功能分析
- 为停止按钮绑定单击事件
- 取消定时器
- 设置按钮状态
- 将图片显示到大图片上
-
代码实现
//11.为停止按钮绑定单击事件 $("#stopBtn").click(function(){ //12.取消定时器 clearInterval(time); //13.设置按钮状态 //启用开始按钮 $("#startBtn").prop("disabled",false); //禁用停止按钮 $("#stopBtn").prop("disabled",true); //14.将图片显示到大图片上 $("#big").prop("src",imgSrc); $("#big").prop("style","width: 400px; height: 400px;"); });
7. 案例-切换验证码
步骤分析:
1. 给图片绑定单击事件
2. 触发事件后, 修改图片对象的src属性
prop/attr
$(function () {
// 绑定单击事件
$('#vcode').click(function () {
// 获取图片对象 this: 表示当前操作的JS对象
$(this).prop("src","${pageContext.request.contextPath}/checkCode?"+new Date().getTime());
});
})
8. 案例-全选/全不选
步骤
1. 给第一个复选框绑定单击事件
2. 获取其他复选框
3. 设置每一个复选框checked属性和第一个复选框checked属性一致
/* 全选/全不选
1. 给第一个复选框绑定单击事件
2. 获取其他复选框
3. 设置每一个复选框checked属性和第一个复选框checked属性一致
*/
$(function () {
//1. 给第一个复选框绑定单击事件
$("#firstCb").click(function () {
//获取其他复选框,设置每一个复选框checked属性和第一个复选框checked属性一致
$("input[name='id']").prop("checked",this.checked);
});
})
9. 案例-多选删除
步骤:
1. 修改"删除选中"按钮为普通按钮
2. 获取下面所有复选框
3. 遍历数组, 判断是否至少有一个复选框选中了
若选中了: 询问是否删除 "亲,您确认要删除选中用户么", 确认后提交表单
若都没勾选: 给出提示 "亲,请您勾选要删除的用户"
4. 需要通过JS提交表单, 给<form>添加一个id属性值
document.getElementById("form").submit();
//删除选中
//1. 给按钮绑定单击事件
$('#deleteSel').click(function () {
//2. 获取选中复选框对象
var length = $("input[type='checkbox']:checked").length;
//3. 判断长度是否为0
if(length==0){
// 一个都没选
alert("亲,请您选中需要删除的数据!");
return;
}
// 至少勾选了一个. 询问是否删除
if(confirm("亲,您确认要删除选中数据么?")){
// 执行删除(提交表单)
$('#form').submit();
}
});
总结
jQuery: 忘记JS
1. 组成
ECMAScript基本语法
BOM 浏览器对象模型
DOM 文档对象模型
2. ECMAScript基本语法
1. 变量
var 变量名 = 值;
let 变量名 = 值;
变量名 = 值;
2. 数据类型
1. 原始数据类型
number
bigint
string
boolean
null
undefined
2. 引用数据类型
Date 日期对象
getTime() 切换验证码
3. 运算
/
== : 只比较值
===: 全等, 先比较类型再比较值
4. 函数
1. new Function("a","b","alert(a+b)")
2. 声明函数
function 函数名(){
}
3. 匿名函数
var 函数名 = function (){
}
调用函数: 函数名()
5. 事件
onclick 单击
onblur 离焦
onchange 下拉框改变事件
onsubmit 表单提交事件
onload: 页面加载事件, 当整个页面都加载成功以后, 自动执行代码块内容
6. 事件绑定: 事件和函数绑定
1. 通过标签事件属性绑定
<a id="id" onclick="函数()">
2. 动态绑定事件
<a id="id">
1. 获取标签对象 a
2. 动态绑定事件 a.onclick = function(){}
7. 属性操作
固有属性:
获取: 对象.属性名;
设置: 对象.属性名=值;
自定义属性
设置: 对象.setAttribute(属性名,属性值);
移除: 对象.removeAttribute(属性名)
8. 标签体内容 <开始>标签体内容</结束>
innerText: 获取/设置标签体纯文本内容
innerHTML: 获取/设置标签体HTML代码
DOM对象: 文档对象模型
获取标签: 选择器替换方法
getElementById()
getElementsByXxx()
操作标签属性
操作标签体内容
BOM: 浏览器对象模型
window:
1. 弹出框
2. 定时器
3. onload
location
href属性:获取/设置浏览器URL路径
获取:
location.href;
设置:
location.href=URL; // 删除确认
history: 浏览器历史记录
go(-1) 返回
jQuery
概述
概念: JS框架, 封装了JS常见操作
版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
功能不再新增。因此一般项目来说,使用1.x版本就可以了,
最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
1.xxx.js 开发使用版本, 有注释和换行,方便阅读
1.xxx.min.js 生产使用的.
入门:
1. 复制 jQuery.js到项目中
2. 在页面引入jQuery文件
3. 使用
$("选择器");
对象转换:
原因: JS对象和JQ对象的方法是不通用.
转换:
JS对象 --> jQuery对象
$(JS对象): 氪金
jQuery对象 --> JS对象
jQ对象[索引]
jQ对象.get(索引);
事件绑定:
格式:
JQ对象.事件名(function(){
});
建议:
1. 编写页面加载事件 (获取标签的代码可能在标签的上面, 出现获取不到的情况)
2. 获取标签并绑定事件
1. 页面加载事件
JS页面加载事件
onload = function () {
alert("1111");
}
onload = function () {
alert("2222");
}
总结: JS 页面加载事件, 只执行最后一个。
jQuery页面加载事件
$(function () {
alert("1111");
});
$(function () {
alert("2222");
});
特点:jQuery中的页面加载事件, 都会执行.
分类:
1. 标准写法
$(document).ready(function () {
alert("我准备好了")
});
2. 简化写法:
$(function () {
alert("我准备好了")
});
2. 事件相关操作
1. 绑定和解绑
绑定:
1. 传统方式 ★
JQ对象.事件名(function(){});
2. on方式
JQ对象.on("事件名",function(){})
解绑:
JQ对象.off("事件名"); 解除指定的事件
JQ对象.off(); 解除所有事件
2. 事件链式编程
含义: 一个对象可以绑定多个事件. 或调用多个方法.
例如:
JQ对象.事件1(function(){}).事件1(function(){});
细节:
$("#div").mouseover(function(){
// this: 表示当前操作的JS对象
//$(this).css("background","red");
this.style.background = "red";
}).mouseout(function(){
$(this).css("background","blue");
});
3. 事件切换 -- 了解
1. 导入jquery-1.8.3.min.js版本的文件
2. 编写代码
<script>
$(function () {
$("#btn").toggle(
function () {
alert("抽烟");
},
function () {
alert("喝酒");
},
function () {
alert("烫头");
}
);
})
</script>
3. 遍历函数
1. 基本for循环
for(let i = 0 ; i < lis.length; i++) {
}
2. each 函数
JQ对象.each(function(){
// this: 在遍历函数中, 表示当前遍历到的JS对象
alert(this.innerHTML);
});
4. 选择器总结
1. 基本选择器 ★★★★★
#id值
.类名
元素名
------
* 全部标签
选择器1,选择器2 选择器1选中结果和2结果的并集
2. 属性选择器
[属性名]
[属性名=值]
------------
[属性名!=值]
[属性名^=值] 值以XxX开头
[属性名$=值] 值以XxX结尾
[属性名*=值] 值包含Xxx
[属性值1][属性值2=值].. 组合选择器
3. 层级选择器
A B A的孩儿们B
A>B A的儿子们B
A+B A是大弟弟B
A~B A的弟弟们B
4. 基本过滤选择器
:first
:last
:eq(index)
:gt(index)
:lt(index)
:not(..)
:even
:odd
5. 表单属性过滤选择器
:enabled 可用的
:disabled 不可用的
:checked 单选框/复选框选中的
:selected 下拉框选中<option>
5. 属性
5.1 HTML代码/文本/值
html():
html(): 获取HTML代码, 如果有标签一并获取
html(...): 替换标签中的HTML代码, 若有标签浏览器会解析
text()
text(): 获取纯文本, 如果有标签直接忽略
html(...): 替换标签中的文本内容, 若有标签浏览器不会解析,原样输出
val():
val(): 获取value属性值
val(...): 给标签设置value属性值
5.2 属性操作
prop : 操作标签固有属性
prop("属性名"): 获取属性值
prop("属性名","值"): 设置属性值
attr : 操作标签自定义属性
attr("属性名"): 获取属性值
attr("属性名","值"): 设置属性值
开发技巧: 优先使用prop. 不行换attr
6. 文档处理
内部插入
A.append(B)
B.appendTo(A)
将B添加到A内部的后面.
案例1 - 左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
<script>
// 页面加载事件
$(function () {
//1 给按钮绑定事件
$("#toRight").click(function () {
// 将左侧选择的option标签, 追加到右侧下拉框内部的后面
$("#leftName>option:checked").appendTo($("#rightName"));
});
$("#toLeft").click(function () {
$("#rightName > option:checked").appendTo($("#leftName"));
});
})
</script>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>余萌萌</option>
<option>刘洋</option>
<option>傅道武</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>秦汉</option>
<option>刘煜</option>
<option>方彬</option>
</select>
</div>
</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>复选框</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 全选和全不选
function checkAll(flag) {
//获取其他复选框, 让每一个复选框的checked = flag
$(".item").prop("checked",flag);
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th style="text-align: left">
<input style="background:lightgreen" onclick="checkAll(this.checked)" id="selectAll" type="checkbox" >
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>