JQuery Writing Rules

After connecting the JQuery library to all the pages we will use, we can now use JQuery methods. The first thing we need to do is to define the document.ready event between the script tags in the head part of our page. Then, other events and the functions to be connected to them are defined within this function.

What is the document.ready event?

The biggest benefit of using the Document.ready event is to prevent the JQuery codes we write from running before the page is completely loaded. If a JQuery code tries to run for an element on the page before it is fully loaded, it will cause an error. The Document.ready event is written as follows:

$(document).ready(function(){
 // we will create other functions here.
});

JQuery Function Usage

Like JavaScript and other event-driven languages, jQuery is used by specifying methods or functions that will run when an event occurs. As in the example below, the HTML element(s) that will perform the event are specified after the $ sign. These elements that will trigger the event are called selectors. Then, the name of the event that will run when that event occurs is written. The actions to be taken when the specified event occurs are written between the curly brackets. Example:

$(document).ready(function(){
 $("button").click(function(){
 $("p").hide();
 });
});

In the example above, a function has been created that will run when HTML elements of button type are clicked. In the function, the hide method is run for p tags, thus hiding all p tags. In the example above, the button tag is used as the selector. Therefore, this function will work when all of the button elements on the page are clicked. id, class or other expressions can also be used selectively instead of the tag name. Some examples are given and explained below. Working states can be seen in the examples section. The hide method was used in all examples. The goal is to understand selectors.

$("p").hide(); //works for all p tags

$(".text").hide(); //.works for all tags with text class applied

$("#text").hide(); //works for tags with text id

$(this).hide(); //runs for the element itself that triggered the event.

$("*").hide(); //works for all tags on the page

$("p:first").hide(); //works for the first p tag on the page

$("ul li:first").hide(); //works for the first li tag within the first ul tag on the page

$("ul.list:first").hide(); //works for the first li tag within the ul tags with the .listem class applied on the page

$("ul li:first-child").hide(); //works for the first li tags of all ul tags on the page

$("li:even").hide(); //works for all odd numbered li tags on the page

$("li:odd").hide(); //works for all even numbered li tags on the page

Note: If more than one trigger will perform the same operations, there is no need to write individual functions for all of them. More than one selector name can be written in the selector section by placing a comma between them. For example, if three different buttons will perform the same operations;

$("#button1, #button2, #button3").click(function(){
...
}

More than one selector can be used for the same function-method. Using an External JavaScript File To reduce code complexity, we can store these JQuery codes we wrote in an external JavaScript file and link them as follows.

< script src="jqMyCodes.js" >< /script >

Another advantage of using an external JavaScript file is that if the same work is to be done on different pages, we will avoid writing the same codes on all of them. It will be sufficient to link to our JavaScript file on the pages where we will use the codes.