12.jQuery技术

一、jQuery知识点总览。

 css（）方法：//通过css（）方法获取样式值let backgroundcolor = $("#one").css("backgroundColor");alert(backgroundcolor);//通过css（）方法设置id为one背景色为绿色$("#one").css("backgroundColor","green");

属性选择器：
<script>$(function () {$("div[title]").css("background-color","red");$("div[title='titled']").css("background-color","red");$("div[title!='titled']").css("background-color","red");$("div[title^='tit']").css("background-color","red");$("div[title$='led']").css("background-color","red");$("div[title*='ed']").css("background-color","red");$("div[id][title *='es']").css("background-color","red");})</script>

 过滤选择器：
<script src="../js/jquery-3.6.0.min.js"></script><script>$(function () {$('div:first').css("background-color","pink");$('li:first').css("background-color","pink");$("li:last").css("background-color","pink");$("li:not(.a)").css("background-color","pink");$("li:even").css("background-color","pink");$("li:odd").css("background-color","pink");$("li:eq(3)").css("background-color","pink");$("li:lt(3)").css("background-color","pink");$("li:gt(3)").css("background-color","pink");$(":header").css("background-color","pink");});</script>

表单过滤选择器：
<input type="text" disabled="disabled" value="ok">
<input type="text" value="nice">
<input type="checkbox" value="美容">美容
<input type="checkbox" value="科技">科技
<input type="checkbox" value="公司">公司
<select name="job" id="job" multiple="multiple" size="4"><option value="c1">程序员</option><option value="c2">中级程序员</option><option value="c3">高级程序员</option><option value="c4">系统架构师</option>
</select>
<script>$(function () {$("input[type='text']:enabled").val("aaa");//修改输入框的内容$("input[type='text']:disabled").val("aaa");var len = $("input[type='checkbox']:checked").length;//获取选中的复选框个数alert(len);$("#job > option:selected").length;//选择器必须是 #job > option 才行，因为要获取的个数是select下拉列表下的option元素选中个数})
</script>

DOM-内容操作：
<script>$(function () {// 获取myinput的value值let val = $("#myinput").val();alert(val);let valu = $("#myinput").val("李四");//返回被修改后的对象alert(valu.val());// 获取mydiv的标签体let html = $("#mydiv").html();alert(html);$("#mydiv").html("aaa");// 获取mydiv的文本内容let text = $("#mydiv").text();alert(text);$("#mydiv").text("ccc");})
</script>
<input id="myinput" type="text" name="username" value="张三" /><br/>
<div id="mydiv" ><p><a href="#">标题标签</a></p></div>

通用属性操作：
<script>$(function () {//获取北京节点的name属性值，prop获取到的是undefined，建议使用attrlet attr = $("#bj").attr("name");alert(attr);//设置北京节点的name属性的值为dabeijing,通过开发模式的检查，看是否修改成功$("#bj").attr("name","dabeijing");//新增北京节点的discription属性，属性值是didu$("#bj").attr("discription","didu");//删除北京节点的name属性并校验name属性是否存在$("#bj").removeAttr("name");//获取hobby的选中状态,attr获取到的是undefined（只是选中状态获取不到）let checked = $("#bj").prop("checked");alert(checked);})
</script>
<ul><li id="bj" name="beijing" xxx="yyy">北京</li><li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>

class类属性值操作：
<script>$(function () {//采用prop操作类属性,添加类属性增加样式（改变id=one的样式）$("#one").prop("class","secon");//添加属性值，会删除其他属性值（有多个属性值）//采用addClass,增加second属性值$("#one").addClass("second");//添加属性值，不会删除其他属性值（有多个属性值）//removeClass，删除second属性值$("#one").removeClass("second");//只删除指定属性值，不会全部删除//toggleClass，切换类属性，有就删除，没有就添加（反复操作就是切换两种样式效果）$("#one").toggleClass("sese");//只对指定属性值操作，不对全部操作（即不会删除全部属性值）});</script>
<div id="one" class="b1 b2">id为one</div>

CRUD：
<script>$(function () {//append方法,文档中元素对象会移动，新的元素对象才会添加$("#1").append("我很好！");//添加//appendTo方法，文档中元素对象会移动，新的元素对象才会添加$("#1").appendTo($("#2"));//移动到id=2的内部//prepend,文档中元素对象会移动，新的元素对象才会添加$("#1").prepend("我很好");//prependTo,文档中元素对象会移动，新的元素对象才会添加$("#2").prependTo($("#1"));//after,,文档中元素对象会移动，新的元素对象才会添加$("#1").after("我很好");$("#2").after($("#1"));//insertAfter,文档中元素对象会移动，新的元素对象才会添加$("#1").insertAfter($("#2"));//before,文档中元素对象会移动，新的元素对象才会添加$("#1").before($("#2"));//insertBefore,文档中元素对象会移动，新的元素对象才会添加$("#2").insertBefore($("#1"));//remove,删除元素对象$("#1").remove();//empty,清空所有后代元素，本节点内容也会清除，只留下元素及属性$("#1").empty();//clone（），克隆一个对象$("#1").append($("#1").clone());});
</script>
<div id="1"><h1>nice</h1>hello</div>
<h1 id="2">id是2</h1>

动画效果：
<script>$(function () {var i=0;while (i<1000){i++;//默认方式：$("#showDiv").hide("slow","swing",function () {alert("影藏了")});$("#showDiv").hide(10);//隐藏$("#showDiv").show(5000,"linear");//显示$("#showDiv").toggle("fast","linear");//显示和隐藏//滑动方式：用法和上面的一样，知识方法名不同$("#showDiv").slideUp("slow");//隐藏$("#showDiv").slideDown("slow");//显示$("#showDiv").slideToggle("slow");//隐藏与显示//淡入淡出效果方式：$("#showDiv").fadeOut("slow");//隐藏$("#showDiv").fadeIn("slow");//显示$("#showDiv").fadeToggle("fast");//隐藏与显示};});</script>
<div id="showDiv" style="width: 200px;height: 200px;background-color: pink" >div显示和隐藏
</div>

遍历：
<script>$(function () {//获取所有的ul下的li，jQuery对象可以当作数组使用let citys = $("#city li");//1.使用for遍历lifor (var i = 0; i < citys.length; i++) {//获取内容,citys[i]获取的是js对象alert(citys[i].innerHTML);alert($(citys.get(i)).text());}//2.jQuery对象.each(callback);citys.each(function (index, ele) {//判断如果是上海，则结束循环if ("上海"==ele.innerHTML){//如果是当前function返回为false，则结束循环（break）//如果返回为true，则结束本次循环，继续下次循环（continue)// return false;return true;}//获取li对象，第一种方式// alert(this.innerHTML);alert($(this).text());//获取li对象，第二种方式，在回调函数中定义参数， index(索引) element(元素对象)// alert(index+" ："+ele.innerHTML);alert(index+" ："+$(ele).text());})//3.  $.each(object,[callback])$.each(citys,function (index,element) {alert($(element).text());});//4.  for ... of : jQuery3.0版本之后提供的方式for (city of citys) {alert($(city).text());}});
</script>
<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li>
</ul>

事件绑定：
<script>$(function (){//1.获取name对象，绑定click事件$("#name").click(function () {alert("我被点击了...")});//2.简化操作，链式编程，//给name绑定鼠标移动到元素之上事件，绑定鼠标移出事件$("#name").mouseover(function () {alert("来了...");}).mouseout(function () {alert("走了...");});$("#name").focus();//没有回调函数，触发默认行为，让文本框获得焦点$("#name").focus(function () {//当元素获得焦点时，触发 focus 事件。alert("焦点来了...");});//表单对象.submit();//让表单提交//3.使用on给按钮绑定单击事件click$("#btn").on("click",function () {alert("我被点击了");});//4.使用off解绑btn按钮的单击事件$("#btn2").click(function () {//结束btn的单击事件$("#btn").off("click");$("#btn").off();//没有参数，将组件的事件全部解绑});//5.获取按钮，调用toggle方法，事件切换$("#btn1").toggle(function () {//改变div背景色$("#mydiv").css("backgroundColor","green");},function () {//改变div背景色$("#mydiv").css("backgroundColor","pink");});});
</script>
<input type="button" id="btn1" value="事件切换">
<div id="myDiv" style="height: 300px;width: 300px;background-color:pink">点击按钮变成绿色，再次点击红色</div>
<input id="name" type="text" value="绑定点击事件">
<input id="btn" type="button" value="使用on绑定点击事件"/>
<input id="btn2" type="button" value="使用off解绑点击事件"/>

插件机制：扩展方法（为jQuery或jQuery对象添加方法）
<script>//使用jQuery插件，给jQuery对象添加2个方法，check（）选中所有复选框，uncheck（）取消所有选中复选框//1.定义jQuery的对象插件$.fn.extend({//方法名:回调函数，定义了一个check（）方法。所有的jQuery对象都可以调用该方法check:function () {//让复选框选中//this:调用该方法的jQuery对象this.prop("checked",true);},uncheck:function () {//让复选框不选中this.prop("checked",false);}});$(function () {//1.获取按钮// $("#btn-check").check();//复选框对象.check();$("#btn-check").click(function () {//获取复选框对象$("input[type='checkbox']").check();});$("#btn-uncheck").click(function () {//获取复选框对象$("input[type='checkbox']").uncheck();});});//对全局方法扩展两个方法，扩展min方法，求2个值的最小值；扩展max方法，求两个值最大值；$.extend({max:function (a,b) {return a>=b?a:b;},min:function (a,b) {return a>=b?b:a;}});//调用全局方法let max = $.max(3,4);alert(max);
</script><input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"><input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="checkFn()">
<br/><input type="checkbox" value="football">足球<input type="checkbox" value="basketball">篮球<input type="checkbox" value="volleyball">排球

案例一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery-3.6.0.min.js"></script><script>$(function () {//案例一：隔行换色//$("tr:even:gt(1) > td")，这样的话是满足td的先even偶数后，再跳过2，已经不止大于2了$("tr:gt(1):even > td").css("backgroundColor","pink");//可以不用 > td$("tr:gt(1):odd > td").css("backgroundColor","yellow");//案例二：全选全不选，$("#box").click()就使用不了checked的值，不用这种则要在入口函数外面定义函数,需要传参数this才能使用this.checked$("#box").click(function () {$("input[type='checkbox']").prop("checked",this.checked);});// 案例三：qq表情选择$("tr").click(function () {$("table").append($(this).clone());});//案例四：下拉列表选中条目左右移动$("tr").click(function () {$("table").append(this);});});//案例二：全选全不选，$("#box").click()就使用不了checked的值，不用这种则要在入口函数外面定义函数,需要传参数this才能使用this.checked// function selectAll(obj) {//   $("input[type='checkbox']").prop("checked",obj.checked);// };</script>
</head>
<body>
<table border="1" align="center" id="tab1" width="800"><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr><th><input type="checkbox" id="box" ></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>1</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><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</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><a href="#">修改</a>|<a href="#">删除</a></td></tr>
</table>
</body>
</html>

案例二：广告显示和隐藏。


<script>$(function () {/*       需求：1.当页面加载完，3秒后，自动显示广告2.广告显示5秒后，自动消失分析：1.使用定时器来完成：setTimeout（执行一次定时器）2.分析发现jQuery的显示和隐藏动画效果其实就是控制display：none属性3.使用show/hide方法来完成广告的显示*///显示广告window.setTimeout(function () {$("#ad").show("slow");},3000);//隐藏广告window.setTimeout(function () {$("#ad").hide("slow");},8000);});
</script>
<div id="ad" style="display: none">广告</div>
<div>正文</div>

案例三：抽奖。

<script>$(function () {/*分析：1.给开始按钮绑定单击事件1.1定义循环定时器1.2切换小相框的src属性* 定义数组，存放图片资源路径* 生成随机数，数组索引2.给结束按钮绑定单击事件1.1停止单击事件1.2给大相框设置src属性*///处理按钮是否可以使用的效果,防止按钮多次点击，出现bug$("#startID").prop("disabled",false);//按钮可用$("#stopID").prop("disabled",true);//按钮不可用let startID;//开始定时器的idvar arr=["../img/img_1.png","../img/2.png","../img/3.png"];$("#startID").click(function () {//处理按钮是否可以使用的效果,防止按钮多次点击，出现bug$("#startID").prop("disabled",true);//按钮可用$("#stopID").prop("disabled",false);//按钮不可用//1.1定义循环定时器startID = setInterval(function () {//1.2生成随机角标，0-2var index=Math.floor(Math.random()*3);//0.000-0.999->*2->0.0->2.999//1.3设置小相框的src属性$("#imgID").prop("src",arr[index]);},50);});$("#stopID").click(function () {//处理按钮是否可以使用的效果,防止按钮多次点击，出现bug$("#startID").prop("disabled",false);//按钮可用$("#stopID").prop("disabled",true);//按钮不可用//1.1停止定时器clearInterval(startID);//1.2给大相框设置src属性let src = $("#imgID").prop("src");$("#daimgID").prop("src",src).hide();//先隐藏//显示1秒之后$("#daimgID").show(1000);});});
</script>
<img id="imgID" src="../img/3.png" style="width: 100px;height: 100px">
<input id="startID" type="button" value="开始抽奖">
<input id="stopID" type="button" value="停止抽奖">
<img id="daimgID" src="../img/3.png" style="width: 600px;height: 600px;float: right">