jquery之属性操作

jQuery之属性操作

相信属性这个词对大家都不陌生。今天我就给大家简单地介绍一下JQuery一些属性的操作

属性一共分三大类

一.基本属性

1.attr

2.removeAttr

3.prop

4.removeprop

html代码

   <div id="box1">菜单</div>
   <div id="box2" class="hezi">123</div>
   <input type="checkbox" >
   <p class="p1">456</p>

css代码

   #box1{
        width: 100px;
        height: 100px;
        background: red;
    }
    #box2{
        width: 100px;
        height: 100px;
        background: blue;
    }

jQuery代码

     //设置或返回被选元素的属性值。
    console.log($("#box1").attr("id"));

    //从每一个匹配的元素中删除一个属性
    console.log($("#box2").removeAttr("class"));

    //选中复选框为true，没选中为false
    $("input[type='checkbox']").prop("checked");

    $("p").prop("class","p1");

    //用来删除由.prop()方法设置的属性集
    $("p").removeProp("class");

二.css类

1.addClass

2.removeClass

1.toggleClass

html代码

    <p></p>

jQuery代码

     //为每个匹配的元素添加指定的类名。
    $("p").addClass("selected");

    //一个或多个要添加到元素中的CSS类名请用空格分开
    $("p").addClass("selected1 selected2");

    //从所有匹配的元素中删除全部或者指定的类。
    $("p").removeClass("selected");

    //如果存在（不存在）就删除（添加）一个类。
    $("p").toggleClass("selected");

三.HTML代码/文本/值

1.html

2.text

1.val

hHTML代码

    <p>1<span>2</span>3</p>
    <input type="text" value="abc"/>

jQuery代码

    //取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
    console.log($("p").html());

    //取得所有匹配元素的内容。
    console.log($("p").text());

    //获得匹配元素的当前值。
    console.log($("input").val());

上面这些代码大家直接用就可以查看效果，希望对大家有所帮助。