Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

How to define multiple CSS rules / properties in jQuery?

The simplest way to define a CSS rule in jQuery might be:

$(".sth").css("color", "#f00");

To define more than one CSS rule in a single jQuery line:

$(".sth").css("color", "#f00").css("font-style", "italic").css("text-decoration", "underline");

Which simply doesn’t look that good, especially if you intend to add more. A better way to specify multiple CSS rules or properties with jQuery is by a JSON object:

$(".sth").css( {'color' : '#f00', 'font-style' : 'italic', 'text-decoration' : 'underline'} );

However, it is recommended that you use .addClass() instead of .css() to separate the JavaScript logics and CSS styles for maintainability.

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Protecting or hiding variables / functions in a specific local scope

As everyone who’s well trained in software engineering would agree, that one of the principle of writing predictable code is to separate and hide something within only the scope that it’s needed. Controlled access to and from the outside world brings predictability and accountability of your code thus better debugging.

In jQuery, you need constantly extending the native features by writing extra plugins and adding new functions:

var newMethods = {
  check       : function() { ... },
  uncheck     : function() { ... },
  toggleCheck : function() { ... }
};
jQuery.each(newMethods, function(i) {
  jQuery.fn[i] = this;
});

Without proper fencing, the variable containing 3 functions newMethods is everything but protected from the global scope (outside world), increaseing the complexity of the code and difficulty in debugging. To solve this problem, you will want to embrace the code in an anonymous function.

(function() {
  var newMethods = {
    check       : function() { ... },
    uncheck     : function() { ... },
    toggleCheck : function() { ... }
  };
  jQuery.each(newMethods, function(i) {
    jQuery.fn[i] = this;
  });
})();
Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Get the text and value of the selected option of HTML select element

For instance, there’s a HTML select element identified by the ID #title, and after the user has selected one of the options, you want to get the text and value of the selected option.

<select id="title">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Miss</option>
</select>

Now that the user has selected the 2nd option: Mrs. To get the value (in this case, ‘2’):

$("select#title").val();

Which is also the common function to return the value of all other form controls.

To get the text of the selected option (in this case, ‘Mrs’):

$("#title option:selected").text();

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Check / uncheck form checkbox and radio

Using both attr() and removeAttr() functions, it’s actually the same as enabling and disabling form controls with jQuery.

$("#option").attr("checked", "checked"); // make checkbox or radio checked
$("#option").removeAttr("checked"); // uncheck the checkbox or radio

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: How to check if an element has a particular class

To know whether a class exists on an element with jQuery, you need a simple test method: is().

For example, to test if an element #elm has the class ‘first’:

if ($(#elm).is('.first')) {
//#elm has the class
} else {
//#elm doesn't have the class
}

jQuery is() is the function that checks if any of the returned DOM objects from the selector satisfies the criteria set in the argument.

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: How to test or check whether an element exists

.length property in JavaScript returns the length or number of elements inside an array or the string length. While jQuery selector mechanism $(“elm”) returns an array of DOM objects (such as elements), you can also get the number of the length of the returned objects array by:

$("#some").length

To check the existence of the element, just check if the returned value of length is zero:

if ($("#some").length) { //#some element exists }
Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Selecting elements with uncommon / special characters in ID or class name

HTML generated by some CMS or frameworks include elements with rather uncommon characters in ID or class names. For example, some may have special characters such as ‘.’ or ‘[..]’ in the ID or Class. To work around this, a selector in jQuery should be written this way:

$("$some.id") // won't work for ID: some.id $("$some\\.id") // works for ID: some.id

With brackets in ID:

$("$some[id]") // won't work for ID: some[id] $("$some\\[id\\]") // works for ID: some[id]

You get the idea. Just add double backslashes \\ before any of the special characters.

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

How to disable or enable a form element with jQuery?

You need 2 jQuery functions: attr and removeAttr.

To disable a form element such as a text input or a button (with a made-up id: #elm):

$("#elm").attr("disabled", "disabled");

To enable a disabled form element:

$("#elm").removeAttr("disabled");