In order to make your website more interesting and interactive you should use JQuery. This part of the article will show you some interesting ways of doing better job while creating website.
JavaScript and best examples
Presenting you the best practices and examples of using JavaScript framework in order to design accessible and unobtrusive scripting effects. JQuery is one of the most popular JavaScript frameworks because it is very easy to use with great performance, creating amazing animations with limitless possibilities.
DOM scripting
JQuery provides its users with many great features for creating beautiful and interactive websites working on major web browsers. You may be familiar with the term DOM scripting which in fact means using scripts such as JavaScript in order to access DOM files. This is basically addition to your page in particular way which will make your web site work even without Java scripts.
Content accessible to the widest range of audience
The main goal of web developers is creating degradable content which can be accessed by wide range of audience. Before making any content interactive and flexible you should pay attention to the beauty and design in the first place. With the knowledge of web development, web developers are able to use JQuery for DOM scripting creating beautiful and functional contents and maintaining its accessibility to the wide range of users.
Examples of DOM Scripting
In order to use JQuery for DOM scripting you should follow some steps and rules. First thing you should do is to seperate JavaScript function into other layer which we will call behavioural layer. So these scripts will become independent of CSS and HTML. In this correlation CSS is presentaion, HTML is markup and JavaScript is this behavioural layer.
By doing this we will create web pages which are nit depending on JavaScript to be usable. All of JavaScript files should be within external layer which we created before. After creating external layer you should link it to the particular document which is shown here
<a href="backuplink.html" class="doSomething">Click!</a>
JQuery using click method allows its users to attach click event in few lines of codes. You should pay attention on using JavaScript. Every true web developer never depends completely on JavaScript. You have to keep in your mind that not every user’s browser is having JavaScript enabled.You should know that not every browser comes with the Java or Flash so you have to make sure that your page is functional without it.
The following example shows how to display any message on your website. Depending on the time of day you can create message Good Morning which will display when someone enters your website.
<p title="Good Day Message">Good Morning!</p>
You should include this title attribute by using JQuery selector like in this example
var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title="Good Day Message"]');
goodDay.text('Good Afternoon!');
}
The most important thing is to make HTML markup semantically structured. In order to create usable, functional and accessible website you should follow strict semantic rules, by doing this you are creating website accessible to great number of devices and users. This example shows you good markup
<dl id="OptionList"> <dt>First Option</dt> <dd>First option description</dd> <dt>Second Option</dt> <dd>Second option description</dd> </dl>
Understanding Selectors
Selectors are able to select any element which is out of the DOM tree. This selected object can be easily manipulated later. JQuery selecting sets may be activating JQuery for object, P tags with class first or P tags title starting with H. These examples are shown here
$(document); // Activate jQuery for object
$('#mydiv') // Element with ID "mydiv"
$('p.first') // P tags with class first.
$('p[title="Hi"]') // P tags with title "Hi"
$('p[title^="M"]') // P tags title starting with M
If you are already familiar with CSS selectors your won’t have any problem understanding and using JQuery selectors because anything you did with CSS selectors you can do with JQuery and even more.