jquery--扩展

首先操作DOM元素，用jQuery可以这么实现：

$('.div1').css('backgroundColor', '#fffceb').css('color', '#d85030');

$('.div2').css('backgroundColor', '#fffceb').css('color', '#d85030');

这样我们总是写重复的代码，所以可以统一起来，写一个方法：

所以：

<!-- HTML结构 -->
<div id="div1">
    <p>什么是<span>jQuery</span></p>
    <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p>
</div>

<!--js-->
 $(function(){
        $.fn.styleCss=function(){
            this.css('backgroundColor', '#fffceb').css('color', '#d85030');
            return this;
        }//给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的

　　　　$('#div1 span').styleCss(); 
}) 

 

效果： 

———————————————————

 

 

 

——————————————————

用return this是因为jQuery对象支持链式操作，我们自己写的扩展方法也要能继续链式下去：

$('span.hl').highlight1().hide();

 

但是这个版本并不完美。颜色能随便换，怎么办？我们可以给方法加个参数，让用户自己把参数用对象传进去。于是我们有了第二个版本的styleCss2()：

　　　　　$(function(){
            $.fn.styleCss2=function(options){
                var bgColor=options && options.backgroundColor ;
                var Color=options && options.color;
                this.css('backgroundColor',bgColor).css('color',Color)
                return this;
            }
            $('#div1 span').styleCss2({
                backgroundColor:'red',
                color:'#ffffff'
            });

 

效果：

————————————————————

————————————————————

好了，先写到这了，未完待续。。。