jQuery属性与CSS操作

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

属性

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",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)在内,默认值

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航