25-Jquery使用

最新推荐文章于 2024-09-15 10:33:02 发布

weixin_51339105

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量54

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_51339105/article/details/124726268

版权

jquery 前端 javascript html css

前端学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.事件操作

<!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>HTML  事件</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
      <button id="btn">点击</button>
      <button id="btn1">测试</button>
      <button id="btn2">绑定</button>
      <button id="btn3">解绑</button>
      <button id="btn4">部分解绑</button>

      <hr>
      <div class="out">
          <div class="in">123123</div>
      </div>
    <script>
       $(function(){
        //    1.常用事件
           $('#btn').click(function(){    //点击事件 
               console.log('click')
           })
           $('#btn').dblclick(function(){    //双击事件
               console.log('dblclick')
           })
           $('#btn').mouseenter(function(){    //鼠标进入
               console.log('mouseenter')
           })
           $('#btn').mouseleave(function(){    //鼠标离开
               console.log('mouseleave')
           })

        //    2.事件的绑定与解绑  bind/on  unbind
        function click1(){
            console.log('click 1');
        }
        function click2(){
            console.log('click 2');
        }

        $('#btn2').click(function(){
            $('#btn1').bind('click',click1);
            $('#btn1').bind('click',click2);
        })
        $('#btn3').click(function(){
            $('#btn1').unbind('click');  //全部解绑
        })
        $('#btn4').click(function(){
            $('#btn1').unbind('click',click1);
        })



        // 3.阻止冒泡
        function outClick1(){
            console.log('out click 1');
        }
        function outClick2(){
            console.log('out click 2');
        }
        function inClick1(e){
            // e.stopPropagation();   //阻止向父元素继续冒泡
            e.stopImmediatePropagation();    //阻止向后继续冒泡

            console.log('in click 1');
        }
        function inClick2(){
            console.log('in click 2');
        }
        $('.out').on('click',outClick1);
        $('.out').on('click',outClick2);
        $('.in').on('click',inClick1);
        $('.in').on('click',inClick2);




       })
    </script>
</body>
</html>

2.动画操作

<!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>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<style>
    .div1{
        width: 500px;
        height: 500px;
        background-color: green;
    }
</style>
<body>
    <div class="div1"></div>

    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">显示与隐藏切换</button>
    <button id="btn4">滑入</button>
    <button id="btn5">滑出</button>
    <button id="btn6">滑入与滑出</button>
    <button id="btn7">淡入</button>
    <button id="btn8">淡出</button>
    <button id="btn9">淡入与淡出</button>

    <script>
        $(function(){
            // 参数：不传参数  没有动画
            // 一个参数  字符串：normal /fast/ slow
        //     显示与隐藏  show()  hide()
           $('#btn1').click(function(){
               $('.div1').show(2000,function(){
                   console.log('执行玩乐')
               })
           })
           $('#btn2').click(function(){
               $('.div1').hide('fast')
           })
           $('#btn3').click(function(){
               $('.div1').toggle()
           })
           $('#btn4').click(function(){
               $('.div1').slideDown()
           })
           $('#btn5').click(function(){
               $('.div1').slideUp()
           })
           $('#btn6').click(function(){
               $('.div1').slideToggle()
           })
           $('#btn7').click(function(){
               $('.div1').fadeIn()
           })
           $('#btn8').click(function(){
               $('.div1').fadeOut()
           })
           $('#btn9').click(function(){
               $('.div1').fadeTo(2000,0.5)
           })

        //    滑入与滑出  slideDown()  slideUp()
        //    淡入与淡出  fadeIn()   fadeOut()  fadeTo()

        })
    </script>
</body>
</html>

3.遍历操作

<!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>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<style>
    .r{
        border: 3px solid red;
    }
</style>
<body>
    
    <div>

         <h1 class="h1">h1</h1>
         <span class="span">span</span>
        <ul>
            <li class="li1">1</li>
            <li class="li2">2</li>
            <li  id='li' class="li3">3</li>
            <li class="li4">4</li>
            <li class="li5">5</li>
            <li class="li6"><span class="spanli">6</span></li>
        </ul>
    </div>
    <script>
       
       $(function(){
            // 1.遍历子孙节点  children()   find()
            // $('ul').children('.li1').addClass('r');    //查找符合某种选择器的孩子节点  参数选填
            // $('ul').find('span').addClass('r');     //查找符合某种选择器的孩子节点  参数必填
            
            
            // 2.遍历祖先节点  parent()  parents() parentUntil()
            // $('.spanli').parent().addClass('r');
            // $('.spanli').parents().addClass('r');
            // $('.spanli').parentsUntil('div').addClass('r');  //给一个查找的范围，直到找到DIV停止，不包括DIV


            // 3.遍历同级节点 siblings() next()  nextUntil() nextAll() prevUntil() 
            // $('.li1').siblings().addClass('r');
            // $('.li1').next().addClass('r');
            // $('.li1').nextAll().addClass('r');
            // $('.li1').nextUntil('.li5').addClass('r');

            // $('.li3').prev().addClass('r');
            // $('.li3').prevAll().addClass('r');
            // $('.li3').prevUntil('.li1').addClass('r');




            // 4.过滤  first()  last() eq() filter() not()
            // 对应到js  arr[0]  arr[length-1]  arr[index]  arr.filter()
            

            // 数组问题  jQuery 对象一直都是数组  内部的处理都会考虑到数据的形式，且是对数组做遍历之后对每一项执行操作
            const li = $('.li1');




       })


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

4.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>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>

    <input id="input">
    <button>提交</button>
    <hr>
     post结果：<span class="pres"></span>
     <hr>
     get结果：<span class="gres"></span>

    <script> 
         $(function(){
             $('button').click(function(){
                 $.get('http://127.0.0.1:8080',{value:$('input').val()},function(res){
                     $('.gres').html(res)
                 });
                 $.post('http://127.0.0.1:8081',$('input').val(),function(res){
                    $('.pres').html(res)
                 })
             })
         })

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