JQ属性和css部分测试

时间：2023-03-08 22:09:52

1、attr(name|properties|key,value|fn)  设置或返回被选元素的属性值。

<div class="attr">设置或返回被选元素的属性值。</div>

    <script>

        $(".attr").html($(".attr").html()+$(".attr").attr("class"));

    </script>

2、removeAttr(name)  从每一个匹配的元素中删除一个属性

<div class="removeAttr" id="abc">从每一个匹配的元素中删除一个属性</div>

    <script>

        $(".removeAttr").click(function(){

            $(this).removeAttr("id");

        })

    </script>

3、prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。

$("input[type='checkbox']").prop("checked");

4、removeProp(name) 用来删除由.prop()方法设置的属性集

$(".p01").removeProp("disabled");

5、addClass(class|fn) 为每个匹配的元素添加指定的类名。

$("option").addClass("selected");

6、removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。

$("option").removeClass("selected");

7、toggleClass(class|fn[,sw])  如果存在（不存在）就删除（添加）一个类。

$("option").toggleClass("selected");

8、html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

$('p').html();

获取内容

9、text([val|fn]) 取得所有匹配元素的内容。

$('p').text();

10、val([val|fn|arr])  获得匹配元素的当前值。

$("input").val();

一般都是用来获取表单元素的

11、css(name|pro|[,val|fn])  访问匹配元素的样式属性。

$("p").css({ "color": "#ff0011", "background": "blue" });

12、jQuery.cssHooks 直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。

(function($) {

    // first, check to see if cssHooks are supported

    if ( !$.cssHooks ) {

      // if not, output an error message

      throw("jQuery 1.4.3 or above is required for this plugin to work");

      return;

    }

      $.cssHooks["someCSSProp"] = {

      get: function( elem, computed, extra ) {

        // handle getting the CSS property

      },      set: function( elem, value ) {

        // handle setting the CSS value

     }

    };

  })(jQuery);  

目的是为了一些前缀的标准统一化，让设置css时可以直接使用不加前缀就可以兼容。

13、offset([coordinates]) 获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );

14、position()  获取匹配元素相对父元素的偏移。

var p = $("p:first");

var position = p.position();

$("p:last").html( "left: " + position.left + ", top: " + position.top );

15、scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。

var p = $("p:first");

$("p:last").text( "scrollTop:" + p.scrollTop() );

16、scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。

var p = $("p:first");

$("p:last").text( "scrollLeft:" + p.scrollLeft() );

17、height([val|fn]) 取得匹配元素当前计算的高度值（px）。

 $("button").click(function(){

    $("p").height(function(n,c){

    return c+10;

    });

  });

返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

18、width([val|fn]) 取得第一个匹配元素当前计算的宽度值（px）。

$("p").width();

19、innerHeight() 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

$(".p01").innerHeight();

20、innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

$(".p01").innerWidth();

21、outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。

$(".p01").outHeight();

22、outerWidth([options]) 获取第一个匹配元素外部宽度（默认包括补白和边框）。

$(".p01").outWidth();

它们都可以传个true，把外边距计算在内

相关文章