jQuery 사용자 매뉴얼 3 CSS Operation_jquery

传统javascript对css的操作相当繁琐，比如

css

取它的background语法是 document.getElementById("a").style.background，而jQuery对css更方便的操作，$("#a").background()，$("#a").background(“red”)
$("#a")得到jQuery对象[

]
$("#a").background()将取出该对象的background样式。
$("#a").background(“red”)将该对象的background样式设为redjQuery提供了以下方法，来操作css
background ()   background (val)     color()    color(val)     css(name)    css(prop)   
css(key, value)      float()   float(val)   height()   height(val)  width()  width(val) 
left()   left(val)       overflow()   overflow(val)   position()   position(val)  top()   top(val)

这里需要讲解一下css(name)  css(prop)  css(key, value)，其他的看名字都知道什么作用了！

div id="a" style="background:blue; color:red">cssdiv>P id="b">testP>

css(name)  获取样式名为name的样式
$("#a").css("color") 将得到样式中color值red，("#a").css("background ")将得到blue

css(prop)  prop是一个hash对象，用于设置大量的css样式
$("#b").css({ color: "red", background: "blue" });
最终效果是

test

,{ color: "red", background: "blue" }，hash对象，color为key，"red"为value，

css(key, value)  用于设置一个单独得css样式
$("#b").css("color","red");最终效果是

test

                                              四：JavaScript处理

$.browser()  判断浏览器类型，返回boolen值

$(function(){
    if($.browser.msie) {
        alert("这是一个IE浏览器");}
    else if($.browser.opera) {
        alert("这是一个opera浏览器");}
})

当页面载入式判断浏览器类型，可判断的类型有msie、mozilla、opera、safari

$.each(obj, fn)  obj为对象或数组，fn为在obj上依次执行的函数，注意区分$().each()

$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });

    分别将0，1，2为参数，传入到function(i)中

$.each({ name: "John", lang: "JS" },  function(i){ alert( "Name: " + i + ", Value: " + this );

    { name: "John", lang: "JS" }为一个hash对象，依次将hash中每组对象传入到函数中

$.extend(obj, prop)  用第二个对象扩展第一个对象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

执行后settings对象为{ validate: true, limit: 5, name: "bar" }
可以用下面函数来测试

$(function(){
       var settings = { validate: false, limit: 5, name: "foo" };
        var options = { validate: true, name: "bar" };
        $.extend(settings, options);
        $.each(settings,  function(i){ alert( i + "=" + this ); });
})

$.grep(array,fn)  通过函数fn来过滤array，将array中的元素依次传给fn，fn必须返回一个boolen，如fn返回true，将被过滤

$(function(){
        var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
        $.each(arr, function(i){ alert(i); });
})

我们可以看待执行$.grep后数组[0,1,2,3,4]变成[0，1]

$.merge(first, second)  两个参数都是数组，排出第二个数组中与第一个相同的，再将两个数组合并

$(function(){ 
        var arr = $.merge( [0,1,2], [2,3,4] )
        $.each(arr,  function(i){ alert(i); });
})

可以看出arr的结果为[0,1,2,3,4]

$.trim(str)  移出字符串两端的空格
    $.trim("   hello, how are you?   ")的结果是"hello, how are you?"

                                   五：动态效果

       在将这部分之前我们先看个例子，相信做网页的朋友都遇到n级菜单的情景，但点击某菜单按钮时，如果它的子菜单是显示的，则隐藏子菜单，如果子菜单隐藏，则显示出来，传统的javascript做法是先用getElementById取出子菜单所在容器的id，在判断该容器的style.display是否等于none，如果等于则设为block,如果不等于这设为none，如果在将效果设置复杂一点，当点击按钮时，不是忽然隐藏和显示子菜单，而是高度平滑的转变，这时就要通过setTimeout来设置子菜单的height了，再复杂一点透明度也平滑的消失和显现，这时显现下来需要编写很多代码，如果js基础不好的朋友可能只能从别人写好的代码拿过来修改了！jQuery实现上面效果只需要1句话就行，$("#a").toggle("slow"),,学完jQuery后还需要抄袭修改别人的代码吗？下面我们逐个介绍jQuery用于效果处理的方法。

hide()  隐藏匹配对象

p id="a">Hello Againp>a href="#" onClick=' ("#a").hide()'>jQuerya>

当点击连接时,id为a的对象的display变为none。

show() 显示匹配对象

hide(speed)  以一定的速度隐藏匹配对象，其大小（长宽）和透明度都逐渐变化到0，speed有3级("slow", "normal",  "fast")，也可以是自定义的速度。

show(speed)  以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到正常

hide(speed, callback)  show(speed, callback) 当显示和隐藏变化结束后执行函数callback

toggle()    toggle(speed) 如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就隐藏，toggle(speed),其大小（长宽）和透明度都随之逐渐变化。

img src="1.jpg" style="width:150px"/>
a href="#" onClick='$("img").toggle("slow")'>jQuerya>

fadeIn(speeds)   fadeOut(speeds)  根据速度调整透明度来显示或隐藏匹配对象，注意有别于hide(speed)和show(speed)，fadeIn和fadeOut都只调整透明度，不调整大小

img src="1.jpg" style="display:none"/>a href="#" onClick='$("img ").fadeIn("slow")'> jQuery a>

연결을 클릭하면 그림이 점차적으로 표시되는 것을 볼 수 있습니다.

fadeIn(speed, callback) fadeOut(speed, callback) 콜백은 함수로, 먼저 투명도를 조절하여 일치하는 객체를 표시하거나 숨긴 후 콜백 함수를 실행합니다. 조정이 완료되었습니다

img src="1.jpg"/>
href="#" onClick='$ ("img ").fadeIn("slow",function(){ Alert("Animation Done."); })'> jQuery a>

연결을 클릭하면 점차적으로 그림이 나타나는 것을 볼 수 있으며, 이후 대화상자가 나타납니다. 표시 완료

fadeTo(speed, opacity, callback) 속도에 맞춰 일치하는 개체의 불투명도를 조정한 후 함수 콜백을 실행합니다. 불투명도는 최종 투명도(0-1)입니다.

img src="1.jpg"/>br>
href="# " onClick='$("img ").fadeTo("slow",0.55,function(){ Alert("애니메이션 완료."); })'> jQuery a>

할 수 있습니다. 직접 살펴보고 효과를 확인하세요. jQuery를 사용하지 않는다면 원래의 자바스크립트 스크립트를 작성하는 데 많은 코드가 필요할 수 있습니다!

slideDown(speeds) 지정된 속도로 일치하는 개체의 높이를 0에서 보통으로 부드럽게 변경합니다!

img src="1.jpg" 스타일="표시 :없음"/>
href= "#" onClick='$("img ").slideDown("slow")'>jQuerya>

slideDown(속도, 콜백) 일치하는 객체의 높이를 0에서 보통으로 변경하세요! 변경 완료 후 콜백 함수 실행

slideUp("slow") SlideUp(speed, callback) 일치하는 객체의 높이가 보통에서 높이로 변경됩니다. 0

slideToggle("slow") 일치하는 객체의 높이가 정상이면 점차 0으로 변경됩니다. 0이면 점차적으로 0으로 변경됩니다. 일반으로 변경