jQuery Basic API

jQuery
Basic APIs

http://hyeonseok.com

http://jquery.com

jQuery
introduction


Introduction
JavaScript library
๏ UI .

- .

๏
.

- Prototype, mooTools, YUI, Dojo, Ext JS, etc.

๏ .

- .

- ( , , ) .


Introduction
jQuery write less, do more
๏ .

๏ .

๏ .

๏ .

๏ .

๏ .

๏ MIT and GPL licenses.


Introduction
Installation
๏ jquery.com .
<script src="jquery.js"></script>
<script>
// your script goes here.
</script>

๏ CDN(Content delivery network) .

- Google Ajax API CDN: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

- Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js

- jQuery CDN: http://code.jquery.com/jquery-1.6.1.min.js


http://www.panic.com/coda/

jQuery
core


Core
jQuery()
๏ jQuery( selector, [ context ] )
- $() .

- CSS jQuery .

- Selector Context

- .

$('div.foo').click(function() {
$('span', this).addClass('bar');
});


Core
jQuery()
๏ jQuery( element ), jQuery( elementArray )
- DOM .

- this jQuery .

$('div.foo').click(function() {
$(this).slideUp();
});

- AJAX XML $ .

$.post('url.xml', function(data) {
var $child = $(data).find('child');
})


Core
jQuery()
๏ jQuery( jQuery object )
- jQuery jQuery .

๏ jQuery()

- .length 0 .


Core
jQuery()
๏ jQuery( html, [ ownerDocument ] )
- HTML .

- jQuery createElement
innerHTML .

- html, title, head .

- HTML
.


Core
jQuery()
๏ jQuery( html, props )
- .
$("<div/>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");


Core
jQuery()
๏ jQuery( callback )
- $(document).ready() DOM
.
$(function(){
// Document is ready
});


Core
๏ jQuery.holdReady()
- Holds or releases the execution of jQuery's ready event.

๏ jQuery.noConﬂict()
- Relinquish jQuery's control of the $ variable.

๏ jQuery.sub()
- Creates a new copy of jQuery whose properties and methods can be
modiﬁed without affecting the original jQuery object.

๏ jQuery.when()
- Provides a way to execute callback functions based on one or more
objects, usually Deferred objects that represent asynchronous events.


Core
Chaining
๏ jQuery jQuery .

- .

$('div.section').hide().addClass('gone');

๏ .end()
.
$('ul.first').find('.foo')
.css('background-color', 'red')
.end().find('.bar')
.css('background-color', 'green')
.end();


jQuery
selectors


Selectors
Basic
๏ CSS .

- All Selector ("*")

- Class Selector (".class")

- Element Selector ("element")

- ID Selector ("#id")

- Multiple Selector ("selector1, selector2, selectorN")


Selectors
Attribute
๏ Has Attribute Selector [name]

๏ Attribute Equals Selector [name="value"]

๏ Attribute Not Equal Selector [name!="value"]

๏ Attribute Starts With Selector [name^="value"]

๏ Attribute Ends With Selector [name$="value"]


Selectors
Attribute
๏ Multiple Attribute Selector [name="value"][name2="value2"]

๏ Attribute Contains Selector [name*="value"]

๏ Attribute Contains Preﬁx Selector [name|="value"]

๏ Attribute Contains Word Selector [name~="value"]


Selectors
Basic Filter
๏ :ﬁrst Selector, :last Selector
- , .

๏ :even Selector, :odd Selector

- , .


Selectors
Basic Filter
๏ :eq() Selector
- n .

<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>


Selectors
Basic Filter
๏ :lt() Selector, :gt() Selector
- n ,n .

<table border="1">
</table>
<script>$("td:lt(4)").css("color", "red");</script>


Selectors
Basic Filter
๏ :header Selector
- .

๏ :not() Selector

- .

๏ :animated Selector
- .


Selectors
Child Filter
๏ :ﬁrst-child Selector, :last-child Selector
- , .

๏ :only-child Selector

- .


Selectors
Child Filter
๏ :nth-child() Selector
- n .

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</
script>


Selectors
Content Filter
๏ :contains() Selector
- .

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>


Selectors
Content Filter
๏ :empty Selector
- .

๏ :parent Selector

- .

๏ :has() Selector
- .


Selectors
Form
๏ :input Selector, :checkbox Selector, :radio Selector

๏ :text Selector, :password Selector, :ﬁle Selector

๏ :button Selector, :submit Selector, :image Selector, :reset
Selector

๏ :focus selector

๏ :checked Selector

๏ :selected Selector

๏ :enabled Selector, :disabled Selector


Selectors
Hierarchy
๏ Child Selector ("parent > child")
- .

๏ Descendant Selector ("ancestor descendant")

- .

๏ Next Adjacent Selector ("prev + next")
- prev next .


Selectors
Hierarchy
๏ Next Siblings Selector ("prev ~ siblings")
- prev .

<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>


Selectors
Visibility Filter
๏ :visible Selector
- .

๏ :hidden Selector

- .


jQuery
traversing


Traversing
Tree Traversal
๏ .children()
- . .

<p>Hello (this is a paragraph)</p>
<div><span>Hello Again (this span is a child of the a div)</span></
div>
<p>And <span>Again</span> (in another paragraph)</p>
<div>And One Last <span>Time</span> (most text directly in a div)</
div>
<script>
$("div").children().css("border-bottom", "3px double red");
</script>


Traversing
Tree Traversal
๏ .siblings()
- .

<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>


Traversing
Tree Traversal
๏ .closest()
-
.

๏ .ﬁnd()
- , jQuery , DOM
.
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
<script>
var $spans = $('span');
$("p").find( $spans ).css('color','red');
</script>


Traversing
Tree Traversal
๏ .next()
- .

๏ .nextAll()

- .

๏ .nextUntil()
- .


Traversing
Tree Traversal
๏ .prev()
- .

๏ .prevAll()

- .

๏ .prevUntil()
- .


Traversing
Tree Traversal
๏ .parent()
- .

๏ .parents()

- .

๏ .parentsUntil()
- .

๏ .offsetParent()

- .


Traversing
Filtering
๏ .eq()
- n .

๏ .ﬁrst()

- .

๏ .last()
- .

๏ .slice()

- .


Traversing
Filtering
๏ .has()
- DOM
.

๏ .not()
- .

๏ .is()

- , jQuery
.


Traversing
Filtering
๏ .map()
- jQuery
.

๏ .ﬁlter()
- , jQuery , .


Traversing
Miscellaneous Traversing
๏ .add()
- jQuery .

๏ .end()

- .
<p><span>Hello</span>, how are you?</p>
<script>
$("p").find("span").end().css("border", "2px red solid");
</script>


Traversing
๏ .contents()
- . .children()
.contents() .
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<br /><br />
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<br /><br />
<p>Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<script>
$('.container').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<p></p>').end().filter('br').remove();
</script>


Traversing
๏ .andSelf()
- .
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
$("div").find("p").andSelf().addClass("border");
</script>


jQuery
manipulation


Manipulation
General Attributes
๏ .attr()
- HTML , .

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

- JSON .

$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});

๏ .removeAttr()
- HTML .


Manipulation
General Attributes
๏ .prop()
- , .

- <input type="checkbox" checked="checked" /> (jQuery 1.6 )

- $('input').attr('checked') == 'checked' (string type)

- $('input').prop('checked') == true (boolean type)

๏ .removeProp()
- .


Manipulation
General Attributes
๏ .val()
- (value) .

$('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});


Manipulation
Class Attribute
๏ .addClass()
- (class) .

๏ .removeClass()

- .

$("p").removeClass("myClass noClass").addClass("yourClass");

๏ .hasClass()
- .

var hasFoo = $('p').hasClass('foo');


Manipulation
Class Attribute
๏ .toggleClass()
- .
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>


Manipulation
DOM Insertion, Inside
๏ .text()
- , .

$('div.demo-container').text('<p>This is a test.</p>');

๏ .html()

- HTML , .

$('div.demo-container').html('<p>All new content. <em>You bet!</
em></p>');


Manipulation
๏ .prepend()
- jQuery .

๏ .prependTo()

- jQuery .


Manipulation
๏ .append()
- jQuery .

๏ .appendTo()

- jQuery .


Manipulation
DOM Insertion, Outside
๏ .before()
- jQuery .

๏ .insertBefore()

- jQuery .


Manipulation
DOM Insertion, Outside
๏ .after()
- jQuery .

๏ .insertAfter()

- jQuery .


Manipulation
DOM Removal
๏ .remove()
- DOM .

๏ .detach()

- DOM .
.

๏ .empty()

- DOM .


Manipulation
DOM Replacement
๏ .replaceWith()
- jQuery .

<buttondiv>First</buttondiv>
<buttondiv>Second</buttondiv>
<buttondiv>Third</buttondiv>

<script>
$("button").click(function () {
$(this).replaceWith( "<div>" + $(this).text() + "</div>" );
});
</script>

๏ .replaceAll()

- jQuery .


Manipulation
DOM Insertion, Around
๏ .wrap()
- .

<div><p>Hello</p></div>
<div><p>cruel</p></div>
<div><p>World</p></div>
<script>$("p").wrap("<div></div>");</script>

๏ .wrapAll()

- .

<div><p>Hello</p>
<p>cruel</p>
<p>World</p></div>
<script>$("p").wrapAll("<div></div>");</script>


Manipulation
DOM Insertion, Around
๏ .unwrap()
- .

๏ .wrapInner()

- .
<p><b>Hello</b></p>
<p><b>cruel</b></p>
<p><b>World</b></p>
<script>$("p").wrapInner("<b></b>");</script>


Manipulation
Copying
๏ .clone()
- .

<b>Hello</b><p><b>Hello</b>, how are you?</p>

<script>
$("b").clone().prependTo("p");
</script>


Manipulation
Style Properties
๏ .css()
- , .

- .

$('#mydiv').css('color', 'green');

- index .
$('div.example').css('width', function(index) {
return index * 50;
});


Manipulation
Style Properties
๏ .height()
- .

var height = $('div#intro').height();

๏ .innerHeight()

- .

๏ .outerHeight()
- , .

- .


Manipulation
Style Properties
๏ .width()
- .

๏ .innerWidth()

- .

๏ .outerWidth()
- , .


Manipulation
Style Properties
๏ .position()
- .

๏ .offset()

- .


Manipulation
Style Properties
๏ .scrollLeft()
- .

๏ .scrollTop()

- .


jQuery
event


Event
Event handling
๏ .
$('a:first').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
return false; // Or ev.preventDefault();
});
$('a:first').click();


Event
Keyboard Events
๏ .focusin()
- focusin .

๏ .focusout()

- focusout .

- blur focusout .


Event
Keyboard Events
๏ .keydown()
- keydown .

๏ .keyup()

- keyup .

๏ .keypress()
- keypress .


Event
Mouse Events
๏ .click()
- click .

๏ .dblclick()

- click .

๏ .mouseup()
- mouseup .

๏ .mousedown()

- mousedown .


Event
Mouse Events
๏ .toggle()
- .

- .preventDefault()
.

$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);


Event
Mouse Events
๏ .mouseover()
- mouseover .

๏ .mouseout()

- mouseout .

๏ .mousemove()
- mousemove .


Event
Mouse Events
๏ .mouseenter()
- .

๏ .mouseleave()

- .


Event
Mouse Events
๏ .hover()
-
.
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);


Event
Form Events
๏ .focus()
- focus .

๏ .blur()

- blur .


Event
Form Events
๏ .change()
- change .

๏ .select()

- select .

๏ .submit()
- submit .

- return false .

$('form').submit(function () {
return false;
});


Event
Document Loading
๏ .load()
- load .

๏ .ready()

- DOM .

๏ .unload()
- unload .


Event
Browser Events
๏ .error()
- error .

๏ .resize()

- resize .

๏ .scroll()
- scroll .


Event
Event Handler Attachment
๏ .bind()
- .

๏ .unbind()

- .

๏ .one()
- .bind() .unbind() .


Event
๏ .live()
- .

- (event delegation)
.bind() .

๏ .die()

- .live() .


Event
๏ .delegate()
- .

- .live() DOM
.

๏ .undelegate()

- .delegate() .


Event
๏ .trigger()
- .

$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');

๏ .triggerHandler()

- .trigger() .


jQuery
effect


Effect
Basics
๏ .show()
- .

๏ .hide()

- .

$('.target').hide('slow');

๏ .toggle()
- .


Effect
Fading
๏ .fadeIn()
- .

๏ .fadeOut()

- .

$('.target').fadeOut(2000);


Effect
Fading
๏ .fadeTo()
- .

๏ .fadeToggle()

- .


Effect
Sliding
๏ .slideUp()
- .

$('.target').slideUp('fast');

๏ .slideDown()

- .

๏ .slideToggle()
- .


Effect
Custom
๏ .animate()
- CSS ( ) .

- width, height, left, scrollTop, scrollLeft .

- shorthand .

$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});


Effect
Custom
๏ .stop()
- .

๏ .delay()

- .

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>


Effect
Custom
๏ .queue()
- jQuery fx (queue)
.

- .

๏ .dequeue()

- .

๏ .clearQueue()
- .


Effect
Custom
๏ jQuery.fx.interval
- .

- 13 .

๏ jQuery.fx.off
- .

- .


jQuery
AJAX


AJAX
Shorthand Methods
๏ .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
$('#result').load('ajax/test.html');

- url
.

$('#result').load('ajax/test.html #container');

- data POST, GET .

- .

$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});


AJAX
Shorthand Methods
๏ $.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});

๏ $.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

$.post('ajax/test.html', function(data) {
$('.result').html(data);
});

๏ $.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

๏ $.getScript( url, [ success(data, textStatus) ] )


AJAX
Global Ajax Event Handlers
๏ .ajaxStart( handler() )

๏ .ajaxStop( handler() )

๏ .ajaxSend( handler(event, jqXHR, ajaxOptions) )

๏ .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )

๏ .ajaxSuccess()

๏ .ajaxError( handler(event, jqXHR, ajaxSettings, thrownError) )


AJAX
Helper Functions
๏ jQuery.param()
- Create a serialized representation of an array or object, suitable for
use in a URL query string or Ajax request.

๏ .serialize()
- Encode a set of form elements as a string for submission.

๏ .serializeArray()
- Encode a set of form elements as an array of names and values.


AJAX
Low-Level Interface
๏ jQuery.ajax()
- Perform an asynchronous HTTP (Ajax) request.

๏ jQuery.ajaxPreﬁlter()
- Handle custom Ajax options or modify existing options before each
request is sent and before they are processed by $.ajax().

๏ jQuery.ajaxSetup()
- Set default values for future Ajax requests.


jQuery Basic API

More Related Content

What's hot (18)

Similar to jQuery Basic API (20)

Recently uploaded (20)

jQuery Basic API