0
点赞
收藏
分享

微信扫一扫

Dom对象和jQuery

爱上流星雨 2022-03-14 阅读 40
jqueryjavascript前端
加载失败

cdn地址: BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

jquery地址

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  • 【金山文档】 Dom对象
    • 目录
  • (一) Dom树相关知识
  • (二) Dom节点操作
    • 1. 获取 DOM 节点对象
    • 2. 获取和修改dom节点的内容
    • 3. 获取和修改dom节点的属性
    • 4. 获取和修改dom节点样式
    • 5. DOM节点增删
  • (三)事件绑定
    • Dom事件分类
    • 1. Dom0级事件及绑定
    • 2. Dom2级事件及绑定
    • 3. Dom3级事件及绑定
  • (四) 事件常见类型
  • (五) 事件对象
    • 1. event对象(事件对象)
    • 2.target和currentTarget
  • (六) 事件冒泡和事件捕获
  • (七) 作业:
    • 1. 底部 tab 栏的切换
    • 2. 全选, 全不选和单选
    • 3. todo list
    • 4. 小程序拖拽
    • 5. 计算总价

【金山文档】 Dom对象#

https://kdocs.cn/l/ceyfaHJsK57B

目录#

  1. DOM 树, DOM 节点, DOM 对象是什么
  2. 利用 DOM 对象对 DOM 节点进行增删改查操作
  3. 事件绑定
  4. 事件常见类型
  5. 事件对象
  6. 事件冒泡和事件捕获

(一) Dom树相关知识#

全称 Document Object Model, 中文名称文档对象模型, 主要用来操作页面上的元素, 对页面元素的内容, 属性和样式进行操作

  1. DOM 树 (见图)
  2. DOM 节点
  3. DOM 对象
  4. 操作DOM的js库 jQuery.js, 使用jq可以让我们操作dom变得非常方便

(二) Dom节点操作#

  1. 获取dom节点对象

  2. 获取和修改dom节点内容

  3. 获取和修改dom节点属性

  4. 获取和修改dom节点样式

1. 获取 DOM 节点对象#

原生js指的是不使用任何框架或者js库, 只使用js原本提供的功能

  1. 使用原生js获取dom节点对象
  2. 使用jq获取dom节点对象
  3. 原生jsdom节点对象和jq对象互想转换
  4. jquery对象的一些方法

01 获取节点#

document.querySeletor(); // 略

document.querySeletorAll(); // 略

document.getElementById();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">appppppppppppp</div> 

    <script>
        var _app = document.getElementById('app');
        console.log('_app: ',_app);
    </script>
</body>
</html>

02 使用jq获取dom节点对象#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">appppppppppppp</div> 
    <div class="box">boxxxxxxxxx</div>

    <ul class="" id="list">
        <li class="item">1xxxx</li>
        <li class="item">2xxxx</li>
        <li class="item">3xxxx</li>
        <li class="item">4xxxx</li>
        <li class="item">5xxxx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $app = $('#app');
        console.log('$app',$app);
        var $box = $('.box');
        console.log('$box',$box);
        var $liList = $('#list>li');
        console.log('$liList',$liList);
    </script>
</body>
</html>

03 原生js dom节点对象和jquery节点对象互转#

// 只有jquery对象才可以使用jquery提供的方法, 所以有些时候需要将原生js dom对象转成jquery dom对象

  1. 原生转jq: $(原生dom节点对象);
  2. jq转原生 jq对象[0];
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">appppppppppppp</div>  
    <div class="box">boxxxxxxxxxx</div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 原生js
        var _app = document.querySelector('#app');
        console.log('_app',_app);
        // 把_app转为jq节点对象
        var $app = $(_app);
        console.log('$app',$app); 

        console.log('------------------')

        // jq对象
        var $box = $('.box');
        console.log('$box',$box);
        // jq转原生
        var _box = $box[0];
        console.log('_box',_box); 
    </script>
</body>
</html>

04 jquery对象相关方法#

  1. 获取元素的兄弟节点
  2. 获取元素的父节点
  3. 获取元素的在兄弟元素中的排列位置
  4. 查找元素的后代某个节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         var $first = $('ul>li:first-child');
         console.log('$first',$first);
         $first.text('我是第1个');

         // 第一个的兄弟节点们
         $first.siblings().text('我们是第一个li的兄弟们');
        // 获取父节点
        $first.parent().css('border','1px solid red');
        // 获取$first的下标
        var index = $first.index();
        $first.text('我是第1个li,我的下标是'+index); 

        // 获取第三个元素的下标
        var index2 = $('ul>li:nth-child(3)').index();
        console.log(index2); 
     </script>
</body>
</html>

通过find查找后代元素

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body>
    <div class="box">
        <p>
            <span class="aa">aaa</span>
        </p>
        <div class="item">
            <i class="bb">bb</i>
        </div>
        <a href="#">百度</a>
    </div> 

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取jq对象
        var $box = $('.box');
        // 获取.aa元素
        var $aa = $box.find('.aa');
        console.log($aa);
        var $a = $box.find('a'); 
    </script>
</body> 
</html>

2. 获取和修改dom节点的内容#

// 原生dom节点获取内容(略) // 修改内容(略)

// jQuery获取和修改内容

  • text()
  • html()
  • val()
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body>
    <div class="box">
        <button>aaa</button>
    </div> 
    <input type="text" value="1380000000000">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取jq对象
        var $box = $('.box');
        // 获取文本
        var text = $box.text();
        console.log('text:',text);
        var html = $box.html();
        console.log('html:',html);
        var $input = $('input');
        var value = $input.val();
        console.log('value:',value);

        // 修改内容
        $box.find('button').text('ssssss');
        $box.html(`
        <li>111</li>
        <li>111</li>
        <li>111</li>
        `); 
        $input.val('我爱coding'); 
    </script>
</body> 
</html>

3. 获取和修改dom节点的属性#

// 原生js获取和修改节点属性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <a href="http://baidu.com">百度</a>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var _a = document.querySelector('a');
        // 获取属性方法1
        var href1 = _a.href;
        // 获取属性方法2
        var href2 = _a.getAttribute('href');
        console.log('href1', href1);
        console.log('href2', href2);

        // 修改
        _a.href = 'http://sina.com';
        _a.setAttribute('href','http://souhu.com')
    </script>
</body>

</html>

// jQuery获取和修改节点属性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body> 
    <a href="http://baidu.com">百度</a>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var  $a = $('a');
        // 获取属性
        var href = $a.attr('href');
        console.log('href',href);

        // 修改属性
        $a.attr('href','http://sina.com');
        $a.text('新浪');
    </script>
</body> 
</html>

4. 获取和修改dom节点样式#

01 原生js获取节点样式(略)#

// 注: 元素.style.样式名称操作行内样式,非行内样式需要使用window.getComputedStyle来操作 // 原生js修改节点样式(略)

02 jQuery获取和修改节点样式#

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: red;
            font-size: 20px;
        }
    </style>
</head> 
<body>

    <div class="box">
        boxxxxxxxxxxxxxxxxxxx
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $box = $('.box');
        // 获取样式
        var color = $box.css('color');
        var fontSize = $box.css('font-size');
        console.log('颜色:', color);
        console.log('字体:', fontSize);

        // 修改样式
        $box.css('background','rgba(0,0,0,.5)');
        // 链式调用
        $box.css('color','#fff').css('border','1px solid red');
    </script>
</body> 
</html>

03 jQuery操作样式的其它方法#

  1. show()和hide();
  2. addClass();
  3. removeClass();
  4. toggleClass();
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {color: red;}
    </style>
</head>

<body>
    <div class="box">bbbbbbbbbb</div>

    <ul>
        <li>1.xx</li>
        <li>2.xx</li>
        <li>3.xx</li>
        <li>4.xx</li>
        <li>5.xx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('.box').hide();
        $('.box').show();

        // $('ul>li:first-child').addClass('red');
        // $('ul>li:first-child').removeClass('red');
        //  $('ul>li:first-child').toggleClass('red');
        //  $('ul>li:first-child').toggleClass('red');
    </script>
</body> 
</html>

5. DOM节点增删#

01 原生js添加和删除节点#

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
     </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 原生js添加节点
        // 1.创建节点
        var _li = document.createElement('li');
        // 2.给节点添加内容或样式
        _li.innerText = '4.xxxx';
        _li.style.color = 'red';
        // 3.插入到ul里
        var _ul = document.querySelector('ul')
        _ul.appendChild(_li);


        // 删除节点
        var _second = document.querySelector('ul>li:nth-child(2)');
        _second.remove();
    </script>
</body> 
</html>

给没有jQuery的网站添加jQuery.js

var el = document.createElement('script'); 
el.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js';
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
document.body.appendChild(el);

02. jq添加,删除,移动,克隆节点#

  1. 添加节点

    1. append,prepend: 添加到子元素
    2. before，after：作为兄弟元素添加

  2. 删除节点

    $(选择器).remove();

  3. 移动节点

  4. 克隆节点

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
     </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 添加子节点,append添加到父元素的底部
        $('ul').append('<li>4.插入到底部</li>');
        // 添加子节点,append添加到父元素的顶部
        $('ul').prepend('<li>0.插入到顶部</li>');

        // 添加兄弟节点
        $('ul').after('<div class="box">在后面添加兄弟节点</div>');
        $('ul').before('<div class="box">在前面添加兄弟节点</div>'); 


        // 删除元素
        $('ul>li:nth-child(2)').remove();
    </script>
</body> 
</html>

<!-- 移动和克隆节点 -->
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
         <li>4.xxx</li>
     </ul>

     <div class="box">

     </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $first = $('ul>li:first-child');
        // 移动节点
        $('.box').append($first);

        // 克隆
        var $last = $('ul>li:last-child').clone();
        $('.box').append($last);
    </script>
</body> 
</html>

(三)事件绑定#

Dom事件分类#

  • DOM0级事件

  • DOM1级问题 DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

  • DOM2级事件

  • DOM3级事件

1. Dom0级事件及绑定#

DOM0级事件绑定分为两种

  • 行内事件:在标签中写事件
  • 元素.on事件名=函数
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {color: red;}
    </style>
</head>

<body>
     <button onclick="alert(222)">btn1</button>
     <button>btn2</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var _button = document.querySelector('button:last-child');
        _button.onclick = function() {
            alert(333);
        }
    </script>
</body> 
</html>

jquery事件绑定(属于二级事件)

注: jquery事件提供了this, 它指向了绑定的元素(原生的dom节点对象)

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>

<body>
     <button id="btn1">btn1</button>
     <button id="btn2">btn2</button>

    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
         $('#btn1').on('click',function() {
             alert(111111);
         });

         $('#btn2').on('click',function() {
            console.log(this); 
         });

         $('ul>li').on('click',function() {
             console.log(this);
             var index = $(this).index();
             alert(index);
         })
    </script>
</body> 
</html>

练习:

  1. 显示和隐藏.box
  2. li高亮与不不高亮
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <style>
        .box {width: 300px;border: 1px solid;padding:15px;margin-top: 15px;}
        .red {color: red;}
        li {margin-top: 10px;cursor: pointer;}
    </style>
</head>

<body>
     <button id="btn">隐藏</button> 
     <div class="box">
        我爱coding! 我爱coding! 我爱coding! 我爱coding! 我爱coding! 我爱coding! 
     </div>

    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
          
    </script>
</body> 
</html>

2. Dom2级事件及绑定#

  1. 监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。 它们都有三个参数：

    • 第一个参数是事件名（如click）；
    • 第二个参数是事件处理程序函数；
    • 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

  2. addEventListener() 添加事件

    可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

    注: 0级事件只能只能添加1个事件处理程序

  3. removeEventListener() 移除事件

    不能移除匿名添加的函数。

// Dom2级事件绑定
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>btn</button>

  <script>
    var _button = document.querySelector('button');
    _button.addEventListener('click',function() {
      console.log(11111);
    },false);

    _button.addEventListener('click',function() {
      console.log(222222);
    },false);
  </script>
</body>
</html>

3. Dom3级事件及绑定#

  • html5新事件api, 拖拽，视频播放等
  • 触摸事件 touchstart、touchmove和touchend
  • 自定义事件

拖拽例子#

  1. 对需要拖拽的元素添加属性 draggable="true"
  2. 对目标容器添加dragover事件, 目的是阻止默认事件
  3. 对目标容器添加drop事件, 执行元素的移动操作
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      width: 200px;
      height: 50px;
      background-color: #f4f4f4;
      line-height: 50px;
      text-align: center;
    }
    .box {
      border: 1px solid;
      width: 300px;
      height: 200px;
      margin-top: 50px;
    }
  </style>
</head>
<body>
    <div class="text" draggable="true">
      我爱coding
    </div>

    <div class="box"> </div> 
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      // $('.text').on('dragstart',function() {
      //   console.log('开始拖动');
      // });

      $('.box').on('dragover',function(event) {
        // 阻止默认事件
        event.preventDefault()
      })
      $('.box').on('drop',function() { 
        var $text = $('.text');
        // 把$text放入.box内
        $(this).append($text); 
      })

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

(四) 事件常见类型#

事件名称事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个 HTML 元素上移动鼠标
onmouseout用户从一个 HTML 元素上移开鼠标
onkeydown用户按下键盘按键
onkeyup用户松开键盘按键
onkeypress用户按下按键
onload浏览器已完成页面的加载
oninput键盘输入事件
touchStart触摸开始
touchMove滑动
touchEnd触摸结束

更多事件类型

https://www.runoob.com/jsref/dom-obj-event.html

onkeypress事件

event.key可以获取按键的值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head> 
<body>
    <input type="text">

    <script>
        $('input').on('keypress',function() {
            var value = $(this).val();
            console.log(event.key);
            if(event.key === 'Enter') {
                alert('你按下了回车键');
            } 
        })
    </script>
</body> 
</html>

onchange事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head> 
<body>
    <input type="checkbox"><span>未选择</span>

    <script>
        $('input').on('change',function() {
            // prop也是用来获取属性,attr获取不到属性时使用prop来获取
            // next()是用来获取元素的下一个兄弟元素
            var flag = $(this).prop('checked');
            if(flag) {
                console.log('已选择');
                $(this).next().text('已选择');
            } else {
                console.log('未选择');
                $(this).next().text('未选择');
            }  
        })
    </script>
</body> 
</html>

onload事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
    </style>

    <script>
        // 页面加载完成就会自动触发onload事件, 执行onload所绑定的函数
        window.onload = function () {
            console.log(document.querySelector('#box'));
            document.querySelector('#box').onclick = function () {
                alert(222);
            }
        }
    </script>
</head>

<body>
    <div id="box">
        阿斯顿发送到发送到发
    </div> 
</body> 
</html>


<!-- jQuery也有对应的方法 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#box').on('click',function() {
                alert('页面加载完成')
            })
        })
    </script>
</head>

<body>
    <div id="box">
        阿斯顿发送到发送到发
    </div> 
</body> 
</html>

(五) 事件对象#

每个事件, js系统都会提供事件对象, 对象包含了很多内容

  1. event.type 事件类型
  2. event.key 触发事件的按键(针对input,keypress等键盘事件)
  3. event.target 事件触发的目标元素
  4. currentTarget 事件绑定的元素

1. event对象(事件对象)#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">btn</button>
    <button id="btn2">btn2</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#btn1').on('dblclick', function() {
            console.log(event);
        })
        $('#btn2').on('dblclick', function(ev) {
            console.log(ev);
        }) 
    </script>
</body>
</html>

2.target和currentTarget#

  1. event.target // 你点中的元素
  2. event.currentTarget // 事件绑定的元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head> 
<body> 
    <div id="box">
        <button>btn</button>
        <span>span</span>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#box').on('click', function(ev) {
            console.log('点击的元素: ',ev.target);
            console.log('事件绑定的元素: ',ev.currentTarget);
        })
    </script>
</body> 
</html>

(六) 事件冒泡和事件捕获#

1. 事件流(事件传播方式)#

  1. 事件捕获阶段
  2. 目标阶段
  3. 事件冒泡阶段
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
        button {
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>

</head>

<body>
    <div id="box">
        <button>点我</button>
    </div> 
     
    <script>
        var box = document.querySelector('#box');
        box.addEventListener('click',function() {
            alert('box被点击了');
        },false);


         var button = document.querySelector('button');   
         button.addEventListener('click',function() {
            alert('button被点击了')
         },false)

    </script>
</body>

</html>

2. 事件冒泡应用: 事件委托#

// 原生js事件托管

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {cursor: pointer;}
        ul {
            border: 1px solid;
        }
    </style>

</head>

<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>

    <script>
         var ul = document.querySelector('ul');
         ul.onclick = function() {
             console.log(event.target);
         }
    </script>
</body> 
</html>

// jquery事件托管

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {cursor: pointer;}
        ul {
            border: 1px solid;
        }
    </style>

</head>

<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // jq事件委托写法
        $('ul').on('click','li', function() {
              console.log(this);  
        }) 
    </script>
</body> 
</html>

注: 元素js和jquery使用事件委托绑定事件的区别

原生js事件只要点击ul范围内的任意元素, 都会触发事件, 而jquery事件则只有点击li才触发事件, 会更方便

3. 阻止默认事件和阻止事件冒泡#

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>Document</title>
</head>
<body>
  <div class="box">
    <a href="http://www.baidu.com">百度</a>
  </div>

  <script>
    document.querySelector('a').onclick = function() {
      // 阻止默认事件
      event.preventDefault();
      // 阻止事件冒泡
      event.stopPropagation();
      console.log(2222);
    } 

    document.querySelector('.box').onclick = function() {
      alert('我是父元素');
    }
  </script>
</body>
</html>

(七) 作业:#

1. 底部 tab 栏的切换#

2. 全选, 全不选和单选#

  • 点击全选, 所有的checkbox都被选中
  • 其后的文字变为已选择
  • 点击全不选则是相反的逻辑
  • 单选的逻辑也如此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="yes">全选</button>
    <button id="no">全不选</button>
    <hr>
    <div class="box">
        <p><span>篮球</span><input type="checkbox"><span class="text">未选择</span></p>
        <p><span>足球</span><input type="checkbox"><span class="text">未选择</span></p>
        <p><span>羽毛球</span><input type="checkbox"><span class="text">未选择</span></p>
        <p><span>乒乓球</span><input type="checkbox"><span class="text">未选择</span></p>
    </div>
    <script>
        // 全选
        $('#yes').on('click',function() {
            $(".box input").prop('checked',true);
            $('.box .text').text('已选择');
        })
        // 全不选
        $('#no').on('click',function() {
            $(".box input").prop('checked',false);
            $('.box .text').text('未选择');
        })
        // 单选
        $('.box input').on('change', function() {
            // 获取input元素的checkd属性
           var flag = $(this).prop('checked');
           console.log(flag);
           if (flag) {
               // checkbox后面的span标签改变文字
               $(this).next().text('已选择');
           } else {
            $(this).next().text('未选择');
           }
        }) 
    </script>
</body> 
</html>

3. todo list#

  • 输入内容, 回车, 添加一条清单
  • 点击 x , 移除一条清单
  • 不输入内容就回车, 弹出: 请先输入内容

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 375px;
            min-height: 300px;
            margin: 0 auto;
            padding-top: 20px;
            padding: 20px 20px;
            /* border: 1px solid #999; */
            margin-top: 20px;
            box-shadow: 2px 2px 5px #888888;
        } 
        ul,
        li {
            list-style: none;
        }

        #inp {
            width: 100%;
            height: 40px;
            border: none;
            outline: none;
            text-indent: 10px;
            border: 1px solid #ebebee;
        }

        .item {
            height: 50px;
            border-bottom: 1px solid #ebebeb;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .item button {
            background-color: #ebebeb;
            border: none;
            padding: 5px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" id="inp" autofocus="true" placeholder="请输入清单">
        <ul class="list" id="list">
            <li class="item "><span>● xxxx </span><button>X</button></li>
            <li class="item "><span>● xxxx </span><button>X</button></li>
            <li class="item "><span>● xxxx </span><button>X</button></li>
        </ul>
    </div>

    <script>
        // 使用事件委托
        $('#list').on('click', 'button', function () {
            // 删除button的父元素
            $(this).parent().remove();
        }) 

        $('#inp').on('keypress', function () {
            // 获取输入的文本
            var text = $(this).val();
            // 判断用户是否按下了回车键
            if (event.key === 'Enter') {
                // 判断输入内容是否为空
                if (!text.trim()) {
                    alert('请输入清单');
                    return false;
                } else {
                    $('#list').append(` <li class="item "><span>● ${text}  </span><button>X</button></li> `);
                } 
            }
            // $(this).val('');
        })
    </script>
</body> 
</html>

4. 小程序拖拽#

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .wrapper {
      width: 375px;
      border: 1px solid;
      margin: 0 auto;
      min-height: 500px;
      border-radius: 10px;
      padding: 20px;
      background-color: #28263b;
      color: #fff;
      position: relative;
    }

    .trash {
      position: absolute;
      right: 0;
      bottom: 0;
      margin: 20px;
      border: 1px solid;
      padding: 15px 20px;

    }

    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: flex-start;
    }

    .box img {
      width: 45px;
      height: 45px;
      padding: 10px 20px;
    }

    .fix {
      padding: 0 20px;
      width: 45px;
      height: 0;
    }

    .my {
      min-height: 150px;
      position: relative;
      /* border: 1px solid; */
    }

    .pop {
      width: 150px;
      height: 30px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      margin-top: -15px;
      text-align: center;
      line-height: 30px;
      padding: 10px 20px;
      border-radius: 5px;
      display: none;
      color: #000;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <p>最近使用的小程序</p>
    <div class="box last">
      <img draggable="true" src="http://static.huruqing.cn/fresh/r1.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r2.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r3.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r4.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r5.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r6.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r7.png" alt="" />
      <img draggable="true" src="http://static.huruqing.cn/fresh/r8.png" alt="" />
      <span class="fix"></span>
      <span class="fix"></span>
      <span class="fix"></span>
    </div>

    <p>我的小程序</p>
    <div class="box my">
      <!-- 图片放在这里 -->
      <span class="fix"></span>
      <span class="fix"></span>
      <span class="fix"></span>
      <div class="pop">松手把图标放在这里</div>
    </div>

    <div class="trash">
      垃圾桶
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js "></script>
  <script>
    // 声明变量保存图片来源
    var from;
    // 保存拖动的图片下标
    var currIndex;
    // 保存已拖动图片的下标
    var indexList = [];

    // 绑定'拖拽开始'事件
    $('.last img').on('dragstart', function () {
      // 给from赋值
      from = 'last';
      // 获取下标
      var index = $(this).index();
      // 把下标存到全局变量
      currIndex = index;
    })

    //1.对图片添加draggable=true
    //2.对目标容器阻止默认事件
    $('.my').on('dragover', function () {
      event.preventDefault();
    })
    //3.绑定drop事件
    $('.my').on('drop', function () {
      // 判断indexList是否包含拖进来的图片下标
      if (!indexList.includes(currIndex)) {
        // 获取下标对应的图片
        var currImg = $(`.last img:nth-child(${currIndex+1})`).clone();
        // 把图片放入我的小程序
        $(this).prepend(currImg);
        // 把拖动进来的图片下标放入indexList
        indexList.push(currIndex);
      }
    })

    $('.my').on('dragstart','img', function () {
      // 给from赋值
      from = 'my';
      // 获取下标
      var index = $(this).index();
      // 把下标存到全局变量
      currIndex = index;
    })
    // 阻止默认事件
    $('.trash').on('dragover', function () {
      event.preventDefault();
    })
    $('.trash').on('drop', function () {
      // 判断图片来源
      if (from === 'last') {
        // 获取拖动的图片
        $(`.last img:nth-child(${currIndex+1})`).remove();
      } else {
        $(`.my img:nth-child(${currIndex+1})`).remove();
      }
    });
  </script>
</body> 
</html>

5. 计算总价#

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>计算商品总数和总价</title>
  <style>
    .title {
      margin-top: 0px;
      text-align: center;
    }

    ul,
    li {
      list-style: none;
      margin: 0;
    }

    .wrapper {
      border: 1px solid;
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 1px 1px 1px 5px #999;
    }

    .item {
      display: flex;
      justify-content: space-between;
    }

    .num1 {
      margin-left: 5px;
    }

    .num2 {
      margin-right: 5px;
    }

    .item p {
      display: flex;
      align-items: center;
    }

    input {
      height: 20px;
      width: 60px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h3 class="title">计算商品总数和总价</h3>
    <ul id="list">

      <!-- <li class="item">
          <p>
            <input type="button" value="-" />
            <span class="num1">0</span><span  class="num2">件</span>
            <input type="button" value="+" />
            <em>1.00元</em>
          </p>
          <p>
            结果：
            <input type="text" />
          </p>
        </li>  -->
    </ul>
    <div class="item">
      <p>
        <span>商品总数:</span>
        <input style="width: 80px" type="text" id="number" />
      </p>

      <p>
        <span>商品总价:</span><input style="width: 80px" type="text" id="price" />元
      </p>
    </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  var list = [{
    id: '001',
    buyNum: 1,
    price: 4,
  }, {
    id: '002',
    buyNum: 3,
    price: 5,
  }, {
    id: '003',
    buyNum: 1,
    price: 6,
  }, {
    id: '004',
    buyNum: 2,
    price: 3,
  }, {
    id: '005',
    buyNum: 1,
    price: 9,
  }]

  // 渲染页面
  function render(list) {
    var str = '';
    // 拼接字符串
    list.forEach(function (item, index) {
      str += `<li class="item">
          <p>
            <input type="button" value="-" />
            <span class="num1">${item.buyNum}</span><span  class="num2">件</span>
            <input type="button" value="+" />
            <em>${item.price.toFixed(2)}元</em>
          </p>
          <p>
            结果：
            <input type="text" value="${item.buyNum*item.price}"/>元
          </p>
        </li>`;
    });
    // 把拼接好的字符串插入的ul的
    $('#list').html(str);
  }
  render(list);

  // 绑定事件
  $('#list').on('click', 'input', function () {
    // 获取li的下标 closest('li') 找到当前元素的叫'li'祖先元素
    var index = $(this).closest('li').index();
    console.log(index);
    if (this.value === '+') {
      // 商品数量+1
      list[index].buyNum += 1;
    } else {
      // 购买数量大于0才减一
      if (list[index].buyNum > 0) {
        list[index].buyNum -= 1;
      }
    }
    // 重新渲染页面
    render(list);
    compute(list);
  });


  // 计算总数和总价
  function compute(list) {
    // 计算总数
    var total = list.reduce(function(sum,item){
      return sum + item.buyNum;
    },0)
    $('#number').val(total); 

    // 计算价
    var totalMoney = list.reduce(function(sum,item){
      return sum + (item.price * item.buyNum);
    },0)
    $('#price').val(totalMoney.toFixed(2)); 
  }
  compute(list);
</script>

</html>
举报

相关推荐

jQuery对象和DOM对象

javascript

jQuery对象和DOM对象转化

jqueryjavascript前端

JavaScript jQuery对象和DOM对象

jqueryjavascript前端

jquery对象和dom对象-6

htmljquerydom对象jQuery前端开发

浅谈jquery和DOM对象

jqueryjavascript前端

jquery和dom对象转换-7

idehtml原生jsjQuery前端开发

jquery对象和dom对象的相互转换

jqueryjquery对象html

javaEE003.02 jQuery：DOM对象与jQuery对象转换问题（使用DOM对象调用jQuery方法、使用jQuery调用DOM方法）

jQueryjQuery对象转换对象转换htmljavascriptHtml/CSS前端开发

Jquery - JavaScript的DOM 和 Jquery 对象的 相互转换

javascripthtml选择器JavaScript前端开发

jQuery对象与dom对象的转换

jquery对象dom对象jQueryPython后端开发
0 条评论
加载失败