JQuery: Difference between revisions

From Wiki
Jump to navigation Jump to search
← Older edit
 
(11 intermediate revisions by the same user not shown)
Line 3: Line 3:
http://learn.jquery.com/
http://learn.jquery.com/


== Selectors ==
* type: <code>$('table')</code>
* attribute: <code>$('[date="2015-04-21"]')</code>
* class: <code>$('.even')</code>
* id: <code>$('#main')</code>
=== Filters ===
* <code>$('tr:eq(0)')</code> finds the first row in a table
* <code>$('tr:gt(0)')</code> finds all rows after the first
* <code>:even</code> finds all even-numbered elements in a selection
* <code>:odd</code> odd-numbered elements
* <code>:last</code> last element
* <code>:empty</code> elements that have no children
* <code>:focus</code> the focused element
* <code>:not(selection)</code> elements that don't match selection
* <code>:contains(text)</code> element that contain certain text
* input field selectors: <code>:hidden</code>, <code>:text</code>, <code>:checkbox</code>, <code>:password</code>
=== Combinations ===
* <code>$('tr.even')</code> Rows with class 'even'
* <code>$('#tasks tr:first')</code> The first row of a table with id 'tasks'
* <code>$('#tasks').find('tr:first')</code> Same thing
* <code>$('tr:first', '#tasks')</code> Same thing; second argument specifies DOM sub-tree to search
* <code>$('section:eq(1) table tr:last td')</code> All table cells in the last row of all tables in the second section
* <code>$('select[name="category"] > option')</code> All option elements that direct children of a particular select
=== Traversals ===
* <code>$('some selector').siblings()</code> all siblings of the selected elements
* <code>$('some selector').siblings('td')</code> the siblings of the selected elements that are td's
* <code>.next()</code>, <code>.prev()</code>, <code>.parent()</code>, <code>.closest()</code>, <code>.last()</code>
* <code>.parents('.funky')</code> any parents of the selected elements that are of class 'funky'
* <code>.andSelf()</code> make sure the selected element(s) is included
=== Manipulation ===
* <code>.addClass('even')</code>, <code>.removeClass(...)</code>, <code>.toggleClass(...)</code>
* <code>.append('...some html...')</code> add as last child of selected element
* <code>.prepend(...)</code>, <code>.after(...)</code>, <code>.before(...)</code>
* <code>.remove(...)</code>, <code>.replaceWith(...)</code>, <code>.before(...)</code>
* <code>$('select').val()</code> get the value of the select element
* <code>$('select').val('AM')</code> set the value of the select element
* <code>.html()</code>, <code>.text()</code>, <code>.attr()</code>
=== Events ===
* <code>.click()</code>, <code>.dblclick()</code>, <code>.hover()</code>, <code>.mousedown()</code>, <code>.mouseup()</code>
* <code>.keypress()</code>, <code>.keydown()</code>, <code>.blur()</code>, <code>.change()</code>, <code>.focus()</code>
* suppress default behavior of link, button, etc:
<source lang="javascript">
$('#myButton').click( function(e){
    e.preventDefault();
    // do something else
});
</source>


== Example ==
== Example ==


==== HTML ====
==== HTML ====
<pre>
<source lang="html4strict">
<html><head><title>Button Magic</title>
<html><head><title>Button Magic</title>
     <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
     <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type='text/javascript' src='jquery.js'></script>
     <script type='text/javascript' src='script.js'></script>
     <script type='text/javascript' src='script.js'></script>
     </head><body>
     </head><body>
Line 15: Line 68:
     </body>
     </body>
</html>
</html>
</pre>
</source>


==== stylesheet.css ====
==== stylesheet.css ====
<pre>
<source lang="css">
div {
div {
     height: 60px;
     height: 60px;
Line 29: Line 82:
     opacity: 0.5;
     opacity: 0.5;
}
}
</pre>
</source>


==== script.js ====
==== script.js ====
<pre>
<source lang="javascript">
$(document).ready(function(){
$(document).ready(function(){
     $('div').mouseenter(function(){
     $('div').mouseenter(function(){
Line 41: Line 94:
     });
     });
});
});
</pre>
</source>




== To Do List Example ==
== To Do List Example ==
==== HTML ====
==== HTML ====
<pre>
<source lang="html4strict">
<!DOCTYPE html>
<h2>To Do</h2>
<html><head><title>To Do</title>
<form name="checkListForm">
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <input type="text" name="checkListItem"/>
    <script type="text/javascript" src="script.js"></script>
</form>
    </head><body>
<div id="button">Add!</div>
        <h2>To Do</h2>
<br/>
        <form name="checkListForm">
<div id="list"></div>
            <input type="text" name="checkListItem"/>
</source>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div id="list"></div>
    </body>
</html>
</pre>


==== script.js ====
==== script.js ====
<pre>
<source lang="javascript">
$(document).ready(function(){
$(document).ready(function(){
     $('#button').click(function(){
     $('#button').click(function(){
         var toAdd = $('input[name=checkListItem]').val();
         var toAdd = $('input[name=checkListItem]').val();
         $('.list').append('<div class="item">' + toAdd + '</div>');
         $('#list').append('<div class="item">' + toAdd + '</div>');
     });
     });
     $(document).on('click', '.item', function(){
     $(document).on('click', '.item', function(){
Line 74: Line 120:
     });
     });
});
});
</pre>
</source>

Latest revision as of 21:55, 22 April 2015

http://learn.jquery.com/

Selectors

  • type: $('table')
  • attribute: $('[date="2015-04-21"]')
  • class: $('.even')
  • id: $('#main')

Filters

  • $('tr:eq(0)') finds the first row in a table
  • $('tr:gt(0)') finds all rows after the first
  • :even finds all even-numbered elements in a selection
  • :odd odd-numbered elements
  • :last last element
  • :empty elements that have no children
  • :focus the focused element
  • :not(selection) elements that don't match selection
  • :contains(text) element that contain certain text
  • input field selectors: :hidden, :text, :checkbox, :password

Combinations

  • $('tr.even') Rows with class 'even'
  • $('#tasks tr:first') The first row of a table with id 'tasks'
  • $('#tasks').find('tr:first') Same thing
  • $('tr:first', '#tasks') Same thing; second argument specifies DOM sub-tree to search
  • $('section:eq(1) table tr:last td') All table cells in the last row of all tables in the second section
  • $('select[name="category"] > option') All option elements that direct children of a particular select

Traversals

  • $('some selector').siblings() all siblings of the selected elements
  • $('some selector').siblings('td') the siblings of the selected elements that are td's
  • .next(), .prev(), .parent(), .closest(), .last()
  • .parents('.funky') any parents of the selected elements that are of class 'funky'
  • .andSelf() make sure the selected element(s) is included

Manipulation

  • .addClass('even'), .removeClass(...), .toggleClass(...)
  • .append('...some html...') add as last child of selected element
  • .prepend(...), .after(...), .before(...)
  • .remove(...), .replaceWith(...), .before(...)
  • $('select').val() get the value of the select element
  • $('select').val('AM') set the value of the select element
  • .html(), .text(), .attr()

Events

  • .click(), .dblclick(), .hover(), .mousedown(), .mouseup()
  • .keypress(), .keydown(), .blur(), .change(), .focus()
  • suppress default behavior of link, button, etc:
$('#myButton').click( function(e){
    e.preventDefault();
    // do something else
});

Example

HTML

<html><head><title>Button Magic</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='script.js'></script>
    </head><body>
         <div><br/><strong>Click Me!</strong></div>   
    </body>
</html>

stylesheet.css

div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}

script.js

$(document).ready(function(){
    $('div').mouseenter(function(){
        $('div').fadeTo('fast', 1.0);
    });
    $('div').mouseleave(function(){
        $('div').fadeTo('fast', 0.5);
    });
});


To Do List Example

HTML

<h2>To Do</h2>
<form name="checkListForm">
    <input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div id="list"></div>

script.js

$(document).ready(function(){
    $('#button').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('#list').append('<div class="item">' + toAdd + '</div>');
    });
    $(document).on('click', '.item', function(){
        $(this).remove()
    });
});
Retrieved from "https://wiki.scott5.org/index.php?title=JQuery&oldid=1554"