按键改变元素背景颜色链式编程的原理评分案例 each方法的使用

最新推荐文章于 2022-07-19 14:43:14 发布

Leon_Jinhai_Sun

最新推荐文章于 2022-07-19 14:43:14 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/86562025

版权

按键改变元素背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 800px;
        height: 600px;
        background-color: gray;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          // 用户在页面按键,可以改变div的背景颜色
          $(document).keydown(function(e){
              // console.log(e.keyCode);
              switch(e.keyCode){
                  case 65:$("#dv").css("backgroundColor","red");break;
                  case 66:$("#dv").css("backgroundColor","green");break;
                  case 67:$("#dv").css("backgroundColor","blue");break;
                  case 68:$("#dv").css("backgroundColor","pink");break;
              }
          });
      });
  </script>
</head>
<body>
<div id="dv"></div>
  
</body>
</html>

链式编程的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          // 为按钮注册点击事件
          $("#btn").click(function(){
              // console.log($(this).val("哈哈").val("嘎嘎"));

              // 对象.方法(); 调用,如果返回来的还是对象,那么可以继续的调用方法
          });
      });


      function Person(age){
        this.age = age;
        this.sayHi = function(){
          if(txt){
            console.log("您好啊:" + txt);
            return this;
          }else{            
            console.log("您好啊...");
            return this;
          }
        };
        this.eat = function(){
          console.log("中午就吃了一个馒头和咸菜");
          return this;
        };
      }

      // 对象
      var per = new Person(10);
      // var ss = per.sayHi();
      // ss.eat();
      // per.sayHi().eat().sayHi();
      per.sayHi("嘎嘎").eat();

      // 方法();----获取这个值,如果.方法(值)---->当前的对象
      // val();----返回的是value属性的值,val('fdfs');----当前的对象

  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
  
</body>
</html>

评分案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        list-style: none;
      }
      li {
        float: left;
        font-size: 50px;
        color: red;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          // 获取所有的li标签
          $(".comment>li").mouseenter(function(){ // 进入
              // 当前的li是实心的五角星,前面的li也是实心的五角星,
              // 鼠标后面的li是空心的五角星
              $(this).text("★").prevAll("li").text("★");
          }).click(function(){ // 点击
              // 做一个记录
              // 点哪个li就为这个添加一个自定义属性,作为标识,但是其他的
              // li中的这个自定义属性要删除,
              $(this).attr("index","1").siblings("li").removeAttr("index");
          }).mouseleave(function(){ // 离开
              // 鼠标离开的时候,获取那个带有index自定义属性的li,然后,改变这个
              // li中的五角星,同时前面的五角星也是实心的,同时后面的五角星都是
              // 空心
              // 先干掉所有的li中的实心的五角星
              $(".comment>li").text("☆");
              $(".comment>li[index=1]").text("★").prevAll("li").text("★");
          });
      });
  </script>
</head>
<body>
  <ul class="comment">
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
  </ul>
</body>
</html>

each方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style-type: none;
      }
      li {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-right: 10px;
        float: left;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      // 隐式迭代----内部帮助我们循环遍历做操作

      // 每个元素做不同操作的时候

      // each方法,帮助我们遍历jQuery的对象

      // 获取所有的li,针对每个li的透明进行设置
      $(function(){
        $("#uu>li").each(function(index,ele){
            // console.log(arguments.length);
            // 参数1:索引,参数2:对象
            // console.log(arguments[0]+"===="+arguments[1]);
            // 每个li的透明度不一样
            var opacity = (index+1)/10;
            $(ele).css("opacity",opacity);
        });
      });

      // each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象
      // 如果想要使用jQuery的方法,需要把DOM对象转jQuery对象

  </script>
</head>
<body>
<ul id="uu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
  
</body>
</html>

Leon_Jinhai_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
按键改变元素背景颜色链式编程的原理评分案例 each方法的使用

按键改变元素背景颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 800px; he...
复制链接

扫一扫