简介
一个JavaScript的框架，简化了JS的语法和操作，定义了HTML属性操作、样式操作、DOM 操作等相关函数，实现了对ajax异步请求封装。提供了很多预定义函数的JS文件。
作用
简化部分JavaScript开发
使用步骤
1,引入Jquery
下载
地址1:http://code.jquery.com/jquery-3.6.0.js
地址2:http://code.jquery.com/jquery-3.6.0.min.js
将JQuery文件放入js文件夹下
使用script标签进行引入
也可以直接用网址引入，但这个不是很稳：
<script type="text/javascript" src="http://code.jquery.com/jquery3.6.0.js"></script>
2,编写代码
JQuery基础
核心函数
jQuery()函数，选择器函数，用于获取HTML文档中的元素 ，简写为 $()
1.寻找标签
语法：$("选择器")
<span id="span">span标签</span>
<p class="p">p标签1</p>
<p class="p">p标签2</p><script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$("#span")//寻找当前网页中id值为span的标签
$(".p")//寻找当前网页中class值为p的标签
//$("#text")//效果类似与:document.getElementById("text");
//$(".s")//效果类似与:document.getElementsByClassName("s");
//
</script>2.创建标签
语法：$("标签")
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容示例：
<body>
<div id="box">
<p>p标签</p>
</div>
</body><script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#box").append("<h1>纳西妲</h1>");//先找到再添加
$("<h1>纳西妲</h1>")直接添加
</script>
3. 入口函数
作用:类似与window.onload = function(){};,当页面加载完成后执行
语法1:
$(document).ready(function(){
});
语法2:
$(function(){
})4.将DOM对象转换为JQuery对象
通过$(DOM)方法将普通的DOM对象加工成jQuery对象之后，就可以调用jQuery的方法了。
语法:$(DOM对象)
var p = document.getElementById("p");
console.log("p的dom对象:"+p);
var p2 = $(p);
//dom对象转换为jquery对象
console.log("p的jquery对象:"+p2);
//jquery对象转换为dom对象
console.log("p2转换为dom对象:"+p2[0]);//
注意:JQuery无法使用DOM对象提供的属性与方法
选择器
基本选择器
id选择器:#id
class选择器:.class
标签选择器:标签名
统配选择器:*
伪类选择器
鼠标悬浮
获取焦点
复合选择器
selector1 selector2 选择所有selector1 匹配的元素 里面 的匹配selector2的元素 selector1 > selector2 选择匹配selector1元素的 子标签中 匹配selector2的元素 selector1,selector2 选择所有匹配selector1 和 selector2的元素（并集）
selector1 + selector2 匹配所有 紧接 在 selector1 元素后的 selector2元素
selector1 ~ selector2匹配所有在 selector1 元素后的 selector2元素
属性选择器
语法: 选择器[属性名]
选择器[属性名=属性值]
<style type="text/css">
input[type=password]{
background: red;
}
input[type]{
display: block;
height: 100px;
}
</style>
<body>
<input type="text" />
<input type="password" />
</body>JQuery选择器筛选
语法
| 选择器筛选语法 | 说明 |
| $("selector: first ") | 匹配selector选择的元素集合中的第一个 |
| $("selector: last ") | 匹配selector选择的元素集合中的最后一个 |
| $("selector: odd ") | 匹配selector选择的元素集合中索引为奇数的元素，下标0开始 |
| $("selector: even ") | 匹配selector选择的元素集合中索引为偶数的元素 |
| $("selector: eq(index) ") | 匹配selector选择的元素集合中索引为index的 元素 |
| $("selector: lt(index) ") | 匹配selector选择的元素集合中索引小于index 的元素 |
| $("selector: gt(index) ") | 匹配selector选择的元素集合中索引大于index 的元素 |
| $("selector [attrName=attrValue] ") | 匹配selector选择的元素集合中attrName属性 值为attrValue的元素 |
| $("selector [attrName!=attrValue] ") | 属性不等于attrValue的 |
JQuery操作内容
获取内容
语法1:$("选择器").text()
语法2:$("选择器").html()
修改内容
语法1:$("选择器").text(修改后的内容)
语法2:$("选择器").html(修改后的内容)
修改会替换原有内容，可使用+在尾部添加
JQuery操作属性
一般属性
语法:attr()
//1.获取元素属性值
var v1 = $("img").attr("src");
var v2 = $("img").attr("width");
//2.设置元素属性
$("img").attr("src","imgs/img02.png");
$("img").attr("width",200);
删除属性
语法:removeAttr(属性名)
$("input").removeAttr("value");
$("input").removeAttr("name")
特殊属性
value属性
语法：val()
//1.获取元素value属性值
var v = $("#userName").val();
//2.设置元素的value属性值
$("#userName").val("这是设置的值");
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var sex = $("input[name=sex]:checked").val();
alert(sex);//点击后把值打印到弹框上
});
});
</script><input type="radio" value="男" name="sex"/>
男
<br />
<input type="radio" value="女" name="sex"/>
女
<br />
<input id="btn" type="button" value="提交" />
取多个时：
<script type="text/javascript">
$(function(){
$("#btn").click(function(){//如果点击的话
var vs = $("input[name=like]:checked");//把name属性为like的，dom转为jq
var values = new Array();
for(var i = 0; i < vs.length; i++){//
values[i] = vs[i].value;//存入数组中
}
alert(values);//打印到弹框
});
});
</script>class属性
语法:
addClass():添加
removeClass():删除
toggleClass():原标签没有就是添加,原标签有就是删除
attr("class"):获取class的属性值
JQuery操作样式
获取css属性值
语法:css("属性名")
注意:不限于内联样式的属性
修改css属性
语法:css("属性名","属性值");
注意:不限于内联样式的属性
$("#box").css("width");
$("#box").css("height","300px");
$("#box").css("left","200px");JQuery进阶
DOM操作
添加节点
语法:
父节点.append(添加的子节点)
添加的子节点.appendTo(添加到的父节点)
例：
$("#box").append($("<h1>JQuery01</h1>"));
$("<h1>JQuery02</h1>").appendTo($("#box"));插入节点
语法:
node1子标签.before(要添加的子标签node2): 在node1的前面插入node2 、
node2要添加的子节点.insertBefore(node1子标签): 将node2插入到node1之前
node1子标签.after(要添加的子节点node2) : 在node1的后面插入node2
node2要添加的子节点.insertAfter(node1子标签): 将node2插入到node1的后面
父标签.prepend(要添加的子节点) 在被选元素的开头插入内容
(function(){
$("#h1").before($("<p>1</p>")); //#h1前插入<p>1</p>
$("<p>2</p>").insertBefore($("#h2"));//<p>2</p>插入到#h2之前
$("#h1").after($("<p>影/p>"));//#h1之后插入<p>影</p>
$("<p>纳西妲</p>").insertAfter($("#h2"));//将<p>纳西妲</p>插入到#h2之后
})<script type="text/javascript">
$(function(){
$("#p").prepend($("<h1>h1</h1>"));
});
</script><body>
<p id="p">内容</p>
</body>
<script type="text/javascript">
$(function(){
$("#p").prepend($("<h1>纳西妲</h1>"));
});
</script>
替换节点
语法
node1.replaceWith(node2) : 使用node2替换node1
$(function(){
$("#h1").replaceWith($("<h1>替换后的h1</h1>"));
})删除节点
语法:
node.remove() :删除当前节点
parent.empty():清楚当前标签中所有的子标签
$(function(){
$("#h1").remove();
$("#box").empty();
})
节点包裹
语法:
node1.wrap(node2) : 使用node2将node1包裹起来
node.unwrap() : 删除当前标签的父标签
$(function(){
$("#h1").wrap($("<div style='border: 1px solid red;'></div>"));//用div包了一下#h1
$("#h1").unwrap();//删了包裹它的div
})
事件函数
文档加载事件
事件:ready
触发时机:文档加载完毕时触发
示例：
$(document).ready(function(){
})
点击事件
事件：clike
触发时机：按钮点击后
例：
$("#btn").click(function(){
})事件：dblclick
触发时机：鼠标双击后
例：
$("#btn").dblclick(function(){
})
焦点事件
事件:focus
触发时机:获取焦点后，
例
$("#userName").focus(function(){
console.log("---输入框获得焦点");
});事件：blur
触发时机：失去焦点后
例
$("#userName").blur(function(){
console.log("---输入框获得焦点");
});鼠标移入
事件
mouseenter:鼠标移入
mouseleave:鼠标移出
例：
<style type="text/css">
#box{
width: 200px;
height: 200px;
}
#box1{
width: 200px;
height: 50px;
background: chartreuse;
display: block;
}
#box2{
width: 200px;
height: 150px;
background: coral;
display: none;
}
</style>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
$("#box1").mouseenter(function(){//移入
//$("box2").show();
$("#box2").slideDown(200);//淡出，慢慢显示box2
});
$("#box").mouseleave(function(){//移出
//$("#box2").hide();消失
$("#box2").slideUp(200);//淡入，慢慢消失
});
})<div id="box">
<span id="box1">显示</span>
<div id="box2">隐藏一下</div>
</div> 
键盘事件
事件:
keydown:键盘按下
keyup:键盘抬起
例：
$(function(){
$(window).keydown(function(){
console.log(window.event.key);//获取当前事件，对应的key把按下的键盘打印到弹框中
})
});内容事件
事件:change
<script type="text/javascript">
$(function(){
$("#input").change(function(){
console.log($("#input").val());
});
});
</script>
<body>
<input id="input" />
</body>失去焦点后，内容改变会触发
事件的打开与关闭
语法:
off("事件名称") 关闭元素的事件
on("事件名称",fn) 重新打开/绑定元素的事件
$(function(){
$("#input").click(function(){
alert("按钮被点击了");
});
$("#input").off("click");//关闭点击事件
$("#input").on("click",function(){//打开点击事件，记得上个事件被关，重新打开得重设事件
alert("按钮被点击了1");
});
});获取事件
$("#btn").click(function(ev){//回调里可以有参数，就是事件对象
console.log(ev);//ev表示事件对象 这个时封装后的的
window.event//直接获取当前事件 这个是普通的
});
获取事件对象
如果同标签有多个选择，可用this，谁触发就是谁
$(".btn").click(function(event){
this//那个按钮被点击，this代表谁
//$(this)表示发生事件的元素，被jq转换了
});效果函数
显示隐藏
语法:
hide:隐藏
show:显示
if($("#box").css("display") == "none"){
$("#box").show();
}else{
$("#box").hide();
}
淡入淡出
语法:
fadeIn:淡入
fadeOut:淡出
if($("#box").css("display") == "none"){
$("#box").fadeIn(3000);//参数 ms
}else{
$("#box").fadeOut(3000);
}滑入滑出
语法:
slideDown:向下滑出
slideUp:向上滑入
if($("#box").css("display") == "none"){
$("#box").slideDown(3000);
}else{
$("#box").slideUp(3000);
}
AJAX
ajax函数
语法
$.ajax({
url:"请求url?param1=v1", //url ajax请求的目标服务器地址
type:"get|post", //type 指定请求方式
headers:{ //headers 设置请求头参数
key1:"value1",
key2:"value2"
},
data:{ //data 传递的参数
key1:"v1",
kye2:"v2"
},
contentType:"application/json", //contentType 请求上传的数据类型
dataType:"application/json", //dataType 预期的服务器响应的数据类型
processData:false, //processData 设置数据是否压缩传输
success:function(res){
//success ajax请求成功后执行,参数res就是服务器返回的数据
},
error:function(e){
//error ajax请求出现错误执行,参数e表示异常信息对象
}
});注意
contentType:
含义:发送数据到服务器时所使用的内容类型
默认是："application/x-www-form-urlencoded"
如果上传的数据中有文件将其设为false
processData:
含义:规定通过请求发送的数据是否转换为查询字符串。默认是 true。当上传文件时设置 false
application/json与text/json:
在使用上效果类似,application/json遵循的应用json协议,text/json遵循的是文本json协议
FormData：表单数据
get函数
语法
$.get(url,data,success(response,status,xhr),dataType)
url:请求地址,必传
data:上传的参数,可选
success:请求成功时运行的函数。可选，三个可填参数
response:响应的内容
status:响应状态
xhr:包含XMLHttpRequest对象
dataType:服务器响应的数据类型,默认执行智能判断.可以写json、text、html,xml等post函数
语法
$.post(url,data,success(response,status,xhr),dataType)
url:请求地址,必传
data:上传的参数,可选
success:请求成功时运行的函数。可选
response:响应的内容
status:响应状态
xhr:包含XMLHttpRequest对象
dataType:服务器响应的数据类型,默认执行智能判断.可以写json、text、html,xml等
2393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
