0


jQuery API ( 三 ) -------- 链式编程 与 修改样式方法

    今天这篇文章是 jQuery API 的第三篇,今天心情很好,因为破了300粉,希望所有代码人前端人在编程与写作的路上都能一帆风顺,全都早日拿认证。**okk**言归正传,这篇文章将带大家走进链式编程的世界,这也是 jQuery 的一个大大大大优点,其可以使代码的可读性,简洁性都得到进一步的升华,让你进入更高一层境界的代码世界。

     还有一个就是对于样式的修改的进一步说明,不再单单的是一个 css 方法,我们会在这篇文章接触到 样式操作类 与 更多的样式操作方法。

------- 接下来让我们进入代码世界 -------

一:链式编程

什么是链式编程?:

    链式编程 与 隐式迭代 是 jQuery 的两大特点,链式编程其实我们根据字面意思已经能想象到了,像链子一样串在一起,就是链式,那在编程领域,就是将多个分开的代码连接在一起书写的意思啦?不错,正是这样,记得我们的排他思想案例吗,我们当时的做法是第一个css设置点击的元素本身,第二个css设置点击元素的兄弟元素,其实此处就可以用链式编程思想将两行代码连起来,可见链式编程的好处是减少了代码冗余,增加了简洁性。

链式编程的实现原理:

   在当前对象调用完第一个方法后,便会返回一个 jQuery 对象,这个对象就可以继续接着调用其他方法,这就是链式编程的基本实现原理。

链式编程示例:

  我们还是举例排他思想按钮作为案例,并且对比不用链式编程的代码冗余量:
//不使用链式编程
<script>
        $('button').click(function(){
            $(this).css('background','red')
            $(this).siblings('button').css('background','')
        })
</script>

//使用链式编程
<script>
        $('button').click(function(){
            $(this).css('background','red').siblings('button').css('background','')
        })
</script>

二:样式修改的操作

一:操作 css 方法

操作css方法有以下几种:

  • 参数只写属性名:返回结果为属性值
  • 参数为属性值与属性名,中间逗号隔开
  • 参数为对象形式,写在花括号里,键值对形式,以方便设置多组样式

1.参数只写属性名

返回结果为属性值

<div></div>
  <script>
      $('div').click(function(){
         console.log($(this).css('backgroundColor')); 
      })
  </script>

2.参数为属性值与属性名,中间逗号隔开

结果为产生想要修改的样式效果 ( 此处点击前为红色 )

<body>
  <div></div>
  <script>
      $('div').click(function(){
          $(this).css('backgroundColor','pink'); 
      })
  </script>
</body>

3.参数为对象形式,以方便设置多组样式

注意样式卸载花括号里,以键值对形式书写,并且复合属性要采用驼峰命名法

<body>
  <div></div>
  <script>
      $('div').click(function(){
         $(this).css({'backgroundColor':'pink',
                      'border':'2px solid'}); 
      })
  </script>
</body>


二:操作类修改样式

等同于原生 js 的 classList 和 className

其主要有三个样式类方法:

  • addClass(‘类名’):添加类名
  • removeClass(‘类名’):删除类名
  • toggleClass(‘类名’):切换类名

1.addClass(‘类名’)

作用为添加类名,此处就点击后添加了 current 类

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 146, 146);
        }
        .current{
            background-color: rgb(0, 160, 246);
        }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
  <div></div>
  <script>
      $('div').click(function(){
         $(this).addClass('current')
      })
  </script>

点击后div的 多了类名current

2.removeClass(‘类名’)

作用为删除类名,此处就点击后就删除了原有类名

    <style>
        .current{
            width: 300px;
            height: 300px;
            background-color: rgb(0, 160, 246);
        }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
  <div class="current"></div>
  <script>
      $('div').click(function(){
         $(this).removeClass('current')
      })
  </script>
</body>

点击后删除了 div 的类名 current

3.toggleClass(‘类名’)

这个方法其实可以做到一种类名切换的效果,它其实是判断有没有这个类名,有就删掉,没有就添加

        div{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 146, 146);
        }
        .current{
            width: 300px;
            height: 300px;
            background-color: rgb(0, 160, 246);
        }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
  <div class="current"></div>
  <script>
      $('div').click(function(){
         $(this).toggleClass('current')
      })
  </script>
</body>

点击后会在两个类间来回切换,有 current 则删除,没有则添加这个类名


本文转载自: https://blog.csdn.net/weixin_52212950/article/details/124136253
版权归原作者 卡卡西最近怎么样 所有, 如有侵权,请联系我们删除。

“jQuery API ( 三 ) -------- 链式编程 与 修改样式方法”的评论:

还没有评论