jquery基础知识

最新推荐文章于 2023-05-31 08:33:36 发布
最新推荐文章于 2023-05-31 08:33:36 发布
阅读量461 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43209768/article/details/103447218
版权

本篇文章来自于李南江老师的视频总结

jquery基础知识

1. jquery入口函数的写法

 <script>
    // 第一种写法
    // $(document).ready(function(){
    //   alert('helo fisher')
    // })

    // 第二种写法
    // jQuery(document).ready(function(){
    //   alert('helo fisher')
    // })

    //第三种写法(推荐写这个)
    $(function(){
      alert('helo fisher')
    })

    // 第四种写法
    // jQuery(function(){
    //   alert('helo fisher')
    // })
    </script>

2. jquery的冲突问题

 <script>
      //1. 释放$的使用权（释放操作必须在编写其它jquery代码之前编写，释放之后就不能用$了）
    //   jQuery.noConflict();
    //   jQuery(function(){
    //       alert('helo')
    //   })

      // 2.自定义一个访问符号
      var fp=jQuery.noConflict();
      fp(function(){
          alert('fengping')
      })
    </script>

3.jquery的核心函数

<script>
        //  $();就是jQuery的核心函数
        // 1、接收一个函数
        $(function(){
          alert('hello')
        // 2.接收一个字符串
        // 2.1接受一个字符串选择器
        // 返回一个jQuery对象，对象中保存了找到的dom元素
        var $box1 = $('.box1')
        var $box2 = $('#box2')
        console.log($box1)
        console.log($box2)
        // 2.2接受一个代码片段
         // 返回一个jQuery对象，对象中保存了创建的dom元素
        var $p = $('<p>我是段落p</p>')
        console.log($p)
        $box1.append($p)
        // 2.3接收一个DOM元素
        // 会被包装成一个jQuery对象返回给我们
        var span=document.getElementsByTagName('span')
        console.log(span)
        var $span=$(span)
        console.log($span)
        })

    </script>

4. jquery对象

 <script>
        $(function(){
            var arr = $('div')
            console.log(arr)
            // jQuery对象其实是一个伪数组（有0到length-1的属性，并且有length属性）
        })
    </script>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
  </body>

5.静态方法和实例方法

 <script>
    //   1.定义一个类
    function AClass(){

    }
      
    // 2.给这个类添加一个静态方法
    // 直接添加给类的就是静态方法
    AClass.staticMethod = function(){
        alert('staticMethod')
    }
    // 静态方法通过类名调用
    AClass.staticMethod()

    // 3.给这个类添加一个实例方法
    AClass.prototype.instanceMethod=function(){
        alert('instanceMethod')
    }
    // 实例方法通过类的实例调用
    // 创建一个实例（创建一个对象）
    var a = new AClass();
    // 通过实例调用方法
    a.instanceMethod()
    </script>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
  </body>

6.jquery的each方法

  <script>
        var arr=[1,2,3,4,5]
        var obj = {
            0:1,
            1:2,
            2:3,
            3:4,
            4:5,
            length:5
        }
        // 1.原生的each方法只能遍历数组，不能遍历伪数组
        // arr.forEach((value,index)=>{
        //     console.log(index+':'+value)
        // })
        // obj.forEach((value,index)=>{//报错
        //     console.log(index+':'+value)
        // })
        // 利用jquery的each方法遍历数组和伪数组(第一个参数为索引，第二个参数为遍历到的值)
        $.each(arr,function(index,value){
            console.log(index+':'+value)
        })
        $.each(obj,function(index,value){
            console.log(index+':'+value)
        })
    </script>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
  </body>

7.jquery的map方法

 <script>
        var arr=[1,2,3,4,5]
        var obj = {
            0:1,
            1:2,
            2:3,
            3:4,
            4:5,
            length:5
        }
        // 1.原生的map方法只能遍历数组，不能遍历伪数组
        // arr.map((value,index,array)=>{
        //     console.log(index+':'+value+'——'+array)
        // })
        // obj.map((value,index,array)=>{//报错
        //     console.log(index+':'+value+'——'+array)
        // })

        // 2.利用jquery的map方法遍历数组和伪数组(第一个参数为索引，第二个参数为遍历到的值)
        // $.map(arr,function(index,value){
        //     console.log(index+':'+value)
        // })
        // $.map(obj,function(index,value){
        //     console.log(index+':'+value)
        // })

        // 3.jquery的each静态方法和map静态方法的区别
        // each静态方法默认的返回值就是：遍历谁就返回谁
        // map静态方法默认的返回值是一个空数组

        // each静态方法不支持在回调函数中对遍历的数组进行处理
        // map静态方法支持在回调函数中对遍历的数组进行处理
        var res1 = $.map(obj,function(index,value){
            return value+index;
            // console.log(index+':'+value)
        })
        var res2 = $.each(obj,function(index,value){
            return value+index;
            // console.log(index+':'+value)
        })
        console.log(res1)
        console.log(res2)
        
    </script>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
  </body>

8.jquery的其它静态方法

 <script>
      // 1.$trim()----去除字符串两端的空格
      //   var str = "   hello   ";
      //   console.log("---" + str + "---");
      //   var res = $.trim(str);
      //   console.log("---" + res + "---");

      // 2.$.inWindow()----判断传入的对象是否是window对象(返回值是布尔值)
      var w = window;
      var res = $.isWindow(w);
      console.log(res);

      //   3.$.isArray()----判断传入的对象是否是真数组(返回值是布尔值)
      var arr = [1, 3, 5, 6];
      var res = $.isArray(arr);
      console.log(res);

      //   3.$.isFunction()----判断传入的对象是否是函数(返回值是布尔值)
      var fn = function(){};
      var res = $.isFunction(fn);
      console.log(res);
    </script>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
  </body>

9.jquery的holdReady方法

 <script>
      // $.holdReady(true)----暂停ready执行
      $.holdReady(true);
      $(function() {
        alert("ready");
      });
    </script>
  </head>
  <body>
    <button>恢复ready事件</button>
    <script>
      var btn = document.getElementsByTagName("button")[0];
      btn.onclick = function() {
        $.holdReady(false);
        // alert('hello')
      };
    </script>
  </body>

10.jquery的内容选择器

 <style>
        div {
            width: 50px;
            height: 100px;
            background: red;
            margin-top: 15px;
        }
    </style>
    <script>
        $(function() {
            // var $div = $("div:empty");
            // console.log($div)

            // var arr = $("div:parent")
            // console.log(arr)

            // var $div = $("div:contains('我是div')")
            // console.log($div)

            var $div = $("div:has('span')")
            console.log($div)
        })
    </script>
</head>

<body>
    <!-- 1.:contains(text) （找到包含指定文本内容的指定元素）-->
    <!-- 2.:has(selector) （找到包含指定子元素的指定元素）-->
    <!-- 3.:parent （找到有文本内容或有子元素的指定元素） -->
    <!-- 4.:empty (找到既没有文本内容也没有子元素的指定元素)-->
    <div></div>
    <div>我是div</div>
    <div>他们我是div123</div>
    <div><span></span></div>
    <div>
        <p></p>
    </div>
</body>

11.属性和属性节点

 <script>
        $(function() {
            /*  1.什么是属性
                    对象身上保存的变量就是属性
                2.如何操作属性
                    对象.属性名称 = 值
                    对象.属性名称
                    对象['属性名称']=值
                    对象['属性名称']
                3.什么是属性节点
                    <span name="it666"></span>
                    在编写html代码时，在html标签中添加的属性就是属性节点
                    在浏览器中找到span这个dom元素之后，展开看到的都是属性，在attributes属性中保存的所有内容都是属性节点
                4.如何操作属性节点
                    Dom元素.setAttribute('属性名称', '值')
                    Dom元素.getAttribute('属性名称')
                5.属性和属性节点有什么区别
                任何对象都有属性，只有dom元素有属性节点*/
            function Person() {

            }
            var p = new Person()
            p.name = 'fanren'
            p['sex'] = 'male'
            console.log(p.name)
            console.log(p['sex'])

            var span = document.getElementsByTagName('span')[0]
            span.setAttribute('name', 'fanren')
            console.log(span.getAttribute('name'))
        })
    </script>
</head>

<body>
    <span name="it666"></span>
</body>

12.jquery的attr方法

<script>
        $(function() {
            /*
                1.attr(name|pro|key,val|fn)
                作用：获取或者设置属性节点的值
                如果传递一个参数，代表获取属性节点的值
                如果传递两个参数，代表设置属性节点的值
                注意：
                如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
                如果是设置：找到多少个元素就会设置多少个元素
                如果设置的属性节点不存在，那么系统会自动新增

                2.removeAttr(name)
                作用：删除属性节点
                注意点：
                会删除所有找到元素指定的属性节点
            */
            console.log($('span').attr('class')) //span1
            $('span').attr('class', 'box')
            $('span').attr('sex', 123)
            $('span').removeAttr('class name') //同时删除class和name节点
        })
    </script>
</head>

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="fanren"></span>
</body>

13.jquery的prop方法

 <script>
        $(function() {
            /*
                1.prop方法
                特点和attr方法一致
                2.removeProp方法
                特点和removeAttr方法一致
                注意点：
                prop方法不仅能够操作属性，他还能操作属性节点
                官方推荐在操作属性节点的时候，具有true和false两个属性的属性节点，如checked,selected,dsiabled使用prop,其他使用attr
            */
            $('span').eq(0).prop('demo', 'it666')
            $('span').eq(1).prop('demo', 'fanren')
            $('span').removeProp('demo')
                // console.log($('span').prop('class'))
            $('span').prop('class', 'box')
            console.log($('input').prop('checked')) //false
            console.log($('input').attr('checked')) //undefined
        })
    </script>
</head>

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="fanren"></span>
    <input type="checkbox" />
</body>

14.attr和prop方法练习

实现效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // 实现功能：在输入框输入地址，点击按钮切换图片
            // 1.给按钮添加点击事件
            var btn = document.getElementsByTagName('button')[0]
            btn.onclick = function() {
                // 2.获取输入框的内容
                var input = document.getElementsByTagName('input')[0]
                var text = input.value
                    // 3.修改img的src属性节点的值
                    // $('img').prop('src', text)
                $('img').attr('src', text) //推荐使用
            }

        })
    </script>
</head>

<body>
    <input type="text">
    <button>切换图片</button><br>
    <img src="img/move.png">
</body>

</html>

15.jquery操作类相关的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .class1 {
            width: 100px;
            height: 100px;
            background: red;
        }
        
        .class2 {
            border: 10px solid #000;
        }
    </style>
    <script>
        $(function() {
            /*
                1.addClass(class|fn)
                作用：添加一个类，如果要添加多个，多个类名之间用空格隔开
                1.removeClass([class|fn])
                作用：删除一个类，如果要添加多个，多个类名之间用空格隔开
                1.togleClass(class|[fn,sw])
            */
            var btns = document.getElementsByTagName('button');
            btns[0].onclick = function() {
                $('div').addClass('class1 class2')
            }
            btns[1].onclick = function() {
                $('div').removeClass('class2')
            }
            btns[2].onclick = function() {
                $('div').toggleClass('class1 class2')
            }
        })
    </script>
</head>

<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
</body>

</html>

16.jquery文本值相关的操作方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
                1.html
                和原生js中的innerHTML一模一样
                2.text
                和原生js中的innerTEXT一模一样
                3.val
            */
            var btns = document.getElementsByTagName('button');
            btns[0].onclick = function() {
                $('div').html('<p>我是p标签</p>')
            }
            btns[1].onclick = function() {
                console.log($('div').html())
            }
            btns[2].onclick = function() {
                $('div').text('<p>我是p标签</p>')
            }
            btns[3].onclick = function() {
                console.log($('div').text())

            }
            btns[4].onclick = function() {
                $('input').val('请输入内容')
            }
            btns[5].onclick = function() {
                console.log($('input').val())
            }
        })
    </script>
</head>

<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text" />
</body>

</html>

17.jquery操作样式的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // 1.逐个设置
            $('div').css('width', '100px')
            $('div').css('height', '100px')
            $('div').css('background', 'red')
                // 2.链式设置（推荐不超过三行，否则可读性比较差）
            $('div').css('width', '100px').css('height', '100px').css('background', 'blue')
                // 3.批量设置（推荐使用）
            $('div').css({
                    width: '100px',
                    height: '100px',
                    background: 'yellow'
                })
                // 4.获取css样式值
            console.log($('div').css('background'))
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

18.jquery操作位置和尺寸的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .father {
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid black;
            margin-left: 50px;
            position: relative;
            padding: 20px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            var btns = document.getElementsByTagName('button')
                // 监听获取
                // 获取元素的宽度
            btns[0].onclick = function() {
                    console.log($('.father').width()) //200px
                    console.log($('.father').innerWidth()) //240px(实际宽度+内边距)
                    console.log($('.father').outerWidth()) //340px(实际宽度+内边距+边框)
                        // offset----获取元素距离窗口的偏移位置
                    console.log($('.son').offset().left) //150
                        // position----获取元素距离定位元素的偏移位置
                    console.log($('.son').position().left) //50
                }
                // 监听设置获取元素的宽度
                // 设置元素的宽度
            btns[1].onclick = function() {
                $('.father').width('500px') //150
                $('.son').offset({
                        left: 10
                    })
                    // 注意osition方法只能获取不能设置
                $('.son').css({
                    left: '10px'
                })
            }
        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>

</html>

19.jquery的scrollTop方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .scroll {
            width: 200px;
            height: 400px;
            overflow: auto;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            var btns = document.getElementsByTagName('button')
            btns[0].onclick = function() {
                // 获取滚动的偏移位
                // console.log($('.scroll').scrollTop())
                // 获取网页滚动的偏移位
                // 为了保证浏览器的兼容，需要按照如下写法
                console.log($('body').scrollTop() + $('html').scrollTop())
            }
            btns[1].onclick = function() {
                // 设置滚动的偏移位
                // $('.scroll').scrollTop(100)
                // 设置网页滚动的偏移位
                // 为了保证浏览器的兼容，需要按照如下写法
                $('html,body').scrollTop(100)
            }
        })
    </script>
</head>

<body>
    <div class="scroll">我是div取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的
        HTML 内容会被获取。取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。</div>
    <button>获取</button>
    <button>设置</button>
    </br>
...
</body>

</html>

20.jquery的事件绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
                jquery中的两种绑定事件的方式
                1.eventName(fn)
                编码效率略高/部分事件Jquery没有实现，所以不能添加
                2.on(eventName,fn)
                编码效率略低/所有Js事件都可以添加
            */
            $('button').click(function() {
                alert('doubi')
            })
            $('button').click(function() {
                alert('dahaizi')
            })
            $('button').mouseleave(function() {
                alert('mouseleave')
            })
            $('button').mouseenter(function() {
                    alert('mouseenter')
                })
                // $('button').on('click', function() {
                //     alert('hahah')
                // })
        })
    </script>
</head>

<body>
    <button>我是button</button>
</body>

</html>

21.jquery的事件解绑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            function test1() {
                alert('我是点击事件One')
            }

            function test2() {
                alert('我是点击事件Two')
            }
            $('button').click(test1);
            $('button').click(test2);
            $('button').mouseenter(function() {
                alert('mouseenter')
            })
            $('button').mouseleave(function() {
                    alert('mouseleave')
                })
                // 不传参数，会移除所有的事件
                // $('button').off()
                // 传递一个参数，会移除所有指定类型的事件
            $('button').off('click')
                // 传递两个参数，会移除所有指定类型的指定事件
                // $('button').off('click', test2)
        })
    </script>
</head>

<body>
    <button>我是button按钮</button>
</body>

</html>

22.jquery的默认事件和冒泡行为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .father {
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
            1.什么是默认事件
            2.如何阻止默认事件
            3.什么是冒泡行为
            4.如何阻止冒泡行为
            */


            //阻止默认事件的第一种方法
            $('a').click(function() {
                    alert('我是a标签')
                    return false
                })
                //阻止默认事件的第二种方法
            $('a').click(function(event) {
                    alert('hahahh')
                    event.preventDefault()
                })
                //阻止冒泡行为的第一种方法
            $('.son').click(function() {
                    alert('son')
                    return false;
                })
                //阻止冒泡行为的第二种方法
            $('.son').click(function(event) {
                alert('son')
                event.stopPropagation()
            })

            $('.father').click(function() {
                alert('father')
            })

        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com">注册</a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

23.jquery的事件自动触发机制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .father {
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // $('.son').click(function() {
            //     alert('son')
            // })
            // $('.father').click(function() {
            //         alert('father')
            //     })
            // $('.father').trigger('click')
            // $('.father').triggerHandler('click')
            /*如果利用trigger自动触发事件，会触发事件冒泡，而triggerHandler则不会*/
            // $('.son').trigger('click')
            // $('.son').triggerHandler('click')

            // $("input[type='submit']").click(function() {
            //         alert('submit')
            //     })
            /*如果利用trigger自动触发事件，会触发默认行为，而triggerHandler则不会*/
            // $("input[type='submit']").trigger('click')
            // $("input[type='submit']").triggerHandler('click')

            // 注意：如果想用trigger触发a的事件，并且触发他的默认事件，可采取在a标签中加入span标签
            $('span').click(function() {
                alert('a')
            })
            $('span').trigger('click')
        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

24.jquery的自定义事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .father {
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*自定义事件必须满足两个条件
            1.事件必须是通过on绑定的
            2.事件必须通过trigger触发*/a
            $('.father').on('myclick', function() {
                alert('hahaha')
            })
            $('.father').trigger('myclick')
        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

26.jquery的事件命名空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .father {
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
            1.事件是通过on绑定的
            2.通过trigger触发*/
            $('.father').on('click.zs', function() {
                alert('Click1')
            })
            $('.father').on('click.ls', function() {
                alert('Click2')
            })
            $('.father').trigger('click.zs')
        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

26.jquery的事件委托

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*1.什么是事件委托
            请别人帮忙做事情，然后将做完的结果返回给我们*/
            $('button').click(function() {
                    $('ul').append('<li>我是新增的li</li>')
                })
                /*jquery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jquery会遍历所有找到的元素，给所有找到的元素添加事件*/
                // $('ul>li').click(function() {
                //     console.log($(this).html())
                // })
            $('ul').delegate('li', 'click', function() {
                console.log($(this).html())
            })
        })
    </script>
</head>

<body>
    <ul>
        <li>我是地第1个li</li>
        <li>我是地第2个li</li>
        <li>我是地第3个li</li>
    </ul>
    <button>新增一个button</button>
</body>

</html>

27.jquery的事件委托练习

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
        }
        
        .login {
            width: 348px;
            height: 340px;
            margin: 100px auto;
            position: absolute;
        }
        
        .login span {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('a').click(function() {
                var mask = $(`<div class="mask">
                <div class="login">
                    <img src="img/login.png" alt="">
                    <span></span>
                </div>
                </div>`);
                $('body').append(mask);
                $('body').delegate('.login>span', 'click', function() {
                    $(mask).remove();
                })
                return false;
            })
        })
    </script>
</head>

<body>
    <!-- <div class="mask">
        <div class="login">
            <img src="img/login.png" alt="">
            <span></span>
        </div>
    </div> -->
    <a href="http://www.baidu.com">点击登录</a>
    <div>时光荏苒，岁月无声。日子不紧不慢的如涓涓溪水静静的流去，而从身边流去的只有时光，沉淀下来的是与你一路相伴的幸福和快乐，温馨和安暖。于我，在这个凋零都感受到诗意横溢的秋，只想做一件事，拈一片绯红的枫叶，轻轻地刻上我的心语。对信仰，是我今生永不改变的主题！而后，幸福的寄往有你的那个城市。从此，在我心里，于我的生命里，轻握你许的安暖，静静地在岁月的彼岸，为你守候一世永恒！时光荏苒，岁月无声。日子不紧不慢的如涓涓溪水静静的流去，而从身边流去的只有时</div>
</body>

</html>

28.jquery的移入移出事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*mouseover和mouseout事件，子元素被移入移出也会触发父元素的事件*/
            // $('.father').mouseover(function() {
            //     console.log('father被移入了')
            // })
            // $('.father').mouseout(function() {
            //     console.log('father被移出了')
            // })

            /*mouseover和mouseout事件，子元素被移入移出不会触发父元素的事件*/
            // $('.father').mouseenter(function() {
            //     console.log('father被移入了')
            // })
            // $('.father').mouseleave(function() {
            //     console.log('father被移出了')
            // })

            /*hover同时监听移入移出事件*/
            // $('.father').hover(function() {
            //     console.log('father被移入了')
            // }, function() {
            //     console.log('father被移出了')
            // })
            $('.father').hover(function() {
                console.log('father被移入移出了')
            })
        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

29.电影排行榜

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        
        .box h1 {
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }
        
        ul>li {
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
        }
        
        ul>li:nth-child(-n+3) span {
            background: deeppink;
        }
        
        ul>li>span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 20px;
        }
        
        .content {
            margin-top: 5px;
            overflow: hidden;
            display: none;
        }
        
        .content img {
            width: 80px;
            height: 120px;
            float: left;
        }
        
        .content p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }
        
        .current .content {
            display: block;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            //1.监听Li的移入事件
            $('li').mouseenter(function() {
                    $(this).addClass('current')
                })
                // 2.监听Li的移出事件
            $('li').mouseleave(function() {
                $(this).removeClass('current')
            })
        })
    </script>
</head>

<body>
    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>电影名称
                <div class="content">
                    <img src="img/move1.png" alt="">
                    <p>　　2013年迪士尼《冰雪奇缘》续集。安娜、艾莎一伙人将深入神秘魔法森林，发现到艾伦戴尔王国长久以来深藏的秘密，一个有着风火水土元素的魔法国度，以及艾莎魔法来源的真相。</p>
                </div>
            </li>
            <li><span>2</span>电影名称</li>
            <li><span>3</span>电影名称</li>
            <li><span>4</span>电影名称</li>
            <li><span>5</span>电影名称</li>
            <li><span>6</span>电影名称</li>
        </ul>
    </div>
</body>

</html>

30.tab选项卡

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .nav {
            display: flex;
            justify-content: space-around;
        }
        
        .box {
            width: 270px;
            height: 435px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        
        .nav li {
            width: 135px;
            height: 50px;
            background: orange;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        
        .nav .current {
            background: #ccc;
        }
        
        .content li {
            list-style: none;
            display: none;
        }
        
        .content .show {
            display: block;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // // 1.监听选项卡的移入事件
            // $('.nav>li').mouseenter(function() {
            //     $(this).addClass('current')
            //     var index = $(this).index() //找到索引
            //     var li = $('.content>li').eq(index) //根据索引找到对应的图片
            //     li.addClass('show')
            // })

            // // 2.监听选项卡的移出事件
            // $('.nav>li').mouseleave(function() {
            //     $(this).removeClass('current')
            //     var index = $(this).index()
            //     var li = $('.content>li').eq(index)
            //     li.removeClass('show')
            // })

            // 推荐写法
            $('.nav>li').mouseenter(function() {
                $(this).addClass('current')
                $(this).siblings().removeClass('current')
                var index = $(this).index();
                var li = $('.content>li').eq(index);
                li.addClass('show')
                li.siblings().removeClass('show')
            })

        })
    </script>
</head>

<body>
    <div class="box">
        <ul class="nav">
            <li class="current">冰雪奇缘2</li>
            <li>海上钢琴师</li>
            <li>大约在冬季</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="img/move1.png"></li>
            <li><img src="img/move.png"></li>
            <li><img src="img/move2.png"></li>
        </ul>
    </div>
</body>

</html>

31.jquery的显示隐藏动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                $('div').show(1000, function() {
                    //动画执行完毕之后调用
                    alert('显示动画执行完毕')
                })
            })
            $('button').eq(1).click(function() {
                $('div').hide(1000, function() {
                    alert('隐藏动画执行完毕')
                })
            })
            $('button').eq(2).click(function() {
                $('div').toggle(1000, function() {
                    //动画执行完毕之后调用
                    alert('切换完毕')
                })
            })
        })
    </script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>

</html>

32.对联广告

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .left {
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }
        
        .right {
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
        
        img {
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // 1.监听网页滚动
            $(window).scroll(function() {
                // 1.1获取网页滚动的偏移位
                var offset = $('html,body').scrollTop();
                if (offset >= 300) {
                    $('img').show(1000)
                } else {
                    $('img').hide(1000)
                }
            })
        })
    </script>
</head>

<body>
    <img src="img/move1.png" class="left">
    <img src="img/move2.png" class="right">
    <br>
    <br>
    <br>
    <br>
...
</body>

</html>

33.jquery的展开和收起动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                $('div').slideDown(1000, function() {
                    alert('展开完毕')
                })
            })
            $('button').eq(1).click(function() {
                $('div').slideUp(1000, function() {
                    alert('收起完毕')
                })
            })
            $('button').eq(2).click(function() {
                $('div').slideToggle(1000, function() {
                    alert('切换完毕')
                })
            })
        })
    </script>
</head>

<body>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
</body>

<!-- </html> -->

34.折叠菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            list-style: none;
            width: 300px;
            margin: 100px auto;
        }
        
        .nav>li {
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;
            position: relative;
        }
        
        .nav>li:last-child {
            border-bottom: 1px solid #000;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        
        .nav>li:first-child {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }
        
        .nav>li>span {
            background: url("img/向右 箭头.png") no-repeat center center;
            display: inline-block;
            background-size: 100% 100%;
            width: 20px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        
        .sub {
            display: none;
        }
        
        .sub>li {
            list-style: none;
            background: pink;
            border-bottom: 1px solid white;
        }
        
        .sub>li:hover {
            background: palegoldenrod
        }
        
        .nav>.current>span {
            transform: rotate(90deg)
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('.nav>li').click(function() {
                var sub = $(this).children('.sub');
                sub.slideDown(1000);
                var otherSub = $(this).siblings().children('.sub');
                otherSub.slideUp(1000);
                $(this).addClass('current');
                $(this).siblings().removeClass('current');
            })
        })
    </script>
</head>
    
<body>
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
        <li>一级菜单<span></span></li>
    </ul>
</body>

</html>

36.下拉菜单

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            list-style: none;
            width: 300px;
            height: 50px;
            margin: 100px auto;
            background: palevioletred;
        }
        
        .nav>li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        .sub {
            list-style: none;
            background: burlywood;
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // 在jquery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后在执行动画。
            $('.nav>li').mouseenter(function() {
                $(this).children('.sub').stop().slideDown(1000)
            })
            $('.nav>li').mouseleave(function() {
                $(this).children('.sub').stop().slideUp(1000)
            })
        })
    </script>
</head>

<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单</li>
        <li>一级菜单</li>
    </ul>
</body>

</html>

38.jquery的淡入淡出动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            margin-top: 20px;
            width: 300px;
            height: 300px;
            background: crimson;
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                $('div').fadeIn(1000, function() {
                    alert('淡入完毕')
                })
            })
            $('button').eq(1).click(function() {
                $('div').fadeOut(1000, function() {
                    alert('淡出完毕')
                })
            })
            $('button').eq(2).click(function() {
                $('div').fadeToggle(1000, function() {})
            })
            $('button').eq(3).click(function() {
                $('div').fadeTo(1000, .5, function() {
                    alert('淡入到')
                })
            })
        })
    </script>
</head>

<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>

</html>

37.弹窗广告

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            display: none;
        }
        
        .ad>span {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: red;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('span').click(function() {
                $('.ad').remove()
            })
            $('.ad').stop().slideDown(1000).fadeOut(500).fadeIn(1000)

        })
    </script>
</head>

<body>
    <div class="ad">
        <img src="https://qiantu-img.tuguaishou.com/qiantu-api-img/2019-12-01/03f24ee538cf4040fefc3c8ca45fc17c.jpg">
        <span></span>
    </div>
</body>

</html>

38.jquery的自定义动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            margin-top: 10px;
        }
        
        .one {
            background: red;
        }
        
        .two {
            background: blue;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                    /*
                    1.第一个参数：接受一个对象，可以在对象中修改属性
                    2.第二个参数：指定动画时长
                    3.第三个参数:指定动画节奏，默认就是swing
                    4.第四个参数：动画执行完毕之后指定的回调
                    */
                    $('.one').animate({
                        marginLeft: 500
                    }, 5000, function() {
                        // console.log('自定义动画执行完毕')
                    })
                    $('.two').animate({
                        marginLeft: 500
                    }, 5000, 'linear', function() {
                        // console.log('自定义动画执行完毕')
                    })

                })
                // 累加属性
            $('button').eq(1).click(function() {
                    $('.one').animate({
                        width: "+=100"
                    }, 1000, function() {
                        console.log('自定义累加动画执行完毕')
                    })
                })
                // 关键字
            $('button').eq(2).click(function() {
                $('.one').animate({
                    width: "toggle"
                }, 1000, function() {
                    console.log('自定义累加动画执行完毕')
                })
            })
        })
    </script>
</head>

<body>
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

39.jquery的stop和delay方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .one {
            width: 100px;
            height: 100px;
            background: rebeccapurple;
        }
        
        .two {
            width: 500px;
            height: 10px;
            background: burlywood
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                // 宽高同时变化
                // $('.one').animate({
                //     width: 500,
                //     height: 500
                // }, 1000)

                // 先执行宽度动画，再执行高度动画,delay是用于延迟动画执行
                // $('.one').animate({
                //     width: 500
                // }, 1000).delay(1000).animate({
                //     height: 500
                // }, 1000)

                $('.one').animate({
                    width: 500
                }, 1000).animate({
                    height: 500
                }, 1000).animate({
                    width: 100
                }, 1000).animate({
                    height: 100
                }, 1000)

                $('button').eq(1).click(function() {
                    // 默认均为false,第一个参数是否停止后续动画；第二个参数是否继续当前动画

                    //立即停止当前动画，继续执行后续动画
                    // $('div').stop()
                    // $('div').stop(false)
                    // $('div').stop(false, false)

                    // 立即停止当前和后续所有的动画
                    // $('div').stop(true)
                    // $('div').stop(true, false)

                    // 立即完成当前的，继续执行后续动画
                    // $('div').stop(false, true)

                    // 立即完成当前的，并且停止后续所有的动画
                    $('div').stop(true, true)
                })
            })
        })
    </script>
</head>

<body>
    <button>开始动画</button>
    <button>结束动画</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

40.jquery的图标特效

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            width: 400px;
            height: 250px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        
        ul>li {
            width: 100px;
            height: 50px;
            text-align: center;
            overflow: hidden;
        }
        
        ul>li>span {
            display: inline-block;
            width: 24px;
            height: 24px;
            position: relative;
            background: url("img/move.png") no-repeat 0 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            $('li').each(function(index) {
                    // 1.生成新的图片位置
                    var url = "url('img/move.png') no-repeat 0 " + (index * -24) + 'px';
                    // 2.设置新的图片位置
                    $(this).children('span').css('background', url)
                })
                // 监听li的移入事件
            $('li').mouseenter(function() {
                // 将图标往上移动
                $(this).children('span').animate({
                    top: -50
                }, 1000, function() {
                    // 将图标往下移动
                    $(this).css('top', '50px')
                        // 将图片复位
                    $(this).animate({
                        top: 0
                    }, 1000)
                })
            })
        })
    </script>
</head>

<body>
    <ul>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
    </ul>
</body>

</html>

41.jquery的无线循环滚动

效果示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 600px;
            height: 161px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        
        div>ul {
            list-style: none;
            width: 1800px;
            height: 161px;
            background: #000;
        }
        
        ul>li {
            width: 300px;
            float: left;
            height: 161px;
        }
        
        .red {
            background: red;
        }
        
        .orange {
            background: orange;
        }
        
        ul>li:nth-child(3) {
            background: yellow;
        }
        
        ul>li:nth-child(4) {
            background: green;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            var offset = 0;
            var timer;

            function autoplay() {
                timer = setInterval(function() {
                    offset -= 10;
                    if (offset <= -1200) {
                        offset = 0;
                    }
                    $('ul').css('marginLeft', offset)

                }, 50)
            }
            autoplay()
                // 监听li的移入移出事件
            $('li').hover(function() {
                clearInterval(timer)
                    // 给非当前选中添加蒙版
                $(this).siblings().fadeTo(100, .5)
                    //  去除当前选中的蒙版
                $(this).fadeTo(100, 1)
            }, function() {
                autoplay()
                    // 去除所有蒙版
                $('li').fadeTo(100, 1)

            })

        })
    </script>
</head>

<body>
    <div>
        <ul>
            <li class="red"></li>
            <li class="orange"></li>
            <li></li>
            <li></li>
            <li class="red"></li>
            <li class="orange"></li>
        </ul>
    </div>
</body>

</html>

42.jquery添加节点的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
        内部插入
        append(content|fn)--会将元素添加到指定元素内部的最后
        appendTo(content)
        prepend(content|fn)--会将元素添加到指定元素内部的最前面
        prependTo(content)
        外部插入
        after(content|fn)--会将元素添加到指定元素外部的后面
        before(content|fn)
        insertAfter(content)--会将元素添加到指定元素外部的前面
        insertBefore(content)
                */
            $('button').click(function() {
                // 1.创建一个节点
                var li = $("<li>新增的li</li>");
                // 2.添加节点
                // 内部插入
                // $('ul').append(li)
                // $('ul').prepend(li)
                // li.appendTo('ul')
                // li.prependTo('ul')

                // 外部插入
                // $('ul').after(li)
                // $('ul').before(li)
                // li.insertAfter('ul')
                li.insertBefore('ul')
            })
        })
    </script>
</head>

<body>
    <button>添加节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
</body>

</html>

43.jquery删除节点的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
            删除
            remove([expr])--删除指定元素
            empty()--删除指定元素的内容和子元素，指定元素自身不会被删除
            detach([expr])
            */
            $('button').click(function() {
                // $('div').remove()
                // $('div').empty()
                $('li').remove('.item')
            })
        })
    </script>
</head>

<body>
    <button>删除节点</button>
    <ul>
        <li class="item">我是第1个li</li>
        <li>我是第2个li</li>
        <li class="item">我是第3个li</li>
        <li>我是第4个li</li>
        <li class="item">我是第5个li</li>
    </ul>
    <div>我是div
        <p>我是段落</p>
    </div>
</body>

</html>

44.jquery替换节点的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*
                替换
                replaceWith(content|fn)--替换所有匹配的元素为指定的元素
                replaceAll(selector)
            */
            $('button').click(function() {
                // 1.新建一个元素
                var h6 = $('<h6>我是标题6</h6>');
                // 2.替换元素
                // $('h1').replaceWith(h6)
                h6.replaceAll('h1')
            })
        })
    </script>
</head>

<body>
    <button>替换节点</button>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <p>我是段落</p>
</body>

</html>

45.jquery复制节点的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            /*复制
            clone([Even[,deepEven]])
            如果传入false就是浅复制，如果传入true就是深复制，浅复制只会复制元素，不会复制元素的事件，深复制会复制元素，而且还会
            复制元素的事件
            */
            $('button').eq(0).click(function() {
                // 1.浅复制 一个元素
                var li = $('li:first').clone(false);
                // 2.将复制的元素添加到Ul中
                $('ul').append(li)
            })
            $('button').eq(1).click(function() {
                // 1.深复制 一个元素
                var li = $('li:first').clone(true);
                // 2.将复制的元素添加到Ul中
                $('ul').append(li)
            })
            $('li').click(function() {
                alert($(this).html())
            })
        })
    </script>
</head>

<body>
    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
</body>

</html>

46.新浪微博实例

效果示例
在这里插入图片描述
目录结构
在这里插入图片描述
index.css文件

        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        body {
            background: url('../images/body_bg.jpg') no-repeat center 0;
        }
        
        .nav {
            width: 100%;
            height: 48px;
        }
        
        .nav img {
            width: 100%;
        }
        
        .content {
            width: 1000px;
            height: auto;
            overflow: hidden;
            background: #ebdbd4;
            margin: 200px auto 0 auto;
        }
        
        .content>.left {
            width: 150px;
            float: left;
        }
        
        .content>.right {
            width: 240px;
            float: right;
        }
        
        .content>.center {
            float: left;
            width: 600px;
            height: 168px;
            background: url("../images/comment.png") no-repeat 0 0;
            background-size: 600px 168px;
        }
        
        .center>.comment {
            width: 570px;
            height: 73px;
            margin-top: 45px;
            margin-left: 15px;
            resize: none;
            border: none;
            outline: none;
        }
        
        .center>.send {
            width: 82px;
            height: 30px;
            margin-top: 4px;
            margin-left: 506px;
            border: none;
            background: #fd8040;
            color: #fff;
            outline: none;
        }
        
        .content>.messageList {
            width: 600px;
            height: 600px;
            float: left;
            background: white;
        }
        
        .messageList>.info {
            padding: 10px 20px;
            border-bottom: 2px solid #ccc;
        }
        
        .info>.infoText {
            line-height: 25px;
            margin-bottom: 10px;
            text-indent: 2em;
        }
        
        .info>.infoOperation {
            width: 100%;
            overflow: hidden;
        }
        
        .infoOperation>.infoTime {
            float: left;
            font-size: 13px;
            color: #333;
        }
        
        .infoOperation>.infoHandle {
            float: right;
            font-size: 13px;
        }
        
        .infoHandle>a {
            text-decoration: none;
            color: #333;
            background: url('../images/icons.png') no-repeat 0 3px;
            padding-left: 25px;
            margin-left: 10px;
        }
        
        .infoHandle>a:nth-child(2) {
            background-position: 0 -16px;
        }
        
        .infoHandle>a:nth-child(3) {
            background-position: 0 -34px;
        }
        
        .page {
            width: 1000px;
            height: 40px;
            background: rosybrown;
            margin: 0 auto;
            text-align: right;
            padding: 10px;
            box-sizing: border-box;
        }
        
        .page>a {
            text-decoration: none;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 20px;
            color: #2b2b2b;
        }

index.js文件

$(function() {
    // 0.利用事件委托监听内容的时时输入
    $('body').delegate('.comment', 'propertychange input', function() {
            // 判断是否输入了内容
            if ($(this).val().length > 0) {
                // 让按钮可用
                $('.send').prop('disabled', false)
            } else {
                // 让按钮不可用
                $('.send').prop('disabled', true)
            }
        })
        // 1.监听发布按钮的点击
    $('.send').click(function() {
            // 拿到用户输入的内容
            var $text = $('.comment').val();
            // 根据内容创建节点
            var $weibo = createEle($text);
            // 插入微博
            $('.messageList').prepend($weibo);
        })
        // 2.监听顶点击
    $('body').delegate('.infoTop', 'click', function() {
            $(this).text(Number($(this).text()) + 1)
        })
        // 3.监听踩点击
    $('body').delegate('.infoDown', 'click', function() {
            $(this).text(Number($(this).text()) - 1)

        })
        // 4.监听删除点击
    $('body').delegate('.infoDel', 'click', function() {
            $(this).parents('.info').remove()
        })
        // 创建节点的方法
    function createEle(text) {
        var $weibo = $(`
        <div class="info">
        <p class="infoText">
        ${text}
        </p>
        <p class="infoOperation">
            <span class="infoTime">${formartDate()}</span>
            <span class="infoHandle">
                <a href="javascript:;" class="infoTop" >0</a>
                <a href="javascript:;" class="infoDown">1</a>
                <a href="javascript:;" class="infoDel">删除</a>
            </span>
        </p>
    </div>
        `)
        return $weibo;
    }
    // 生成时间的方法
    function formartDate() {
        var date = new Date();
        var arr = [date.getFullYear() + '-',
            date.getMonth() + 1 + '-',
            date.getDate() + ' ',
            date.getHours() + ':',
            date.getMinutes() + ':',
            date.getSeconds()
        ]
        return arr.join('')
    }
})

html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="nav">
        <img src="images/nav.png" alt="" />
    </div>
    <div class="content">
        <img src="images/left.png" class="left">
        <div class="center">
            <textarea class="comment"></textarea>
            <input type="button" value="发布" class="send" disabled>
        </div>
        <img src="images/right.png" class="right">
        <div class="messageList">
            <div class="info">
                <p class="infoText">
                    12月4日上午，2019年宪法宣传周，湖南主场活动“12·4国家宪法日暨法治湖南建设年度盛典”在长沙举行。2019年的12月4日是第六个国家宪法日，今年国家宪法日以“弘扬宪法精神，推进国家治理体系和治理能力现代化”为主题。为进一步扩大宪法的宣传， “宪法宣传周”期间，湖南设立7个分主题活动
                </p>
                <p class="infoOperation">
                    <span class="infoTime">2019-12-04 23:00:00</span>
                    <span class="infoHandle">
                        <a href="javascript:;">0</a>
                        <a href="javascript:;">1</a>
                        <a href="javascript:;">删除</a>
                    </span>
                </p>
            </div>
        </div>
    </div>
    <div class="page">
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
    </div>
</body>

</html>
bug的生产者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery基础知识小结
10-25
本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结，非常的详尽，推荐给有需要的小伙伴。
jQuery基础知识
qq_51781439的博客
09-11 1308
一、jQuery简介 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示： 除此之外，jQuery 还提供了大量的插件。 二、jQuery的语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法：...
jQuery基础知识汇总
z2431435的博客
08-25 1603
jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery基础知识总结
_陌默
10-31 9412
1、什么是JQuery？ 它是js的一个框架，它是开源的项目。对底层的js进行封装，我们通过js框架就可以快速的完成DOM 对元素的增删改查操作，并提供了动画功能。jquery对外提供api让开发者去开发jquery 插件（就是一个功能模块，用户只要做一些简单的配置就完成复杂的功能）。jquery目前 是比较流行的一个JQuery框架。（宗旨：写得少，做的多...
jQuery 基础知识
程序员小白的博客
01-24 694
jQuery 基础知识
Jquery基础知识
web2001chu的博客
08-10 1614
jquery引入方式 本地引入 <script scr='jquery,.js'></script> 远程引入 <script scr==“http:// ajax.microsoft.com/ajax/jquery/ jquery-1.4.min.js”> jquery选择器 基本选择器 ${"#id"} id选择器 ${".class"} ${“div”} ${"*"} ${“div,span”} 层次选择器 $(“E1 E2”) 选择E1下所有E2 $(
jQuery基础知识点汇总
heliuerya的博客
05-31 1444
class 选择器： 语法：$(".class值") 根据 class样式值 查找标签对象 class表示css中的样式，这是使用样式的名称定位dom对象。组合选择器： 语法：$("#id,.class,标签名") 是多个被选对象之间使用逗号分隔后形成的选择器，可以组合id，class，标签名等，举例：$("body" > "div");$("选择器").attr("username","张三") //设置数组中的所有dom对象的username属性值为"张三"。
jQuery 基础知识总结（超级详细）
学Java，找哪吒
06-22 9606
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。 我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。..
jQuery基础知识点
小菜鸟的博客
06-12 1806
jQuery是什么？？？？？jQuery是一种新的JavaScript库。jq是用js写 能用jq实现的 用js都能实现，js能实现的 jq有些不能实现---------------------------------------------------------------------------------------------------------------jQuery API的中文...
jQuery基础知识梳理
GL280599ZL的博客
12-11 1630
HTML 决定了⽹⻚的内容CSS 决定了标签的样式JavaScript 决定了⽹⻚的功能：对标签属性、样式的操作、DOM节点操作、ajax异步交互◦ 在使⽤JS完成对应功能时，需要程序员⾃⾏完成代码的编写，开发相对还是⽐较繁琐的。 jQuery就是⼀个JavaScript的框架，简化了JS的语法和操作，定义了HTML属性操作、样式操作、 DOM操作等相关函数，实现了对ajax异步请求封装。 jQuery就是⼀个提供了很多预定义函数的JS⽂件。
jquery基础知识总结
06-02
详细的jquery基础知识总结 jQuery
JQuery基础知识
03-31
**jQuery基础知识** jQuery是一款强大的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理和动画设计，使得网页交互变得更加简洁高效。以下是对jQuery基础知识的详细解释： ### 1. jQuery选择器 jQuery...
jquery基础知识第一讲之认识jquery
10-22
jquery基础知识第一讲之初次见面，对jquery有一个初步认识，为之后的学习打下基础，感兴趣的小伙伴们可以参考一下
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
jQuery基础教程：最新版详解
"jQuery基础教程-第四版，高清非影印版，由图灵社区会员吉舟专享。本书详细讲解jQuery1.10....通过学习这本书，读者不仅可以掌握jQuery的基础知识，还能了解到前端开发的高级技巧，提升开发效率，构建更优秀的Web应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值