Contenu connexe Similaire à jQuery Basic API (20) jQuery Basic API6. 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://hyeonseok.com
9. Core
jQuery()
๏ jQuery( selector, [ context ] )
- $() .
- CSS jQuery .
- Selector Context
- .
$('div.foo').click(function() {
$('span', this).addClass('bar');
});
http://hyeonseok.com
10. 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');
})
http://hyeonseok.com
12. Core
jQuery()
๏ jQuery( html, [ ownerDocument ] )
- HTML .
- jQuery createElement
innerHTML .
- html, title, head .
- HTML
.
http://hyeonseok.com
13. Core
jQuery()
๏ jQuery( html, props )
- .
$("<div/>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");
http://hyeonseok.com
15. Core
๏ jQuery.holdReady()
- Holds or releases the execution of jQuery's ready event.
๏ jQuery.noConflict()
- Relinquish jQuery's control of the $ variable.
๏ jQuery.sub()
- Creates a new copy of jQuery whose properties and methods can be
modified 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.
http://hyeonseok.com
16. 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();
http://hyeonseok.com
18. Selectors
Basic
๏ CSS .
- All Selector ("*")
- Class Selector (".class")
- Element Selector ("element")
- ID Selector ("#id")
- Multiple Selector ("selector1, selector2, selectorN")
http://hyeonseok.com
19. 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"]
http://hyeonseok.com
20. Selectors
Attribute
๏ Multiple Attribute Selector [name="value"][name2="value2"]
๏ Attribute Contains Selector [name*="value"]
๏ Attribute Contains Prefix Selector [name|="value"]
๏ Attribute Contains Word Selector [name~="value"]
http://hyeonseok.com
22. Selectors
Basic Filter
๏ :eq() Selector
- n .
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>
http://hyeonseok.com
23. Selectors
Basic Filter
๏ :lt() Selector, :gt() Selector
- n ,n .
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:lt(4)").css("color", "red");</script>
http://hyeonseok.com
26. 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>
http://hyeonseok.com
27. 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>
http://hyeonseok.com
29. Selectors
Form
๏ :input Selector, :checkbox Selector, :radio Selector
๏ :text Selector, :password Selector, :file Selector
๏ :button Selector, :submit Selector, :image Selector, :reset
Selector
๏ :focus selector
๏ :checked Selector
๏ :selected Selector
๏ :enabled Selector, :disabled Selector
http://hyeonseok.com
30. Selectors
Hierarchy
๏ Child Selector ("parent > child")
- .
๏ Descendant Selector ("ancestor descendant")
- .
๏ Next Adjacent Selector ("prev + next")
- prev next .
http://hyeonseok.com
31. 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>
http://hyeonseok.com
34. 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>
http://hyeonseok.com
35. 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>
http://hyeonseok.com
36. Traversing
Tree Traversal
๏ .closest()
-
.
๏ .find()
- , 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>
http://hyeonseok.com
44. Traversing
Miscellaneous 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>
http://hyeonseok.com
47. 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 .
http://hyeonseok.com
48. 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()
- .
http://hyeonseok.com
50. Manipulation
Class Attribute
๏ .addClass()
- (class) .
๏ .removeClass()
- .
$("p").removeClass("myClass noClass").addClass("yourClass");
๏ .hasClass()
- .
var hasFoo = $('p').hasClass('foo');
http://hyeonseok.com
51. 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>
http://hyeonseok.com
52. 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>');
http://hyeonseok.com
58. 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 .
http://hyeonseok.com
59. 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>
http://hyeonseok.com
60. 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>
http://hyeonseok.com
61. Manipulation
Copying
๏ .clone()
- .
<b>Hello</b><p><b>Hello</b>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
http://hyeonseok.com
68. Event
Event handling
๏ .
$('a:first').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
return false; // Or ev.preventDefault();
});
$('a:first').click();
http://hyeonseok.com
72. Event
Mouse Events
๏ .toggle()
- .
- .preventDefault()
.
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
http://hyeonseok.com
75. Event
Mouse Events
๏ .hover()
-
.
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
http://hyeonseok.com
77. Event
Form Events
๏ .change()
- change .
๏ .select()
- select .
๏ .submit()
- submit .
- return false .
$('form').submit(function () {
return false;
});
http://hyeonseok.com
83. Event
Event Handler Attachment
๏ .trigger()
- .
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
๏ .triggerHandler()
- .trigger() .
http://hyeonseok.com
89. 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.
});
});
http://hyeonseok.com
90. 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>
http://hyeonseok.com
94. 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.');
});
http://hyeonseok.com
95. 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) ] )
http://hyeonseok.com
96. 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) )
http://hyeonseok.com
97. 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.
http://hyeonseok.com
98. AJAX
Low-Level Interface
๏ jQuery.ajax()
- Perform an asynchronous HTTP (Ajax) request.
๏ jQuery.ajaxPrefilter()
- 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.
http://hyeonseok.com