zoukankan      html  css  js  c++  java
  • jQuery 属性和CSS

    HTML代码:

    <div id="div1">
    	div1
    	<p>1</p>
    	<p>2</p>
    	<p>3</p>
    </div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    

     

    attr()

    设置节点的属性

    $("#div1").attr("class","cls");
    

    取到节点的属性

    console.log($("#div1").attr("id"));
    

    传入对象,以键值对的形式同时设置多对属性

    $("#div1").attr({
    	//"class":"cls1",
    "class":$("#div1").attr("class","cls1"),
    	"name":"name1",
    	"style":"font-size:24px;color:blue;"
    });
    

    删除节点属性

    $("#div1").removeAttr("class");
    

    【prop和attr一样,都可以对节点属性进行读取和设置 】

    二者的不同:

    1.在读取 属性名="属性值" 的属性值时,attr将返回属性值和undefined;

    而prop返回true或false 也就是说,attr要取的属性,必须是在标签上已经写明的属性,否则无法取到

    console.log($("input:eq(0)").attr("checked"));
    console.log($("input:eq(0)")).prop("type");
    

      

    在原有class的基础上,新增class名

    $("#div1").addClass("cls2");
    

    删除指定的class名称,其余未删除的class名,依然保留

    $("#div1").removeClass("cls2");
    

    切换class,如果有指定class就删除,没有就新增

    $("button:eq(0)").click(function(){
    	$("#div1").toggleClass("div1");
    });
    

    html() 取到或设置节点中的html代码;

    console.log($("#div1").html("<p>111</p>").html());
    

      

    text() 取到或设置节点中的文本;

    console.log($("#div1").text("<p>111</p>").text());
    

      

    .val() 取到或设置表单元素的value值。

    console.log($("input").val("<p>111</p>").val());
    

      

    .css() 给节点添加css样式,属于行级样式表权限。

    $("#div1").css("color","green");
    

      

    同时给一个节点添加多对css样式。

    $("#div1").css({
        "color":"green",
        "font-size":"14px"
    });
    

      

    通过回调函数返回值,修改css的样式。

    $("button:eq(0)").click(function(){
        var id = setInterval(function(){
            $("#div1").css({
                "width":function(index,value){
                var v = parseFloat(value) + 1;
                    if(v>600){
                        clearInterval(id);
                    }
                    return v+"px";
                }
            });
        },10);
    });                
    

      

    取到或者设置节点的 宽高。只包含width/height

    console.log($("#div1").height(400));
    console.log($("#div1").width("400px"));
    

    取到 节点 的宽度+padding。 不包含border和margin

    console.log($("#div1").innerHeight());
    console.log($("#div1").innerWidth());
    

    不传参数, 表示 宽高+padding+border

    传入true,表示 宽高+padding+border+margin

    console.log($("#div1").outerHeight());
    console.log($("#div1").outerWidth(true));
    

    返回一个节点,相对于浏览器左上角的偏移量。

    返回一个对象{top:20,left20}

    此方法,测量时,会将margin算作偏移量的距离。

    console.log($("#div1").offset());
    

    返回一个节点,相对于父容器的偏移量。

    注意: ① 使用此方法,要求父元素必须是定位元素。 如果父元素不是定位元素,则依然是相对于浏览器左上角进行测量。

    ② 次方法,测量偏移时,将不考虑margin。 而会将margin视为当前容器的一部分。

    console.log($("#div1").position());
    

    scrollTop: 设置或取到指定节点的滚动条的位置。

    console.log($("#div1").scrollTop(100));
    

      

  • 相关阅读:
    21.Merge Two Sorted Lists 、23. Merge k Sorted Lists
    34. Find First and Last Position of Element in Sorted Array
    leetcode 20. Valid Parentheses 、32. Longest Valid Parentheses 、301. Remove Invalid Parentheses
    31. Next Permutation
    17. Letter Combinations of a Phone Number
    android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事项
    oc 异常处理
    oc 类型判断
    oc Delegate
    oc 协议
  • 原文地址:https://www.cnblogs.com/1960366876tZ/p/8999426.html
Copyright © 2011-2022 走看看