Think jQuery
18
Think jQuery 08/29/22 By Ying Zhang
-
Upload
ying-zhang -
Category
Technology
-
view
2.564 -
download
4
Transcript of Think jQuery
Think jQuery
04/12/23By Ying Zhang
04/12/23 Ying Zhang 2
What is jQuery
A javascript library that doesn’t intermingle with HTML (unobtrusive)
Uses concise syntax to speed up DOM programming
Relatively new: released on BarCamp NYC on Jan 2006
Picking up momentum recently Allows you to write less, do more
04/12/23 Ying Zhang 3
Why use jQuery Selector syntax is based on CSS (created by people who understand CSS)
jQuery(‘h#header span’) $(“div.neato > input.radio”)
Lightweight 15kb compressed 29kb packed
Good documentation Great community
Mailing list gets 10-20 conversations per day Tons of plugins and growing
Works well with other Javascript libraries Good browser compatibility
IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Integrated with Firebug
console.log($(“div.jQuery”)) Write less, do more
04/12/23 Ying Zhang 4
jQuery crash course $(“div.section”) returns a jQuery collection obj
Assign it to a variable var mySection = $(“div.section”); But remember, it’s a jQuery obj not a DOM obj, therefore use $(mySection) to interact
with it Select Info
$(mySection).children("p:first") Traverse
$(mySection).each(function(i,div) { // blah }); Manipulate
$(mySection).html(“<span>some text</span>”); $(mySection).append(“<span>some text</span>”);
$("<span/>").html("some text").appendTo(mySelection); Bind Events
$(mySection).click(function() { $(“div#someOtherDiv).toggle();
}); jQuery documentation is categorized this way
04/12/23 Ying Zhang 5
Chaining
Since most jQuery methods return an object, you may chain methods together$(“<form/>”)
.addClass(“form”)
.attr(“id”, “unique”)
.find(“input.firstName”).removeClass(“formInput”)
.submit(function() { return confirm(“Are you sure?” })
.appendTo(“div#parentWrapper”);
04/12/23 Ying Zhang 6
Going unobtrusive
$(document).ready(function() {alert(‘DOM is ready’);
});Replaces non-lib js code:
window.onload=function() {alert(‘DOM is ready’);
}Or
<body onload=“alert(‘DOM is ready’)”>But it’s so much superior!!!
04/12/23 Ying Zhang 7
Going unobtrusive cont. If you have two scripts that required page onload calls
Traditional javascript: loadClock.js
window.onload=loadClock; loadOther.js
window.onload=loadOther; But it will not work because loadOther will override loadClock. So you must either
create another js that contains window.onload=function() {loadClock(); loadOther()}
or do <body onload=“loadClock();loadOther()”>
in your HTML It requires you to have knowledge that both loadClock and loadOther need to be called
on page load jQuery
loadClock.js $(function() { // code for your clock loading });
loadOther.js $(function() { // code for your other loading });
Include both scripts in your HTML and you are done Nothing needs to be aware of both loadClock and loadOther
04/12/23 Ying Zhang 8
Syntax notes
Different versions of the same thing $(document).ready(function() {}); jQuery(function($){}); $(function() {});
jQuery = $ $(“div.section”) is the same as
jQuery(“div.section”)
04/12/23 Ying Zhang 9
jQuery one liners Issue: I cannot correct table border=“1” with CSS
$(“table[border!=‘0’]”).attr(“border”, “0”); Issue: I want to know if the user doesn’t check any
checkboxes in a group $(“.groupWrapper :checked”).length == 0
Issue: Put focus on the first input field when page loads $(“#wrapper :input:eq(0)”).focus();
Issue: ‘Clear page’ button needs to clear values off all of the input fields on the screen $(“input#clearPage”).click(function() { $(“:input”).val(“”); });
04/12/23 Ying Zhang 10
Let’s write something
Problem Have a list of checkboxes for a particular field The choices are persisted to the backend The page may be loaded with previous
selection or no selection If all left unchecked, prevent user from moving on If check fields are pre-populated & the user makes
changes to the selections, warn user the selection has been updated
04/12/23 Ying Zhang 11
Let’s write something cont.
Basic Tactic On page load
save checked checkboxes into a global variable checked
On form submit save checked checkboxes into a local variable onSubmitChecked
compare it to checked and do more logic to determine if the submission should be allowed
04/12/23 Ying Zhang 12
The HTML<form action="#">
<h2>Distributions</h2><ul id="distributions">
<li><input type="checkbox" id="checkbox1"><label for="checkbox1"> Distribution 1</label></li>
<li><input type="checkbox" id="checkbox2"><label for="checkbox2"> Distribution 2</label></li>
<li><input type="checkbox" id="checkbox3"><label for="checkbox3"> Distribution 3</label></li>
<li><input type="checkbox" id="checkbox4"><label for="checkbox4"> Distribution 4</label></li>
<li><input type="checkbox" id="checkbox5"><label for="checkbox5"> Distribution 5</label></li>
<li><input type="checkbox" id="checkbox6"><label for="checkbox6"> Distribution 6</label></li>
<li><input type="checkbox" id="checkbox7"><label for="checkbox7"> Distribution 7</label></li>
<li><input type="checkbox" id="checkbox8"><label for="checkbox8"> Distribution 8</label></li>
<li><input type="checkbox" id="checkbox9"><label for="checkbox9"> Distribution 9</label></li>
</ul><input type="submit" id="submit" value="Submit" />
</form>
04/12/23 Ying Zhang 13
The jQuery script<script type="text/javascript">var checked;jQuery(function($){
checked = $("ul#distributions :checked");$("#submit").click(function() {
return validForm();});
});
function validForm() {var valid = true;var onSubmitChecked = $("ul#distributions :checked");// if nothing is checked, alert and return falseif(onSubmitChecked.length == 0) {
alert("Please select at least one distribution!");valid = false;
} else {var warn = false;// if the length doesn't match, then the checked has been updated
04/12/23 Ying Zhang 14
The jQuery script cont.if(checked.length != onSubmitChecked.length) {
warn = true;} else {
// if all the checked ones match the checked ones in onSubmitChecked$(checked).each(function(i,checkbox) {
var onSubmitCheckbox = $(onSubmitChecked).get(i);//if($(this).attr("id") != $(onSubmitCheckbox).attr("id")) {if($(this).next().text() != $(onSubmitCheckbox).next().text()) {
warn = true;return false; // breaks out of the for each loop
}});
}if(warn) {
valid = confirm("Selected distributions have been updated.\n\nAre you sure you wish to continue?");
}}return valid;
}</script>
04/12/23 Ying Zhang 15
Cool plugins Hotkeys – bind anything to key shortcuts Textarea Resizer – drag and resize text input
area http://jquery.com/demo/thickbox/ – modal
window jQuery Ajax Form jQuery Validation (Coz I contributed) DodosPicklist So many more http://plugins.jquery.com/ Or just search Google for jQuery plugins
04/12/23 Ying Zhang 16
Extending jQuery Writing a jQuery plugin jQuery.fn.functionName = function(param) { } jQuery object vs. DOM object
$(this) vs this $(this)[0] gets the DOM object
Optional parameters jQuery.fn.multiSelect = function(to, options) { } options = $.extend({
sortOptions: true, autoSubmit: true
}, options); $(“#example”).multiSelect(“#blah”, {
sortOptions: false });
04/12/23 Ying Zhang 17
jQuery vs. other libraries Sites/projects that use jQuery
Wordpress – I’d argue it is the best open source blog script on the web
Firefox – Take a peek at the source code RichFaces – jQuery is included with the framework Oracle – Fan blog entry?
Vs. Prototype Now Ruby on Rails come prepackaged with it script.aculo.us
I do not see an ever growing plugins list The demos hardly changed since I visited two years ago If interested, watch this slide
Maybe prototype has more OOP support? But jQuery has basic support too
04/12/23 Ying Zhang 18
jQuery Resources (Duh)http://jquery.com http://remysharp.com/jquery-api/ (General)http://groups.google.com/group/jquery-en (Plugin)http://groups.google.com/group/jquery-plugins http://www.learningjquery.com/ (Search jQuery)http://www.slideshare.net/ Use jQuery without download:
<!-- jQuery packed --><script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
