文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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 属性的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯