JQuery

jQuery二 Li.069

jQuery DOM 常用方法方法作用 html() 获取标签的文本 html(value) 设置标签的文本内容,解析标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="../jQuery/jquery-3.6.0.js"></script> <script> // html() 获取标签的文本 let div = $("div"); // html(value) 设置标签的文本内容,解析标签 let btn1 = $("#btn1") btn1.click(cc1) function cc1() { alert(div.html()) } let btn2 = $("#btn2") btn2.click(cc2) function cc2(){ div.html("<b>小明</b>") } </script> </html> jQuery 操作对象方法作用 $("元素") 创建指定元素 append(element) 添加成最后一个子元素,由添加者对象调用 appendTo(element) 添加成最后一个子元素,由被添加者对象调用 prepend(element) 添加成第一个子元素,由添加者对象调用 prependTo(element) 添加成第一个子元素,由被添加者对象调用 before(element) 添加到当前元素的前面,两者是兄弟关系,由添加者对象调用 after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用 remove() 删除指定元素(自己移除自己) empty() 清空指定元素的所有子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="将加油添加到城市列表最下方"><br/> <input type="button" id="btn3" value="将加油添加到城市列表最上方"><br/> <input type="button" id="btn4" value="将加油添加到上海下方"><br/> <input type="button" id="btn5" value="将加油添加到上海上方"><br/> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <br> <ul id="desc"> <li id="xg">新冠</li> <li id="xq">雄起</li> </ul> <input type="button" id="btn6" value="清除新冠"><br> <input type="button" id="btn7" value="描述列表删除"><br> <br> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> let div = $("#div"); // $("元素") 创建指定元素 // append(element) 添加成最后一个子元素,由添加者对象调用 // 添加一个span到div let btn1 = $("#btn1"); btn1.click(cc1) function cc1(){ let span = $("<span>span</span>") div.append(span) } // appendTo(element) 添加成最后一个子元素,由被添加者对象调用 // 将加油添加到城市列表最下方 let city = $("#city") let btn2 = $("#btn2") btn2.click(cc2) function cc2(){ let jy = $("<li id=\"jy\">加油</li>") jy.appendTo(city) } // prepend(element) 添加成第一个子元素,由添加者对象调用 // 加油添加到城市列表最上方 let btn3 = $("#btn3") btn3.click(cc3) function cc3(){ let jy = $("<li id=\"jy\">加油</li>") city.prepend(jy) } // prependTo(element) 添加成第一个子元素,由被添加者对象调用 // before(element) 添加到当前元素的前面,两者是兄弟关系,由添加者对象调用 // 将加油添加到上海下方 let btn5 = $("#btn5") btn5.click(cc5) function cc5(){ let jy = $("<li id=\"jy\">加油</li>") let sh = $("#sh") sh.before(jy) } // after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用 let btn4 = $("#btn4") btn4.click(cc4) function cc4(){ let jy = $("<li id=\"jy\">加油</li>") let sh = $("#sh") sh.after(jy) } // remove() 删除指定元素(自己移除自己) let btn6 = $("#btn6") btn6.click(cc5) function cc5(){ let xg = $("#xg") xg.remove() } // empty() 清空指定元素的所有子元素 let btn7 = $("#btn7") btn7.click(cc6) function cc6(){ let desc = $("#desc") desc.empty() } </script> </html> iQuery DOM 常用方法方法作用 css(name) 根据样式名称获取css样式 css(name,value) 设置CSS样式 addClass(value) 给指定的对象添加样式类名 removeClass(value) 给指定的对象删除样式类名 toggleClass(value) 如果没有样式类名,则添加,如果有,则删除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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样式"><br/> <input type="button" id="btn2" value="设置div的背景色为蓝色"><br/> <input type="button" id="btn3" value="给div设置cls1样式"><br/> <input type="button" id="btn4" value="给div删除cls1样式"><br/> <input type="button" id="btn5" value="给div设置或删除cls1样式"><br/> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> let div = $("#div") // css(name) 根据样式名称获取css样式 let btn1 = $("#btn1") btn1.click(get1) function get1(){ alert(div.css("border")) } // css(name,value) 设置CSS样式 // div背景色为蓝色 let btn2 = $("#btn2") btn2.click(get2) function get2(){ div.css("background","blue") } // addClass(value) 给指定的对象添加样式类名 let btn3 = $("#btn3") btn3.click(get3) function get3(){ div.addClass("cls1"); } // removeClass(value) 给指定的对象删除样式类名 let btn4 = $("#btn4") btn4.click(get4) function get4(){ div.removeClass("cls1"); } // toggleClass(value) 如果没有样式类名,则添加,如果有,则删除 let btn5 = $("#btn5") btn5.click(get5) function get5(){ div.toggleClass("cls1"); } </script> </html> jQuery DOM 操作属性方法作用 attr(name,[value]) 获得/设置属性的值 prop(name,[value]) 获得/设置属性的值(checked,selected) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作属性</title> </head> <body> <input type="text" id="username"> <br> <input type="button" id="btn1" value="获取输入框的id属性"> <br/> <input type="button" id="btn2" value="给输入框设置value属性"> <br/> <input type="radio" name="gender" id="gender1">男 <input type="radio" name="gender" id="gender2">女 <br/> <input type="button" value="选中女" id="btn3"> <br/> <select> <option>---请选择---</option> <option id="bk">本科</option> <option id="zk">专科</option> </select> <br/> <input type="button" value="选中本科" id="btn4"> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // 获取输入框的id属性 let username = $("#username") let btn1 = $("#btn1") btn1.click(test1) function test1(){ alert(username.attr("id")) } // 给输入框设置value属性 let btn2 = $("#btn2") btn2.click(test2) function test2(){ username.attr("value","哈哈") } // 选中女 $("#btn3").click(function (){ $("#gender2").prop("checked",true) }) // 选中本科 let bk = $("#bk") let btn4 = $("#btn4") btn4.click(test4) function test4(){ bk.prop("selected",true) } </script> </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="../jQuery/jquery-3.6.0.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> 随机图片 <!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); }); //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;"); }); </script> </html>

jQuery一 Li.068

jQuery 介绍 jQuery是一个JavaScript库封装了很多预定义的函数, 获取元素, 执行隐藏移动等目的就是在使用时直接调用, 不需要再重复定义, 这样就可以极大地简化了JavaScript编程 jQuery 快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门jQuery</title> </head> <body> <div id="div">我是div</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // let div = document.getElementById("div"); // alert(div.innerText) // jQuery 方式 let jqDiv = $("#div"); alert(jqDiv) alert(jqDiv.html()) </script> </html> JS对象和jQuery对象黑的 jQuery本质上虽然也是JS, 但如果想使用jQuery的属性和方法那么必须保证对象是jQuery对象, 而不是JS方式获得的DOM对象二者的API方法不能混合使用, 若想使用对方的API, 需要进行对象转换 JS的DOM对象黑的成jQuery对象 $(JS的DOM对象); jQuery对象转换成jQuery对象 jQuery对象[索引]; jQuery对象.get(索引); <body> <div id="div">我是div</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // js 方式, 通过id获取div元素 // JS对象转换 jQuery对象 let div1 = document.getElementById("div"); jsDiv1 = $(div1) alert(jsDiv1.html()) // jQuery对象转换 DOM对象 let jqDiv2 = $("#div"); let div2 = jqDiv2[0] alert(div2.innerText) let div3 = jqDiv2.get(0) alert(div3.innerText) </script> jQuery事件的使用常用事件 jQuery中将事件封装成了对应的方法. 去年了JS中的.on语法. 事件名说明 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onclick 鼠标单击事件 ondblclick 鼠标双击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onchange 用户改变真苦域的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的使用</title> </head> <body> <input type="button" id="btn" value="点我"> <br> <input type="text" id="input"> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> let btn = $("#btn") btn.click(check) function check(){ alert("点我干嘛") } $("#btn").click(function () { alert("匿名函数") }) // 获取焦点事件 let input = $("#input") input.focus(getFocus) function getFocus(){ // alert("你要输入数据了") } input.blur(loseFocus) function loseFocus(){ alert("你输入完成了") } </script> </html> 事件的绑定和解绑绑定事件 jQuery对象.on(事件名称,执行的功能); 解绑事件 jQuery对象.off(事件名称) 如果不指定事件名称,则会把该对象绑定的所有事件都解绑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的绑定和解绑</title> </head> <body> <input type="button" id="btn1" value="点我"> <input type="button" id="btn2" value="解绑"> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // 1. 给btn1 绑定一个单击的事件 let btn1 = $("#btn1"); btn1.on("click", cc) function cc(){ alert("点我干嘛") } let btn2 = $("#btn2") btn2.on("click", jiebang) function jiebang(){ btn1.off("click") } </script> </html> 事件的切换事件的切换: 需要给同一个对象绑定多个事件, 而且多个事件还有先后顺序关系方式一: 单独定义 $(元素).事件方法名(要执行的功能); $(元素).事件方法名(要执行的功能); 方式二: 链式定义 $(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能) … <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的切换</title> <style> #div{ border: 1px solid black; } </style> </head> <body> <div id="div">dvi</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // 方式一, this的使用 // $("#div").mouseover(function () { // $(this).css("background","red"); // }) // 方式一, 单独定义 let div = $("#div"); // div.on("mouseover", changeRed) // div.on("mouseout",changeBlue) function changeRed(){ div.css("background-color","red") } function changeBlue(){ div.css("background-color","blue") } // 方式二, 链式定义 div.on("mouseover", changeRed).on("mouseout",changeBlue) </script> </html> 遍历方式一: 传统方式 for (let i=0;i<窗口对象长度;i++){ 执行功能; } 方式二:对象.each()方法容器对象.each(function(index,ele){ 执行功能; }) 方式三:$.each()方法 $.each(容器对象,function(index.ele){ 执行功能; }); 方式四: for of 语句 for(ele of 容器对象){ 执行功能; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遍历</title> </head> <body> <input type="button" id="btn" value="遍历列表项"> <ul> <li>前端</li> <li>后端</li> <li>全占工程师</li> </ul> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> $("#btn").on("click", showCicle4); // 方式一: 传统方式 let lis = document.getElementsByTagName("li"); function showCicle1(){ for(let i=0; i< lis.length; i++){ console.log(lis[i].innerHTML+" ") } document.write("<br/>") } // 方式二: 对象.each()方法 let lis2 = $("li") function showCicle2(){ lis2.each(function(index,ele){ console.log(ele.innerHTML+" ") }); document.write("<br/>") } // 方式三: $.each()方法 let lis3 = $("li") function showCicle3(){ $.each(lis3,function(index,ele){ console.log(ele.innerHTML+" ") }); document.write("<br/>") } // 方式四: ele of 容器 let lis4 = $("li") function showCicle4(){ for(ele of lis4){ console.log(ele.innerHTML+" ") } document.write("<br/>") } </script> </html> jQuery 基本选择器 id选择器, 类选择器, 元素选择器, 属性选择器等等 jQuery中选择器的语法:$() 基本选择器选择器语法作用元素选择器 $("元素名称"); 根据元素名称获取元素对象们 id选择器 $("#id属性值") 根据id属性值获取元素对象类选择器 $(".class属性值") 根据class属性值获取元素对象位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> </head> <body> <div id="#div1">div1</div> <div class="div2">div2</div> <div class="div2">div3</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> let divs = $("div") alert(divs.length) let div1 = $("#div1"); alert(div1) let div2 = $(".div2") alert(div2.length) </script> </html> jQuery 层级选择器选择器语法作用后代选择器 $("A B") A下的所有B(包括B的子级) 子选择器 $("A > B") A下的所有B(不包括B的子级) 兄弟选择器 $("A + B") A相邻的下一个B 兄弟选择器 $("A ~ B") A相邻的所有B <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="../jQuery/jquery-3.6.0.js "></script> <script> // 1. 后代选择器 $("A B") A下的所有B(包括B的子级) let spans = $("div span"); // alert(spans.length) // 子选择器 $("A > B") A下的所有B(不包括B的子级) let spans2 = $("div > span") // alert(spans2.length) // 兄弟选择器 $("A + B") A相邻的下一个B let p1 = $("div+p") alert(p1.html()) // 兄弟选择器 $("A ~ B") A相邻的所有B let p2 = $("div ~ p") alert(p2.length+" "+p2[0].innerHTML) </script> </html> jQuery 属性选择器选择器语法作用属性名选择器 $("A[属性名]"); 根据指定属性名获取元素对象们属性值选择器 $("A[属性名=属性值]"); 根据指定属性名和属性值获取元素对象们 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> </head> <body> <input type="text"> <input type="password"> <input type="password"> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // 属性名选择器 $("A[属性名]"); 根据指定属性名获取元素对象们 let inputs = $("input[type]"); // alert(inputs.length) // 属性值选择器 $("A[属性名=属性值]"); 根据指定属性名和属性值获取元素对象们 let inputs2 = $("input[type='password']") alert(inputs2.length) </script> </html> jQuery 过滤器选择器选择器语法作用首元素选择器 $("A:first"); 获得选择的元素中的第一个元素尾元素选择器 $("A:last"); 获得选择的元素中的最后一个元素非元素选择器 $("A:not(B)"); 不包括指定内容的元素偶数选择器 $("A:even"); 偶数,从0开始计数奇数选择器 $("A:odd"); 奇数,从0开始计数等于索引选择器 $("A:eq(index)") 指定索引元素,和数组索引一致大于索引选择器 $("A:gt(index)") 大于指定索引元素小于索引选择器 $("A:lt(index)") 小玩指定索引元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器选择器</title> </head> <body> <div>div1</div> <div id="div2">div2</div> <div>div3</div> <div>div4</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // 首元素选择器 $("A:first"); 获得选择的元素中的第一个元素 let divFirst = $("div:first"); // alert(divFirst.html()) // 尾元素选择器 $("A:last"); 获得选择的元素中的最后一个元素 let divLast = $("div:last"); // alert(divLast.html()) // 非元素选择器 $("A:not(B)"); 不包括指定内容的元素 let divs3 = $("div:not(#div2)") // alert(divs3.length) // 偶数选择器 $("A:even"); 偶数,从0开始计数 let divs4 = $("div:even") // alert(divs4.length) // alert(divs4[0].innerHTML) // alert(divs4[1].innerHTML) // 奇数选择器 $("A:odd"); 奇数,从0开始计数 let divs5 = $("div:odd") // alert(divs5.length) alert(divs5[0].innerHTML) alert(divs5[1].innerHTML) // 等于索引选择器 $("A:eq(index)") 指定索引元素,和数组索引一致 let divs6 = $("div:eq(2)") // alert(divs6.html()) // 大于索引选择器 $("A:gt(index)") 大于指定索引元素 let divs7 = $("div:gt(0)") // alert(divs7.length) // 小于索引选择器 $("A:lt(index)") 小玩指定索引元素 let divs8 = $("div:lt(4)") // alert(divs8.length) </script> </html> jQuery 表单属性选择器选择器语法作用可用元素选择器 $("A:enabled"); 获得可用元素不可用元素选择器 $("A:disabled"); 获得不可用元素单选/复选框被选中的元素 $("A:checked"); 获得单选/复选框被选中的元素下拉框被选中的元素 $("A:selected"); 获得下拉框选中的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="../jQuery/jquery-3.6.0.js"></script> <script> // 可用元素选择器 $("A:enabled"); 获得可用元素 let inputs1 = $("input:enabled"); // alert(inputs1.length) // 不可用元素选择器 $("A:disabled"); 获得不可用元素 let inputs2 = $("input:disabled"); // alert(inputs2.length) // 单选/复选框被选中的元素 $("A:checked"); 获得单选/复选框被选中的元素 let inputs3 = $("input:checked"); // alert(inputs3.length) // 下拉框被选中的元素 $("A:selected"); 获得下拉框选中的元素 let selects1 = $("option:selected") alert(selects1.get(0).innerHTML) </script> </html>