1.Jquery的下载与安装
1.1 下载
https://jquery.com/
1.2 安装
<!doctype html> <html lang="zh/cn"> <head> <meta charset="UTF-8"> <title>jquery learn</title> </head> <body> <!--引入jquery--> <!--jquery-3.7.1.js 开发版 可以学习源码--> <!--jquery-3.7.1.min.js 压缩版--> <script src="js/jquery-3.7.1.js"></script> </body> </html>
1.3 DOM对象与Jquery包装集对象
<script> //Dom对象 只有有限的方法与属性 let main_dom = document.querySelector(".main"); //Jquery包装集对象 可以使用Jquery中所有的属性与方法 let main_jquery = $(".main"); //Dom对象转Jquery对象 let jquery = $(main_dom); //Jquery对象转Dom对象 let dom = jquery[0]; </script>
2.Jquery 选择器
<script> //Jquery 选择器与document.querySelector()用法一致 $(".main > .nav") </script>
3.Jquery Dom操作
3.1 操作元素的属性
<script> //attr 可以操作固定属性与自定义属性 //获取属性 let id = $(".main").attr("id"); //设置属性 $(".main").attr("id","main"); //prop 专门操作返回值为boolean类型的属性 //获取 let check = $("input:checkbox").prop("checked"); //设置 设置为选中 $("input:checkbox").prop("checked",true); </script>
3.2 操作元素的样式
<script> //attr 样式名 let className = $(".main").attr("class"); //attr 设置样式名 $(".main").attr("class","bg-blue"); //addClass 添加样式名 $(".main").addClass("font-red"); //removeClass 删除样式名 $(".main").removeClass("font-red"); //css 添加具体的样式 $(".main").css("color","red"); $(".main").css({"width":"40px","height":"40px"}) </script>
3.3 操作元素的内容
<script> //获取元素的html let html = $(".main").html(); //设置元素的html $(".main").html("<h1>标题</h1>") //获取元素的text let text = $(".main").text(); //设置元素的text $(".main").text("<h1>标题</h1>"); //获取元素的val(value值) let val = $(".main").val(); //设置元素的val(value值) $(".main").val("levi"); </script>
3.4 创建元素与添加元素
<script> //创建元素 let h1 = $("<h1>标题1</h1>"); //多次添加会发生移动 let h2 = "<h2>标题2</h2>" //这个是重新创建元素 //prepend 插入元素到开头(内部) $(".main").prepend(h1); $(".main").prepend(h2); //prependTo 插入元素到开头(内部) $(h1).prependTo(".main"); $(h2).prependTo(".main"); //append 插入元素到后面(内部) $(".main").append(h1); $(".main").append(h2); //appendTo 插入元素到后面(内部) $(h1).appendTo(".main"); $(h2).appendTo(".main"); //同级追加 let main2 = $("<div>main2</div>"); let main3 = "<div>main3</div>"; //追加到.main前面 $(".main").before(main2); //追加到.main后面 $(".main").after(main3); </script>
3.5 删除元素与清空元素
<script> //删除元素(删除本身及其子元素) $(".main").remove(); //清空元素(清空元素里面的所有内容) $(".main").empty(); </script>
3.6 遍历元素
<script> //遍历元素 $(".main > li").each(function (index,element) { //index 下标 //element Dom元素 }) </script>
4.Jquery 事件
4.1 ready 加载事件
<script> //等页面加载完执行，可以写多个 按顺序执行 //第一种写法 $(document).ready(function () { }) //第二种写法 $(function () { }) </script>
4.2 jquery绑定事件
<script> //绑定单个事件 //bind $(".main").bind("click",function (event) { }); //事件名 $(".main").click(function (event) { }); //绑定多个事件 //bind //多个事件用一个方法 $(".main").bind("click","dblclick",function (event) { }); //多个事件多个方法 $(".main").bind("click",function (event) { }).bind("dblclick",function (event) { }); //事件名 $(".main").click(function (event) { }).dblclick(function (event) { }); //解除事件的绑定 $(".main").off("click"); </script>
5.AJAX的使用
5.1 简单使用
<script> $.ajax({ type: "get", url: "/getBook", data: { username: "levi" }, success: function (data) { }, error: function (data) { } }) </script>
5.2 封装的请求
<script> //get $.get("/get",{name: "levi",age: "18"},function (data) { }) //post $.post("/get",{name: "levi",age: "18"},function (data) { }) //getJson $.getJSON("/get",{name: "levi",age: "18"},function (data) { }) </script>