jQuery第4天知识点：jQuery节点操作、jQuery特殊属性操作、jQuery事件机制

最新推荐文章于 2021-06-20 14:29:46 发布

库库好困

最新推荐文章于 2021-06-20 14:29:46 发布

阅读量359

点赞数

分类专栏：四：jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_46597922/article/details/106674909

版权

四：jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一. jQuery节点操作

1. 创建节点

// 语法：
$(html字符串)  $('<p></p>')

注意点：引号的问题

$符号的功能：

1.来源：jQuery提供的
2.是个啥：是一个函数
3.能做啥：根据参数不同，作用就不同

参数：

1.参数是个函数，作用是入口函数 $(function(){})
2.参数还可以传选择器，作用是获取元素 $(‘div’)
3.参数是个dom对象，作用是将Dom对象转jQ对象 $(this)
4.参数是个html字符串，作用是创建元素

代码演示

<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 语法：$(html字符串)  $('<p></p>')
            // 注意点：引号的问题
            var $link = $('<a href="http://www.baidu.com">百度一下</a>');  //内存中

            $('body').append($link);  //理解为appendChild()
       })
    </script>
</body>

2.添加节点

2.1-都是添加到元素内部的最后面

append()  appendTo()

代码演示：

<body>
    <div id="box" style="padding:20px; border: 10px solid pink">
        <h1>哈哈哈</h1>
        <h2>嘻嘻</h2>
        <p>我和你</p>
    </div>
    <span>哭了</span>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // append()方法，封装了appendChild()
            // 语法：parent.append(child);
            // 作用：把child添加到parent里面的最后面

            // child添加的节点如果是页面中本来就存在的，添加的话，就是个剪贴的效果
            $('#box').append($('span'));


            //child 是个html字符串，会根据这个html字符串去创建节点，之后再添加到parent
            $('#box').append('<span>电脑坏了</span>');


            // appendTo() 
            // 作用同append(),写法上反过来
            // 语法：child.appendTo(parent)
            $('span').appendTo($('#box'));
    </script>
</body>

2.2-都是添加到元素内部的最前面

prepend()  prependTo()

代码演示：

<body>
    <div id="box" style="padding:20px; border: 10px solid pink">
        <h1>哈哈哈</h1>
        <h2>嘻嘻</h2>
        <p>我和你</p>
    </div>
    <span>哭了</span>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // prepend() && prependTo()
            // 语法：parent.prepend(child)
            // 作用：把child添加到parent的里面的最前面
            $('div').prepend($('span'));
            $('span').prependTo($('div'));
        })
    </script>
</body>

2.3-添加到元素前面，做兄弟

before()

2.4-添加到元素后面，做兄弟

after()

before()、after() 代码演示：

<body>
    <div id="box" style="padding:20px; border: 10px solid pink">
        <h1>哈哈哈</h1>
        <h2>嘻嘻</h2>
        <p>我和你</p>
    </div>
    <span>哭了</span>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // after() && before()
            // 语法：A.after(B);  A B做兄弟。B在A的后面
            $('div').after($('h1'));
            $('div').before($('h1'));
        })
    </script>
</body>

小结：添加节点操作

添加做孩子：

append() appengTo() ：里面的最后面
prepend() prependTo() ：里面的最前面

添加做兄弟：

after() ：后面
before() ：前面

案例-城市选择

在这里插入图片描述

  <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }

    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <h1>城市选择：</h1>
  <select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
  </select>
  <div class="btn-box">
    <!--实体字符-->
    <button id="btn1"> &gt;&gt; </button>
    <button id="btn2"> &lt;&lt; </button>
    <button id="btn3"> &gt;</button>
    <button id="btn4"> &lt; </button>
  </div>

  <select id="tar-city" name="tar-city" multiple>
  </select>

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

    $(function () {
      // btn1 ==> 做的事情把src-city的所有的option添加到tar-city里面去
      // append()
      $('#btn1').click(function() {
        $('#tar-city').append($('#src-city option'));
      })

      // btn2 ==> 做的事情把tar-city的所有的option添加到src-city里面去
      $('#btn2').click(function() {
        $('#tar-city option').appendTo($('#src-city'));
      })

      // btn3 ==> 做的事情把src-city的所有选中的option添加到tar-city里面去
      // append()
      $('#btn3').click(function() {
        // :checked 单选或多选
        // :selected 下拉框
        // :disabled 禁用的
        $('#tar-city').append($('#src-city option:selected'));
      })

      // btn4 ==> 做的事情把tar-city的所有的option添加到src-city里面去
      $('#btn4').click(function() {
        $('#tar-city option:selected').appendTo($('#src-city'));
      })
    });
  </script>
</body>

3. 清空节点、删除节点以及克隆节点

1. 清空节点和删除节点

清空指定节点的所有元素，自身保留（清理门户）

empty();

//例：
$('div').empty();  //清空div的所有内容

相当于empty()，自身也删除（自杀）

remove();

//例：
$('div').remove();

2. 克隆节点

作用：复制匹配的元素

clone();

克隆操作clone() 本身就是深克隆效果

参数： 布尔类型是否要克隆元素的事件true 克隆事件、false不克隆事件。
返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

3. 代码演示

<body>
    <div id="box" style="padding:20px; border: 10px solid pink">
        <h1>哈哈哈</h1>
        <h2>嘻嘻</h2>
        <p>我和你</p>
    </div>
    <span>
        <a href="#">深圳</a>
    </span>


    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 清空操作 empty()
            // $('div').empty();

            // 删除操作 remove() 自杀式效果
            // $('div').remove();


            // 克隆操作 clone() 本身就是深克隆效果
            // 参数：布尔类型   是否要克隆元素的事件true 克隆事件  、false不克隆事件

            $('span').click(function() {
                console.log(111);
                
            })

            var $newspan = $('span').clone(true);  //还在内存中，需要进行添加操作
            // console.log($newspan);
            $('div').append($newspan);
            
        })
    </script>
</body>

二. jQuery特殊属性操作

1. val方法

val() 方法用于设置和获取表单元素的值，例如input、textarea的值

// 设置值：
$('#name').val('张三');

// 获取值：
$('#name').val();

val方法案例-微博发布

在这里插入图片描述
步骤：

找对象（btn、txt、ul）
给btn注册click
获取txt的内容
把内容放到li中 ==> 创建li
把li添加到ul中，prepend

细节处理：

点击发布之后，清空txt的内容纯空格问题 trim()
判断txt是否有内容，如果没有就不用去创建li放到ul中

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .box {
        width: 600px;
        margin: 100px auto;
        border: 1px solid #000;
        padding: 20px;
      }

      textarea {
        width: 450px;
        height: 160px;
        outline: none;
        resize: none;
      }

      ul {
        width: 450px;
        padding-left: 80px;
      }

      ul li {
        line-height: 25px;
        border-bottom: 1px dashed #cccccc;
      }

      input {
        float: right;
      }
    </style>
  </head>

  <body>
    <div class="box" id="weibo">
      <span>微博发布</span>
      <textarea name="" id="txt" cols="30" rows="10"></textarea>
      <button id="btn">发布</button>
      <ul id="ul"></ul>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // 1.
        var $btn = $('#btn')
        var $txt = $('#txt')
        var $ul = $('#ul')

        // 2.
        $btn.click(function () {
          // 3.
          // trim() 去除字符串两端的空白
          var str = $txt.val().trim() // 不传参就是获取
          // console.log(str)

          // 清空txt的内容
          $txt.val('') // 设置

          // 判断是否有内容
          if (str.length === 0) {
            // 啥都没写，后续代码不执行
            return
          }

          // 4.
          // var $newLi = $('<li></li>')
          // $newLi.text(str)
          // // 5.
          // $ul.prepend($newLi)

          // 以上三行优化成一行代码
          $('<li>' + str + '</li>').prependTo($ul)
        })
      })
    </script>
  </body>

2. html方法与text方法

html() 方法相当于 innerHTML()
text() 方法相当于 innerText

// 设置内容：
$(“div”).html(“<span>这是一段内容</span>”);

// 获取内容：
$(“div”).html()



//设置内容
$(“div”).text(“<span>这是一段内容</span>”);

//获取内容
$(“div”).text()

代码演示：

  <body>
    <div id="box">
      <h2>哈哈</h2>
    </div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // innerHTML innerText区别： innerHTML可以识别标签
        // jQ
        // html() ==> 封装innerHTML
        // text() ==> 封装innerText

        // 不传参就是在获取
        // console.log($('#box').html())
        // console.log($('#box').text())

        // 设置
        // $('#box').html('<h1>嘻嘻</h1>')
        $('#box').text('<h1>嘻嘻拉拉</h1>')
      })
    </script>
  </body>

3. width方法与height方法

1. 设置或者获取高度

// 带参数表示设置高度
$('img').height(200);

// 不带参数获取高度
$(“img”).height();

2. 获取网页的可视区宽高

//获取可视区宽度
$(window).width();

//获取可视区高度
$(window).height();

代码演示：

    <style>
      div {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 10px solid #000;
        margin: 10px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // width方法与height方法 ==> 宽高
        // 不传参就是在获取
        console.log($('#box').width())
        // console.log($('#box').css('width')) // 带单位,参与运算不方便
        // console.log($('#box').height())
        // 设置
        // $('#box').width(500)

        // innerWidth() ==> width + padding
        // outerWidth() ==> width + padding + border
        // outerWidth(true) ==> width + padding + border + margin
        console.log($('#box').innerWidth())
        console.log($('#box').outerWidth())
        console.log($('#box').outerWidth(true))

        // 获取可视区的宽高大小
        // $(window).width()
        // $(window).height()
      })
    </script>
  </body>

3. scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

scrollTop()： 垂直方向
scrollLeft()： 水平方向

//获取页面被卷曲的高度
$(window).scrollTop();

//获取页面被卷曲的宽度
$(window).scrollLeft();

代码演示：

    <style>
      body {
        height: 5000px;
        width: 5000px;
      }
      button {
        position: fixed;
        right: 20px;
        bottom: 20px;
      }
    </style>
  </head>
  <body>
    <button>返回顶部</button>
    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // scrollTop与scrollLeft
        //  操作页面滚动卷曲的距离
        // scrollTop  垂直方向
        // scrollLeft 水平方向
        // $(window).scrollTop();  获取
        // 给页面注册滚动事件，当滚动的时候来获取到滚动距离
        /* $(window).scroll(function () {
          // console.log($(window).scrollTop())
          console.log($(window).scrollLeft())
        }) */

        // 返回顶部
        $('button').click(function () {
          $(window).scrollTop(1000) // 设置
        })
      })
    </script>
  </body>

案例-固定导航

在这里插入图片描述
步骤：

给页面注册scroll
获取页面垂直方向的滚动卷曲距离 y
y 比 topPart的高度大 ==> navBar 固定定位
navBar 固定定位，不占位置，底下的mainPart跑到上面去
解决：给mainPart设置marginTop ==> 10 + navBar的高度，否则，navBar 取消固定定位

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      img {
        vertical-align: top;
        width: 100%;
      }

      .main {
        margin: 10px auto 0;
        width: 1000px;
      }

      .fixed {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div class="top" id="topPart">
      <img src="images/top.png" alt="" />
    </div>
    <div class="nav" id="navBar">
      <img src="images/nav.png" alt="" />
    </div>
    <div class="main" id="mainPart">
      <img src="images/main.png" alt="" />
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
      $(function () {
        //  步骤：
        //  1. 给页面注册scroll
        //  2. 获取页面垂直方向的滚动卷曲距离 y
        //  3. y 比 topPart的高度大 ==> navBar 固定定位
        //           navBar 固定定位，不占位置，底下的mainPart跑到上面去
        //           解决：给mainPart设置marginTop ==> 10 + navBar的高度
        //        否则，navBar 取消固定定位

        var $topPart = $('#topPart')
        var $navBar = $('#navBar')
        var $mainPart = $('#mainPart')

        $(window).scroll(function () {
          var y = $(window).scrollTop()
          //   console.log(y)
          if (y >= $topPart.height()) {
            //  固定定位
            $navBar.addClass('fixed')

            // 解决
            $mainPart.css('marginTop', 10 + $navBar.height())
          } else {
            //   取消固定定位
            $navBar.removeClass('fixed')

            // 恢复原本的间距10
            $mainPart.css('marginTop', 10)
          }
        })
      })
    </script>
  </body>

案例-小火箭返回顶部

在这里插入图片描述

    <style>
      body {
        height: 8000px;
      }

      a {
        color: #fff;
      }

      .actGotop {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 150px;
        height: 195px;
        display: none;
        z-index: 100;
      }

      .actGotop a,
      .actGotop a:link {
        width: 150px;
        height: 195px;
        display: inline-block;
        background: url(images/gotop.png) no-repeat;
        outline: none;
      }

      .actGotop a:hover {
        width: 150px;
        height: 195px;
        background: url(images/gotop.gif) no-repeat;
        outline: none;
      }
    </style>
  </head>

  <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // 功能：
        // 1. 通过滚动来控制小火箭的显示与隐藏

        var $actGotop = $('.actGotop')

        $(window).scroll(function () {
          var y = $(window).scrollTop()

          if (y >= 1500) {
            // 小火箭显示
            $actGotop.stop().fadeIn(1000)
          } else {
            $actGotop.stop().fadeOut(1000)
          }
        })

        // 2. 点击小火箭缓慢的返回顶部
        $actGotop.click(function () {
          // 返回顶部，但是没有缓慢的动画效果
          // $(window).scrollTop(0)
          // 这样不行，没有返回顶部的功能
          // 是给window做动画，修改scrollTop，不行的，
          // 因为window没有scrollTop
          /* $(window).animate(
            {
              scrollTop: 0,
            },
            2000
          ) */
          // webapi阶段：获取页面滚动卷曲距离
          // window.pageYOffset ||
          //   document.documentElement.scrollTop ||
          //   document.body.scrollTop

          // window.pageYOffset 只读属性， 只能读取，设置无效
          // document.documentElement ==> html
          // document.body ==> body
          /* $(document.documentElement).animate(
            {
              scrollTop: 0,
            },
            1000
          ) */

          // 写上html,body 目的是为了更好的兼容更多浏览器
          $('html, body').animate(
            {
              scrollTop: 0,
            },
            1000
          )
        })
      })
    </script>
  </body>

三. jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

1. jQuery事件发展历程(了解)

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

1. 简单事件注册

click(handler)            单击事件
mouseenter(handler)        鼠标进入事件
mouseleave(handler)        鼠标离开事件

缺点：不能同时注册多个事件

2. bind方式注册事件

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点：不支持动态事件绑定

delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

代码演示：

    <style>
      div {
        width: 500px;
        padding: 20px;
        background-color: #ccc;
      }
      p {
        background-color: lime;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <button id="unbtn">解绑事件</button>
    <button id="create">创建p添加到div内</button>
    <br />
    <br />
    <br />
    <div id="box">
      <p>哈哈，我在这</p>
    </div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // jQuery事件发展历程
        // 1. 注册简单事件 不能同时注册多个事件
        /* $('div').click(function () {
          console.log(1)
        }) */


        // 2. bind注册事件
        //  只需要以空格隔开写多个事件名
        /* $('div').bind('click mouseenter', function () {
          console.log(2)
        }) */

        // bind注册的事件，使用unbind来解绑
        /* $('#unbtn').click(function () {
          // $('div').unbind(); // 解绑所有的
          $('div').unbind('click') // 解绑所有的
        }) */
        
        // bind注册事件：存在不支持动态绑定的问题
        //  对于动态创建的元素没有注册上事件
        /* $('#create').click(function () {
          // 创建p添加到div内
          $('<p>这是新建的p</p>').appendTo($('div'))
        })

        // 给p注册事件
        $('p').bind('click', function () {
          console.log('p被点击了')
        }) */

        // delegate() 注册事件委托（事件代理）
        // 核心玩法： 把事件注册给父元素（只要是祖先元素都可以），然后由指定的子元素去触发
        $('body').delegate('p', 'click', function () {
          // click事件是注册在div身上
          // 但是指定了只能有p子元素去触发
          console.log('p被点击了')
        })

        $('#create').click(function () {
          // 创建p添加到div内
          $('<p>这是新建的p</p>').appendTo($('div'))
        })

        // 发展历程
        //  1. .click  不支持同时注册多个事件
        //  2. bind注册 unbind解绑 不支持动态绑定
        //  3. delegate注册事件委托  undelegate() 解绑事件委托
      })
    </script>
  </body>

2. on注册事件(重点)

on(type, selector, data, fn);

type: 事件类型

selector：选择器，该参数可选
该参数如果存在，指定了触发事件的子元素 ==> 是在注册事件委托
该参数如果不存在，就是注册简单事件

data：数据，携带的数据，可以在事件处理函数中来使用 可选

fn： 事件处理函数

1. on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

2. on注册委托事件

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});

3. on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

代码演示：

    <style>
      div {
        width: 500px;
        padding: 20px;
        background-color: #ccc;
      }
      p {
        background-color: lime;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <button id="unbtn">解绑事件</button>
    <button id="create">创建p添加到div内</button>
    <br />
    <br />
    <br />
    <div id="box">
      <p>哈哈，我在这</p>
    </div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // 注册简单事件
        // $('#box').on('click', function () {
        //   console.log(1)
        // })

        // 注册事件委托
        $('div').on('click', 'p', function () {
          console.log(2)
        })

        $('#create').click(function () {
          // 创建p添加到div内
          $('<p>这是新建的p</p>').appendTo($('div'))
        })
      })
    </script>
  </body>

3. 事件解绑

1. unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

2. undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

3. off方式（推荐）

off() 解绑所有事件(包含事件委托)
off(type, selector) 解绑具体的事件委托
off(type) 解绑具体的事件

// 解绑匹配元素的所有事件
$(selector).off();

// 解绑匹配元素的所有click事件
$(selector).off("click");

代码演示

    <style>
      div {
        width: 500px;
        padding: 20px;
        background-color: #ccc;
      }
      p {
        background-color: lime;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <button id="unbtn">解绑事件</button>
    <button id="create">创建p添加到div内</button>
    <br />
    <br />
    <br />
    <div id="box">
      <p>哈哈，我在这</p>
    </div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // on注册事件 off解绑

        // off()   解绑所有事件(包含事件委托)
        // off(type, selector)   解绑具体的事件委托
        // off(type)   解绑具体的事件

        $('div').on('click', function () {
          console.log(3)
        })

        // 注册事件委托
        $('div').on('click', 'p', function () {
          console.log(2)
        })

        // 解绑事件委托
        $('#unbtn').click(function () {
          $('div').off('click')
        })

        $('#create').click(function () {
          // 创建p添加到div内
          $('<p>这是新建的p</p>').appendTo($('div'))
        })
      })
    </script>

4. 触发事件

$(selector).click(); //触发 click事件
$(selector).trigger("click");

5. jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

screenX() screenY()    //对应屏幕最左上角的值
clientX() clientY()   // 距离页面左上角的位置（忽视滚动条）
pageX() pageY()    //距离页面最顶部的左上角的位置（会计算滚动条的距离）

event.keyCode    //按下的键盘代码
event.data    //存储绑定事件时传递的附加数据

event.stopPropagation()    //阻止事件冒泡行为
event.preventDefault()    //阻止浏览器默认行为

return false     //既能阻止事件冒泡，又能阻止浏览器默认行为。

代码演示

  <body>
    <div style="padding: 20px; background-color: #f99;">
      <a href="http://www.itcast.cn">哈哈</a>
    </div>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // jQuery事件对象 ==> 原先事件对象怎么使用，在jq中还是一样的使用方式

        // on(type, selector, data, fn)

        $(document).on('click', function (e) {
          // 获取到鼠标的位置 ==> 在事件对象中
          // on 的data参数，在事件处理函数中要使用的话，可以通过 e.data来获取
          console.log(e.pageX)
          // console.log(e.keyCode)
        })

        $('a').click(function (e) {
          alert(1)

          // e.preventDefault() // 阻止浏览器的默认行为
          // e.stopPropagation() // 阻止冒泡

          // 在jQ中，return false 既能阻止事件冒泡，又能阻止浏览器默认行为。
          // 在原生js中，只能阻止浏览器默认行为。
          return false
        })

        $('div').click(function () {
          alert('div')
        })
      })
    </script>
  </body>

案例-弹幕效果

在这里插入图片描述
步骤：

找对象（text、btn/ boxDom）
给btn注册click
获取text的内容
创建span元素,给span设置内容为text的内容
往boxDom中添加span
给span设置随机颜色 ==> 从colors随机取
随机设置span的top ==> 可视区高度的一半
设置span的left
做动画运动去左边 left
当span运动结束的时候，把span移除掉

    <style type="text/css">
      html,
      body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        font-family: '微软雅黑';
        font-size: 62.5%;
      }

      .boxDom {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .idDom {
        width: 100%;
        height: 100px;
        background: #666;
        position: fixed;
        bottom: 0px;
      }

      .content {
        display: inline-block;
        width: 430px;
        height: 40px;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
      }

      .title {
        display: inline;
        font-size: 4em;
        vertical-align: bottom;
        color: #fff;
      }

      .text {
        border: none;
        width: 300px;
        height: 30px;
        border-radius: 5px;
        font-size: 2.4em;
      }

      .btn {
        width: 60px;
        height: 30px;
        background: #f90000;
        border: none;
        color: #fff;
        font-size: 2.4em;
      }

      span {
        width: 300px;
        height: 40px;
        position: absolute;
        overflow: hidden;
        color: #000;
        font-size: 4em;
        line-height: 1.5em;
        cursor: pointer;
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <div class="boxDom" id="boxDom">
      <div class="idDom" id="idDom">
        <div class="content">
          <p class="title">吐槽:</p>
          <input type="text" class="text" id="text" />
          <button type="button" class="btn" id="btn">发射</button>
        </div>
      </div>
    </div>
  </body>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
    
      var $boxDom = $('#boxDom')
      var $text = $('#text')
      var $btn = $('#btn')

      // 随机的颜色数组
      var colors = [
        'red',
        'green',
        'hotpink',
        'pink',
        'cyan',
        'yellowgreen',
        'purple',
        'deepskyblue',
      ]

      // 2.
      $btn.on('click', function () {
        // 3.
        var str = $text.val().trim()
        // 清空文本框内容
        $text.val('')

        // 判断是否有内容
        if (str.length === 0) {
          return
        }

        // 4.
        var $newSpan = $('<span>' + str + '</span>')

        // 5.
        $boxDom.append($newSpan)

        // 6.
        // 先根据数组的长度取随机下标
        var idx = parseInt(Math.random() * colors.length) // Math.random() ==> [0, 1)
        // console.log(idx, colors[idx]);

        // 随机top
        var randomTop = parseInt((Math.random() * $(window).height()) / 2)

        $newSpan.css({
          color: colors[idx],
          left: $(window).width(),
          top: randomTop,
        })

        // 9.
        $newSpan.animate(
          {
            left: -$newSpan.width(),
          },
          8000,
          'linear',
          function () {
            $newSpan.remove()
          }
        )
      })

      // 添加回车发布功能
      $text.on('keydown', function (e) {
        // 判断按键是否为回车
        var code = e.keyCode

        if (code === 13) {
          // 发布 ==> 触发按钮的点击功能
          $btn.click()
        }
      })
    })
  </script>

钢琴案例（加强版）-支持键盘

在这里插入图片描述

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 700px;
            height: 60px;
            background-color: black;
            margin: 0 auto;
        }

        .maps {
            width: 700px;
            text-align: center;
        }

        .maps img {
            width: 80%;
            margin-top: 30px;
        }

        .nav li {
            width: 100px;
            height: 60px;
            /*border: 1px solid yellow;*/
            float: left;
            position: relative;
            overflow: hidden;
        }

        .nav a {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 24px;
            color: blue;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            z-index: 2;
        }

        .nav span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            top: 60px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="javascript:void(0);">导航1</a>
                <span></span>
            </li>
            <li><a href="javascript:void(0);">导航2</a><span></span></li>
            <li><a href="javascript:void(0);">导航3</a><span></span></li>
            <li><a href="javascript:void(0);">导航4</a><span></span></li>
            <li><a href="javascript:void(0);">导航5</a><span></span></li>
            <li><a href="javascript:void(0);">导航6</a><span></span></li>
            <li><a href="javascript:void(0);">导航7</a><span></span></li>
        </ul>
        <div class="maps">
            <img src="1.jpg" alt="">
        </div>
        <div class="mp3">
            <audio src="mp3/1.mp3"></audio>
            <audio src="mp3/2.mp3"></audio>
            <audio src="mp3/3.mp3"></audio>
            <audio src="mp3/4.mp3"></audio>
            <audio src="mp3/5.mp3"></audio>
            <audio src="mp3/6.mp3"></audio>
            <audio src="mp3/7.mp3"></audio>
        </div>
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var index = 0;
            var arrs = ["1.jpg", "2.jpg", "3.jpg"];
            $(".maps img").click(function () {
                index++;
                if (index === arrs.length) {
                    index = 0;
                }
                $(this).attr("src", arrs[index])
            })

            // 给nav下的所有的li注册mouseenter事件， 让当前li下的span做自定义动画，top=0，播放对应的音频
            // 给nav下的所有的li注册mouseleave事件， 让当前li下的span做自定义动画，top=60

            $(".nav li").mouseenter(function () {
                // stop() 保证停止当前正在执行的动画，让添加的动画立即执行
                $(this).children("span").stop().animate({ top: 0 });

                // 找到当前元素的下标
                var idx = $(this).index();

                // 添加音乐的播放
                // play 方法是H5提供的，jq并没有封装对应的方法，所以需要将jq对象转成dom对象
                // 需让让鼠标经过的时候，重新开启这个音频文件的播放
                // load 方式是H5提供的，让当前资源重新去加载。
                $(".mp3 audio").get(idx).load();
                $(".mp3 audio").get(idx).play();
            })

            $(".nav li").mouseleave(function () {
                // stop() 保证停止当前正在执行的动画，让添加的动画立即执行
                $(this).children("span").stop().animate({ top: 60 });
            })

            // 绑定键盘事件
            // 实现思路：
            //  给键盘数字1-7注册keydown，触发对应的nav的li的mouseenter
            //  给键盘数字1-7注册keyup，触发对应的nav的li的mouseleave

            // 默认可以被触发keydown事件
            var flag = true;

            $(document).keydown(function (e) {
                // 在谷歌浏览器上，一直摁住键盘不会，会不停的触发keydown事件
                // 如何解决这个问题？？？

                if (flag) {
                    // 当事件被执行的时候，立即让flag变为false
                    flag = false;

                    // 当键盘摁下的时候，keydown事件被触发，只能触发一次，节流阀
                    console.log(e.keyCode);
                    var keyCode = e.keyCode;

                    // 更简洁的方法去实现
                    if (keyCode <= 55 && keyCode >= 49) {
                        // 说明按键是数字1-7
                        // 这个index就是li的下标
                        var index = keyCode - 49;

                        // 找到对应下标的li，触发mouseenter事件
                        $(".nav li").eq(index).trigger("mouseenter");
                    }

                    /*switch(keyCode){
                        case 49:
                            // 数字1
                            // $(".nav li").eq(0).mouseenter();
                            $(".nav li").eq(0).trigger("mouseenter");
                        break;
                        case 50:
                            // 数字2
                            $(".nav li").eq(1).trigger("mouseenter");
                        break;
                        default:
                            
                        break;
                    };*/
                }


            });

            // 注册键盘弹起事件
            $(document).keyup(function (e) {
                // 目的是当keyup的时候，重新将flag变成true，让下一次的keydown可以使用
                flag = true;

                var keyCode = e.keyCode;

                // 更简洁方式去实现功能
                if (keyCode <= 55 && keyCode >= 49) {
                    // 键盘码就是数字1-7

                    // index 就是li对应的下标
                    var index = keyCode - 49;

                    // 找到对应下标的li，去触发他的mouseleave事件
                    $(".nav li").eq(index).trigger("mouseleave");
                }

                /*switch(keyCode){
                    case 49:
                        $(".nav li").eq(0).trigger("mouseleave");
                    break;
                    case 50:
                        // 数字2
                        $(".nav li").eq(1).trigger("mouseleave");
                    break;
                };*/
            })

        })
    </script>
</body>

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第4天知识点：jQuery节点操作、jQuery特殊属性操作、jQuery事件机制

一. jQuery节点操作1. 创建节点// 语法：$(html字符串) $('<p></p>')注意点：引号的问题$符号的功能：1.来源：jQuery提供的2.是个啥：是一个函数3.能做啥：根据参数不同，作用就不同参数：1.参数是个函数，作用是入口函数 $(function(){})2.参数还可以传选择器，作用是获取元素 $(‘div’)3.参数是个dom对象，作用是将Dom对象转jQ对象 $(this)4.参数是个html字符串，作用是创建元素
复制链接

扫一扫

专栏目录