菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 2022-12-26 王嘉乐 [打印本页]

作者: yousay！ 时间: 2023-1-5 18:37
标题: 2022-12-26 王嘉乐

3.表单选择器
$(':input')
input/select/textarea/button

input标签的type属性的选择器
：text
:password

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

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

      html,
      body {
         width: 100%;
         height: 100%;
      }

      .container {
         width: 80vw;
         margin: 0 auto;
         background-color: #00f;
         display: flex;
         justify-content: space-around;
         align-items: center;
      }

      .details {
         display: none;
      }

      .pActive {
         color: #fff;
      }

      .item>.divActive {
         display: block;
      }
</style>
</head>

<body>
<div class="container">
      <div class="item">
         
         <p>新闻</p>
         <div class="details">这是新闻主体</div>
      </div>
      <div class="item">
         
         <p>天气</p>
         <div class="details">这是天气主体</div>
      </div>
      <div class="item">
         
         <p>关于</p>
         <div class="details">这是关于主体</div>
      </div>
</div>

<script>
      // 获取原生对象
      var p = document.querySelectorAll('p');
      var container = document.querySelector('.container');

      // console.log(p);
      // 给container添加鼠标事件
      container.addEventListener('mouseover', function (e) {
         // console.dir(e.target.tagName);
         // 先确定鼠标是在p标签上
         if (e.target.tagName == 'P') {
            // console.log(1111);
            // 给p标签添加类名
            $(e.target).addClass('pActive');

            // 切换---不能完全实现
            // $(e.target).toggleClass('pActive');

            // p标签的同级元素添加---下一个节点
            // console.log(e.target.nextElementSibling);
            // console.dir(e.target);

            // $(e.target.nextElementSibling).addClass('divActive');
            $(e.target.nextElementSibling).css('display', 'block');
            // console.log(e.target.nextElementSibling);
         }
      });
      container.addEventListener('mouseout', function (e) {
         // console.dir(e.target.tagName);
         // 先确定鼠标是在p标签上
         if (e.target.tagName == 'P') {
            // console.log(1111);
            // 给p标签添加类名
            $(e.target).removeClass('pActive');

            // 切换---不能完全实现
            // $(e.target).toggleClass('pActive');

            // p标签的同级元素添加---下一个节点
            // console.log(e.target.nextElementSibling);
            // console.dir(e.target);

            // $(e.target.nextElementSibling).addClass('divActive');
            $(e.target.nextElementSibling).css('display', 'none');
            // console.log(e.target.nextElementSibling);
         }
      });
</script>
</body>

</html>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)