JQuery使用
简介
一个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标签进行引入
也可以直接用网址引入，但这个不是很稳：
2,编写代码
JQuery基础
核心函数
jQuery()函数，选择器函数，用于获取HTML文档中的元素 ，简写为 $()
1.寻找标签
语法：$("选择器")
span标签
p标签1
p标签2
2.创建标签
语法：$("标签")
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容示例：
p标签
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元素
属性选择器
语法: 选择器[属性名]
选择器[属性名=属性值]
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("这是设置的值");
男
女
取多个时：
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($("JQuery01
"));
$("JQuery02
").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($("1
")); //#h1前插入1
$("2
").insertBefore($("#h2"));//2
插入到#h2之前
$("#h1").after($("影/p>"));//#h1之后插入
影
$("纳西妲
").insertAfter($("#h2"));//将纳西妲
插入到#h2之后
})
内容
替换节点
语法
node1.replaceWith(node2) : 使用node2替换node1
$(function(){
$("#h1").replaceWith($("替换后的h1
"));
})删除节点
语法:
node.remove() :删除当前节点
parent.empty():清楚当前标签中所有的子标签
$(function(){
$("#h1").remove();
$("#box").empty();
})
节点包裹
语法:
node1.wrap(node2) : 使用node2将node1包裹起来
node.unwrap() : 删除当前标签的父标签
$(function(){
$("#h1").wrap($(""));//用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:鼠标移出
例：
失去焦点后，内容改变会触发
事件的打开与关闭
语法:
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等