jQuery - Manipulating DOM

it's easy to do manipulating DOM using jQuery althought it's not compatible with the native DOM manipulation.
To insert content, use
before - insert outside before the selector
after - insert outside after the selector
append - insert in the inside but the last one
prepend - insert in the inside but the first one
detach - remove the selector as well as its content
empty - remove the all the child inside the selector
remove - remove the selector as well as its event and data.
insertAfter - insert content after the target
insertBefore - insert content before the target

jQuery - Manipulating DOM

jQuery Plugin Authoring

In this moment, the code below show to you on how to build your own plugin that namespacing. Without namespacing, the code is like below:

<script src="jquery-1.5.js"></script>

<div id="satu">
Indonesia
</div>

<script>
function($){
     $.fn.fore = function(options){
         var settings = {
             'color': 'blue'
         };
         if(options){
             $.extend(settings, options);
         }
         $(this).css('color',settings.color);
         return $(this);
     };

     $.fn.back = function(options){
         var settings = {
             'color': 'lime'
         };
         $(options){
             $.extend(settings, options);
         }
         $(this).css('background',settings.color);
         return $(this);
    };
})(jQuery);

$('#satu').fore().back();

</script>

But with the namespace, the code will be like this:
<script src="jquery-1.5.js"></script>

<div id="satu">

Indonesia

</div>

<script>
function($){
    var methods = {
        // this is the same function in the above 
        // this is the first function in the above           
        'fore': function(options){
            var settings = {
                'color': 'blue'
            };
            if(options){
                $.extend(settings, options);
            }
            $(this).css('color',settings.color);
            return $(this);
        },

        // this is the second function of the above
        'back': function(options){
            var settings = {
                'color': 'lime'
            };
            if (options){
                $.extend(settings, options);
            }
            $(this).css('background',settings.color);
                return $(this);
            }
        };

// this is the main function of namespacing
$.fn.coloring = function(method){
    if ( methods[method] ) {
        return methods[ method ].apply( this, 
                  Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  method + ' does not exist on ' 
                 + ' jQuery.tooltip' );
    }   

}
 
})(jQuery);

$('#satu').coloring('fore').coloring('back');

</script>

jQuery Plugin Authoring

Plugin Authoring

<script src="jquery-1.5.js"></script>

<h1 id="satu">We hope we can do more!</h1>

<script>

(function($){

    // coloring the text
     $.fn.coloring = function(options){

          var settings = {
               'color' : 'blue'
          };

          if(options){
               $.extend(settings, options);
          }

          $(this).css('color',settings.color);

          return $(this);
     }


      // backgrouning the text
     $.fn.backgrouning = function(options){

          var settings = {
               'background': '#fc5',
          };

          if(options){
               $.extend(settings, options);
          }

          $(this).css('background-color', settings.background);

          return $(this);
     };


    // sizing the text
     $.fn.sizing = function(options){

          var settings = {
               'size': 30,
          };

          if(options){
               $.extend(settings, options);
          }

          $(this).css('font-size', settings.size);

          return $(this);
     };

})(jQuery);

$('#satu').coloring().backgrouning().sizing()

</script>

Plugin Authoring

Extending jQuery With Options

<script src="jquery.js"></script>

<div id="one">Winning Eleven</div>
<div id="two">Winning Eleven</div>
<div id="three">Winning Eleven</div>

<script>

(function($){
    $.fn.bigBlue = function(options){

        // set the kinds of options
        var settings = {
            'color' : 'blue',
            'size' : '50'
        }

        // use the template
        if(options){
            $.extend(settings, options);
        }

        // code goes here
        $(this).css({'color':settings.color,

                     'font-size':   settings.size});

        return $(this);
    };
})(jQuery);

$('#one').bigBlue();    // use default options
$('#two').bigBlue({'color':'lime'});
$('#three').bigBlue({'color':'pink','size':100});

</script>

Extending jQuery With Options

jQuery Effects Options

$.effect('kind of effects', {options}, speed in mili', function(){ alert('Callback Function') })

1. Bounce:
  a. distance: 20 or whatever the number
  b. direction: up, down, left or right
  c. times: 5 or whatever you want how many times the effect runs

2. Blind: Menghilang
  a. direction: vertical or horizontal

3. Clip: Menyempit Then Menghilang
  a. direction: vertical or horizontal

4. Drop: Fade Then Menghilang
  a. direction: left, right, up, down

5. Explode: No Options

6. Fade: No Options

7. Fold: Up Then Left The Vanish
  a. size: 5 or whatever you want the top pixel before lefted.

8. Highlight: No Option: Glow Then back to the origin

9. Puff: No Options: Get Bigger Then Vanish

10. Pulsate: Flip Flop. Not Vanish
  a. times: 5 or whatever the number to flip

11. Scale: Growing or Smalling
  a. percent: 0 or whatever you want
  b. direction: both, horizontal, or vertical

12. Shake: Back And Forth Moving
  a. direction: left, up, right, or down
  b. distance: 20 or whatever how many pixels in swing
  c. times: 3 or whatever how many times the moving body

13. Size: Growing Or Smalling the dimension
  a. to:{ width: '100', height: '100'}
  b. restore: true or false

14. Slide: Showing The Appearance
  a. direction: left, up, right, or down

15. Transfer: Showing the border
  a. to: '#satu' or whatever identifier
  b. className: the name of the class when the animation runs.

jQuery Effects Options

jQuery Droppable

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" href="css/start/jquery-ui-1.8.9.custom.css"/>

<h3>jQuery Learning Zones</h3>
<div id="satu"></div>
<div id="dua"></div>

<script>
$('#satu').draggable();
$('#dua').droppable({
    accept:'#satu',
    activeClass:'active',
    hoverClass:'hover',
    drop: function(event,ui){
       $(this).addClass('drop');
       $('#satu').css({'background':'transparent','border':'none'});
    }
});

</script>  
 
<style>
h3 { font-family: arial; border-bottom: 1px solid blue; color: #55f; padding: 5px; text-align: center;  }
body { border: 1px solid #aaa; overflow: auto; padding: 10px; min-height: 100px; }
#satu { border: 1px solid #aaa; width: 100px; height: 100px; background: #fe5; cursor: move; }
#dua { border: 1px solid #aaa; width: 200px; height: 150px; margin: 10 0 0px; }
.active { background: lime; }
.hover { background: red; }
.drop { background: greenyellow; }
</style>

jQuery Droppable

<link rel="stylesheet" href="jqueryui/css/redmond/jquery-ui-1.8.9.custom.css"/>
<script src="jqueryui/js/jquery-1.4.4.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>

<div id="satu">
</div>

<div id="statusa">Status</div>
<div id="statusb">Status</div>
<div id="statusc">Status</div>

<script>
var a=0,b=0,c=0;

$('#satu').draggable({
    start: function(){
        updateStatusA('Start: '+ a++ +' times')
    },
    drag: function(){
        updateStatusB('Drag: '+ b++ +' Times')

    },
    stop: function(){
        updateStatusC('Stop: '+ c++ +' Times')
    }

});

function updateStatusA(s){
    $('#statusa').text(s).css('text-transform','capitalize');
}
function updateStatusB(s){
    $('#statusb').text(s).css('text-transform','capitalize');
}
function updateStatusC(s){
    $('#statusc').text(s).css('text-transform','capitalize');
}
 
</script>

<style>
#satu { border: 1px solid #aaa; width: 100px; height: 100px; cursor: move; background: yellowgreen; }
#start { background: blue; }
#drag { background: black; }
#stop { background: red }
</style>

Sortable jQuery

<link rel="stylesheet" href="jqueryui/css/redmond/jquery-ui-1.8.9.custom.css"/>
<script src="jqueryui/js/jquery-1.4.4.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>

<ol id="satu">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
<li>Empat</li>
</ol>

<script>
    $('#satu').sortable()
</script>

<style>
ol { list-style: none; margin: 0px; padding: 0px; }
#satu li { background: gold; margin: 1; padding: 5px; font: 12px arial; }

</style>

Sortable jQuery

Selectable jQuery

<link rel="stylesheet" href="jqueryui/css/redmond/jquery-ui-1.8.9.custom.css"/>
<script src="jqueryui/js/jquery-1.4.4.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>

<ol id="satu">
<li>Holla</li>
<li>May Be</li>
<li>Fow What</li>
<li>For Lady Gaga</li>
</ol>

<script>
    $('#satu').selectable();
</script>

<style>
ol { list-style: none; margin: 0px; padding: 0px; }
#satu li { background: gold; margin: 1; padding: 5px; font: 12px arial; }
#satu .ui-selected { background: #F39814; color: white; }
#satu .ui-selecting { background: lime; }
#satu .ui-unselecting { background: black; }
</style>

Selectable jQuery

Droppable jQuery

<link rel="stylesheet" href="jqueryui/css/redmond/jquery-ui-1.8.9.custom.css"/>
<script src="jqueryui/js/jquery-1.4.4.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>

<div id="satu">
<p id="tiga">Holla</p>
<p id="dua"></p>
</div>

<script>
$('#tiga').draggable({distance:30})
$('#dua').droppable({
    drop: function(event, ui){
        $(this).css('backgroundColor','lime');
        $('#tiga').css('z-index','0');
    }
});
</script>

<style>

#satu { width: 800px; height: 300px; border: 1px solid blue;  overflow: auto; position: relative; }
#tiga { width: 50px; height: 50px; border: 0px solid blue; cursor: move; z-index: 2; background: #af0; }
#dua { border: 0px solid blue; width: 100px; height: 100px; position: absolute;right: 10px;  bottom: 0px; background: #f5f; }
 
</style>

Droppable jQuery

Counting Element

each function in jQuery used for count and iterate the whole object. Like this one:

(function($){

    $.fn.howMany = function(){

        var a = 0;

        this.each(function(){

            a = a + 1;

        });

        return a;

    };

})(jQuery);

Counting Element

Starting jQuery

To start using jQuery, link the 3 files:

<link rel="stylesheet" href="jqueryui/css/redmond/

                             jquery-ui-1.8.9.custom.css"/>

<script src="jqueryui/js/jquery-1.4.4.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>









Then try to write code in html file:

<button>Register</button>

<script>

$('button').button();

</script>

Starting jQuery

Returning jQuery Object

<script src="jquery.js"></script>
<div id="satu">Holla From jQuery</div>

<script>

(function($){

    $.fn.heading = function(h){
        this.html('<'+h+'>'+this.html()+'</'+h+'>');
        return this;
    };

    $.fn.color = function(c){
        this.css('color',c);
        return this;
    };

})(jQuery);

$('#satu').heading('h1').color('green');

</script>

Output:

Holla From jQuery

Returning jQuery Object

Extending jQuery With Parameter

It's simple to extends jQuery:

<script src="jquery.js"></script>

<div id="satu">Before Extended</div>

<script>

(function($){

    $.fn.myPlugin = function(c){

        this.html('<h1>After Extended</h1>');

        this.css('color',c);

    };

});

$('#satu').myPlugin('red');

</script>

Output:

After Extended

  

Extending jQuery With Parameter

Extending jQuery

It's simple to extends jQuery:

<script src="jquery.js"></script>

<div id="satu">Before Extended</div>

<script>

(function($){

    $.fn.myPlugin = function(){

        this.html('<h1>After Extended</h1>');

        this.css('color','blue');

    };

});

$('#satu').myPlugin();

</script>

Output:
After Extended
   

Extending jQuery

attr jQuery

Here's a bit of code on how to use attr:

var id = $('#satu').attr('id');

$('#dua').attr('id','lola');

$('#tiga').attr({'id':'empat','class':four','title':
                 'A Sample Of Text'});    // Object literal

attr jQuery

css jQuery

To get the value, just type:

var color = $('#satu').css('background-color'); // get the value

$('#dua').css('background-color','red');        // set the value

$('#tiga').css({'color':'blue', 'font-size':'24px', 
                'background-color':'lime'});

css jQuery

jQuery Ajax - Save And Receive Data

Here's a code on how to send some data to the server and then notify the user that the saved data has completes:

$.ajax({

    type: "POST",

    url: "some.php",

    data: "name=lady&city=ny",

    success: function(msg){

        alert('Data saved: '+msg);
         }
});

jQuery Ajax - Save And Receive Data

Ajax In JQuery

Here's a code on how to get to ajax through jQuery:

$.ajax({
    data: 'test.html',
    success: function(data){
        $('#satu').text(data);
        alert('Load data successfully');
    }
});

Ajax In JQuery