• JQuery使用

    简介

            一个JavaScript的框架，简化了JS的语法和操作，定义了HTML属性操作、样式操作、DOM 操作等相关函数，实现了对ajax异步请求封装。提供了很多预定义函数的JS文件。

    作用

            简化部分JavaScript开发

    使用步骤

            1,引入Jquery

                    下载

    1. 地址1:http://code.jquery.com/jquery-3.6.0.js
    2. 地址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.寻找标签

    语法：$("选择器")

    1. <span id="span">span标签</span>
    2. <p class="p">p标签1</p>
    3. <p class="p">p标签2</p>
    1. <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
    2. <script type="text/javascript">
    3.     $("#span")//寻找当前网页中id值为span的标签
    4.     $(".p")//寻找当前网页中class值为p的标签
    5.     //$("#text")//效果类似与:document.getElementById("text");
    6.     //$(".s")//效果类似与:document.getElementsByClassName("s");
    7. //
    8. </script>

    2.创建标签

    语法：$("标签")

    1. append() - 在被选元素的结尾插入内容
    2. prepend() - 在被选元素的开头插入内容
    3. after() - 在被选元素之后插入内容
    4. before() - 在被选元素之前插入内容

    示例：

    1. <body>
    2. 		<div id="box">
    3. 		<p>p标签</p>
    4. 		</div>
    5.  
    6. 	</body>
    1. <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    2. 		<script type="text/javascript">
    3. 				$("#box").append("
      纳西妲
      "      );//先找到再添加
    4. $("
      纳西妲
      "      )直接添加
    5. 		</script>

    3. 入口函数

    1. 作用:类似与window.onload = function(){};,当页面加载完成后执行
    2. 语法1:
    3.     $(document).ready(function(){
    4.         
    5.     });
    6.  
    7. 语法2:
    8.     $(function(){
    9.  
    10.     })

    4.将DOM对象转换为JQuery对象

            通过$(DOM)方法将普通的DOM对象加工成jQuery对象之后，就可以调用jQuery的方法了。

            语法:$(DOM对象)

    1. var p = document.getElementById("p");
    2. console.log("p的dom对象:"+p);
    3. var p2 = $(p);
    4. //dom对象转换为jquery对象
    5. console.log("p的jquery对象:"+p2);
    6. //jquery对象转换为dom对象
    7. 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元素

    属性选择器

            语法: 选择器[属性名]

                      选择器[属性名=属性值]

    1. <style type="text/css">
    2.     input[type=password]{
    3.     background: red;
    4. }
    5. input[type]{
    6.     display: block;
    7.     height: 100px;
    8. }
    9. </style>
    1. <body>
    2.     <input type="text" />
    3.     <input type="password" />
    4. </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. //1.获取元素属性值
    2.     var v1 = $("img").attr("src");
    3.     var v2 = $("img").attr("width");
    4. //2.设置元素属性
    5.         $("img").attr("src","imgs/img02.png");
    6.         $("img").attr("width",200);

    删除属性

            语法:removeAttr(属性名) 

    1. $("input").removeAttr("value");
    2. $("input").removeAttr("name")

    特殊属性

     value属性

    语法：val()

    1. //1.获取元素value属性值
    2.     var v = $("#userName").val();
    3. //2.设置元素的value属性值
    4.     $("#userName").val("这是设置的值");
    1. <script type="text/javascript">
    2.     $(function(){
    3.         $("#btn").click(function(){
    4.             var sex = $("input[name=sex]:checked").val();
    5.             alert(sex);//点击后把值打印到弹框上
    6.         });
    7.      });
    8. script>
    1. <input type="radio" value="男" name="sex"/>
    2. 男
    3. <br />
    4. <input type="radio" value="女" name="sex"/>
    5. 女
    6. <br />
    7. <input id="btn" type="button" value="提交" />

    取多个时：

    1. <script type="text/javascript">
    2.     $(function(){
    3.         $("#btn").click(function(){//如果点击的话
    4.             var vs = $("input[name=like]:checked");//把name属性为like的，dom转为jq
    5.             var values = new Array();
    6.             for(var i = 0; i < vs.length; i++){//
    7.                 values[i] = vs[i].value;//存入数组中
    8.             }
    9.             alert(values);//打印到弹框
    10.         });
    11.     });
    12. </script>

    class属性

    语法:

             addClass():添加

            removeClass():删除

            toggleClass():原标签没有就是添加,原标签有就是删除

            attr("class"):获取class的属性值

    JQuery操作样式

    获取css属性值

            语法:css("属性名")

            注意:不限于内联样式的属性

    修改css属性

            语法:css("属性名","属性值");

             注意:不限于内联样式的属性

    1. $("#box").css("width");
    2. $("#box").css("height","300px");
    3. $("#box").css("left","200px");

    JQuery进阶

    DOM操作

    添加节点

    语法:

            父节点.append(添加的子节点)

            添加的子节点.appendTo(添加到的父节点)

    例：     

    1. $("#box").append($("
      JQuery01
      "      ));
    2. $("
      JQuery02
      "      ).appendTo($("#box"));

    插入节点

    语法:

            node1子标签.before(要添加的子标签node2): 在node1的前面插入node2 、

            node2要添加的子节点.insertBefore(node1子标签): 将node2插入到node1之前

            node1子标签.after(要添加的子节点node2) : 在node1的后面插入node2

            node2要添加的子节点.insertAfter(node1子标签): 将node2插入到node1的后面

            父标签.prepend(要添加的子节点)   在被选元素的开头插入内容

    1. (function(){
    2.     $("#h1").before($("
      1
      "      )); //#h1前插入<p>1</p>
    3.     $("
      2
      "      ).insertBefore($("#h2"));//<p>2</p>插入到#h2之前
    4.     $("#h1").after($("
      影/p>"));//#h1之后插入<p>影</p>
    5.     $("
      纳西妲
      "      ).insertAfter($("#h2"));//将<p>纳西妲</p>插入到#h2之后
    6. })
    1. <script type="text/javascript">
    2.     $(function(){
    3.         $("#p").prepend($("
      h1
      "      ));
    4.     });
    5. script>
    1. <body>
    2.     <p id="p">内容</p>
    3. </body>
    4.  
    5.  
    6.  
    7. <script type="text/javascript">
    8.     $(function(){    
    9.         $("#p").prepend($("
      纳西妲
      "      ));
    10.     });
    11. </script>

    替换节点

    语法

            node1.replaceWith(node2) : 使用node2替换node1

    1. $(function(){
    2.     $("#h1").replaceWith($("
      替换后的h1
      "      ));
    3. })

    删除节点

    语法:

             node.remove() :删除当前节点

             parent.empty():清楚当前标签中所有的子标签

    1. $(function(){
    2.     $("#h1").remove();
    3.     $("#box").empty();
    4. })

    节点包裹

    语法:

            node1.wrap(node2) : 使用node2将node1包裹起来

            node.unwrap() : 删除当前标签的父标签

    1. $(function(){
    2.     $("#h1").wrap($("
      "      ));//用div包了一下#h1
    3.  
    4.     $("#h1").unwrap();//删了包裹它的div
    5. })

    事件函数

    文档加载事件

            事件:ready

            触发时机:文档加载完毕时触发

    示例：

    1. $(document).ready(function(){
    2.  
    3. })

    点击事件

    事件：clike

    触发时机：按钮点击后

    例：

    1. $("#btn").click(function(){
    2.  
    3. })

    事件：dblclick

    触发时机：鼠标双击后

    例：

    1. $("#btn").dblclick(function(){
    2.  
    3. })

    焦点事件

    事件:focus

    触发时机:获取焦点后，

    例

    1. $("#userName").focus(function(){
    2.     console.log("---输入框获得焦点");
    3. });

    事件：blur

    触发时机：失去焦点后

    例

    1. $("#userName").blur(function(){
    2.     console.log("---输入框获得焦点");
    3. });

    鼠标移入

    事件

                    mouseenter:鼠标移入

                    mouseleave:鼠标移出

    例：

    1. 		<style type="text/css">
    2. 			#box{
    3. 				width: 200px;
    4. 				height: 200px;
    5. 				
    6. 			}
    7. 			#box1{
    8. 				width: 200px;
    9. 				height: 50px;
    10. 				background: chartreuse;
    11. 				display: block;
    12. 			}
    13. 			#box2{
    14. 				width: 200px;
    15. 				height: 150px;
    16. 				background: coral;				
    17. 				display: none;
    18. 			}
    19. 			
    20. 		style>
    1. <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
    2. 		<script type="text/javascript">
    3. 			$(function(){
    4. 				
    5. 		$("#box1").mouseenter(function(){//移入
    6. 			//$("box2").show();
    7. 			$("#box2").slideDown(200);//淡出，慢慢显示box2
    8. 		});
    9. 		
    10. 		
    11. 		$("#box").mouseleave(function(){//移出
    12. 			//$("#box2").hide();消失
    13. 			$("#box2").slideUp(200);//淡入，慢慢消失
    14. 		});		
    15. 			})
    1. <div id="box">
    2. 			<span id="box1">显示</span>		
    3. 				<div id="box2">隐藏一下</div>
    4. 		</div>

     

     键盘事件

    事件:

            keydown:键盘按下

            keyup:键盘抬起

    例：

    1. $(function(){
    2.     $(window).keydown(function(){
    3.         console.log(window.event.key);//获取当前事件，对应的key把按下的键盘打印到弹框中
    4.     })
    5. });

    内容事件

    事件:change

    1. <script type="text/javascript">
    2.     $(function(){
    3.         $("#input").change(function(){
    4.             console.log($("#input").val());
    5.         });
    6.     });
    7. script>
    1. <body>
    2.     <input id="input" />
    3. </body>

    失去焦点后，内容改变会触发

    事件的打开与关闭

    语法:

            off("事件名称") 关闭元素的事件

            on("事件名称",fn) 重新打开/绑定元素的事件

    1. $(function(){
    2.     $("#input").click(function(){
    3.         alert("按钮被点击了");
    4.     });
    5.        
    6.     $("#input").off("click");//关闭点击事件
    7.         
    8.     $("#input").on("click",function(){//打开点击事件，记得上个事件被关，重新打开得重设事件
    9.         alert("按钮被点击了1");
    10.         });
    11.     });

    获取事件

    1. $("#btn").click(function(ev){//回调里可以有参数，就是事件对象
    2.     console.log(ev);//ev表示事件对象   这个时封装后的的
    3.         window.event//直接获取当前事件  这个是普通的
    4.  
    5. });

    获取事件对象

    如果同标签有多个选择，可用this，谁触发就是谁

    1. $(".btn").click(function(event){
    2.         this//那个按钮被点击，this代表谁
    3.     //$(this)表示发生事件的元素，被jq转换了
    4. });

    效果函数

    显示隐藏

    语法:

            hide:隐藏

            show:显示

    1. if($("#box").css("display") == "none"){
    2.     $("#box").show();
    3. }else{
    4.     $("#box").hide();
    5. }

    淡入淡出

    语法:

            fadeIn:淡入

            fadeOut:淡出

    1. if($("#box").css("display") == "none"){
    2.     $("#box").fadeIn(3000);//参数 ms
    3. }else{
    4.     $("#box").fadeOut(3000);
    5. }

    滑入滑出

    语法:

            slideDown:向下滑出

            slideUp:向上滑入

    1. if($("#box").css("display") == "none"){
    2.     $("#box").slideDown(3000);
    3. }else{
    4.     $("#box").slideUp(3000);
    5. }

    AJAX

    ajax函数

    语法

    1. $.ajax({
    2.         url:"请求url?param1=v1", //url ajax请求的目标服务器地址
    3.         type:"get|post", //type 指定请求方式
    4.         headers:{ //headers 设置请求头参数
    5.             key1:"value1",
    6.             key2:"value2"
    7. },
    8. data:{ //data 传递的参数
    9.         key1:"v1",
    10.         kye2:"v2"
    11. },
    12. contentType:"application/json", //contentType 请求上传的数据类型
    13.  
    14. dataType:"application/json", //dataType 预期的服务器响应的数据类型
    15.  
    16. processData:false, //processData 设置数据是否压缩传输
    17.  
    18. success:function(res){
    19.      //success ajax请求成功后执行,参数res就是服务器返回的数据
    20. },
    21. error:function(e){ 
    22.     //error ajax请求出现错误执行,参数e表示异常信息对象
    23. }
    24. });

    注意

            contentType:

                    含义:发送数据到服务器时所使用的内容类型

                    默认是："application/x-www-form-urlencoded"

                    如果上传的数据中有文件将其设为false

            processData:

                    含义:规定通过请求发送的数据是否转换为查询字符串。默认是 true。当上传文件时设置 false

            application/json与text/json:

                    在使用上效果类似,application/json遵循的应用json协议,text/json遵循的是文本json协议

            FormData：表单数据

    get函数

    语法

    1. $.get(url,data,success(response,status,xhr),dataType)
    2.  
    3. url:请求地址,必传
    4.  
    5. data:上传的参数,可选
    6.  
    7. success:请求成功时运行的函数。可选，三个可填参数
    8.     response:响应的内容
    9.     status:响应状态
    10.     xhr:包含XMLHttpRequest对象
    11.  
    12. dataType:服务器响应的数据类型,默认执行智能判断.可以写json、text、html,xml等

    post函数

    语法

    1. $.post(url,data,success(response,status,xhr),dataType)
    2.  
    3. url:请求地址,必传
    4.  
    5. data:上传的参数,可选
    6.  
    7. success:请求成功时运行的函数。可选
    8.         response:响应的内容
    9.         status:响应状态
    10.         xhr:包含XMLHttpRequest对象
    11.  
    12. dataType:服务器响应的数据类型,默认执行智能判断.可以写json、text、html,xml等

  • 相关阅读:
    redis
    OSG 添加文字（显示中英文）
    连接无限：5G技术构建智慧互联新生态
    防火墙实验二——实现域间、域内双向NAT、双机热备实验
    k8s学习-ConfigMap（创建、使用、更新、删除等）
    SR-LIO--手写紧耦合IESKF
    PostMan动态设置全局变量
    网页制作基础大二dw作业HTML+CSS+JavaScript云南我的家乡旅游景点
    【OpenCV】 拟合直线 与 霍夫直线 对比 , fitLine()与 HoughLinesP()对比
    Unity：Resource Merging、Static Batching、Dynamic Batching、GPU Instancing
  • 原文地址：https://blog.csdn.net/weixin_44207220/article/details/127989991