Category Archives: Jquery

Jquery

What is Attribute? How to get Attribute from HTML Element?

Leave a comment

What is Attribute in JQuery?

All HTML elements have attributes. It provides additional information about an element. Let us see some example of attributes below.

  • class Name
  • id
  • title
  • name
  • src
  • style

Consider the HTML markup for an div element.

<div id='divUserEmailId' class=''txtclass'> 
</div>

In the above HTML markup id, class are represents the element’s attributes, which consists of a name and a value. Jquery provide an easy way to manipulate the element attributes by using selectively.

How to get Attribute Value?

The attr() method can be used to either fetch the value of an attribute or perform the assigned operation on the onto all matched elements.

Example :

<h2>Jquery Attribute Example</h2>
<html>
<head>
<title>JQuery-Helpers</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".jQClass").attr("title", "JQuery-Helpers");
});
</script>
</head>
<body>
<div class="jQClass"></div>
<div class="jQClass"></div>
<div class="jQClass"></div>
</body>
</html>

Explanation:

From the above code , title =”JQuery-Helpers” attribute has added with the value for all the div elements which has the class name “jQClass”.

 

Jquery

How to use Selectors in JQuery

Leave a comment

What is Selectors?

A jQuery Selector is a jquery function which uses expressions to find the given/matching elements inside the DOM object. We have already had details about selectors here. So i am going to starting how to use selectors.

Here we are going to explain much more detail with examples.

How to use Selectors?

The selectors, its the heat of jquery function to perform operation on the DOM object like event handling, Applying animation , etc.,. They fetch exact element that we mention from the HTML document. Here, let we discuss the types of selectors with examples

[su_table]
Type of selector Example
ID Selector
Selects  HTML (DOM object )elements which are match with the given selector $(‘#divCol’)
Name Selector
It select all the element which has the name of divCol inside the div. $(‘div[name=divCol]’)
Class Selector (.Class)
Selects all elements which match with the given Class. $(‘.divCol’)
Multiple Elements 
Selects the all  given type of element in the HTML document. $( “div,span,p.myClass”)
Universal (*)
 Selects all elements available in a DOM. $(‘*’)

[/su_table]

ID Selector :

It selects the element based on the given ID. The ID selector started with “#” symbol. From above example, it selects the element which has the ID attribute “divCol”.

Note : ID can’t be duplicated in a HTML document,so it will select the single Element inside the HTML Element.

Name Selector

It select all the element which matches with the given selector. From above example, $(‘div

[name=divCol]’) it will select the div element which has the name ‘divCol’

Class Selector (.Class)

As a name implies, it will select the element based on the css class name.The class selector started with ‘.’ symbol.
From above example,$(‘.divCol’) it will select all the elements which matche the class in the HTML document.

Multiple Elements

It used to select more that one element. From above example,$( “div,span,p.myClass”) it will select the all the div,span and .myclass attribute in the P tag.

Universal (*)

As name implies, it will select whole element in the document.

Jquery

Features of JQuery

Leave a comment

Main Focus of jQuery?

A jQuery is a fast and concise JavaScript Library. jQuery simplifies HTML document traversing and other operations like Ajax interaction, event handling, and animation. It is designed to write less code by using the chaining method. It has been created by John Resig in 2006 with a nice motto.

Features of JQuery:

DOM manipulation:

The jQuery made it easy to select DOM elements in our web pages.
They can traverse and able to modify the content by using the selectors(Selecting DOM Objects)

Event handling:

In simple, the event handler handles the event raised by the operation performed by the mouse, keyboard, touch, etc.,

In jQuery, it provides an elegant way to perform a wide variety of events using the DOM object like a user clicking on a button, mouse over on the div, etc.,

Lightweight :

JQuery is a very lightweight library. It will size about 19KB in size.

AJAX Support:

It supports/helps to develop a responsive and feature-rich site using AJAX technology. We can implement Ajax calls using jquery in an easier way

Cross Browser: Jquery has support cross-browser support. It will not depend on any particular browsers.

How to Use Jquery in our Project:

We can Implement jQuery in two ways.

Local Installation: we can download the jQuery library and we can include it in our project.
EG: /jquery/jquery-x.x.x.min.js

CDN: Another way we can include the jQuery library into our project is directly from Content Delivery Network (CDN).
EG : <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js”>

Jquery

What is $ in Jquery?

Leave a comment

What is $ ?

  • In jQuery, $ is an alias for jQuery. From the above statement we can able to understand, function are available without using $.
  • If you need to use another JavaScript library along side with jQuery,  then it will return control of $ back to the other library with a call to $.noConflict().
  • if noConflict() is used than the references will be restored.

Is possible to change $ symbol?

Yes, we can use any alias name instead of $, by changing the below line

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

where jQuery on the right side is the function-scoped reference.

This will be available in jquery plugin. if u want to change it to JQ then we want to change like below

// Expose jQuery to the global object
window.jQuery = window.JQ = jQuery;

after library loaded in your application you can use JQ instead of $.

 

Keep Cool Coding…

 

Jquery

Jquery Selectors

Leave a comment

What is Selector??

As a name implies, selectors allow us to select the elements/properties like div, span., to performing actions on it.

What is use of it ??

A Selector identifies an HTML tag/element by using selector to manipulate(like apply css, delete the div…) with jQuery code.

Types of Selector :

  • ID/Tag ID Selector:

Represents a tag available with the given ID in the DOM. In simple, select the matched elements which has the same id.

Example : $(“#userid”)

<div id=”userid”></div>

  • Class/Tag Class Selector:

It represents a tag available with the given class in the DOM. In simple, select the matched elements which has the same class.

Example : $(“.userid”)

<div class=”userid”></div>

  • Tag Name/Element Selector :

It represents a tag name available in the DOM, In simple, select eh matched DOM/element
which has the same type

Example : $(“p”)

<p id=”userid”></p>

 

Jquery

Difference between ‘return false;’ and ‘e.preventDefault();

1 Comment

Difference between ‘return false;’ and ‘e.preventDefault();

  •  `e.preventDefault()` which will prevent the default event from occurring, but will continue the event flow (ie., next line of code in the function)
  •   return false will always had to go at the end of your function, or at the end where no further execution was needed.

HTML :

<div id=”preventDef”>
<a href=”#”>Pls Click Here!</a>
</div>

<div id=”returnFalse”>
<a href=”#”>Pls Click Here!</a>
</div>

JQUERY

$(“#preventDef a”).click(function(e) {
e.preventDefault();
$(this).hide();
});

$(“#returnFalse a”).click(function(e) {
return false;$(this).hide();
$(this).hide();
});

OUTPUT

Explanation :
If you click first link… it will hide , because it will not fire particular event to fire but it will continue with next line in the function

Bur if you click on second link, it will not hide because it will move the end of the loop/function

Jquery

How to close the div popup/any Element while clicking outside of the popup

3 Comments

How to close the div popup/any Element while clicking outside of the popup

JQUERY

$(document).mouseup(function(e)
{
var container = $(“#divPatientDetail”);
if (container.has(e.target).length === 0)
{
container.hide();
}

});

Explanation:

var container = $(“#divPatientDetail”); — Assigning the selector to the variable

container.hide(); — After checking the condition , it hide the selector element

Note :

It will not hide while clicking inside of the div/Element

Jquery

How to split the attribut “class” name in the html element

Leave a comment

How to split the attribute “class” name  in the html element

HTML :

<div id=”divUserDetails” class=”red”>

JQEURY :

$(document).on(“click”, “#divUserDetails”, function()
{
var userColor = $(this).attr(‘class’) == null ? “No User Color Found” : $(this).attr(‘class’);
alert(userColor );
}

Output

Here is the output

Jquery

How to get the top and left positon of clicked td/div

Leave a comment

How to  get the  top and left positon of clicked td/div

Jquery

$(document).on(“click”, “#tbUserDetails”, function()
{
var getclickTop = $(this).offset().top;
var getclickLeft = $(this).offset().left;
}

Explanation:
.on method is used for dynamically created table using jquery (at runtime)

HTML

<table>
<tr>
<td id=’tbUserDetails’></td>
</tr>
</table>