Click Links:  » jQuery and KnockOut: Simple Samples  The site [diskspace limit 100MB] [ASPx; SqlServer2012] [Small Traffic Allowance] [Windows Server 2008 R2 :-) ;-)]

Contents of Quick jQuery Manual

  1. Useful Links
  2. Introduction to jQuery
  3. DOM Manipulation Methods
  4. Iterations and Seeking
  5. Sample jQuery Selectors

Useful Links

jQuery: The Write Less, Do More, JavaScript Library
www.tutorialspoint.com/jquery
www.w3schools.com/jquery
MSDN Magazine Article

Introduction

jQuery {uses frameWest/CodeMenu.htm}
KnockOut {uses frameWest/CodeKick.htm}
<script type="text/javascript">
$(document).ready( function () {
    $("div").click( function () {
        $(this).replaceWith("<h1>jQuery Is Powerful</h1>");
    });
});
</script>
I do not know if *all* browsers support (document.readyState=='complete') but this type of issue is encapsulated inside the jQuery javascript library.
The jQuery documentation allows for the syntax for the document ready function to be shortened:
        $(function(){ 
            
            ... 
            
        });
function $(id) {return document.getElementById(id);}
If you like to start very slowly with jQuery define the function above in your javascript then you will be more comfortable with jQuery syntax and chaining.
var elem = $("#grid");

var elem = document.getElementById("grid");
These two syntax statements are the same for <object id="grid"></object>
						 
<script type="text/javascript">

    var myViewModel = function () {
        var self = this;
        self.firstName = "John";
        self.lastName = "Doe";

        this.displayDate = function () {
            var data = "January¦February¦March¦April¦May¦June¦July¦August¦September¦October¦November¦December";
            var months = data.split('¦');
            var date = new Date();
            return( (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "-" + months[date.getMonth()] + "-" + (date.getYear() < 1000 ? date.getYear() + 1900 : date.getYear()) );
        }
        this.toString = function () {
            alert(this.firstName + ' ' + this.lastName);
        }
    };

    var viewModel = new myViewModel();

    alert( "hello,\n"+viewModel.firstName + ' ' + viewModel.lastName+"\nToday is: "+ viewModel.displayDate() );
</script>
Above is a javascript way of creating a class type syntax. Or function myViewModel() { which I prefer.

DOM Manipulation Methods

MethodDescriptionExample
after( content ) Insert content after each of the matched elements.
append( content ) Append content to the inside of every matched element.
appendTo( selector ) Append all of the matched elements to another, specified, set of elements.
before( content ) Insert content before each of the matched elements.
clone( bool ) Clone matched DOM Elements, and all their event handlers, and select the clones.
clone( ) Clone matched DOM Elements and select the clones.
empty( ) Remove all child nodes from the set of matched elements.
html( val ) Set the html contents of every matched element. var content = $(this).html(); $("#result").text( content );
html( ) Get the html contents (innerHTML) of the first matched element.
insertAfter( selector ) Insert all of the matched elements after another, specified, set of elements.
insertBefore( selector ) Insert all of the matched elements before another, specified, set of elements.
prepend( content ) Prepend content to the inside of every matched element.
prependTo( selector ) Prepend all of the matched elements to another, specified, set of elements.
remove( expr ) Removes all matched elements from the DOM.
replaceAll( selector ) Replaces the elements matched by the specified selector with the matched elements.
replaceWith( content ) Replaces all matched elements with the specified HTML or DOM elements.
text( val ) Set the text contents of all matched elements.
text( ) Get the combined text contents of all matched elements.
wrap( elem ) Wrap each matched element with the specified element.
wrap( html ) Wrap each matched element with the specified HTML content.
wrapAll( elem ) Wrap all the elements in the matched set into a single wrapper element.
wrapAll( html ) Wrap all the elements in the matched set into a single wrapper element.
wrapInner( elem ) Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
wrapInner( html ) Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

Iterations and Seeking

MethodDescription
each( callback )Loops over the content of the wrapped set and executes the specified callback function.
length Property that returns the number of elements in the wrapped set.
eq( position ) Reduces the wrapped set to the single element at the specified position.
get() Returns the content of the wrapped set as an array of DOM elements.
get( index ) Returns the DOM elements at the specified position in the wrapped set.
index( element )Returns the 0-based index in the wrapped set of the specified DOM element, if any.
The difference between each? () and a manual JavaScript loop is that each() automatically maps the "this" object to the element in the collection being processed.
The callback function, however, receives an optional integer parameter that is the (0-based) index of the iteration.

Sample jQuery Selectors

Sample jQuery Selectors in Action
Sample SelectorEffect
form inputReturns all input fields within any <form> tags in the page.
#Form1 inputReturns all input fields within the form labeled Form1.
h2 + pReturns all <p> tags that are next to a <h2> while child of the same parent.
input.textBoxReturns all <input> tags whose CSS class is "textBox."
div span.myClassReturns all <span> tags whose CSS class is "myClass" located within a <div>.
$("p").click(function(){
    $(this).hide();
  });
DateTime shipdate = DateTime.Now.AddDays(2); // cal or working??
Introduction to jQuery Useful Links » Help Page
» Content Site: Home Page  Content Site: Programming Page  Site Frames Explained In A JS Windows Tab  Sample - JS Windows Page  Content Site: Colours Page  Content Site: Article Style   Article Ideas   Article Design   Wilmott Online Technical Forum For Derivative Experts