jquery

最新推荐文章于 2024-09-14 18:52:56 发布

Drizzlejj

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量124

点赞数

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/Drizzlejj/article/details/125084687

版权

jQuery ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./jqury.js"></script>
    <script>
        /*
        jQuery 的 ajax 请求
        注意：
            =>因为发送ajax请求，不是操作DOM
            =>不需要依赖选择器去获取到元素
            =>他的使用，是直接依赖jQuery或者$变量来使用
            ->语法：$.ajax（{本次发送 ajax的配置项}）
        配置项：
            1.url：必填，表示请求地址
            2.method：选填，默认是GET，表示请求方式
            3.data：选填，默认是''表示携带给后端的参数
            4.async：选填，默认是true，表示是否异步
            5.success：选填，表示请求成功的回调函数
            6.error：选填，表示请求失败的回调函数
        */
       $.ajax({
           url:'https://www.showdoc.cc/server/api/user/login',
           method:'Get',
           data:{name:'jack',age:18},
           success:function(res){
               // res 表示接受后端返回的结果
               console.log(res)
           }
       })
    </script>
</body>
</html>

jQuery 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        div > p{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        我是一个 div 标签
        <p>我是 div  内部的 p 标签</p>
    </div>
    <script src="./jqury.js"></script>
    <script>
        // 1.on() 方法绑定事件
        // 元素集合.on('绑定事件',事件处理函数)
        // $('div').on('click', function(){console.log('我是 div 标签')})

        // 委托绑定事件
        // 元素集合.on('事件类型', 选择器, 事件处理函数)
        /*
        把事件绑定给div元素，当你在div内的p元素触发事件的时候，执行事件处理函数
        事件委托，把p元素的事件委托给了div元素来绑定
        */
        // $('div').on('mousemove', 'p', function(){console.log('我是事件委托形式的事件')})

        // 批量绑定事件
        // 元素集合.on({事件类型1：处理函数，事件类型2：处理函数})
        // 注意： 不能进行事件委托了
        // $('div').on({
        //     dblclick:function(){console.log('批发的第一个')},
        //     mouseover:function(){console.log('批发第二个')}
        // })

        // 2.one()

        // 用来绑定事件，和 on()方法绑定事件的方式是一样的。
        // 区别：one 方法绑定的事件只能执行一次
        // $('div').one('mouseout',function(){console.log('one 方法绑定的事件')})
        // 事件委托
        // $('div').one('click','p',function(){console.log('p 单点击绑定在 div 区域')})
        // 批量绑定事件
        $('div').one({
            mouseout:function(){console.log('批发的第一个')},
            mouseover:function(){console.log('批发第二个')}
        })

        // 3. hover()
        // jQuery 里面一个特殊的事件
        // 语法： 元素集合.hover(移入时触发的函数，移除时触发的函数)
        //          当你只传递一个函数的时候，会在移入移出都触发
        $('div').hover(
            function(){console.log('函数1')},
            function(){console.log('函数2')}
        )

        // 4. 常用事件函数
        
    </script>
</body>
</html>

jQuery 操作类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .old{font-size: 12px; color: red;}
        .add{font-size: 36px; color: blue;}
        .change{font-weight: bold; color: yellow;}
    </style>
</head>
<body>
    <button id="three">删除</button>
    <button id="two">添加</button>
    <button id="one">切换</button>
    <div class="old previous">看我的变化</div>
    <script src="./jqury.js"></script>
    <script>
        /*
        addClass()
        元素结合.addClass('需要添加的类名')
        $('div').addClass('add')
        */
        var btn2 = document.querySelector('#two')
        btn2.onclick = function(){$('div').addClass('add')}
       /*
       removeClass()
       元素结合.addClass('需要删除的类名')
       $('div').removeClass('old')}
       */
       var btn3 = document.querySelector('#three')
       btn3.onclick = function(){ $('div').removeClass('old')}
      /*
      toggleClass()
      元素结合.addClass('需要切换的类名')
      如果本身有这个类名，那么就是删除，如果本身没有那么就是添加这个类名
      $('div').toggleClass('change')
      */
     var btn = document.querySelector('#one')
     console.log(btn)
     console.log($('#one'))
    btn.onclick = function(){$('div').toggleClass('change')}
        
    </script>
</body>
</html>

jQuery 操作元素尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{width: 300px;height: 300px;
            border: 20px solid black;
            margin: 20px;
            padding: 20px;
            background-color: skyblue;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="./jqury.js"></script>
    <script>
        /*
        width()
        innerWidth()
        outerWidth()
        获取元素尺寸
        注意：
        1.不管该元素是否隐藏，都能获取到该元素的值
        2.不管盒子模型是什么状态，拿到的尺寸区域不变

        */

        /*
        height()
        innerHeight()
        outerHeight()
        */
       console.log($('div').width())
       console.log($('div').height())
       console.log('------------------------------')
       console.log($('div').innerWidth())
       console.log($('div').innerHeight())
       console.log('------------------------------')
       console.log($('div').outerWidth())
       console.log($('div').outerHeight())
       console.log('------------------------------')
       console.log($('div').outerWidth(true))
       console.log($('div').outerHeight(true))
    </script>
</body>
</html>

jQuery 操作元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" hello ="world">我是一个 div 标签</div>
    <script src="./jqury.js"></script>
    <script>
        /*
        1. attr()
            =>可以进行设置和获取元素的属性
            =>注意：一般用于操作元素的自定义属性
            =>注意：attr操作的所有属性都会直接出现在元素的标签身上
        =>获取：
            ->语法：元素.attr（你要获取的属性名）
            ->返回值：该属性名对应的属性值
        =>设置：
            ->语法：元素.attr（属性名，属性值）
        */
       // 获取元素属性值
       console.log($('div').attr('id'))
       console.log($('div').attr('hello'))
       // 设置元素属性值
       $('div').attr('id','container')
       $('div').attr('a',100)
        // 2. removeAttr()
        $('div').removeAttr('a')

        /*
       1. prop()
        +可以获取和设置元素的属性
        +注意：
            =>当prop设置元素的原生属性，会直接响应在元素标签身上
            =>当prop设置元素自定义属性，不会直接响应在元素标签身上，会响应在元素对象身上
        注意：prop方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性
            +prop(）设置
        =>语法：元素集合，prop（属性名，属性值）
            +prop（）获取
        =>语法：元素集合·prop（你要获取的属性名）
            =>返回值：该属性对应的值
        */
       $('div').prop('id', 'contain')
       $('div').prop('b',100)
        console.log($('div'))

        console.log($('div').prop('id'))
        console.log($('div').prop('b'))
        console.log($('div').prop('hello'))  // 不能获取元素标签身上的自定义属性

        /*
       removeProp()
        用来删除元素属性的方法
        注意：
            =>不能删除原生属性
            =>只能删除由prop方法设置的自定义属性
        语法：元素合.removeProp（你要删除的属性名）
        */
    </script>
</body>
</html>

jQuery 操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{height: 200px;background-color: yellow;}
    </style>
</head>
<body>
    <div style="width: 100px;"></div>
    <script src="./jqury.js"></script>
    <script>
        // 获取样式，即可获取行内样式，也可获取非行内样式
        console.log($('div').css('height'))
        console.log($('div').css('width'))
        // 设置样式
        $('div').css('width',200)
        $('div').css('background-color', 'red')
        // 批量设置 样式
        $('div').css({
            width:100,
            height:'100px',
            'background-color': 'purple'
        })
    </script>
</body>
</html>

jQuery 获取元素偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            margin: 30px;
            overflow: hidden;
            background-color: red;
        }
        p{
            width: 200px;
            height: 200px;
            margin: 20px;
            overflow: hidden;
            background-color: blue;

            position: relative;
        }
        span{
            display: block;
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            right: 25px;
            bottom: 22px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span></span>
        </p>
    </div>
    <script src="./jqury.js"></script>
    <script>
        // 获取元素相对于页面左上角的坐标位置,返回值是一个对象数据类型，{top:yyy,left:xxx}
        // offset()
        console.log('div : ', $('div').offset())
        console.log('p : ', $('p').offset())
        // 获取元素的定位位置
        // position()
        console.log($('span').position())
    </script>
</body>
</html>

jquery 基本动画函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: purple;
            position: absolute;
        }
    </style>
</head>
<body>
    <button>show</button>
    <button>hide</button>
    <button>toggle</button>

    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>

    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>

    <button>综合动画</button>

    <button>stop()</button>
    <button>finsh()</button>
    <button>完成书写动画</button>

    <div></div>

    <script src="./jqury.js"></script>
    <script>
        /*
        基本动画
        1.show()显示

        2.hide（）隐藏

        3.toggle()切换
            =>本身如果是显示的，就隐藏
            =）本身如果是隐藏的，就显示

        对于以上三个运动函数，有共同的参数
            =>第一个表示运动时间
            =>第二个表示运动曲线
            =>第三个表示运动结束的回调函数
        */
       $('button:nth-child(1)').click(function(){
           $('div').show(1000,'linear',function(){console.log('show结束了')})
       })

       $('button:nth-child(2)').click(function(){
           $('div').hide(1000,'linear',function(){console.log('hide结束了')})
       })

       $('button:nth-child(3)').click(function(){
           $('div').toggle(1000,'linear',function(){console.log('toggle结束了')})
       })

       /*
       折叠动画
        1 .slideDown()
        2. slideUp()
        3. slideToggle()
        */
       $('button:nth-child(4)').dblclick(function(){
           $('div').slideDown(1000,'linear',function(){console.log('slideDown 结束了')})
       })

       $('button:nth-child(5)').click(function(){
           $('div').slideUp(1000,'linear',function(){console.log('slideUp 结束了')})
       })

       $('button:nth-child(6)').click(function(){
           $('div').slideToggle(1000,'linear',function(){console.log('slideToggle 结束了')})
       })

       /*
        1. fadeIn()
        2. fadeOut()
        3. fadeToggle()
        4. fadeTo()
            fadeTo（运动时间，指定的透明度，运动曲线，运动结束的回调函数）

        */
        $('button:nth-child(7)').click(function(){
           $('div').fadeIn(1000,'linear',function(){console.log('fadeIn 结束了')})
       })

       $('button:nth-child(8)').click(function(){
           $('div').fadeOut(1000,'linear',function(){console.log('fadeOut 结束了')})
       })

       $('button:nth-child(9)').click(function(){
           $('div').fadeToggle(1000,'linear',function(){console.log('fadeToggle 结束了')})
       })

       $('button:nth-child(10)').click(function(){
           $('div').fadeTo(1000,.5,'linear',function(){console.log('fadeTo 结束了')})
       })
       
       /*
       综合动画
        animate()
            =>第一个参数：要运动的样式，以一个对象数据类型传递
            =>第二个参数：运动时间
            =>第三个参数：运动曲线
            =>第四个参数：运动结束的回调函数
        注意：
            =>关于颜色相关的样式是不能运动的
            =>关于transform相关的样式是不能运动的
       */
      $('button:nth-child(11)').click(function(){
          $('div').animate({
              width:500,
              height:500,
              //'background-color':'pink'
              left:300,
              top:200,
              'border-radius':'50%'
          },1000,'linear',function(){console.log('运动结束了')})
      })

      /*
      stop()
        $('div').stop()
        =>当任何一个元素，执行了stop方法以后
        =>会立即结束当前的所有运动，目前运动到什么位置，就停留在什么位置
        =>一般对于结束动画的时候，都是在运动开始之前
      finsh()
        $('div').finish()
        =>放任何一个元素，执行了finish方法以后
        =>会立即结束当前的所有运动，直接去到动画的结束位置

      */
     $('button:nth-child(12)').click(function(){
         // 利用结束动画书写动画函数，每一次触发都会把之前的动画停止下来，只执行本次最新的动画
         $('div').stop().toggle(1000)
     })

     $('button:nth-child(13)').click(function(){
         $('div').finish()
        })

     $('button:nth-child(14)').click(function(){
         // 利用完成动画书写的动画函数，每一次触发的时候，都会把之前的公话瞬间完成，只执行本次最新的动画。
         $('div').finish().animate({
              width:500,height:500,left:300,top:200,'border-radius':'50%'},1000,'linear',function(){console.log('运动结束了')
            })
        })
    </script>
</body>
</html>

jQuery 事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是 div 标签</div>
    <script src="./jqury.js"></script>
    <script>
        /*
        事件的解绑和触发
        */
       // 准备事件处理函数
       function handlerA(){console.log('我是 handlerA 事件处理函数')}
       function handlerB(){console.log('我是 handlerB 事件处理函数')}
       function handlerC(){console.log('我是 handlerC 事件处理函数')}
       // 给 div 元素绑定事件
       $('div')
        .click(handlerA)
        .click(handlerB)
        .click(handlerC)
       
        // off()

        // 全部解绑
        // 1-1.解绑全部事件处理函数
        // 语法：元素集合。off（事件类型）
        // 会把 div的click 事件对应的所有事件处理函数全部移除
        // $('div').off('click')

        // 解除指定
        // 1-2.解绑指定的事件处理函数
        // 语法：元数集合.off（事件类型，要解绑的事件处理函数）
        // 会把 div 的click 事件对应的 handlerB 事件处埋函数移除
        $('div').off('click',handlerB)

        // 2. trigger()事件触发
        // 使用代码的方式，来触发事件
        // 语法：元素集合.trigger(事件类型)
        setInterval(function(){
            // 表示每 1s 触发一次 div 的 click 事件
            $('div').trigger('click')
        }, 1000)

    </script>
</body>
</html>

jQuery 序列化表单值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./jqury.js"></script>
    
    <script>
        /*
        serialize() 序列化表单值
        */
        $(document).ready(function(){
            $("button").click(function(){
                $("div").text($("form").serialize());
            });
        });
        </script>
        </head>
        <body>
        
        <form action="">
        第一个名称: <input type="text" name="FirstName" value="Mickey" /><br>
        最后一个名称: <input type="text" name="LastName" value="Mouse" /><br>
        </form>
        <button>序列化表单值</button>
        <div></div>
</body>
</html>

jquery 操作文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        hello
        <p>
            你好，星期六
        </p>
        Saturday
    </div>
    <section>你好，星期无</section>

    <input id="one" type="text" value="hello,world">

    <input id="two" class="inp" type="text" >
    <article id="result"></article>

    <script src="./jqury.js"></script>
    <script>
        /*
        操作文本内容
        */
       // 1. html() 等价于 innerHTML
       // html() 获取内容
        console.log($('div').html())
        // 1-1. 设置内容
        $('div').html('我是后来设置的内容')
        // 可以识别并解析 html 结构字符串
        $('section').html('<h1>您好，礼拜六</h1>')

        // 2. text() 等价于 innerText
        // 获取内容
        console.log($('div').text())
        // 设置内容
        // 不可以识别并解析 html 结构字符串
        $('section').text('这是更换的内容')

        // 3. val() 等价于 value()
        console.log($('#one').val())
        // 设置
        $('#one').val('我是后来设置的内容')

        // 实时获取输入
        $(function(){
            $('.inp').on('input',function(){
            $('#result').text($(this).val())
        })
        })
    </script>
</body>
</html>

jqury选择筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入 jqury -->
    <script src="./jqury.js"></script>
    <script>
        /*
        DOM操作进行封装
        获取DOM节点、获取节点尺寸、节点动画操作、操作节点文本、获取节点偏移量、ajax封装、操作节点样式\操作节点事件\操作节点类名\操作节点属性
        */
        console.log($)
        console.log(jQuery)
    </script>
    <div>jQuery选择器
        <ul>
            <li>1</li>
            <li class="a">2</li>
            <li>3</li>
            <li class="b">4</li>
            <li>5
                <i>子两级</i>
            </li>
            <i>子一级</i>
            <span>我是 ul 内的一个 span 标签</span>
            <li class="a">6</li>
            <li>7
                <p>
                    <i>子三级</i>
                </p>
            </li>
            <li id="box">8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <script>
        // 不管使用任何选择器，获取到的元素都是一个元素的集合
        // 选择类名
        console.log($('.a'))
        // 选择标签名
        console.log($('li'))
        // id 选择
        console.log($('#box'))
        // 结构选择
        console.log($('li:nth-child(odd)'))
        console.log($('li:nth-child(even'))

        // 索引号为奇数
        console.log($('li:odd'))
        // 索引号为偶数
        console.log($('li:even'))

        // 筛选器
        // first()
        console.log($('li').first())
        console.log($('li:first'))
        // last()
        console.log($('li').last())
        // eq(索引)
        console.log($('li').eq(1))
        // next()
        console.log($('span').next())
        console.log($('span').nextAll())
        // prev()
        console.log($('span').prev())
        console.log($('span').prevAll())
        // parent()
        console.log($('span').parent())
        // parents() 获取到的是该元素所有父元素结构，逐层获取，直到html 标签为止
        console.log($('span').parents())
        // siblings() 拿到该元素的所有兄弟元素
        console.log($('span').siblings())
        // find() 找到该元素的所有后代元素中，满足选择器需求的元素
        console.log($('ul').find('i'))

    </script>
</body>
</html>