jQuery的属性操作

jquery 里面可以进行一堆操作
进行一个简单的布局和样式书写

 <style>
        div{
            border: 1px solid #000;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
        }
    </style>

<input type="text" id="ipt" value="123" class="info"/>
<input type="text" id="ipt1" value="789" class="info"/>
<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>
<div class="box  block"></div>
<input type="text" id="list"/>
<div class="content"></div>
<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球

1.attr属性操作

 console.log($("#ipt").attr("value"));

    $("#ipt").attr("value", "456");

 回调函数写法
    $("#ipt").attr("value", function (index, val) {
        console.log(index, val);
        return val * val;
    });

 console.log($(".info").attr("value"));

    $("#ipt").removeAttr("value");

2.prop属性操作

 *console.log($("#ipt1").prop("value"));
     $("#ipt1").prop("value","abc");

     $("#ipt1").prop("value",function (index,val){
     console.log(index,val);
     return val+"m";
     });

     $("#ipt1").removeProp("value");
     $("#ipt1").removeAttr("value");

3.自定义属性

    $("#ipt1").attr("data-index",0);
    console.log($("#ipt1").attr("data-index"));
    $("#ipt1").removeAttr("data-index");

    $("#ipt1").prop("data-page",1);
    console.log($("#ipt1").prop("data-page"));
    $("#ipt1").removeProp("data-page");
    console.log($("#ipt1").prop("data-page"));

    $("#fbtn").click(function (){
        $(".ckbox").each(function (index){
            console.log(!undefined);
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });

4.class 属性操作

   $(".block").addClass("box1 user");

    $(".block").removeClass("user");

    //toggleClass  类别切换
    $(".block").toggleClass("box");
    $(".block").toggleClass("box");

    $(".block").addClass(function (index,elec){
        return "data";
    })
    $(".block").removeClass(function (index,elec){
        console.log(index,elec);
        return "data";
    });
    $(".block").toggleClass(function (index,elec){
        console.log(index,elec);
        return "user";
    },false);

5.文本或者值操作

	html()  获取或者设置元素的内容值
    text()  获取或者设置元素的文本值
    val()   获取或者设置元素value

    $(".content").html("<span>123</span>");
    $(".content").text("<span>123</span>");

    console.log($(".content").html());
    console.log($(".content").text());

    $(".content").html(function (index,val){
        console.log(index,val);
        return "不知道"
    });
    $(".content").text(function (index,val){
        console.log(index,val);
        return "text"
    });

6.值操作

    val   获取或者设置value
    $("#list").val("。。。。");
    console.log($("#list").val());
    $("#list").val(function (index,val){
            console.log(index,val);
        return "换值";
    });

    $(".hobby").val(["a","","c"]);*/

    $(".hobby").eq(0).val(["a"]);