.. Work in progress ..
When you start on a new or existing web project, one of the first questions you ask yourself (after the core technology and infrastructure is figured out) is how do you efficiently generate/construct web pages (HTML) and then the JavaScript library to use. Should you use a third party library, open source one, or should you write all your JS utilities yourself, as you or some team members are quite proficient.
Well, unless you are working on the Google classic home page, chances are that using a JS library helps and jQuery is one top-notch selector based JavaScript library, that I have followed since it was pulled together by John.
Some of the tips are mine while most are collected from over the web with appropriate references/sources tagged. Enjoy!
When you start on a new or existing web project, one of the first questions you ask yourself (after the core technology and infrastructure is figured out) is how do you efficiently generate/construct web pages (HTML) and then the JavaScript library to use. Should you use a third party library, open source one, or should you write all your JS utilities yourself, as you or some team members are quite proficient.
Well, unless you are working on the Google classic home page, chances are that using a JS library helps and jQuery is one top-notch selector based JavaScript library, that I have followed since it was pulled together by John.
Some of the tips are mine while most are collected from over the web with appropriate references/sources tagged. Enjoy!
Wait for document to be ready for DOM access and modifications
$(document).ready(function(){
// start/init js processing
// set/fire event handlers
// ...
});
Detect Browsers and versions
if ($.browser.msie) {
// ..
}
// more browser objects available as well - see official jquery site for more info
Select all nodes with tag name
$("a")
Select node with a specific id
$("#gears-of-war-section")
Set up JavaScript event handlers
This code selects all outgoing links (have css class "outgoing-link"), within the gears-of-war-section (which could be a div or whatever) and then attaches click handlers on them.. (This jQuery doc page lists the complete set of event names supported)
$("#gears-of-war-section.outgoing-link").click(function() {
// do things here
});
An example of the sexy jQuery Chaining feature (chaining event handlers)
$("#gears-of-war-section.outgoing-link").click(function() {
// what to do when links are clicked
}).mouseup(function() {
// what to do when user mouses over those links
});
Mark External Links
$("a").not("[href^=/]").not("[href^=#]").append("?");Use Your Own Bullets (Add a class dynamically to an element)
Append / Prepend text elements
$("ul > li").prepend("‒ ");
Append HTML content
Switch a stylesheet
$("#StylePrint").click(function() {
$("link[media='screen']").attr("href", "Print.css");
});
Default input text in forms
var defvalue = "Search!";
var selector = "#search-input-elem"; // can also make a function and have this as a param
if($.trim($(selector).val()) == "") {
$("#SearchText").val(defvalue);
}
$(selector).focus(function() {
if($("#search-input-elem").val() == defvalue) {
$("#search-input-elem").val("");
}
});
$(selector).blur(function() {
if($.trim($(selector).val()) == "") {
$(selector).val(defvalue);
}
});
Take advantage of CSS and XPath selectors
$("h2 + p").addClass("Large"); // select 1st paragraph and add Large class
Sources:
--
No comments:
Post a Comment