在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法。

在开始操作前,我们需要先在html中添加如下代码,后面所有的操作都是基于该DOM结构进行的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="jquery-3.2.1.js"></script>
  <style>
    .red{
      color:red;
    }
    .blue{
      color:blue;
    }
    .yellow{
      color:yellow;
    }
    </style>
</head>
<body>
  <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  <ul>
    <li title='苹果' class="red">苹果</li>
    <li title='香蕉'>香蕉</li>
    <li title='荔枝'>荔枝</li>
    </ul>
  <script>
  
  </script>
</body>
</html>

属性操作

获取和设置属性

在前面我们提到过一个方法attr(),通过给该方法添加一个参数(属性名称),可以获取相应信息。

$(function(){
var txt = $("ul li:eq(1)").attr("title");
console.log(txt);
})

当给该方法传递多个参数时,可以用来设置相关属性。

$(function(){
$("ul li:eq(1)").attr("title","最喜欢的水果");
$("ul li:eq(2)").attr({"title":"水果","name":"荔枝"});
})

删除属性

在jQuery中,使用removeAttr()方法删除某个元素的特点属性。

 $(function(){
$("p").removeAttr("title");
})

样式操作

获取和设置样式

因为class也是和title一样,也属于元素的属性,所以,我们可以使用attr()来获取和设置元素的class。


$(function(){
  var txt1 = $("ul li:eq(0)").attr("class");
  console.log(txt1);
  $("ul li:eq(0)").attr("class","blue");
  var txt2 = $("ul li:eq(0)").attr("class");
  console.log(txt2);
})

   

使用attr()方法设置样式时,新的样式覆盖了之前的样式。

添加样式

有的时候,我们希望为某个元素添加样式,但是又不覆盖之前原有的样式,很明显,attr()并不能满足我们的要求,这个时候,我们需要用到一个新的方法addClass(),该方法是在不改变原有样式的基础上,在后面添加新的样式。

 $(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").addClass("blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})

   

移除样式

在上面,我们知道可以用removeAttr()方法删除元素的属性,自然,这个方法可以用来删除元素的样式。

$(function(){
$("ul li:eq(0)").removeAttr("class");
})

 

除了删除属性的方法外,jQuery中,还有一个专门用来删除元素样式的方法:removeClass(),参数为需要删除的类名,该方法可以同时删除一个或多个样式,多个类名中间用空格间隔即可,当该方法不带参数时,表明要删除该元素的所有方法。

 $(function(){
$("ul li:eq(0)").removeClass("red");
})

  

判断是否含有某个样式

hasClass()方法可以用来判断元素中是否含有某个class,如果有,返回true,否则,返回false。

 $(function(){
var txt1 = $("ul li:eq(0)").hasClass("red");
var txt2 = $("ul li:eq(1)").hasClass("red");
console.log(txt1);
console.log(txt2);
})

DOM操作之属性和样式操作的更多相关文章

  1. jQuery属性和样式操作

    回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. jQuery(三):样式操作

    一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...

  4. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  5. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  6. jQuery使用(二):DOM样式操作和属性操作

    DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...

  7. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

  8. Dom样式操作-属性操作

    1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...

  9. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

随机推荐

  1. 一个Flex 对话框的坑

    最近在项目中遇到一个问题,在Flex中使用Alert.show("this is content!", "title");发现对话框可以弹出来,但是文本始终不显 ...

  2. 模拟QQ分组

    package com.lixu.fenzu; import java.util.ArrayList; import java.util.HashMap; import android.app.Lis ...

  3. Java——多线程小例子

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  4. 对HTML(HyperText Markup Language)的认识以及总结

    一.HTML的基础结构 以上图片可以看出HTML的基础结构: 文档声明+<html>根元素(也叫顶级元素)------><html>里包括<head>元素+& ...

  5. C++设计模式之访问者模式

    简述 访问者模式(Visitor Pattern)表示一个作用于某对象结构中的各元素的操作,它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 代码实现: // Visitor.cpp : ...

  6. Motorola C118 PCB原理高清图

  7. PAT 5-9 输出华氏-摄氏温度转换表   (10分)

    输入2个正整数lower和upper(lower≤\le≤upper≤\le≤100),请输出一张取值范围为[lower,upper].且每次增加2华氏度的华氏-摄氏温度转换表. 温度转换的计算公式: ...

  8. SVM的新理解

    svm导出的原始问题然后利用KKT条件,为何还需要对偶空间? 一方面,实际上KKT条件怎么得到的?KKT条件的推导是:svm原始问题->极大极小问题(先算极小这步,但极小这步中α是有约束的,不好 ...

  9. vec2d

    namespace : cv::vec2d; void src2ipm(cv::Mat &srcimage, cv::Mat& uvgrid, cv::Mat& outimag ...

  10. JAVA爬取百度贴吧图片

    package com.wang.xiaowei.utils; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.code ...