细说 jQuery 样式篇（一） - 样式的获取与设置

chengtao1633 发布于2019-08-19 14:53 / 3167人阅读

摘要：在元素一篇学习了通过方法可以为元素添加样式，但是对样式的操作不仅仅限于添加，例如取得元素特定样式，设置元素样式等等。设置样式提供了一个方法来操作样式，这个方法将获取样式设置样式的作用集中了在一起，非常方便我们对元素样式进行操作。

在元素一篇学习了通过 addClass 方法可以为元素添加样式，但是对样式的操作不仅仅限于添加，例如取得元素特定样式，设置元素样式等等。

设置样式

jQuery 提供了一个 .css() 方法来操作样式，这个方法将获取样式设置样式的作用集中了在一起，非常方便我们对元素样式进行操作。

test

我们来获取这个 div 的样式，单个样式可以这样来获得：

$("div").css("color") //rgb(173, 216, 230)

多个样式可以这样来获得：

    $("div").css(["color", "font-size"])//Object {color: "rgb(173, 216, 230)", font-size: "24px"}

设置单个样式可以：

$("div").css("color", "red")

设置多个样式可以：

$("div").css({"color": "red", "font-size": "26px"})

显示和隐藏元素

貌似通过 css("display", "none") 就可以达到隐藏元素的效果，但是 jQuery 提供了一种更聪明的方法 hide 来给我们使用，之所以说它更聪明，是因为 hide 方法会记住元素在隐藏前 display 的值，这样再使用 show 方法时就可以恢复原本的 display 值。

click me

jQuery 代码如下：

  $("span").click(function() {
    $(this).hide();
  });

  $("button").click(function() {
    $("span").show();
  });

将 span 的 display 值设为 block，所以表现为：

点击 span 后，span 消失：

点击 button 后，span 再次显示：

且此时的 display 值仍为 block。

参考

http://book.douban.com/subject/24669823/

GPU云服务器云服务器 jQuery表单样式 jQuery搜索框样式 jQuery文本框样式获取元素样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78162.html

细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery 样式篇（二） - 动画效果

摘要：创建一个有背景色的添加方法如下当页面载入后，会逐渐消失，动画效果如同直接使用方法。动画并发效果当对多个元素应用动画效果时，这些效果是同时发生的，即并发的。除了使用 jQuery 内置的 hide,show,toggle 等方法来展现效果，还可以使用更为强大的 animate 方法来展现动画效果。创建一个有背景色的 div： div { width: 100px; hei...

PiscesYE 2019-08-19 14:53 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 事件篇（四） - 改变事件过程

摘要：事件对象是一种结构，它会在元素获得处理事件的机会时传递给调用的事件处理程序。事件对象的属性指的是事件目标，它将保存发生事件的目标元素。所以，接下来我们就要想办法改变事件过程来阻止这个行为。在《细说 jQuery 事件篇（三） - 事件传播》中提到了事件冒泡可能造成的弊端，当时举了 mouseout 的例子，对于 mouseout 这个特殊情况，我们可以用 hover 方法来解决，...

nifhlheimr 2019-08-19 14:53 评论0 收藏0
细说 jQuery 事件篇（五） - 事件的移除和重绑定

摘要：一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。事件重绑定我们添加一个按钮，当点击按钮后，所有的事件的处理程序又被重新绑定回来。如果我们需要移除已经注册的事件处理程序，使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。移除处理程序假设有个 div 和 button，当我们点击...

boredream 2019-08-19 14:53 评论0 收藏0