jQuery Basic API

jQuery
Basic APIs

http://hyeonseok.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


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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie jQuery Basic API

Ähnlich wie jQuery Basic API (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery Basic API