Table of contents


Installation

  • download uncompressed version JQuery.js
  • includes in html file
    <html>
    <head>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){
           $("a").click(function(event){
             alert("Hello JQuery!");
           });
         });
    </script>
    </head>
    <body>
    <a href="http://jquery.com/">jQuery</a>
    </body>
    </html>

<box round 80% red | document.ready() v.s document.onload()> why we using ready() event rather than onload() event. Because the onload() event is fired after all elements in page loading finished.Eventually all image files. But the ready() event only have been waiting until all elements in page expect image files. </box>

if you can see the ‘Hello JQuery’ message poped up after page load, this means, the JQuery lib is installed well. if not, please check src attribute of <script type=“text/javascript” src=”../js/jquery.js”></script>.

shorthand format

The doucment.ready function in above example can be rewrote as this style

    <script type="text/javascript">
         $(function(){
           $("a").click(function(event){
             alert("Hello JQuery!");
           });
         });
    </script>

Callbacks and Functions

Callback without arguments
$.get('myhtmlpage.html', myCallBack);

Callback with arguments
$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
});

Why not just $.get('myhtmlpage.html', myCallBack(param1, param2));, becuase regading the JavaScript interpretor, the sub-expression myCallBack(param1, param2) is evaluated before being passed as a function, so that why we need to use anonymous function.

Using Selectors

jQuery provides two approaches to select elements. The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $(“div > ul a”)). The second uses several methods of the jQuery object. Both approaches can be combined.

list of all available expressions can be found here.

Using child Selector

Following Example comes from JQuery in Action

jquery_101_01.png

in above figure, if we want to select this link

<a href="http://jquery.com">jQuery supports</a>

we may use this syntax

ul.myList  li  a

but it will selects all links inside <ul class=“myList”>

jquery_101_02.png

is this situation, we need to use child selector, it will only selects only child of li

ul.myList > li > a

jquery_101_03.png

:nth-child(Xn+Y)

:nth-child(Xn + Y),其中,X後面那個n可以解釋為每n個,因為它會以n為單位做iterate, 而如果再加上Y, 可以解釋為以n為一個重覆的第Y個

e1 e2 e3 e4 e5 e6 e7 e8 e9

如果是nth-child(3),那麼只有e3會被選到,如果是nth-child(3n),那麼e3, e6, e9會被選到 如果是nth-child(3n + 2),那麼e2, e5, e8會被選到(以三個elements為一個單位,選擇其中的第2個)

extend JQuery

    $("form#myForm input.special").disable();

there is no function to disable all element in a form, but we can create one.

Regarding the function we need as above, we can create a function implementation like this:

    $.fn.disable = function() {
      return this.each(function() {
        if (typeof this.disabled != "undefined") this.disabled = true;
      });
    }

Selectors

Basic CSS Selectors

Syntax Description ———- ———————————————————————————————— * Matches any element. E Matches all elements with tag name E. E F Matches all elements with tag name F that are descendants of E. E>F Matches all elements with tag name F that are direct children of E. E+F Matches all elements with tag name F that are immediately preceded by a sibling of tag name E. E~F Matches all elements with tag name F that are preceded by any sibling of tag name E. E:has(F) Matches all elements with tag name E that have at least one descendant with tag name F. E.c Matches all elements E that possess a class name of c. Omitting E is identical to *.c. E#i Matches all elements E that possess an id value of i. Omitting E is identical to *#i. E[a] Matches all elements E that posses an attribute a of any value. E[a=v] Matches all elements E that posses an attribute a whose value is exactly v. E[a\^=v] Matches all elements E that posses an attribute a whose value starts with v. E[a$=v] Matches all elements E that posses an attribute a whose value ends with v. E[a*=v] Matches all elements E that posses an attribute a whose value contains v.

Examples

  • $(‘div’) selects all <div> elements
  • $(‘fieldset a’) selects all <a> elements within <fieldset> elements
  • $(‘li>p’) selects all <p> elements that are direct children of <li> elements
  • $(‘div~p’) selects all <div> elements that are preceded by a <p> element
  • $(‘p:has(b)’) selects all <p> elements that contain a <b> element
  • $(‘div.someClass’) selects all <div> elements with a class name of someClass
  • $(‘.someClass’) selects all elements with class name someClass
  • $(‘#testButton’) selects the element with the id value of testButton
  • $(‘img[alt]’) selects all <img> elements that possess an alt attribute
  • $(‘a[href$=.pdf]’) selects all <a> elements that possess an href attribute that ends in .pdf
  • $(‘button[id*=test]’) selects all buttons whose id attributes contain test

Positional Selectors

Syntax Description ———————– ——————————————————————————————————————————————————————– B:first Selects the first element on the page matching the base selector B. B:last Selects the last element on the page matching the base selector B. B:first-child Selects all elements from B that are first children. B:last-child Selects all elements from B that are last children. B:only-child Selects all elements from B that are only children. B:nth-child(n) Selects all elements from B that are n-th ordinal children. Starts at 1. B:nth-child(odd|even) Selects all elements from B that are even or odd ordinal children. The first child is considered odd (ordinal 1). B:nth-child(Xn+Y) Selects all elements from B that match the formula. X denotes an ordinal multiplier, while Y denotes an offset. Y may be omitted if 0. See the following examples. B:even Selects the even elements within the set of elementsdefined by B. B:odd Selects the odd elements within the set of elements defined by B. B:eq(n) Selects the n-th element within the set of elements defined by B. Starts at 0. B:gt(n) Selects elements within the set of elements defined by B that follow the n-th element (exclusive). Starts at 0. B:lt(n) Selects elements within the set of elements defined by B that precede the n-th element (exclusive). Starts at 0.

Examples

  • $(‘p:first’) selects the first <p> element on the page
  • $(‘img[src$=.png]:first’) selects the first <img> element on the page that has a src attribute ending in .png
  • $(‘button.small:last’) selects the last <button> element on the page that has a class name of small
  • $(‘li:first-child’) selects all <li> elements that are first children within their lists
  • $(‘a:only-child’) selects all <a> elements that are the only element within their parent
  • $(‘li:nth-child(2)’) selects all <li> elements that are the second item within their lists
  • $(‘tr:nth-child(odd)’) selects all odd <tr> elements within a table
  • $(‘div:nth-child(5n)’) selects every 5th <div> element
  • $(‘div:nth-child(5n+1)’) selects the element after every 5th <div> element
  • $(‘.someClass:eq(1)’) selects the second element with a class name of someClass
  • $(‘.someClass:gt(1)’) selects all but the first two elements with a class name of someClass
  • $(‘.someClass:lt(4)’) selects the first four elements with a class name of someClass

jQuery Custom Selectors

Syntax Description ———— —————————————————————————————————————————————————————————————- B:animated Selects elements from the base set B that are currently under animated control via one of the jQuery animation methods. B:button Selects elements of B that are of any button type; that is: button, input[type=submit], input[type=reset] or input[type=button]. B:checkbox Selects elements of B that are of type input[type=checkbox]. B:enabled Selects form elements from B that are in enabled state. B:file Selects elements of B that are of type input[type=file]. B:header Selects elements from B that are of the header types: that is <h1> through <h6>. B:hidden Selects elements of B that are hidden. B:image Selects elements of B that are of type input[type=image]. B:input Selects form input elements from B; that is, <input>, <select>, <textarea> and <button> elements. B:not(f) Selects elements of B that do not match the filter selector specified by f. A filter selector is any selector beginning with : (colon), A base set B cannot be specified as part of f. B:parent Selects elements of B that are parents of non-empty element children. B:password Selects elements of B that are of type input[type=password]. B:radio Selects elements of B that are of type input[type=radio]. B:reset Selects elements of B that are of type input[type=reset] or button[type=reset]. B:selected Selects elements of B that are in selected state. Only <option> elements posses this state. B:submit Selects elements of B that are of type input[type=submit] or button[type=submit]. B:text Selects elements of B that are of type input[type=text]. B:visible Selects form elements from B that are not hidden.

Examples

  • $(‘img:animated’) selects all <img> elements that are undergoing animation
  • $(‘:button:hidden’) selects all button type elements that are hidden
  • $(‘input[name=myRadioGroup]:radio:checked’) selects all radio elements with the name attribute value of myRadioGroup that are checked
  • $(‘:text:disabled’) selects all text fields that are disabled
  • $(‘#xyz p :header’) selects all header type elements within <p> elements that are within an element with an id value of xyz. Note the space before :header that prevents it from binding directly to the p.
  • $(‘option:not(:selected)’) selects all unselected <option> elements
  • $(‘#myForm button:not(.someClass)’) selects all buttons from the <form> with the id of myForm that do not possess the class name someClass.
  • $(‘select[name=choices] :selected’) selects the selected <option> elements within the <select> element named choices.
  • $(‘p:contains(coffee)’) selects all <p> elements that contain the text coffee

MISC

Check a radio button
# check first button of radio 
$(":radio[name='aName']:eq(0)").attr("checked",'checked');
# check second button of radio 
$(":radio[name='aName']:eq(1)").attr("checked",'checked');