Featured post

Why should I learn Go?

By -
Image
What is unique about GO language? Here are some of the advantages of GO programming language:           Code runs fast           Garbage collection           Simpler objects           Efficient concurrency Code runs faster: Before understanding why GO runs faster, let us know the process of software translation. Basically, we have three broad categories of languages:             Machine level language ·        Machine level language is a low-level language where instructions are directly executed on the CPU. Machine level instructions are small steps which are straight forward and simple (Ex: ADD, SUBTRACT, MULTIPLY ) Assembly language ·        Assembly language is similar to machine level language but a bit more specific for humans to understand. For example, 1000...
Post a Comment

INTRODUCTION TO JQUERY

By -




JQuery :


JQuery is a JavaScript library. It greatly simplifies JavaScript  

  programming . JQuery is easy to learn and put into practise .The

main aim of introducing Jquery is to make it much easier to use

JavaScript on our website.
Before learning about JQuery you must have a basic

 understanding of HTML , CSS and JavaScript .

What is jQuery? :


jQuery is a lightweight, "write less, do more", JavaScript

library.

jQuery takes a lot of common tasks that require many lines of

JavaScript code to accomplish, and wraps them into methods

that you can call with a single line of code.



Why jQuery?


There are lots of other JavaScript frameworks out there, but

jQuery seems to be the most popular, and also the most

extendable.

Adding jQuery to Your Web Pages


There are several ways to start using jQuery on your web site.
  •   1. Download the jQuery library from jQuery.com
  •   2. Include jQuery from a CDN, like Google

Let us include JQuery from CDN , google :
Add this tag in the head section :
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

jQuery Syntax


With jQuery you select HTML elements and perform actions on them.

Syntax:        $(selector).action()

Here         $       : To define and access JQuery .

         (selector) : to find HTML elements .

          Action       : To perform some task when the user selects the elements.

JQuery uses css selectors to select elements .


An example of JQuery is :

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

In JQuery , as a first statement we use :

$(document).ready(function(){
--------code------
});


The above statement is used to prevent any JQuery code from 

running before the document is loaded .


jQuery Selectors



As we know that JQuery can be used to manipulate the HTML 

elements . So JQuery uses selectors to find the HTML elements ( By
 using their name,id,class ,type ,attribute….)

The JQuery selectors start with $()  [A dollar sign followed by parenthesis ]

ELEMENT SELECTOR :



We can directly select the HTML element by name as follows :

EXAMPLE :

·       $(“h1”)

·       $(“p”)

ID SELECTOR :


In CSS we have used  ‘ #id ‘ to identify the HTML elements . This is possible even in JQuery .

1 .  $(“#paragraph”)

2 . $(“#heading”)


CLASS SELECTOR :


The jQuery class selector finds elements with a specific class.

Example : $(".test")

If you want to place the JQuery files separately you can add 
the file written separately in the head section of the 
document.


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="jquery.js"></script>
</head>
JQUERY.JS  is the name of your JQuery file .  



jQuery Event Methods



All the different visitor's actions that a web page can respond
to are called events.

An event represents the precise moment when something
happens.

Examples:
  • moving a mouse over an element
  •  
  • selecting a radio button
  •  
  • clicking on an element

Syntax For Event Methods



To assign a click event to all headings on a page, you can do this:

$("h1").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:


$("h1").click(function(){

  // your action

});


Commonly Used jQuery Event Methods




1 .  $(document).ready()

The $(document).ready() method allows us to execute a

 function when the  document is fully loaded.


2. mouseenter()

The function is executed when the mouse pointer enters the 

HTML element.


Example :

 $("#h1").mouseenter(function(){

    alert("h1!");
});


3 . mouseleave()


The function is executed when the mouse pointer leaves the 

HTML element.


Example:

$("#h1").mouseleave(function(){

    alert("YOU LEFT H1”);

});


4. mousedown()

The function is executed, when the left, middle or right mouse

 button is pressed down, while the mouse is over the HTML

  element.


EXAMPLE :

$("#H1").mousedown(function(){

    alert("Mouse down ");

});



5 . mouseup()

 The function is executed, when the left, middle or right mouse

  button is released, while the mouse is over the HTML element

example

$("#h1").mouseup(function(){

    alert("Mouse up");

});


6. hover()

The hover() method takes two functions and is a combination 

of the mouseenter() and mouseleave() methods.


The first function is executed when mouse enters the HTML 

element and second one is executed when it leaves the HTML 

element .


$("#h1").hover(function(){
    alert("ENTERED");
},
function(){
    alert("YOU LEFT");
});



7. focus()

The function is executed when the form field gets focus.

EXAMPLE :

$("input").FOCUS(function(){
    $(this).css("background-color", "#FF0000");
});


8. blur()


The function is executed when the form field loses focus.

EXAMPLE :


$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});


9 . on()



We can add multiple events to an element using on() .


Example :


$("input").on({
    mouseenter: function(){
        $(this).css("background-color", "blue");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "#ffffff");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});



10 . click()


The function is executed when the user clicks on the HTML 

element.

$("p").click(function(){

    $(this).hide();

});



11. dblclick()


The function is executed when the user double-clicks on the 

HTML element.

Example :

$("p").dblclick(function(){

    $(this).hide();

});






 

Comments

Post a Comment

Thanks for your comments!

Popular posts from this blog

what Is Big Data?

By -
OverView: “90% of the world’s data was generated in the last few years.” Due to the advent of new technologies, devices, and communication means like social networking sites, the amount of data produced by mankind is growing rapidly every year. The amount of data produced by us from the beginning of time till 2003 was 5 billion gigabytes. If you pile up the data in the form of disks it may fill an entire football field. The same amount was created in every two days in 2011, and in every ten minutes in 2013. This rate is still growing enormously. Though all this information produced is meaningful and can be useful when processed, it is being neglected. What is Big Data? Big Data is a collection of large datasets that cannot be processed using traditional computing techniques. It is not a single technique or a tool, rather it involves many areas of business and technology. Thus Big Data includes huge volume, high velocity and an extensible variety of data. The data in it will b...
Read more

Introduction to Big Data and Hadoop

By -
Image
What is Big data? Data represents useful information. Over the past decade, data has been significantly increasing.  Generally we store data in traditional relational databases. This is by far the most efficient method to store and retrieve considering small amounts (generally in megabytes or gigabytes) of data.  But what if the data is huge? (By huge I mean really huge.ie, in terms of terabytes or petabytes or exabytes or even zetabytes of data). Such large amount of data is considered as big data. There is no specific meaning for Big Data. It can be defined in many ways. But, if we were to define what big data is, we can define it in the following way: “Big data is the data which cannot be processed on a single machine” So we need some way to store and process data in an efficient manner. This can be achieved using “Hadoop”. What is Hadoop? Hadoop is an open source software framework used for distributed storage and processing of big...
Read more

Fragments in Android - Introduction

By Anonymous -
Image
Fragments in Android I am really excited because this topic is really interesting. Today, we are going to learn interactive android development using Fragments. NOTE: There is a lot of documentation in the Android’s official website which is irritating for a beginner. In this post I have made some adjustments so that it will be useful for you to learn easily.  Similarly, we need to know about Fragments before we can use them in our application. So let’s start our topic “Fragments in android”. What is a fragment? A fragment is a part of an activity. By this I mean that a fragment (as the name suggests a piece) is a certain part of an area in an activity. If you are familiar with Web development, you can assume fragments as frames in HTML which are used to display different webpages in a single page.        We can have infinite number of fragments in an activity  . A fragment has its own lifecycle ...
Read more