3JQuery与Css

1.css()方法

这个方法集获取方法(getter)和设置方法(setter)于一体。

.css("name"),为取得某个样式属性的值，这个方法的参数是传递一个字符串形式的属性名。如：

var currentSize=parseFloat($("p").css('fontSize'));

$("p").css('fontSize')返回的字体大小带有px，所以通过parseFloat()方法会去掉px，这样得到一个数字型。

.css("name","value"),设置某个单独的样式属性和值。

.css({'property1':'value','property2:'value'})设置一组CSS样式，属性名最好带上引号。

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

如果属性名包含"-"的话，必须使用引号: 

$("p").css({ "margin-left": "10px", "background-color": "blue" }); 

以上的.css方法，属性名可以采用Css表示法也可以采用DOM表示法，Jquery都可以解释。

例如，以下语句在每次执行时都会将字体变大。

var si=parseFloat($("#content").css('fontSize'));

si*=1.4;

$("#content").css("fontSize",si);

.css()方法在改变背景图片backgroundImage的时候，它的属性值需要加上url()，如：

$("p").css("backgroundImage","url("+path+")"); 

css()对style和class属性都有效。例如移除style中的某个属性：

$(this).css('left','');

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

addClass(class),为每个匹配的元素添加指定的类名

addClass(function(index, class)),此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

$('ul li:last').addClass(function() {

  return 'item-' + $(this).index();

});

hasClass(class),检查当前的元素是否含有某个特定的类，如果有，则返回true。

2.slice(start,[end])方法

该方法返回字符串中从指定的字符开始的一个子串。

start参数，表示从开始选取子串，第一个元素位置是0，如果是负数，则可以从集合的尾部开始选起。

end参数，可选，结束选取子串的位置。如果不指定，则就是本身的结尾。

3基本隐藏和显示

.hide()方法会将匹配的元素集合的内联style属性设置为display:none，但它的不同之处是能够把display的值变成none之前，记住原先display值，通常是block或inline。并返回被隐藏元素的jquery对象。

.show()方法会将匹配的元素集合的display属性，恢复为应用display:none之前的可见属性。

hide("speed",[fn])和show(speed,[fn])

以优雅的动画渐渐隐藏和显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。它会同时减少元素高度，宽度和不透明度，直至这3个属性的值都达到0.

speed，有三种预定的速度: "slow"(0.6秒),"normal"(0.4秒),"fast"(0.2秒)或表示动画时长的毫秒数如：1000。

fn，可选，为动画完成后执行的函数。

例：

if($('#content').css("display")=="none"){

$('#content').show("2000");//$('#content').show("fast");

//或$('#content').fadeIn("2000");

}else{

$('#content').hide("2000");

//或$('#content').fadeOut("2000");

}

toggle()，切换元素的可见状态。

.fadeIn(speed,[fn])

通过不透明度的变化来实现所有匹配元素的显示效果，并在动画完成后可选地触发一个回调函数。

.fadeOut(speed,[fn])

通过不透明度的变化来实现所有匹配元素的隐藏效果，并在动画完成后可选地触发一个回调函数。

fadeIn和fadeOut的参数同show和hide的参数意义是一样的。

.fadeTo(speed,opacity,[fn])

把所有匹配元素的不透明度以渐进的方式调整到指定的不透明度，并在动画完成后可选的触发一个函数。

speed，有三种预定的速度: "slow"(0.6秒),"normal"(0.4秒),"fast"(0.2秒)或表示动画时长的毫秒数如：1000。

opacity(Number) : 要调整到的不透明度值(0到1之间的数字).

fn，可选，为动画完成后执行的函数。

例如：$('#content').fadeTo("4000",0.25);

.slideDown(speed,[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数.sliceDown的参数同上。

如：$('#content').slideDown("8000");

.slideUp(speed,[fn])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。slideUp的参数同上。

如：$('#content').slideUp("8000");

.animate(params[,speed[,easing[,fn]]])

这个函数的关键在于可以指定动画形式以及动画后元素的样式属性。

params: 一组包含作为动画结束后元素的样式属性和及其值的集合。样式的属性值如果是一个数值，样式属性就会从当前的值渐变到指定的值,如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

还可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.但是不能操作它改变背景色：backgroundColor，要改变背景色需要通过.css() 

如：$("div").css({display:"block",backgroundColor:"#eeeeee"});

speed和fn的取值同上。

easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

例如：下面的animate方法每次执行元素会右移50px，opacity(透明度)降为0.5，字体大小为30

$('#content').animate({left:"+=50",top:"+=50",width:"100",opacity:"0.5"，height:"100",fontSize:"30"},1000);

******************

我们在animate()方法定位时(通过设置left和top)，必须明确CSS对我们要改变的元素所施加的限制。例如，在元素的CSS定位position没有设置成relative或absolute的情况下，调整left属性对于匹配的元素毫无作用。只要通过内嵌或内联等方式设置了position属性值,就可以在animate通过调整left,top属性来定位。

******************

JavaScript  CSS Style属性对照表

[第一个参数为CSS里的写法,第二个参数为javascript里的写法]

盒子标签和属性对照 

CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 

border  border 

border-bottom  borderBottom 

border-bottom-color  borderBottomColor 

border-bottom-style  borderBottomStyle 

border-bottom-width  borderBottomWidth 

border-color  borderColor 

border-left  borderLeft 

border-left-color  borderLeftColor 

border-left-style  borderLeftStyle 

border-left-width  borderLeftWidth 

border-right  borderRight 

border-right-color  borderRightColor 

border-right-style  borderRightStyle 

border-right-width  borderRightWidth 

border-style  borderStyle 

border-top  borderTop 

border-top-color  borderTopColor 

border-top-style  borderTopStyle 

border-top-width  borderTopWidth 

border-width  borderWidth 

clear  clear 

float  floatStyle 

margin  margin 

margin-bottom  marginBottom 

margin-left  marginLeft 

margin-right  marginRight 

margin-top marginTop 

padding  padding 

padding-bottom  paddingBottom 

padding-left  paddingLeft 

padding-right  paddingRight 

padding-top  paddingTop 

border-style  borderStyle

border-style取值：

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

颜色和背景标签和属性对照 

CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 

background  background 

background-attachment  backgroundAttachment 

background-color  backgroundColor 

background-image  backgroundImage 

background-position  backgroundPosition 

background-repeat  backgroundRepeat 

color  color 改变字体颜色

样式标签和属性对照 

CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 

visibility   visibility

display   display 

list-style-type   listStyleType 

list-style-image  listStyleImage 

list-style-position  listStylePosition 

list-style  listStyle 

white-space  whiteSpace 

文字样式标签和属性对照 

CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 

font  font 

font-family  fontFamily 

font-size  fontSize 

font-style  fontStyle 

font-variant  fontVariant 

font-weight  fontWeight 

文本标签和属性对照 

CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 

letter-spacing  letterSpacing 

line-break  lineBreak 

line-height  lineHeight 

text-align  textAlign 

text-decoration  textDecoration 

text-indent  textIndent 

text-justify  textJustify 

text-transform  textTransform 

vertical-align  verticalAlign

z属性

CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 

z-index    zIndex

默认z-index?