[TOC]
一、jQuery快速入门
1.1 jQuery介绍
- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
jQuery 官网：https://www.jQuery.com
1.2 jQuery版本
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-1.12.4.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.4 小结
jQuery 是一个 JavaScript 库，说白了就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。
- jQuery 官网：https://www.jQuery.com。
- 要想使用，必须要引入该文件。
- jQuery 的核心语法
- jQuery可用$代替
$();
jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。
- JS的DOM对象转换成jQuery对象
$(JS的DOM对象);- 通常jQuery对象的命名都是以$开头
jQuery对象转换成JS对象
jQuery对象[索引];jQuery对象.get(索引);- jQuery对象的本质是一个数组，数组中包含了多个JS的DOM对象
jQuery对象 = [JS的DOM对象, JS的DOM对象, ...JS的DOM对象];<!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> <script src="js/jQuery-3.3.1.min.js"></script> <script> // 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方式，通过id属性值获取div元素 let $jqDiv = $("#div"); //alert($jqDiv.html()); // alert($jqDiv.innerHTML); jQuery对象无法使用JS里面的功能 // 将 jQuery对象转换为JS对象 //let js = $jqDiv[0]; //alert(js.innerHTML); alert($jqDiv.get(0).innerHTML); </script> </html>2.2 事件的基本使用
JS的DOM对象常用的事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 on 。 | 事件名 | 说明 | | —- | —- | | onload | 某个页面或图像被完成加载 | | onsubmit | 当表单提交时触发该事件 | | onclick | 鼠标单击事件 | | ondblclick | 鼠标双击事件 | | onblur | 元素失去焦点 | | onfocus | 元素获得焦点 | | onchange | 用户改变域的内容 |
JS的DOM对象了解的事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 on 。 | 事件名 | 说明 | | —- | —- | | onkeydown | 某个键盘的键被按下 | | onkeypress | 某个键盘的键被按下或按住 | | onkeyup | 某个键盘的键被松开 | | onmousedown | 某个鼠标按键被按下 | | onmouseup | 某个鼠标按键被松开 | | onmouseover | 鼠标被移到某元素之上 | | onmouseout | 鼠标从某元素移开 |
其他事件
| 事件名 | 说明 | | —- | —- | | $(function(){}) | 页面加载事件 | | scroll() | 鼠标滚动事件 |代码实现
<!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>2.3 事件的绑定和解绑
绑定事件
jQuery对象.on(事件名称,执行的功能);//给btn1按钮绑定单击事件 $("#btn1").on("click",function(){ alert("点我干嘛?"); });
解绑事件
jQuery对象.off(事件名称);- 如果不指定事件名称，则会把该对象绑定的所有事件都解绑。
//通过btn2解绑btn1的单击事件 $("#btn2").on("click",function(){ $("#btn1").off("click"); });
代码演示
<!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="btn1" value="点我"> <input type="button" id="btn2" value="解绑"> </body> <script src="js/jQuery-3.3.1.min.js"></script> <script> //给btn1按钮绑定单击事件 /*$("#btn1").on("click",function(){ alert("点我干嘛?"); });*/ $("#btn1").click(function () { alert("点我干嘛?"); }); //通过btn2解绑btn1的单击事件 $("#btn2").on("click",function(){ $("#btn1").off("click"); }); </script> </html>2.4 事件的切换
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。
方式一：单独定义
$(元素).事件方法名1(要执行的功能);$(元素).事件方法名2(要执行的功能);//方式一 单独定义 $("#div").mouseover(function(){ //背景色：红色 //$("#div").css("background","red"); $(this).css("background","red"); }); $("#div").mouseout(function(){ //背景色：蓝色 //$("#div").css("background","blue"); $(this).css("background","blue"); });方式二：链式定义
$(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能);//方式二 链式定义 $("#div").mouseover(function(){ $(this).css("background","red"); }).mouseout(function(){ $(this).css("background","blue"); });
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件的切换</title> <style> #div{ border: 1px solid black; height: 500px; width: 300px; } </style> </head> <body> <div id="div">我是div</div> <input type="button" id="btn2" value="解绑"> </body> <script src="js/jQuery-3.3.1.min.js"></script> <script> //方式一 单独定义 // $("#div").mouseover(function(){ // //背景色：红色 // //$("#div").css("background","red"); // $(this).css("background","red"); // }); // $("#div").mouseout(function(){ // //背景色：蓝色 // //$("#div").css("background","blue"); // $(this).css("background","blue"); // }); //方式二 链式定义 $("#div").mouseover(function(){ $(this).css("background","red"); }).mouseout(function(){ $(this).css("background","blue"); }); $("#btn2").on("click",function(){ $("#div")//off("mouseout"); $("#div").off();//解绑div上所有的事件 }); </script> </html>2.5 遍历操作
方式一：普通for循环
for(let i = 0; i < 容器对象长度; i++){ 执行功能; }方式二：对象.each()
- 函数中的index和element可以省略，用$(this)可代表取出的JS的DOM对象再次包装的jQuery对象
容器对象.each(function(index,element){ 执行功能; });
- 函数中的index和element可以省略，用$(this)可代表取出的JS的DOM对象再次包装的jQuery对象
方式三：$.each()
$.each(容器对象,function(index,ele){ 执行功能; });方式四：for of
- 注意增强for循环在jQuery3.0版本之后才可以使用
for(ele of 容器对象){ 执行功能; }
- 注意增强for循环在jQuery3.0版本之后才可以使用
代码演示
```html <!DOCTYPE html>- 第一个标签
- 第二个标签
- 第三个标签
<a name="708cce37"></a> ## 2.6 小结 - JS 对象和 jQuery 对象相互转换 - $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。 - jQuery 对象[索引]：将jQuery对象转换成JS对象。 - 对象.get(索引)：将 jQuery 对象转为 JS 对象。 - 事件 - 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。 - on(事件名称,执行的功能)：绑定事件。 - off(事件名称)：解绑事件。 - 遍历 - 普通for循环。 - 对象.each()。 - $.each() 方法。 - for of。 <a name="c6574058"></a> # 三、jQuery选择器 <a name="ba6d0841"></a> ## 3.1 基本选择器(重点) - 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。 - jQuery 中选择器的语法：$(); - **选择器语法** | 选择器 | 语法 | 作用 | | --- | --- | --- | | 元素选择器 | $("元素的名称"); | 根据元素名称获取元素对象们 | | id 选择器 | $("#id的属性值"); | 根据id属性值获取元素对象 | | 类选择器 | $(".class的属性值"); | 根据class属性值获取元素对象们 | - **代码实现** ```html <!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 $clss = $(".cls"); alert($clss.length); </script> </html>3.2 层级选择器
选择器语法
| 选择器 | 语法 | 作用 | | —- | —- | —- | | 后代选择器 | $(“A B”); | A下的所有B(包括B的子级) | | 子选择器 | $(“A > B”); | A下的所有B(不包括B的子级) | | 兄弟选择器 | $(“A + B”); | A相邻的下一个B | | 兄弟选择器 | $(“A ~ B”); | A相邻的所有B |代码实现
```html <!DOCTYPE html>s1 s1-1 s1-2 s2p1
p2
<a name="ff61c521"></a> ## 3.3 属性选择器 - **选择器语法** | 选择器 | 语法 | 作用 | | --- | --- | --- | | 属性名选择器 | $("元素[属性名]"); | 根据指定属性名获取元素对象们 | | 属性值选择器 | $("元素[属性名=属性值]"); | 根据指定属性名和属性值获取元素对象们 | - **代码实现** ```html <!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 过滤器选择器
选择器语法
| 选择器 | 语法 | 作用 | | —- | —- | —- | | 首元素选择器 | $(“A:first”); | 获得选择的元素中的第一个元素 | | 尾元素选择器 | $(“A:last”); | 获得选择的元素中的最后一个元素 | | 非元素选择器 | $(“A:not(B)”); | 不包括指定内容的元素 | | 偶数选择器 | $(“A:even”); | 偶数，从 0 开始计数 | | 奇数选择器 | $(“A:odd”); | 奇数，从 0 开始计数 | | 等于索引选择器 | $(“A:eq(index)”); | 指定索引元素 | | 大于索引选择器 | $(“A:gt(index)”); | 大于指定索引元素 | | 小于索引选择器 | $(“A:lt(index)”); | 小于指定索引元素 |代码实现
```html <!DOCTYPE html>div1div2div3div4<a name="ac06c451"></a> ## 3.5 表单属性选择器 - **选择器语法** | 选择器 | 语法 | 作用 | | --- | --- | --- | | 可用元素选择器 | $("A:enabled"); | 获得可用元素 | | 不可用元素选择器 | $("A:disabled"); | 获得不可用元素 | | 单选/复选框被选中的元素 | $("A:checked"); | 获得单选/复选框选中的元素 | | 下拉框被选中的元素 | $("A:selected"); | 获得下拉框选中的元素 | - **代码实现** ```html <!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()); //只要要单选框被选中的元素 var $radio = $(":radio:checked"); alert($radio.val());//men </script> </html>3.6 小结
- 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
- jQuery 中选择器的语法：$();
- 基本选择器
- $(“元素的名称”);
- $(“#id的属性值”);
- $(“.class的属性值”);
- 层级选择器
- $(“A B”);
- $(“A > B”);
- 属性选择器
- $(“A[属性名]”);
- $(“A[属性名=属性值]”);
- 过滤器选择器
- $(“A:even”);
- $(“A:odd”);
表单属性选择器
常用方法
| 方法 | 作用 | | —- | —- | | $.html() | 获取标签的文本 | | $.html(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> <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 操作对象
常用方法
| 方法 | 作用 | | —- | —- | | $(“元素”) | 创建指定元素 | | $.append(element) | 添加成最后一个子元素，由添加者对象调用 | | $.appendTo(element) | 添加成最后一个子元素，由被添加者对象调用 | | $.prepend(element) | 添加成第一个子元素，由添加者对象调用 | | $.prependTo(element) | 添加成第一个子元素，由被添加者对象调用 | | $.before(element) | 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 | | $.after(element) | 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 | | $.remove() | 删除指定元素(自己移除自己) | | $.empty() | 清空指定元素的所有子元素 | | $.hide() | 隐藏显示的元素 | | $.show() | 显示隐藏的匹配元素 |代码实现
```html <!DOCTYPE html>
<li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li>
<li id="jy">加油</li> <li id="xq">雄起</li>
<a name="96800244"></a> ## 4.3 操作样式 - **常用方法** | 方法 | 作用 | | --- | --- | | $.css(name) | 根据样式名称获取css样式 | | $.css(name,value) | 设置CSS样式 | | $.addClass(value) | 给指定的对象添加样式类名 | | $.removeClass(value) | 给指定的对象删除样式类名 | | $.toggleClass(value) | 如果没有样式类名，则添加。如果有，则删除 | | $(window).height() | 当前窗口的高度 | | $(window).scrollTop() | 滚动条上下滚动的距离 | | $(document).height() | 当前文档的高度 | - **代码实现** ```html <!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 操作属性
常用方法
| 方法 | 作用 | | —- | —- | | $.val([value]) | 获取/设定文本框中的值 | | str.trim() | 去掉字符串起始和结尾的空格 | | $.attr(name,[value]) | 获得/设置属性的值 | | $.prop(name,[value]) | 获得/设置属性的值(checked， selected) |代码实现
```html <!DOCTYPE html>
男 女
<a name="aebf42f1"></a> ## 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)。 <a name="d60808d4"></a> # 五、综合案例 复选框 <a name="249d13ba"></a> ## 5.1 案例效果  <a name="2142e119"></a> ## 5.2 分析和实现 - **功能分析** - 全选 - 为全选按钮绑定单击事件。 - 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。 - 全不选 - 为全不选按钮绑定单击事件。 - 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。 - 反选 - 为反选按钮绑定单击事件 - 获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。 - **代码实现** ```html <!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.1 案例效果
6.2 动态切换小图的分析和实现
- 功能分析
- 准备一个数组
- 定义计数器
- 定义定时器对象
- 定义图片路径变量
- 为开始按钮绑定单击事件
- 设置按钮状态
- 设置定时器，循环显示图片
- 循环获取图片路径
- 将当前图片显示到小图片上
- 计数器自增
- 代码实现
```html <!DOCTYPE html>
<a name="d5a92932"></a> ## 6.3 显示大图的分析和实现 - **功能分析** 1. 为停止按钮绑定单击事件 1. 取消定时器 1. 设置按钮状态 1. 将图片显示到大图片上 - **代码实现** ```javascript //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;"); });- 功能分析
若有收获，就点个赞吧
0 人点赞
