Web网络开发 -- jQuery框架
jQuery框架
相当于半成品,需要你自己填充
jQuery是一个快速、简洁的 JavaScript框架，是继Prototype之后又一个优秀的 JavaScript 代码库（框架）.于2006年1月由JohnResig发布。
jQuery设计的宗旨是"write Less， Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
引入jQuery
<script src="./js/jquery-3.7.1.min.js"></script>
文档就绪方式
//方式一(推荐)
$(function(){文档就绪代码
});
//方式二
$(document).ready(function(){//文档就绪代码
});
举例
$(function () {$("#but").click(function () {alert("hello world");});
});
jQuery选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery选择器</title><script src="js/jquery-2.1.0.min.js"></script><style>div{border: 1px solid red;width: 100px;height: 100px;background-color: white;border-radius: 50px;}#divchild{border: 1px solid red;width: 50px;height: 50px;background-color: white;}</style><script>// 文档就绪$(function () {//id选择器$("#btn1").click(function () {$("#div1").css("background-color","red");})//class选择器$("#btn2").click(function () {$(".divclass").css("background-color","orange");})//标签选择器$("#btn3").click(function () {$("div").css("background-color","red");})//分组选择器$("#btn4").click(function () {$("#div1,.divclass").css("background-color","blue");})// 层级选择器$("#btn5").click(function () {$("#parentdiv div").css("background-color","gray"); //元素下的所有指定元素})//儿子选择器$("#btn6").click(function () {$("#parentdiv>div").css("background-color","yellow"); // 元素下的子元素})// +选择器$("#btn7").click(function () {$("#div1+div").css("background-color","red"); //元素之后的一个元素})// ~选择器$("#btn8").click(function () {$("#div2~div").css("background-color","black"); //元素之后的同辈选择器})$("#btn9").click(function () {$("#parentdiv :first").css("background-color","orange"); //元素之后的同辈选择器})$("#btn10").click(function () {$("#parentdiv :not(#div3)").css("background-color","orange");})$("#btn11").click(function () {$("#parentdiv div:even").css("background-color","red");})$("#btn12").click(function () {$("#parentdiv div:odd").css("background-color","red");})$("#btn13").click(function () {$("#parentdiv div:gt(1)").css("background-color","blue"); //gt代表> lt代表< eq代表=})})</script>
</head>
<body><input type="button" value="id选择器" id="btn1"><input type="button" value="class选择器" id="btn2"><input type="button" value="标签选择器" id="btn3"><input type="button" value="分组选择器" id="btn4"><input type="button" value="层级选择器" id="btn5"><input type="button" value="父子选择器" id="btn6"><input type="button" value="+选择器" id="btn7"><input type="button" value="~选择器" id="btn8"><input type="button" value=":first选择器" id="btn9"><input type="button" value=":not选择器" id="btn10"><input type="button" value=":even选择器" id="btn11"><input type="button" value=":odd选择器" id="btn12"><input type="button" value=":gt选择器" id="btn13"><input type="button" value=":gt选择器" id="btn14"><input type="button" value=":gt选择器" id="btn15"><input type="button" value=":gt选择器" id="btn16"><div id="parentdiv"><div id="div1"><div id="divchild"></div></div><div id="div2" class="divclass"></div><div id="div3" class="divclass"></div><div id="div4"></div></div></body>
</html>
jQuery Ajax操作
$.ajax({url:"向后台发送的请求路径",data:{"key1":"value1","key2":"value2"} //向后台发送的请求数据,要求json格式dataType:"后端给前端发回的数据类型" //可用类型见下type:"get/post" //向后台请求的请求方式async:"true/false" //异步请求,一般省略不写,默认为true(异步),如果写false(同步)success:function(data){成功的回调函数}error:function(data){失败后的回调函数}
});dataType:"xml":返回xml文档,可用JQuery处理"html":返回纯文本HTML信息;包含的script标签会在插入dom时自动执行"script":返回纯文本JavaScript代码,不会自动缓存结果,除非设置了"cache"参数注意:在远程请求时(不在同一个域下),所有post请求都将转为get请求(因为将使用DOM的script标签来加载)"json":返回JSON数据"text":返回纯文本字符串
jQuery 遍历
$.each(data, function(index, item) { // data是后端发送给前端的数据,// index是每次遍历的索引,item是每次遍历产生的对应的对象$('#students').append(`<option value="${item.id}">${item.sname}</option>`);
});
应用:购物车
案例总结
//以下案例中的this为当前标签,可以替换为指定的标签,例如$("#username")
$(this).prev() //选择当前元素的前一个元素
$(this).next() //选择当前元素的下一个元素$(this).text() //获取当前元素的纯文本值
$(this).html() //获取当前元素带标签的文本值 (div\span\td\p\...)$(this).text("内容") //设置当前元素的文本值
$(this).html("<标签>") //设置当前元素的带html标签的文本值,浏览器可以自动解析标签//等价于JavaScript中的 innerText\innerHtml$(this).val()\$("username").val() //获取当前元素\指定标签中(一般是表单中的文本框)的value属性值//等价于JavaScript中的document.getElementById("username").value
$(this).val("内容")\$("username").val("内容") //设置当前元素\指定标签中(一般是表单中的文本框)的value属性值//等价于JavaScript中的document.getElementById("username").value = "内容"$(this).find("选择器") //通过find查找指定选择器内容
$(this).parent() //选择当前元素的父元素$(this).css("属性","值") //为当前元素设置css样式$(this).prop("属性") //获取当前元素的指定属性值
$(this).prop("属性",值) //设置当前元素的指定属性值$(this).prop("checked",true) //设置复选框为选中状态$(this).prop("checked",false) //设置复选框为取消状态$(this).each(function(){循环迭代代码}) //将指定代码进行循环
案例代码
$(function(){// 总价function zongjia(){var goodszongjia = 0;var goodsnum = 0;$(".goods_div :checked").each(function(){var zongjia = parseFloat($(this).parent().find(".zongjia1").text())var zongnum = parseFloat($(this).parent().find(".shu").val())goodszongjia += zongjiagoodsnum+=zongnum});$(".goodPrice").text("合计(不含运费): "+goodszongjia.toFixed(2))$(".goodSum").text("已选商品"+goodsnum+"件")}function beijing(){$(".check").each(function(){var flag = $(this).prop("checked")if(flag){$(this).parent().css("background","yellow")}else{$(this).parent().css("background","write")}})}// 复选框$(".check").click(function() {beijing();zongjia();});//全选框$(".allBox").click(function(){var flag = $(this).prop("checked")if(flag){$(".check").prop("checked",true)beijing()zongjia()}else{$(".check").prop("checked",false)beijing()zongjia()}})//加号绑定点击事件$(".jia").click(function(){// $(this).css("background","red");var number = parseInt($(this).prev().val());number ++;$(this).prev().val(number);// 计算商品所在一行的总价显示var dj = parseInt($(this).parent().prev().find(".dj").text());// $(this).parent().next().find(".zongjia1").css("background","red");$(this).parent().next().find(".zongjia1").text((number*dj).toFixed(2)); //保留两位小数// 计算页面底部所在一行的合计显示zongjia()});//减号$(".jian").click(function(){// $(this).css("background","red");var number = parseInt($(this).next().val());if (number == 1){alert("最少买一件!");}else{number --;$(this).next().val(number);}// 计算商品所在一行的总价显示var dj = parseInt($(this).parent().prev().find(".dj").text());$(this).parent().next().find(".zongjia1").text((number*dj).toFixed(2)); //保留两位小数// 计算页面底部所在一行的合计显示zongjia()});// 总价结算$(".endprice").click(function(){$(".goods_div :checked").each(function(){var goodinfo = $(this).parent().find(".goods_ind").text() //为什么这里要用parent() ?// $(this).parent().css("background","red")alert(goodinfo)})})});