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

目录
  • DOM属性(上)
    • .addClass()
    • .removeClass()
    • .toggleClass()
    • .hasClass()

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 属性的资料请关注我们其它相关文章！

赞 (0)

相关推荐

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

    目录 DOM属性(下) .html() .val() .attr() .removeAttr() DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取. $('div.demo-container').html(); html()方法还可以设置每一个匹配元素的html内容. 我们可以使用 .html() 来设置元素

  • 详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法

    详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法

    jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined.   注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: 复制代码 代码如下: <!DOCTYPE html>

  • jquery获取并修改触发事件的DOM元素示例【基于target 属性】

    jquery获取并修改触发事件的DOM元素示例【基于target 属性】

    本文实例讲述了jquery获取并修改触发事件的DOM元素.分享给大家供大家参考,具体如下: 需求 当点击关注后,改变按钮样式并显示取消关注,如图 实现 利用jQuery的 target获取到触发该事件的dom,然后修改它 target 属性 代码: HTML <div class="people-desc"> <div class="people-name">{$vo['nickname']}</div> <div clas

  • jQuery 获取/设置/删除DOM元素的属性以a元素为例

    jQuery的属性操作非常简单,下面以一个a元素来说明属性的获取/设置/删除操作 复制代码 代码如下: <body> <a>jquery.com</a> </body> 添加属性 $('a').attr('href', 'http://www.jquery.com') 添加多个属性 $('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) 获取属性 $('a').attr('hre

  • 有关jquery与DOM节点操作方法和属性记录

    有关jquery与DOM节点操作方法和属性记录

    网上找了份jquery的操作节点方法清单.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.insertBefore(A

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

    目录 DOM属性(上) .addClass() .removeClass() .toggleClass() .hasClass() DOM属性(上) .addClass() 为每个匹配的元素添加指定的样式类名 值得注意的是这个方法不会替换一个样式类名.它只是简单的添加一个样式类名到元素上. 对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样: $("p").addClass("myClass yourClass"); .addClass() 方法允许我们

  • jQuery中ajax - get() 方法实例详解

    jQuery中ajax - get() 方法实例详解

    在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

  • jQuery中ajax - post() 方法实例详解

    jQuery中ajax - post() 方法实例详解

    在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

  • JQuery中DOM事件绑定用法详解

    本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

  • Jquery中基本选择器用法实例详解

    本文实例讲述了Jquery中基本选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • JQuery中层次选择器用法实例详解

    本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jQuery中on()方法用法实例详解

    本文实例分析了jQuery on()方法的用法.分享给大家供大家参考.具体分析如下: 一.jQuery on()方法的使用:   on(events,[selector],[data],fn)   events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.如果选择器为null或省略,当它到达选定的元素,事件总是触发. data:当

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • Kotlin 语言中调用 JavaScript 方法实例详解

    Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

随机推荐