jQuery中DOM 属性使用实例详解上篇

更新时间：2022年08月30日 16:11:40 作者：RiemannHypothesis

这篇文章主要为大家介绍了jQuery中DOM 属性使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

DOM属性(上)

.addClass()

为每个匹配的元素添加指定的样式类名

值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样：

$("p").addClass("myClass yourClass");

.addClass() 方法允许我们通过传递一个用来设置样式类名的函数。

$("ul li:last").addClass(function(index) {
  return "item-" + index;
});

addClass还可以接受第二个参数，下面是使用例子

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
    return addedClass;
  });
</script>
</body>
</html>

.removeClass()

移除集合中每个匹配元素上一个，多个或全部样式。

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除。

从所有匹配的每个元素中同时移除多个用空格隔开的样式类，像这样:

$('p').removeClass('myClass yourClass')

这个方法通常和 .addClass() 一起使用用来切换元素的样式, 像这样：

$('p').removeClass('myClass noClass').addClass('yourClass');

这里从所有段落删除 myClass 和 noClass 样式类, 然后 yourClass 样式被添加。

removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式。

$('li:last').removeClass(function() {
  return $(this).prev().attr('class');
});

.toggleClass()

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

$('#foo').toggleClass(className, addOrRemove);

等价于

if (addOrRemove) {
    $('#foo').addClass(className);
}
else {
    $('#foo').removeClass(className);
}

.hasClass()

确定任何一个匹配元素是否有被分配给定的（样式）类。

如果匹配元素上有指定的样式，那么.hasClass() 方法将返回 true ，即使元素上可能还有其他样式。举个例子, 给上文的HTML加上下面的代码将返回 true：

<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo')

以上就是jQuery中DOM 属性使用实例详解上篇的详细内容，更多关于jQuery DOM 属性的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

jQuery实现获取多选框的值示例
这篇文章主要介绍了jQuery实现获取多选框的值,结合实例形式分析了jQuery事件响应及页面元素属性获取相关操作技巧,需要的朋友可以参考下
2020-02-02
jquery实现textarea输入框限制字数的方法
这篇文章主要介绍了jquery实现textarea输入框限制字数的方法,通过keyup事件实时读取textarea输入框的字数来实现这一功能,非常具有实用价值,需要的朋友可以参考下
2015-01-01
jQuery中iframe的操作(点击按钮新增窗口)
<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口)，需要的朋友参考下吧
2016-04-04
jquery引入外部CDN 加载失败则引入本地jq库
这篇文章主要介绍了网站加载第三方CDN，如果jQuery库不成功则加载本地的jquery的实现代码,需要的朋友可以参考下
2018-05-05
用jQuery的AJax实现异步访问、异步加载
这篇文章主要介绍了用jQuery的AJax实现异步访问、异步加载，jQuery的ajax异步实现数据交互的相关技巧,并提供了完整示例demo供读者参考,需要的朋友可以参考下
2016-11-11
基于jQuery的自动完成插件
感觉这个东西很常用，很多其它js框架里有，但是太大了，用不了太多，自己写了个。需要的朋友可以参考下。
2011-02-02
jquery实现模拟百分比进度条渐变效果代码
这篇文章主要介绍了jquery实现模拟百分比进度条渐变效果代码,涉及jQuery基于时间函数操作页面元素样式变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
Bootstrap框架建立树形菜单(Tree)的实例代码
这篇文章主要介绍了在Bootstrap框架下怎么去建立一个树形菜单，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2017-10-10
jQuery动态添加、删除元素的方法
添加、删除元素在项目中经常会用到，下面为大家介绍下使用jQuery对元素进行动态添加和删除，具体的实现如下，希望对大家有所帮助
2014-01-01
jQuery实现可编辑的表格
这篇文章主要为大家详细介绍了jQuery实现可编辑的表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12