The Philosophy of jQuery

We know that jQuery’s straight philosophy is “Write less, do more.” So I’m going to break this philosophy into three simple concepts.

  • jQuery is used to chain many jQuery methods on a set of elements.
  • jQuery is a way to find some elements and doing some stuff with them.
  • Using implicit iteration and wrapper provided by jQuery.

Now, I’ll write the details about above three concepts.

Apply something after finding elements

For explaining the term, I’m going to take an example.

[code type=”php”]
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘p’).hide();    //hide all Ps on the page
$(‘p’).text(‘Ok’); //Updating the text inside all Ps on page
$(‘p’).addClass(‘myclass’); //Adding class to all Ps
$(‘p’).show();   //Showing all Ps.
});
</script>
</head>
<body>
<p>What are you doing right now?</p>
</body>
</html>
[/code]

In this code, I’m finding an element for example ‘p’ in this scenario and applying some jQuery methods to do something. So I hope, now you have understand the first concept.

Chaining in jQuery

jQuery is well constructed in a way we can chain elements by using methods. In the previous example, I applied jQuery methods but there is also a way that we can chain jQuery methods. For example we can use the above example as:

[code type=”php”]
$(‘p’).hide().text(‘OK’).addClass(‘myclass’).show();
[/code]

This is called chaining in jQuery.

Using implicit iteration and wrapper provided by jQuery

While we are working on jQuery, we are just going to access DOM elements and doing something. In other words, you will be searching DOM elements from a page that will be wrapped by jQuer functionality. For explaining the concept, I’m going to add some more paragraphs in <body>

[code type=”php”]
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘p’).hide().text(‘OK’).addClass(‘myclass’).show();
});
</script>
</head>
<body>
<p>What are you doing right now?</p>
<p>What are you doing right now?</p>
<p>What are you doing right now?</p>
<p>What are you doing right now?</p>
<p>What are you doing right now?</p>
</body>
</html>
[/code]

In this case after the document is ready, jQurery will scan the page and when it will encounter all <p> elements in the wrapper set so that jQuery will perform iteration and will change all the <p> in the page. This is the third concept. If you have any question please leave the comment.

Duan Lingxin

Duan Lingxin

Content crafter and chief editor at Scratching Info. Also regular contributor on other major online tech platforms. Security Specialist by day and a writer by night, he does his best to instill his knowledge about tech while delivering inspiring and life changing resources through his writing,

More Posts - Website

Leave a Comment