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>
标签：Jquery,function,元素,笔记,学习,let,main,event From： https://www.cnblogs.com/leviAckman/p/17872936.html