Learn Jquery | Learning Javascript | Jquery Tutorials | Jquery Articles | Learn Scripting

Wednesday, 19 February 2014

How to add and remove class using Jquery?

In this article, I will explain how to add and remove class using Jquery.

Add Class (Css Stylesheet):

The addClass () method used to add cascading style sheet classes to the element.

$('p').addClass("Backcolor");

Remove Class (Css Stylesheet):

The removeClass () method used to remove cascading style sheet classes to the element.

$('p').removeClass("Yellow");

We can also add or remove multiple classes for the elements separated by a space in between them.

$('p').addClass("Backcolor Fontsize");

$('p').removeClass ("Backcolor Fontsize");

Example Program:

$(document).ready(function () {

$('#btnAddClass').click(function () {

$('p').addClass("Forecolor");

return false;

});

$('#btnAddMultipleClass').click(function () {

$('p').addClass("Backcolor Fontsize");

return false;

});

$('#btnRemoveandaddClass').click(function () {

$('p').removeClass("Backcolor Fontsize").addClass("Forecolor");

return false;

});

</script>

.Backcolor

{

background-color:Orange;

}

.Fontsize

{

font-size:x-large;

}

.Forecolor

{

color: Green;

}

</style>

</head>

<body>

<div>

<p>

This is the sample text</p>

<asp:Button ID="btnAddClass" runat="server" Text="Add Class" />

<asp:Button ID="btnAddMultipleClass" runat="server" Text="Add Multiple Class" />

<asp:Button ID="btnRemoveandaddClass" runat="server" Text="Remove Class" />

</div>

</form>

</body>

</html>

Tuesday, 18 February 2014

What are Jquery selectors? How to use selectors in jquery?

Jquery Selectors:

Jquery selectors are the most important aspects of the Javascript library.

Basic syntax is: $(selector).action ()

In jQuery, the $ sign is just an alias to jquery ()

Selectors are the elements in the html document. It allows you to select and manipulate html elements.

Elements by Id:

It is the most commonly used selector type. It is used to select a single, unique element. The fastest way to select element is by its ID selector. We can match elements based on Id with ‘#’ operator.

Syntax is: $(‘#Idofelement’).action ()

$(document).ready(function () {

$('#txtCaption').val("www.Jqueryjohn.com");

});

</script>

</head>

<body>

<div>

<asp:TextBox ID="txtCaption" runat="server"></asp:TextBox>

</div>

</form>

</body>

</html>

Elements by Class:

It is used to select all the elements with the given class. We can match elements based on the class name with dot (.) operator.

Syntax is: $(‘.className’).action ()

$(document).ready(function () {

$('.Txt').val("Jqueryjohn.com");

});

</script>

</head>

<body>

<div>

<asp:TextBox ID="txtCaption" class="Txt" runat="server"></asp:TextBox>

</div>

</form>

</body>

</html>

Elements by TagName:

It is used to select the elements based on the Tag Names.

Syntax is: $(‘TagName’).action ()

$(document).ready(function () {

$('#btnHide').click(function () {

$('div').hide();

return false;

});

</script>

</head>

<body>

<div>

<asp:TextBox ID="txtCaption" class="Txt" runat="server"></asp:TextBox>

<asp:Button ID="btnHide" runat="server" Text="Hide" />

</div>

</form>

</body>

</html>

The above example hides all the elements with the tagname ‘div’. Inside the button click event I am using ‘return false’, which is used to restrict server side calls. If the client side function returns true only, it will redirect to server side.

Monday, 17 February 2014

What is Jquery? How to use Jquery?

In this article, I will explain Jquery fundamentals and introduction about jquery.

What is Jquery?

JQuery is a JavaScript library used to simplify client-side scripting, event handling, and animation on client side.

jQuery is not a language, It’s a well written JavaScript code.

It was released in January 2006 by John Resig.

jQuery is light weighted and the slogan for Jquery is "write less, do more".

It’s free, open source software, licensed under MIT license.

The goal of jQuery is to make it much easier to use JavaScript on our website.

jQuery will run exactly the same in all major browsers, including Internet Explorer 6.

Microsoft includes Jquery on Ajax framework and MVC framework.

Features & Advantages:

Simple, Easy to use

Fast & Extensible

Improves Performance of the application

Handles complicated functionality with less coding

Helps to develop browser compatible pages

DOM Manipulation

Ajax Integration (Server side calls)

Handles Effects and Animations

Wide range of plugins available for various specific needs

How to use Jquery?

1. To include jQuery, first download the latest version of Jquery at www.jquery.com.

2. Extract it and add files to the project folder.

3. Include the jquery file in head section.

<title> How to add Jquery</title>

</head>

We can also add Jquery file from Content Delivery Network (CDN) where clients access data from one particular server.

Some of the Leading CDNs are,

1. Google CDN

src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>

2. Microsoft CDN

src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js">

</script>

By using CDNs, Clients can achieve better performance of retrieving data

How to Execute Jquery?

We can execute Jquery by the following ways

1 $(document).ready(function () {}; - Execute Jquery only when the page fully loaded

2 $(function () { }); - Execute Jquery when the page loads

1. $(function () { }) – It will not wait for the whole page to load completely.

$(function () {

alert("Welcome to Jqueryjohn.com");

});

</script>

2. $(document).ready(function () {} – This method is best and safest way to execute Jquery

$(document).ready(function () {

alert("Welcome to Jqueryjohn.com");

});

</script>