JQuery: Difference between revisions
Jump to navigation
Jump to search
| (15 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{lowercase title}} | {{lowercase title}} | ||
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 ==== | ||
< | <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> | |||
<div><br/><strong>Click Me!</strong></div> | |||
</body> | |||
</html> | </html> | ||
</ | </source> | ||
==== | ==== stylesheet.css ==== | ||
< | <source lang="css"> | ||
div { | div { | ||
height: 60px; | height: 60px; | ||
| Line 27: | Line 82: | ||
opacity: 0.5; | opacity: 0.5; | ||
} | } | ||
</ | </source> | ||
==== | ==== script.js ==== | ||
< | <source lang="javascript"> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$('div').mouseenter(function(){ | $('div').mouseenter(function(){ | ||
| Line 39: | Line 94: | ||
}); | }); | ||
}); | }); | ||
</ | </source> | ||
== To Do List Example == | |||
==== HTML ==== | |||
<source lang="html4strict"> | |||
<h2>To Do</h2> | |||
<form name="checkListForm"> | |||
<input type="text" name="checkListItem"/> | |||
</form> | |||
<div id="button">Add!</div> | |||
<br/> | |||
<div id="list"></div> | |||
</source> | |||
==== script.js ==== | |||
<source lang="javascript"> | |||
$(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() | |||
}); | |||
}); | |||
</source> | |||
Latest revision as of 21:55, 22 April 2015
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:evenfinds all even-numbered elements in a selection:oddodd-numbered elements:lastlast element:emptyelements that have no children:focusthe 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()
});
});