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.

Related Posts:

• HTML: Change Text and Font Colors
• How to Create Blinking Text in HTML
• PHP: GD Library Drawing Functions Reference
• Customize WordPress Post Editor CSS Styles
• Styling an Alphabet of 26 Letters in HTML and CSS

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;
  });
})();

Related Posts:

• jQuery: Check / uncheck form checkbox and radio
• Regular Expressions for Natural Numbers or Positive Integers (1, 2, 3, …), Negative Integers and Non-negative Integers
• Incisive Software Engineering & Programming Quotes and Sayings
• jQuery: How to check if an element has a particular class
• How to define multiple CSS rules / properties in jQuery?

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();

Related Posts:

• PHP: Drop Down List with Select
• JavaScript: Load Image based on Select Option (Dropdown)
• HTML Tags Design for Template / Theme Creation
• MySQL: Export Table to CSV Text Files for Excel
• PHP: Allow Specific HTML Tags in Text Input Controls of HTML Forms, <textarea>, <input type=”text” />

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

Related Posts:

• How to disable or enable a form element with jQuery?
• CSS: How to align HTML input checkbox and radio with text on the same line?
• jQuery: Protecting or hiding variables / functions in a specific local scope
• PHP: Checkbox Array in Form Handling – Multiple Checkbox Values in an Array
• jQuery: Get the text and value of the selected option of HTML select element

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.

Related Posts:

• jQuery: How to test or check whether an element exists
• jQuery: Selecting elements with uncommon / special characters in ID or class name
• jQuery: Protecting or hiding variables / functions in a specific local scope
• PHP: File Upload Script (HTML Form + PHP Handler Class)
• MySQL: Insert if doesn’t exist otherwise update the existing row

.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 }

Related Posts:

• PHP Array Length Function to Get Length of Arrays
• PHP: Count Words in a String
• jQuery: How to check if an element has a particular class
• PHP String Length function to Get Length of Strings in PHP
• JavaScript: Split and Divide Text String by A Delimiter

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.

Related Posts:

• jQuery: How to check if an element has a particular class
• PHP: Difference between htmlspecialchars() and htmlentities() Functions
• How to display HTML code on a web page?
• CSS: Double Border
• jQuery: Protecting or hiding variables / functions in a specific local scope

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");

Related Posts:

• jQuery: Check / uncheck form checkbox and radio
• CSS: Styling File Upload / Select Input Control <input type="file" … />
• jQuery: How to check if an element has a particular class
• JavaScript: How to set focus to form elements?
• jQuery: Protecting or hiding variables / functions in a specific local scope