jquery usage

Let me start with a function

    function linkscount() {
        return $('a').length;
    }

You have create such function after doument is loaded

$(document).ready(

function() { console.log("link count: " + linkscount());    }

);

Or call it as below...

    $(document).ready(
      console.log("links count: " + linkscount())
    );

Important thing here is $()  function works only after the document is fully loaded/ready.

following functiom works on all odd links

$(document).ready(function() {

        $("a:odd").mouseenter(function(e) {$(this).css("color", "red"); }) 

                  .mouseout(function(e) { $(this).css("color", "blue"); })
                                                  });

some rarely used handy Type Extension Selectors (we may never use them)
 :button                       All buttons
 :checkbox                  all check boxes
 :file                            all file elements
 :header                      all header elements (h1, h2, and so on)
 :hidden                      all hidden elements
 :image                       all image elements
  :input                        all input elements
 :last                           the last matched element
 :parent                      all of the elements that are parents hierarchy
 :password                  all password elements
 :radio                         all radio elements
 :reset                          all elements that reset a form
 :selected                    all elements that are selected
 :submit                      all form submission elements
 :visible                      all visible elementsv

both following code snippets do the same job  -- Notice the one is with jquery

    $(document).ready(function() {

        $('label').css("color", "red").css("font-size", ".50em");

        var labelElems = document.getElementsByTagName("label");
        for (var i = 0; i < labelElems.length; i++) {
            labelElems[i].style.color = "red";
            labelElems[i].style.fontSize = ".50em";
        }
    });

 

one more TIP for now

not(condition)     Removes
all elements that match the condition.

Some proximity based finders that can be applied on the found element

closest(jQuery) , offsetParent() , parent(), parent(selector) , parents(),parents(selector) , parentsUntil(selector) , parentsUntil(selector, selector) , parentsUntil(HTMLElement) , parentsUntil(HTMLElement, selector) , parentsUntil(HTMLElement[]) ,parentsUntil(HTMLElement[], selector)

 

Sp appenders and prependers == Frequently used

Add as last children  append(HTML)  append(jQuery)
 append(HTMLElement[]) , appendTo(jQuery)
appendTo(HTMLElement[]) , append(function) prepend(function)

add as first children   prepend(HTML) prepend(jQuery)
prepend(HTMLElement[]) , prependTo(HTML) prependTo(jQuery) prependTo(HTMLElement[])

• wrap(HTML) ,wrap(jQuery),wrap(HTMLElement[])
   Wraps around the set of elements in the jQuery object (as a single group)
•  wrapAll(HTML) ,wrapAll(jQuery) ,wrapAll(HTMLElement[])
   Wraps the set of elements in the jQuery object (as a single group)
•  wrapInner(HTML)  wrapInner(jQuery)  wrapInner(HTMLElement[])
   Wraps content of the elements in the jQuery object
•  wrap(function) wrapInner(function)   = Wraps elements dynamically using a function

CSS method

css(name) ,css(name, value) ,css(map) ,css( function)
 
    $(document).ready(function() {
        var cssVals= {
             "font-size": "1.2em",
            "color":"blue"
        };
        $('a').css(cssVals);
        $('a').css("color","blue");
        $('a').css("color":"blue");
    });

 

 

 

Some get set(value) functions:

width() width(value)
height(function)  width(function)
height(),  height(value)

text()  text(value)
html() html(value)
val() val(value) text(function)

html(function) val(function)

data(key, value) data(map)
data(key)  data()
removeData(key) removeData()
bind(eventType, function)
bind(eventType, data, function)
bind(eventType, boolean)
bind(map)
one(eventType, function)
one(eventType, data, function)
unbind()
unbind(eventType)
unbind(eventType, boolean)
unbind(Event)

 

innerHeight() innerWidth()
offset() outerHeight(boolean) outerWidth(boolean) // booean with/without margin - easy measurements
position()  coordinates of offset with
 scrollLeft() scrollTop()
scrollLeft(value)  scrollTop(value) v

event Bubbling manipulation /control
 preventDefault() , stopImmediatePropagation() , stopPropagation()

Methods for Automatically Registering Event Handlers (Dont use them for perf reasons)
live(eventType, function) live(eventType, data, function) live(map)
die() ,die(eventType) ,
 delegate(selector, eventType, function)
delegate(selector, eventType, data, function)
delegate(selector, map)undelegate()undelegate(selector, eventType)
 

 Keyboard Event Methods

• keydown(function)
• keypress(function)
• keyup(function)