jQuery属性与CSS操作

属性
1.属性
    1.1 attr(name|properties|key,value|key,fn)
        1) 获取属性值    $("img").attr("src");
        2) 设置属性值    $("img").attr("title","你好");$("img").attr({src:"img1.png",alt:"img1"})
        3) 设置属性值  $("img").attr("alt",function(index,value){return value +　index}) //index为当前元素的索引，value为"alt"原先的属性值
    1.2 removeattr(name)
        删除一个属性    $("img").removeattr("alt");
    1.3 prop(name|properties|key,value|key,fn)
         $("input[type='checkbox']").prop("checked", true);
        $("input[type='checkbox']").prop("checked", function( i, val ) {    return !val;    });
    1.4 removeprop(name)
        用来删除由.prop()方法设置的属性集
    1.5 attr() 与 prop() 的区别
        具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
2.css类
    2.1 addclass(class|fn)
        $("p").addclasss("active focus");
        $("ul li").addclass(function(i,class){return class+i})
    2.2 removeclass([name|fn])
        $("p").removeclass("active");
        $("p").removeclass(function(){return  $(this).attr("class")})
    2.3 toggleclass(class|fn)
        $("p").toggleclass("active");
        $(".class").toggleclass(function(){
            if($(this).parent().is(".myclass"))
            {
                return "classone";
               }
            else
            {
                return "classtwo";
            }
           })
3.html代码|文本|值
    3.1 html([val|fn])    
        获取内容  $("div").html()    取得第一个匹配元素的html内容
        设置内容      $("div").html("

htmlhtmlhtml

");        
        $("div").html(function(index,html){return html+index})
    3.2 text([val|fn])
        获取内容    $("p").text()
        设置内容    $("p").text("texttexttext")
                $("p").text(function(index,text){return index+text})
    3.3 val([val|fn|arr])
        获取值    $("input").val();
        设置值    $("input").val("2222222");
                $("input").val(function(index,value){return index + value})
        用于 check/select 的值    //数组操作
            $("input").val(["check2", "radio1"]);
CSS
1.css
    1.1 css(name|pro|[,val|fn])
        获取样式属性值        $("p").css("color")
        设置样式属性值        $("p").css("color","red")
                        $("p").css({color:"red",width:"100px"})
                        $("p").css({
                                        width:function(index,value){return parseFloat(value) * 1.2;},
                                        height:function(index,value){return parseFloat(value) * 1.2;}
                                    })
    1.2 jQuery.cssHooks
2.位置
    2.1 offset([coordinates]) 获取匹配元素在当前视口的相对偏移
        获取偏移值    $("p").offset()
        设置偏移值    $("p").offset({top:100,left:100})
                    $("p").offset(function(i,c){    //c代表选择器的当前坐标
                        newPos=new Object();
                        newPos.left=c.left+100;
                        newPos.top=c.top+100;
                        return newsPos;
                    })
    2.2 position() 获取匹配元素相对父元素的偏移。
        $("p").position()
    2.3 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
        获取        $("p").scrollTop()
        设置        $("p").scrollTop(500)
    2.4 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
        获取        $("p").scrollLeft()
        设置        $("p").scrollLeft(500)
3.尺寸
    3.1 height([val|fn])
        获取        $("p").height()
        设置        $("p").height(500)
                $("p").height(function(i,c){return c+200;})
    3.2 width([val|fn])
        获取        $("p").width()
        设置        $("p").width(500)
                $("p").width(function(i,c){return c+200;})    
    3.3 innerHeight() 获取第一个匹配元素内部区域高度（包括补白(padding)、不包括边框）。    
        $("p").innerHeight();
    3.4 innerWidth() 获取第一个匹配元素内部区域宽度（包括补白(padding)、不包括边框）。    
        $("p").innerWidth();
    3.5 outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。
        如果 options 值为true 则计算边距(margin)在内,默认值为false
    3.6 outerWidth([options]) 获取第一个匹配元素外部宽度（默认包括补白和边框）。
        如果 options 值为true 则计算边距(margin)在内,默认值

以上就是jQuery属性与CSS操作的内容，更多相关文章请关注PHP中文网（www.php.cn）！

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！