jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

  • html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
  • DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
  • 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
  • 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()    设置属性值或者 返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $('div').attr('class','box')
        //2.设置多个值，参数为对象，键值对存储
        $('div').attr({name:'hahaha',class:'happy'})

 

removeAttr()    移除属性

//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//删除多个属性
$('#box').removeAttr('name class');

 

prop()  方法是  设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

 

关于attr()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    男<input type="radio" id = "test" name="sex" checked/>
    女<input type="radio" id = "test2" name="sex"/>
    <button>提交</button>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            // 获取第一个input
            var el = $("input").first();
            // undefined  因为attr是获取的这个对象属性节点的值 , 很显然此时没有这个属性节点 , 自然输出undefined
            console.log(el.attr("style"));
            // 输出CssStyleDeclaration 对象 , 对于一个DOM对象 , 是具有原生的style对象属性的 ,所以输出了style对象
            console.log(el.prop("style"));
            console.log(document.getElementById("test").style);
            
            $("button").click(function () {
                alert(el.prop("checked") ? "男":"女");
            })



        })
    </script>

</body>
</html>

 

什么时候使用attr(),什么时候使用prop()

1 是有true,false两个属性使用prop();

2 其他则使用attr();

 

addClass(添加两个类名)

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

$("div").addClass("box"); // 追加一个类名到原有的类名

 

还可以为匹配的元素添加多个类名

$("div").addClass("box box2"); // 追加多个类名

 

remveClass

从所有匹配的元素中删除全部或者指定的类 

移除指定的类(一个或多个)

$("div").removeClass("box");

移除全部的类 

$("div").removeClass();

 

可以通过添加删除类名 , 来实现元素的显示隐藏

代码如下 : 

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

 

案例 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

 

toggleClass       如果存在(不存在)  就删除(添加) 一个类

语法 : 

toggleClass("box")

$("span").click(function(){
   // 动态的切换class类名为  active
   $(this).toggleClass("active")  
})

 

html    获 取值

语法 : 

html()  是获取选中标签元素中所有的内容 

$("#box").html();

设置值  :   设置该元素的所有内容  会替换掉标签中原来的内容 

$("#box").html("<a href = "https://www.baidu.com">百度一下</a>");

text   获取值 :   text()  获取匹配元素包含的文本内容

语法 : 
$("#box").text();
 
设置值 : 
设置该所有的文本内容 
$("#box").text("<a href = "https://www.baidu.com">百度一下</a>");

val  获取值 : val用于表单控件获取值 , 

比如 :  input , textarea  ,  select  等等 
 
设置值 : 
$("input").val("设置了表单控件中的值")