前提：必须具备 HTML，CSS 和 JavaScript 的基础知识，再来学习jQuery
一、jQuery介绍
jQuery是一个快速、简洁的JavaScript框架（或者叫JS库），jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，简化原生JS冗长的API。
一句话：原生JS能干的活，jQuery都能干，并且做起来更加简单。
二、jQuery下载和安装
官网：https://jquery.com/ 进入官网后点击 download
选择压缩版下载，区别：压缩版去除了空格等非代码内容，体积更小。
在自己的页面引入即可
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Title</title><!--引入jquery--><scriptsrc="js/jquery-3.6.0.min.js"></script></head><body><script>
console.log($);//能打印出内容，就说明jQuery引入成功</script></body></html>
三、jQuery的页面加载完成事件
//jQuery的页面加载完成事件$(function(){alert("加载完成了1...");});//js原生页面加载完成事件
window.onload=function(){alert("加载完成了2...");}
jQuery的页面加载完成和原生JS页面加载完成的区别:
1.触发时间： jQuery页面加载完成是在浏览器解析完html生成DOM树就会执行。而原生页面加载完成是解析完html后还要等待页面的图片等(静态资源)加载完毕才执行。
2.触发顺序： jQuery页面加载完成先于原生JS页面加载执行。
3.触发次数： jQuery页面加载完成可以执行多次，原生页面加载完成执行1次。
为了操作元素时，一定能获取到元素，所以代码都会写在页面加载完成事件中。
四、jQuery获取元素
jQuery可以像css一样使用选择器来获取页面标签
1.基本选择器
//1.id选择器：$("#id") 匹配一个<div id="myDiv">这是一个div</div>var div =$("#myDiv");//获取id为myDiv的元素//2.class选择器：$(".class") 匹配多个<div class="d1">这是一个div1</div><div class="d1">这是一个div2</div>var divs =$(".d1");获取class为d1的元素//3.标签名选择器：$("标签名") 匹配多个<div>这是一个div1</div><div>这是一个div2</div>var divs =$("div");//获取页面中的所有div//4.通配符选择器：$("*") 匹配所有元素var els =$("*");//页面中的所有元素都被会获取到//5.分组选择器：$(选择器1,选择器2,选择器3...) 将多个选择器的结果放在一起返回<span id="s1">span1</span><span class="s2">span2</span><span class="s2">span3</span>var els =$("#s1",".s2");//获取id为s1和class为s2的元素
2.层级选择器
1.后代选择器：$(选择器1 选择器2)
HTML代码
<form><label>Name:</label><inputname="name"/><fieldset><label>Newsletter:</label><inputname="newsletter"/></fieldset></form><inputname="none"/>
jQuery代码
$("form input")
结果
[ <inputname="name"/>, <inputname="newsletter"/> ]
2.子代选择器：$(选择器1 > 选择器2)
HTML代码
<form><label>Name:</label><inputname="name"/><fieldset><label>Newsletter:</label><inputname="newsletter"/></fieldset></form><inputname="none"/>
jQuery 代码:
$("form > input")
结果:
[ <inputname="name"/> ]
3.匹配紧接在第一个元素后的下一个元素: $(选择器1 + 选择器2)
HTML 代码:
<form><label>Name:</label><inputname="name"/><fieldset><label>Newsletter:</label><inputname="newsletter"/></fieldset></form><inputname="none"/>
jQuery 代码:
$("label + input")
结果:
[ <inputname="name"/>, <inputname="newsletter"/> ]
4.匹配在第一个元素后的元素(多个): $(选择器1 ~ 选择器2)
HTML 代码:
<form><label>Name:</label><inputname="name"/><fieldset><label>Newsletter:</label><inputname="newsletter"/></fieldset></form><inputname="none"/>
jQuery 代码:
$("form ~ input")
结果:
[ <inputname="none"/> ]
3.其他选择器参考在线手册：https://jquery.cuishifeng.cn/
五、jQuery绑定事件
事件绑定：
//方式1：$("选择器").on("事件名",function(){alert(123);});//方式2：$("选择器").事件名(function(){alert(1);});
事件解绑：
$("选择器").off("事件名");更多事件绑定方式参考手册：https://jquery.cuishifeng.cn/
六、jQuery操作元素内容
1.普通元素内容(双标签中间的内容)
html()和
text()用于操作两个元素中间的内容。
html()
用于获取或设置： html+文本内容
<divid="d1"><span>11</span><span>22</span><span>22</span></div><script>$(function(){//获取 html+文本内容let html =$("#d1").html();
console.log(html);//结果：<span>11</span><span>22</span><span>33</span>//设置 html+文本内容$("#d1").html("<span>44</span>");});</script>
text()
用于获取或设置：纯文本内容
<div id="d1"><span>11</span><span>22</span><span>22</span></div><script>$(function(){//获取 纯文本内容let text =$("#d1").text();
console.log(text);//结果：11 22 33//设置 纯文本内容$("#d1").text("44");});</script>
2.表单元素内容
val(): 用于获取和设置表单元素的内容
<buttonid="btn1">设置值</button><buttonid="btn2">获取值</button><inputid="ipt"type="text"><script>$(function(){//为id为btn1的按钮绑定点击事件，设置输入框的值$("#btn1").click(function(){$("#ipt").val("值123");});//为id为btn2的按钮绑定点击事件，获取输入框的值$("#btn2").click(function(){
console.log($("#ipt").val());});});</script>
该案例是获取和设置
input
元素的值，
val()
还可以操作option等具有value属性的表单元素，他无法操作div，span等元素，因为他们没有value属性。
七、jQuery操作元素属性
attr()设置或返回被选元素的属性值
removeAttr()移除被选中元的属性值
<buttonid="btn1">获取值</button><buttonid="btn2">设置值</button><buttonid="btn3">移除值</button><aid="a1"href="http://www.baidu.con">点击</a><script>$(function(){//点击id为btn1的按钮时获取a标签的href属性的值$("#btn1").click(function(){
console.log($("a").attr("href"));// http://www.baidu.con});//点击id为btn2的按钮时设置a标签的href属性的值$("#btn2").click(function(){$("a").attr("href","新值");});//点击id为btn3的按钮时移除a标签的href属性的值$("#btn3").click(function(){$("a").removeAttr("href");});});</script>
注意：
prop()
也是用于设置和获取属性的值，其主要用于操作 单选，多选，下拉菜单等的
checked
和
selected
属性。例如获取checkbox的选中状态：
$("input[type='checkbox']").prop("checked");
选中复选框为true，没选中为false
八、jQuery操作样式
方式1：
css()用于获取和设置一个，或者设置一组css样式
方式2：通过class来设置样式：addClass()-添加class 和
removeClass()-移除class
1.使用css设置样式
$("p").css("color");//取得p标签的color样式属性的值$("p").css("color","red");//将p标签的color样式的值设置为red$("p").css({"color":"#ff0011","background":"blue"});//为p标签设置一组css样式
2.通过class来设置样式
$("p").addClass("s1");//为p元素添加一个class为：s1$("p").addClass("s1 s2");//为p元素添加class为：s1和s2$("p").removeClass("s2");//将p元素class中的s2移除//思路：使用class选择器设置相关css样式，那么添加上对应的class就有了相应的样式。
九、jQuery发送ajax请求
//get请求
$.get("url",[需要提交参数],function(result){
console.log("返回结果："+result);});//post请求
$.post("url",[需要提交参数],function(result){
console.log("返回结果："+result);});
版权归原作者 拓海姥湿 所有， 如有侵权，请联系我们删除。