JQuery的元素以及节点

最新推荐文章于 2024-06-19 19:53:31 发布

灯光下的投影

最新推荐文章于 2024-06-19 19:53:31 发布

阅读量210

点赞数

分类专栏： JQuery 文章标签： JQuery的元素以及节点事件弹幕效果

本文链接：https://blog.csdn.net/liuyuhua666/article/details/89787744

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、jquery创建元素：

var $btn = $('<button>这是个按钮</button>');

console.log($btn);

二、添加节点：

<style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>
    <span>111</span>
  </div>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p>我是一个p标签</p>
  <script src="jquery-1.12.4.js"></script>
  <script>
    // 6个添加的方法


    // parent.append(child)
    // append() 给元素追加一个子元素
    // $('div').append( $('p') );

    // $('div').append( $('<p>这是新建的p标签</p>') );

    // prepend: 给元素的子元素最前面添加一个元素
    // $('div').prepend( $('p') );


    // child.appendTo(parent)  作用相当于   parent.append(child)
    // $('div').append( $('p') );
    // $('p').appendTo($('div'));

    // child.prependTo(parent) 相当于  parent.prepend(child)
    // $('p').prependTo( $('div') );
    // $('div').prepend( $('p') );


    // before:    node.before(node1)
    // afther

    // 把p添加到div的前面，作为兄弟元素
    // $('div').before( $('p') );


    // $('div').after( $('p') );



    /* 
      parent.append(child)  把child追加到parent的子元素最后面
      child.appendTo(parent ) 把child追加到parent的子元素最后面
      parent.prepend(child)  把child追加到parent的子元素最前面
      child.prependTo(parent)把child追加到parent的子元素最前面

      div.before(p) :  把p添加到div的前面
      div.after(p):   把p添加到div的后面
    */ 
  </script>
</body>

城市选择案例：

<style>
    select {
      width: 200px;
      background-color: teal;
      font-size: 24px;
      height: 300px;
    }
  </style>
</head>
<body>
  <select multiple id="src">
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>杭州</option>
  </select>
  <button>></button>
  <button>>></button>
  <button><</button>
  <button><<</button>
  <select multiple id="tar"></select>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      $('button').eq(0).click(function() {
        // appendTo( parent )  parent允许直接是一个选择器
        $('#src > option:selected').appendTo('#tar');
      })

      $('button').eq(1).click(function() {
        // appendTo( parent )  parent允许直接是一个选择器
        $('#src > option').appendTo('#tar');
      })

      $('button').eq(2).click(function() {
        // appendTo( parent )  parent允许直接是一个选择器
        $('#tar > option:selected').appendTo('#src');
      })

      
      $('button').eq(3).click(function() {
        // appendTo( parent )  parent允许直接是一个选择器
        $('#tar > option').appendTo('#src');
      })
    });


  </script>
</body>

三、删除节点与清空节点

<style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>
    <span>111</span>
    <p>2222</p>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      // remove()  自杀
      // $('span').remove();
      // $('p').remove();
      // $('div').remove();

      $('div').empty();


      /* remove: 自杀   empty: 清空所有的内容 */
    });
  </script>
</body>

四、克隆节点

// clone的作用：在内存中克隆一份节点

// 参数： true 和 false

// 在jquery中 clone(false) 表示深克隆，会克隆标签和内容

// clone(true) : 深克隆，还会克隆事件

$('p').clone(true).appendTo('div');

// $('div').append( $('p').clone() );

五、注册事件：

<body>
  <button>按钮</button>
  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      //1. 直接使用事件名进行注册 click mouseenter
      //  优点： 相比js来说，注册的事件不会覆盖
      //  缺点： 没法取消
      // $('button').click(function() {
      //   console.log('哈哈哈');
      // });
      // $('button').click(function() {
      //   console.log('嘻嘻嘻');
      // });

      
      // 2. bind方法  unbind方法
      // 优点： 可以移除事件
      // 缺点： 无法给动态创建的元素注册事件
      // 参数1： 事件名
      // 参数2： 函数，事件处理程序
      // $('button').bind('click', function() {
      //   console.log('哈哈');
      // });
      // $('button').bind('click', function() {
      //   console.log('呵呵');
      // });
      // $('button').bind('mouseenter', function() {
      //   console.log('嘻嘻');
      // })

      // $('button').unbind('click');

      // $('button').bind('click mouseenter', function() {
      //   console.log('哈哈');
      // });


      // 3. 委托事件  代理事件
      
    });
  </script>
</body>

六、委托事件：

<body>
  <button>增加一个p</button>
  <div>
    <p>这是一个p</p>
    <p>这是一个p</p>
    <p>这是一个p</p>
    <span>哈哈</span>
    <p>这是一个p</p>
    <p>这是一个p</p>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      $('button').bind('click', function() {
        $('<p>这是一个新p</p>').appendTo('div');
      });


      $('p').bind('click', function() {
        console.log('哈哈');
      })



      // 委托事件  代理事件
      // delegate  undelegate
      // 给需要注册的子元素的公共的父元素去注册这个委托事件
      // 参数1： 选择器， 指定谁来触发这个事件


      // 1. 给父元素注册
      // 2。一定要指定触发的元素，  最终事件还是交给了子元素
      $('div').delegate('p', 'click', function() {
        console.log('哈哈');
      });


      $('div').click(function(){
        console.log('给div自己的注册的事件');
      })

    });
  </script>
</body>

七、on注册事件：

<body>
  <button>增加一个p</button>
  <div>
    <p>这是一个p</p>
    <p>这是一个p</p>
    <p>这是一个p</p>
    <span>哈哈</span>
    <p>这是一个p</p>
    <p>这是一个p</p>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      // on可以注册两种类型的事件  bind的用法 delegate的用法


      // 注册自己的事件
      // 参数1：注册的事件名
      // 参数2： 函数
      $('button').on('click', function() {
        $('<p>这是一个新p</p>').appendTo('div');
      });

      // $('p').on('click', function() {
      //   console.log('哈哈哈');
      // })

      // 如果要注册委托事件
      // 参数1； 事件名
      // 参数2： 必须指定触发的元素
      // 参数3： 函数
      $('div').on('click', 'p', function() {
        console.log('哈哈');
        console.log(this);
      })
    });
  </script>
</body>

弹幕效果：


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <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 {
      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>
      <!-- autocomplete="on" ： 自动补全 -->
      <!-- autocomplete="off" 关闭自动补全 -->
      <input type="text" class="text" id="text" autocomplete="off"/>
      <button type="button" class="btn" id="btn">发射☆</button>
    </div>
  </div>
</div>
</body>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function(){
    
    // 1. 给按钮注册点击事件
    // 2. 获取input的value值， 如果值为空 ，return   清空value值
    // 3. 动态创建span，添加到boxDom中
    // 4. 设置span的颜色为随机
    // 5. 设置span的top: 随机 0 - 屏幕高度/3
    // 6. 设置span的left: 一个屏幕宽度
    // 7. span要有动画， 从右边慢慢到左边   left: - 自身的宽度
    // 8. 等待span运动到屏幕的外边了，就需要移除span

    // 9. 回车的时候，发送弹幕

    var $btn = $('#btn');
    var $text = $('#text');
    var colors = ['purple', 'red', 'black', 'hotpink', 'green', 'orange', 'blue', 'lime', 'yellowgreen', 'teal'];
    $btn.click(function() {
      var value = $text.val().trim();
      $text.val('');
      if (!value) {
        alert('亲，不要发空弹幕了啦');
        return;
      }

      // 创建span并且添加到盒子中
      var $span = $('<span></span>');
      $span.text(value);
      $span.appendTo('#boxDom');

      // 随机颜色
      var random = parseInt(Math.random() * colors.length);
      $span.css('color', colors[random]);

      // 随机top值
      var pageHeight = $(window).height();
      var randomY = Math.random() * pageHeight / 3 | 0;
      $span.css('top', randomY);

      // 设置left
      var pageWidth = $(window).width();
      $span.css('left', pageWidth);

      // 执行动画
      var width = $span.outerWidth();
      $span.animate({left: -width}, 5000, 'linear', function() {
        // 自杀
        $span.remove();
      });
    });


    // 给input框注册onkeyup事件
    $text.keyup(function(e) {
      // console.log(e.keyCode);
      if (e.keyCode === 13) {
        $btn.click();
      }
    })
  });
</script>
</html>