• 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("<p><span>htmlhtmlhtml</span></p>");        
            $("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","100px"})
                            $("p").css({
                                            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)在内,默认值

  • 相关阅读:
    LC.225. Implement Stack using Queues(using two queues)
    LC.232. Implement Queue using Stacks(use two stacks)
    sort numbers with two stacks(many duplicates)
    LC.154. Find Minimum in Rotated Sorted Array II
    LC.81. Search in Rotated Sorted Array II
    LC.35.Search Insert Position
    前后端分离:(一)
    Redis基本使用(一)
    GIT篇章(二)
    GIT篇章(一)
  • 原文地址:https://www.cnblogs.com/qianyouluo/p/5029539.html
Copyright © 2020-2023  润新知