简介

一个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等