Learning jQuery

Suppose your webpage has many <p> (Paragraph) tags/elements, and you want to hide those paragraph elements which have specific text or word. For example, hide all p tag element which have "jquery" word in it. This can be done easily using jQuery. jQuery has ":contains" selector which can be used to select p tags with specific text.

The code $("p:contains('Javascript')") will select all the <p> tag element which have text "Javascript" in it. But remember, ":contains" selector is case sensitive.

$('#btnHide').click(function() {
     $("p:contains('Javascript')").hide();
});
$('#btnReset').click(function() {
    $("p:contains('JavaScript')").show();
});

See result below

You might be aware that jQuery ":contains()" is case sensitive. So for ":contains", the word "Javascript" and "JavaScript" are different. If you have paid attention to above jQuery code, I have used different words in ":contains", yet it is working. In spite of ":contains" being case sensitive, the above jQuery code is working. Wondering?

Well, there is a way by which you can extend the default behavior of contains and make it case-insensitive.

Code to make jQuery :contains Case-Insensitive

jQuery.expr[':'].contains = function(a, i, m) {
 return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

Feel free to contact me for any help related to jQuery, I will gladly help you.