• JQuery专题

    目录

    什么是jquery

    使用jquery

    JQuery选择器

    JQuery筛选器

    JQuery操作文本内容

    Jquery操作类名

    Jquery操作样式

    操作元素属性

    jquery获取元素尺寸 

    jquery元素偏移量

    jquery事件绑定

    事件的解绑和触发

    jquery的动画函数

    jquery的折叠动画

    jquery渐隐渐显函数

    jquery的综合动画函数

    jquery结束动画函数

    jquery的ajax请求

    什么是jquery

    一个大型的简单的第三方类库

    类库：把我们所有常用的操作封装到了一起，我们需要用的时候直接使用就可以

    注意：jquery对dom操作进行了完善得封装，把我们常用的dom操作全都封装到了一起，包括我们的各种元素操作以及ajax操作

    使用jquery

    <script src="jquery.js"></script>

    注意：当你引入jquery文件以后会在全局暴露2个变量名，这两个变量名一模一样

    1. <script>
    2.     console.log($);
    3.     console.log(jQuery);
    4. </script>

    JQuery选择器

    语法：$('选择器')

    1. <script>
    2.     //id选择器
    3.     console.log($('#box'));
    4.     //类名选择器
    5.     console.log($('.a'));
    6.     //标签名选择器
    7.     console.log($('li'));
    8.     //结构伪类选择器
    9.     console.log($('li:nth-child(odd)'));
    10. </script>

    通过这种方法我们便可以获取页面上的任何一个元素了

    JQuery筛选器

    含义：对jquery选择器获取到的元素进行二次筛选

    语法：$('选择器').筛选器名称()

    1. <body>
    2.     <ul>
    3.         <li>1</li>
    4.         <li>2</li>
    5.         <li>3</li>
    6.         <li>4</li>
    7.         <li>5 <i>子2级</i></li>
    8.         <i>子级i</i>
    9.         <span>我是span</span>
    10.         <li>6</li>
    11.         <li>7 <p><i>子3级</i></p></li>
    12.         <li>8</li>
    13.         <li>9</li>
    14.         <li>10</li>
    15.     </ul>
    16. </body>
    17. <script>
    18.     //first()
    19.     console.log($("li").first());//选择的是所有li里的第一个
    20.     //last()
    21.     console.log($("li").first());//选择的是所有li里的最后一个
    22.     //eq(索引)——注意：索引是从0开始依次加一
    23.     console.log($("li").eq(3));//选择的是索引第三个li
    24.     //next()
    25.     console.log($("span").next());//拿到的是span的下一个元素
    26.     //nextAll()
    27.     console.log($("span").nextAll());//拿到的是span标签后的所有兄弟元素
    28.     //prev()
    29.     console.log($("span").prev());//拿到的是span的前一个元素
    30.     //prevAll()
    31.     console.log($("span").prevAll());//拿到的是span前的所有兄弟元素
    32.     //parent()
    33.     console.log($("span").parent());//拿到的是span的父元素ul标签
    34.     //parents()
    35.     console.log($("span").parents());//获取的是该元素的所有父级结构，逐层获取，直到html标签为止
    36.     //siglings()
    37.     console.log($("span").siblings());//拿到该元素的所有兄弟元素
    38.     //find(选择器)
    39.     console.log($("ul").find("i"));//找到该元素的所有后代中满足选择器要求的元素-3个i都找到了
    40. </script>

    JQuery操作文本内容

    1. <body>
    2.     <div>hello
    3.         <p>你好，世界</p>
    4.         world
    5.     </div>
    6.     <input type="text" value="hello">
    7. </body>
    8. <script>
    9.     //html()
    10.     //获得该div下所有的结构，以字符串的形式返回等价于js中的innerHTML
    11.     console.log($("div").html());
    12.     //html()设置，将div元素的内容改为要设置的内容（其可以识别并解析html结构字符串）
    13.     $("div").html("<h1>我是用来设置的元素</h1>")
    14.  
    15.     //text()
    16.     //等价于js中的innerText
    17.     //拿到该元素下的所有文本内容
    18.     console.log($("div").text());
    19.     //text()设置,将div元素的内容改为要设置的内容（其不可以识别并解析html结构字符串）
    20.     $("div").text("<h1>我是用来设置的元素</h1>");
    21.     
    22.     //val()
    23.     //等价于js中的value属性
    24.     console.log($("input").val());
    25.     //val()设置
    26.     $("input").val("我是后来设置的内容")
    27. </script>

    Jquery操作类名

    1. <body>
    2.     <div class="a b c d"></div>
    3. </body>
    4. <script>
    5.     //addClass()
    6.     //语法：元素集合.addClass(需要添加的类名)
    7.     $("div").addClass('e')//发现浏览器div多了个e类名
    8.     //removeClass()
    9.     $("div").removeClass("d")//浏览器的d类名被删除
    10.     //toggleClass()
    11.     //语法：元素集合.toggleClass(你要切换的类名)
    12.     //切换：如果本身有这个类名就是删除，如果本身没有这个类名就是添加
    13.     $("div").toggleClass("d")//因为没有d类名，所以添加
    14. </script>

    Jquery操作样式

    注意：jquery为我们提供了css()方法专门用来操作样式

    1. <body>
    2.     <div style="width: 100px; ;"></div>
    3. </body>
    4. <style>
    5.     div{
    6.         height: 200px;
    7.         background: skyblue;
    8.     }
    9. </style>
    10. <script>
    11.     //css获取样式
    12.     //注意:可以获取元素的行内样式，也可以获取到元素的非行内样式
    13.     //语法：元素集合.css(你要获取的样式名称)——返回值：该样式的样式值
    14.     console.log($("div").css("width"));//行内样式
    15.     console.log($("div").css("height"));//非行内样式
    16.  
    17.     //css设置样式
    18.     //语法：元素集合.css(样式名，样式值)
    19.     //注意：当你需要给元素设置样式值为px单位的时候，可以省略单位不写
    20.     $("div").css("width","300px")
    21.     $("div").css("background","red")
    22.  
    23.     //css批量设置样式
    24.     //语法：元素集合.css({你所有需要设置的样式}),注意：里面以key：value形式设置，多个属性之间用，隔开
    25.     $("div").css({"width":"300px","height":"500px","opacity":"0.68","background":"green"})
    26. </script>

    操作元素属性

    1. <body>
    2.     <div id="box" hello="world">我是个弟弟</div>
    3. </body>
    4.     <script>
    5.         //attr()
    6.         //可以进行设置和元素属性，一般用于元素的自定义属性，attr操作的所有属性都会直接出现在元素的标签身上
    7.         //语法：元素.attr(你要获取的属性名) 返回值：该属性名对应的属性值
    8.         console.log($("div").attr("hello"));//可以
    9.         console.log($("div").attr("id"));//可以
    10.  
    11.         //attr()设置
    12.         $("div").attr("a","100")//可以
    13.         $("div").attr("id","b")//可以
    14.  
    15.         //removeAttr()
    16.         //对元素进行删除操作
    17.         //语法：元素集合.removeAttr(你要删除的属性名)
    18.         $("div").removeAttr("hello")//可以
    19.         $("div").removeAttr("id")//可以
    20.  
    21.         //prop()
    22.         //获取和设置元素属性
    23.         //注意：当设置原生属性时，会直接响应在元素标签身上；
    24.         //当设置元素自定义属性时，不会直接响应在元素标签身上，会响应在元素对象身上
    25.         //注意：prop方法不能获取到元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性
    26.         //prop()设置——语法：元素集合.prop(属性名,属性值)
    27.         $("div").prop("id","container")
    28.         $("div").prop("b","200")//其自定义属性不在标签上显示，而是在divdom对象中可以找到
    29.         //prop()获取——语法：元素集合.prop(你要获取的属性名)，返回值为该属性对应的值
    30.         console.log($("div").prop("id"));//可以
    31.         console.log($("div").prop("a"));//不可以
    32.         console.log($("div").prop("b"));//可以
    33.  
    34.         //removeprop()
    35.         //用来删除元素属性的方法，其不能删除原生属性，其只能删除prop方法定义的自定义属性
    36.         //语法：元素集合.removeProp(你要删除的属性名)
    37.         $("div").removeProp("id")//不可以
    38.         $("div").prop("b","300")
    39.         console.log($("div"));
    40.         $("div").removeProp("b")
    41.         console.log($("div"));
    42.     </script>

    jquery获取元素尺寸 

    1. <body>
    2.     <div></div>
    3. </body>
    4. <style>
    5.     * {
    6.         margin: 0;
    7.         padding: 0;
    8.     }
    9.  
    10.     div {
    11.         width: 300px;
    12.         height: 300px;
    13.         padding: 20px;
    14.         border: 20px dashed red;
    15.         margin: 20px;
    16.         background: skyblue;
    17.         background-clip: content-box;
    18.         display:none;
    19.     }
    20. </style>
    21. <script>
    22.     //获取元素尺寸
    23.     //width()和height()
    24.     //获取到的是元素内容的尺寸
    25.     console.log($("div").width());
    26.     console.log($("div").height());
    27.  
    28.     //innerWidth()和innerHeight()
    29.     //获取到的是元素内容+内边距的尺寸
    30.     console.log($("div").innerWidth());
    31.     console.log($("div").innerHeight());
    32.  
    33.     //outerWidth()和outerHeight()
    34.     //获取到的是元素内容+内边距尺寸+边框
    35.     console.log($("div").outerWidth());
    36.     console.log($("div").outerHeight());
    37.  
    38.     //outerWidth(true)和outerHeight(true)
    39.     //获取的是元素内容+内边距尺寸+边框+设置的外边距
    40.     console.log($("div").outerWidth(true));
    41.     console.log($("div").outerHeight(true));
    42. </script>

    注意：

    • 不管该元素是否隐藏下面这种方法均能获取到值
    • 不管盒子模型是什么状态，拿到的尺寸区域不变

    jquery元素偏移量

    1. <body>
    2.     <div>
    3.         <p>
    4.             <span></span>
    5.         </p>
    6.     </div>
    7. </body>
    8. <style>
    9.     *{
    10.         margin: 0;
    11.         padding: 0;
    12.     }
    13.     div{
    14.         width: 500px;
    15.         height: 500px;
    16.         margin: 30px;
    17.         background: skyblue;
    18.         overflow: hidden;
    19.     }
    20.     p{
    21.         width: 300px;
    22.         height: 300px;
    23.         margin: 30px;
    24.         background: orange;
    25.         overflow: hidden; 
    26.         position: relative;
    27.     }
    28.     span{
    29.         display: block;
    30.         width: 100px;
    31.         height: 100px;
    32.         margin: 30px;
    33.         background: pink;
    34.         position: absolute;
    35.         left: 40px;
    36.         top: 40px;
    37.     }
    38. </style>
    39. <script>
    40.     //offset()
    41.     //获取元素相对于页面左上角的坐标位置
    42.     //注意：返回值是一个对象数据类型，{top：yyy，left：xxx}
    43.     console.log($("div").offset());
    44.  
    45.     //position()
    46.     //获取到的就是元素的定位位置
    47.     //注意：如果你设置的是right和bottom，则会自动转换成left和top的值给到你
    48.     console.log($("span").position());
    49.     console.log($("p").position());
    50. </script>

    jquery事件绑定

    1. <body>
    2.     <div>我是div标签
    3.         <p>我是div的p标签</p>
    4.     </div>
    5. </body>
    6. <style>
    7.     div{
    8.         width: 500px;
    9.         height: 500px;
    10.         background: red;
    11.     }
    12.     p{
    13.         width: 300px;
    14.         height: 300px;
    15.         background: orange;
    16.     }
    17. </style>
    18. <script>
    19.     //on()方法绑定事件
    20.     //基础绑定事件=>语法：元素集合.on("事件类型","事件处理函数")
    21.     $("div").on('click',function(){console.log("我是div的点击事件");})
    22.     //事件委托绑定事件=>语法：元素集合('事件类型'，选择器，事件处理函数)
    23.     //当点击p的时候执行事件处理函数就会把事件委托给div
    24.     $("div").on('click','p',function(){console.log("事件委托");})
    25.     //批量绑定事件
    26.     //语法：元素集合.on({事件类型1：处理函数，事件类型2：处理函数})
    27.     //注意：这种方式不能进行事件委托
    28.     $("div").on({"click":function(){console.log("点击事件")},"mouseover":function(){console.log("鼠标移入");}})
    29.  
    30.     //one(),和on方法绑定事件方式一样的，区别：one方法绑定的时间只能执行一次
    31.     $("div").one("click",function(){console.log("基础绑定事件");})
    32.     //事件委托
    33.     $("div").one("click","p",function(){console.log("基础事件委托");})
    34.     //也支持批量绑定
    35.  
    36.     //hover()
    37.     //语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
    38.     //当你只传递一个函数的时候会在移入移出都触发
    39.     //其不能做事件委托
    40.     $("div").hover(function(){console.log("移入");},function(){console.log("移出");})
    41.  
    42.     //常用事件函数
    43.     //把我们常用的事件单独做成了事件函数，我们通过调用这些事件函数来达到绑定事件的效果
    44.     //eg：click(),mouseover(),mouseout(),change()
    45.     $("div").click(function(){console.log("click");})
    46. </script>

    事件的解绑和触发

    1. <body>
    2.     <div>我是div标签</div>
    3. </body>
    4. <script>
    5.     function handlerA(){console.log("我是handlerA函数");}
    6.     function handlerB(){console.log("我是handlerB函数");}
    7.     function handlerC(){console.log("我是handlerC函数");}
    8.     $("div").click(handlerA).click(handlerB).click(handlerC)
    9.     //off()事件解绑
    10.     //解绑全部事件处理函数：元素集合.off(事件类型)
    11.     //其会把div的所有click事件对应的所有事件处理函数全部移除
    12.     $("div").off('click')
    13.     //解绑指定的事件处理函数：元素集合.off(事件类型，要解绑的事件处理函数)
    14.     $("div").off("click",handlerB)
    15.  
    16.     //trigger()事件触发
    17.     //使用代码的方式来触发事件的
    18.     //语法：元素集合.trigger(事件类型)
    19.     //注意：只有绑定了事件才能触发
    20.     $("div").trigger("click")
    21. </script>

    jquery的动画函数

    1. <body>
    2.     <button>show</button>
    3.     <button>hide</button>
    4.     <button>toggle</button>
    5.     <div></div>
    6. </body>
    7. <style>
    8.     *{
    9.         margin: 0;
    10.         padding: 0;
    11.     }
    12.     div{
    13.         width: 500px;
    14.         height: 500px;
    15.         background: skyblue;
    16.     }
    17. </style>
    18. <script>
    19.     //基本动画有3个
    20.     //1.show()显示
    21.     //2.hide()隐藏
    22.     //3.toggle()切换（本身如果是显示的就隐藏，本身如果是隐藏的就显示）
    23.     //对于以上3个运动函数有共同的运动参数
    24.     //1.运动的时间
    25.     //2.运动的曲线
    26.     //3.运动的回调函数
    27.     // 基本动画
    28.     $("button:nth-child(1)").click(function(){
    29.         //执行show动画
    30.         $("div").show(1000,"linear",function(){console.log("show");})
    31.     })
    32.     $("button:nth-child(2)").click(function(){
    33.         //执行hide动画
    34.         $("div").hide(1000,"linear",function(){console.log("hide");})
    35.     })
    36.     $("button:nth-child(3)").click(function(){
    37.         //执行toggle动画
    38.         $("div").toggle(1000,"linear",function(){console.log("toggle");})
    39.     })
    40. </script>

    jquery的折叠动画

    （就和上面就动画形式不一样）

    1. <body>
    2.     <button>slideDown</button>
    3.     <button>slideUp</button>
    4.     <button>alideToggle</button>
    5.     <div></div>
    6. </body>
    7. <style>
    8.     *{
    9.         margin: 0;
    10.         padding: 0;
    11.     }
    12.     div{
    13.         width: 500px;
    14.         height: 500px;
    15.         background: skyblue;
    16.     }
    17. </style>
    18. <script>
    19.    //折叠有3个
    20.     //1.slideDown()显示
    21.     //2.slideUp()隐藏
    22.     //3.slideToggle()切换（本身如果是显示的就隐藏，本身如果是隐藏的就显示）
    23.     //对于以上3个运动函数有共同的运动参数
    24.     //1.运动的时间
    25.     //2.运动的曲线
    26.     //3.运动的回调函数
    27.     // 基本动画
    28.     $("button:nth-child(1)").click(function(){
    29.         $("div").slideDown(1000,"linear",function(){console.log("slideDown");})
    30.     })
    31.     $("button:nth-child(2)").click(function(){
    32.         $("div").slideUp(1000,"linear",function(){console.log("slideUp");})
    33.     })
    34.     $("button:nth-child(3)").click(function(){
    35.         $("div").slideToggle(1000,"linear",function(){console.log("slideToggle");})
    36.     })
    37. </script>

    jquery渐隐渐显函数

    1. <body>
    2.     <button>fadeDown</button>
    3.     <button>fadeUp</button>
    4.     <button>fadeToggle</button>
    5.     <button>fadeTo</button>
    6.     <div></div>
    7. </body>
    8. <style>
    9.     *{
    10.         margin: 0;
    11.         padding: 0;
    12.     }
    13.     div{
    14.         width: 500px;
    15.         height: 500px;
    16.         background: skyblue;
    17.     }
    18. </style>
    19. <script>
    20.     //1.fadeIn()显示
    21.     //2.fadeOut()隐藏
    22.     //3.fadeToggle()切换（本身如果是显示的就隐藏，本身如果是隐藏的就显示）
    23.     //对于以上3个运动函数有共同的运动参数
    24.     //1.运动的时间
    25.     //2.运动的曲线
    26.     //3.运动的回调函数
    27.     // 4fadeTo(运动时间，指定的透明度，运动曲线，运动结束的回调)
    28.     // 渐隐渐显
    29.     $("button:nth-child(1)").click(function(){
    30.         //执行show动画
    31.         $("div").fadeIn(1000,"linear",function(){console.log("fadeIn");})
    32.     })
    33.     $("button:nth-child(2)").click(function(){
    34.         $("div").fadeOut(1000,"linear",function(){console.log("fadeOut");})
    35.     })
    36.     $("button:nth-child(3)").click(function(){
    37.         $("div").fadeToggle(1000,"linear",function(){console.log("fadeToggle");})
    38.     })
    39.     $("button:nth-child(4)").click(function(){
    40.         //运动到指定的透明度
    41.         $("div").fadeTo(1000,0.3,"linear",function(){console.log("fadeTo");})
    42.     })
    43. </script>

    jquery的综合动画函数

    1. <body>
    2.     <button>开始动画</button>
    3.     <div></div>
    4. </body>
    5. <style>
    6.     div{
    7.         width: 300px;
    8.         height: 300px;
    9.         background: skyblue;
    10.     }
    11. </style>
    12. <script>
    13.     //综合动画
    14.     //animate()
    15.     //1.要运动的样式，以一个对象数据类型传递
    16.     //2.运动时间
    17.     //3.运动曲线
    18.     //4.运动结束的回调函数
    19.     $("button").click(function(){
    20.         //利用animate函数来实现运动
    21.         $("div").animate({
    22.             width:500,
    23.             height:600
    24.         },1000,"linear",function(){console.log("运动结束了");})
    25.     })
    26. </script>

    注意：

    • 关于颜色相关的样式是不能运动的
    • 关于transform相关的样式是不能运动的

    jquery结束动画函数

    1. <body>
    2.     <button class="a">开始动画</button>
    3.     <button class="b">停止动画</button>
    4.     <button class="c">结束动画</button>
    5.     <div></div>
    6. </body>
    7. <style>
    8.     *{
    9.         margin: 0;
    10.         padding: 0;
    11.     }
    12.     div{
    13.        width: 500px;
    14.        height: 500px;
    15.        background: skyblue; 
    16.     }
    17. </style>
    18. <script>
    19.     //结束动画
    20.     //需要用到运动结束函数stop()
    21.     //当任何一个元素执行了stop方法以后，会立即结束当前的所有运动，目前运动到什么位置就停在什么位置
    22.  
    23.  
    24.     $(".a").click(function(){
    25.         //利用结束动画书写动画函数
    26.         //每一次触发的时候，就会把之前的动画停止下来，只执行本次最新的动画
    27.          $("div").stop().toggle(2000)
    28.     })
    29.     $(".b").click(function(){
    30.         $("div").stop()
    31.     })
    32.     
    33.     //finish()
    34.     //任何一个元素执行了finally方法后会立即结束当前的所有运动，直接去到动画的结束位置
    35.     $(".c").click(function(){
    36.         $("div").finish()
    37.     })
    38. </script>

    jquery的ajax请求

    1. <script>
    2.     //jquery的ajax请求不是操作dom不需要依赖选择器去获取元素，他的使用是直接jquery或者$变量来使用
    3.     //语法：$.ajax({本次发送ajax的配置项})
    4.     //配置项
    5.     //1.url：必填，表示请求地址
    6.     //2.method：选填，默认是get，表示请求方式
    7.     //3.data：选填，默认是 "",表示携带给后端的参数
    8.     //4.async：选填，默认是true，表示是否异步
    9.     //5.success：选填，请求成功的回调函数
    10.     //6.error:选填，请求失败的回调函数
    11.     $.ajax({
    12.         url:"http://localhost:8888/test/first",
    13.         method:"post",
    14.         data:{name:"前端",age:18},
    15.         async:true,
    16.         success:function(res){console.log(res);},//res就是后端响应的结果
    17.     })
    18. </script>

  • 相关阅读:
    nodemailer学习
    UNIX网络套接字相关总结
    关于HTML5画布canvas的功能
    JAVA代码审计-XSS漏洞分析
    【华为OD机试真题 JAVA】叠积木
    招投标系统软件源码,招投标全流程在线化管理
    线下门店如何根据员工排班情况给客户预约
    Java 注解
    pandas导入到数据库
    【GEE笔记11】数值Number（常见指令方法4）
  • 原文地址：https://blog.csdn.net/m0_60027772/article/details/125505176