jQuery intro

Raven @ 研 A 前端, 2013-04

jQuery intro

• 從舊web時代單方資料 > 互動
  we need more interaction!
• server-side function > client-side script

webpage

• html: content
• css: style
• javascript: behavior

why jQuery?

• DOM 在各瀏覽器的不同 > jQuery fix!
• 成型早，前端功能完備 > plugin(s) support!

jQuery: write less, do more.

• find element in DOM
• change HTML content
• listen to what user does & react accordingly
• animate content
• talk over the network to fetch new content

jQuery operate

• Seletor
• DOM modify
• Event

jQuery: selector

Sizzle.js

• CSS-likes selector

• left < right(key selector)

jQuery: selector

效率:

ID >
　tag >
　　.class >
　　　:hover, :checked

native JS method is better:

    document.getElementById
    document.getElementsByTagName
    document.getElementsByName
    document.getElementsByClassName // gte IE9
    document.querySelectorAll(selectors) // gte IE8
    /*ps: W3 querySelector 實作與 jQuery API 不同*/
    

jQuery: selector

anti-pattern

• $('div#someID')
• $('#table tr #someID')

class is good?

jQuery: selector - CSS-likes

selector

• E > F
• E + F
• E ~ F
• E:has(F)
• E:not(F)
• E[A=V]: *^$~|!
• :first, :last
• :first-child, last-children, only-child
• :nth-child(an+b), nth-of-type 圖例
  　　 前6個: -n+6
  　　 6之後: n+6
  　　 第5個: 5
  　　 even|odd
  
• eq == get, gt, lt
• :visible
• input :checked, :selected, :enabled, :disabled :button, :text, :password, :radio, :checkbox, :reset, :image, :file,

jQuery: selector - collection set - 1:

• find 子集搜尋
• contains(text)

• is, hasClass !return boolean

• add

• not 操作原collection
• filter 操作原collection
• size

• slice

jQuery: selector - collection set - 2:

• closest 向上最近

• relation-ship

      parents,
      └┴parent
          └siblings
              ├prevAll, perv
              ├this
              │  └children
              └next. nextAll
              

• end

• addBack

  $('li:first').nextAll().addBack()
              

• clone

DOM modify

    attr, removeAttr
    prop, removeProp // valueless attribute: return boolean
    addClass, removeClass, toogleClass, hasClass

    css, width, height

    val, serialize, serializeArray

    html, text
    before, prepend, append, after
    remove, empty, clone
    wrapper, wrapperAll, wrapperInner
    

DOM modify

limit DOM Manipulation

DOM injection

• array.puch(xxx)
• string += xxx // gte IE8 已有改善
  
  
• document.createfragment

DOM modify

• html is quick
  少用: prepend, append, after, before

• data: 自訂屬性 > $.data/.data

• style:
  prefer class!
  
  Append style tags when styling 15 or more elements
  be careful at style numbers limit (32) at old IE

Event -0, list

        click, dbclick, toggle
        hover, mouse[enter, down, up, leaver]
        key[down, press, up]
        blur, focus, change, select, submit, reset

        on, off, one
        ready, load, scroll, resize, unload

        triggle, triggerHandler
    

Event -1, on

        .on( events [, selector ] [, data ], handler(eventObject) );
    

Event -2, one

        function fire() {
            alert('fire in hole~');
        }
        ----------------------------------------------
        .one('click', fire);
        ===
        .on('click', function() {
            fire();
            $(this).off(event);
        });
    

Event -3, delegate

        $(document).on('click', 'div.fire', fire);
        $('span.fire').one('click', fire);
    

Event -4, namespace

        .on('click.fire', fire);
        .on('click.hi', changeTxt);

        .off('click.hi');
        .off('.hi');
    

Event -5, event.data

        function greet(event) {
            alert("Hello "+event.data.name);
        }

        $("button").on("click", { name: "Karl" }, greet);
        $("button").on("click", { name: "Addy" }, greet);
    

Event -6, others

• .triggerHandler()
• .trigger()
• .ready() , .load()
• .error()

• event.currentTarget === this
• event.preventDefault() , event.isDefaultPrevented()
• event.stopPropagation() , event.isPropagationStopped() fiddle
• event.stopImmediatePropagation() , event.isImmediatePropagationStopped() fiddle
• event.delegateTarget
• event.which
• event.type
• event.result
• event.pageX, event.pageY
• event.target
• event.timeStamp 時間戳

other - load from CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="mydomin/jquery-1.9.0.min.js"><\/script>')</script>

other - protect $

1. noConflict

   var j = jQuery.noConflict();
       // Now, instead of $, we use j.
       j('#someDiv').hide();
       

2. Passing jQuery(scope protect)

   (function($) {
           // Within this function, $ will always refer to jQuery
       })(jQuery);
       

3. Passing $ via the Ready Method

   jQuery(document).ready(function($) {
           // $ refers to jQuery
       });
       

other - speedly load, delay function

• $(document).ready
• $(window).load

other - speedly load, delay function

少用jQuery

• for ? $.each
• $('#anID') ? document.getElementById('someAnchor')
• $.addClass ? $.css
  • class: most state
  • css: dynamic number

Q&A