Public · Protected · Private
jquery usage
Type: Public  |  Created: 2012-08-17  |  Frozen: Yes
« Previous Public Blog Next Public Blog »
Comments
  • 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.

    2012-08-17 02:50
  • 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"); })
                                                      });

    2012-08-17 02:53
  • 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
    2012-08-17 03:01
  • 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.

    2012-08-17 03:10
  • 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[])

    2012-08-17 03:28
    • 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
    2012-08-17 03:38
  • 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

    2012-08-17 03:42
  • 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)
     

    2012-08-17 03:54
  •  Keyboard Event Methods

    • keydown(function)
    • keypress(function)
    • keyup(function)
    2012-08-17 04:54
This blog is frozen. No new comments or edits allowed.