DOM操作之属性和样式操作

在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);
 })

转载于:https://www.cnblogs.com/yuyujuan/p/9410428.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值