Learn JQUERY Code Step By Step For Beginners

Learn JQUERY Code Step By Step For Beginners

March 31, 2016 No comments Article SEO Website Designing

Hi Friends, Today you will learn jquery code step by step for beginners. It is so easy and simple to use. You have to remember some basic for this. It is the library of Javascript.

Learn JQUERY Code Step By Step For Beginners:

We are Using Jquery to attract the visitor as well as increase the functionality of our website you can learn jquery code step by step for beginners and basics after reading this blog.

What is Jquery?

JQUERY is a fast JavaScript library. It  is used to make things in HTML document, because of this we can do manipulation, event handling, animation and Ajax much better with an API that works in multiple browsers. It gives more strength to your website as well as it attracts the user.

Why do we use JQuery?

We are using JQuery to enhance the functionality of our website user interface with some coding. It helps a lot to do anything task like manipulation, event handling and animation in a easy manner.

How to use JQuery in your website?

You can download the jquery.js from jquery.com and add below code in the head section of your website.

<script type="text/javascript" src="jquery.js"></script>

or you can simply add the below code in the head section of your document

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

Now You are ready to use JQuery code in your website.

If you don’t know about web design you can read this
How to Create a Website from scratch for beginners
Things To Know Before Making a Website Design

Now Learn JQUERY Code Step By Step For Beginners as well as freshers:

See some Basic Jquery code
You can see the Live Demo and Download the below code.

<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome SEO Website Designing Jquery Basic Code Blog');
});
</script>

Same as previous Jquery script. See the Live Demo and Download

<script type="text/javascript">
$(function()
{
alert('Welcome SEO Website Designing Jquery Basic Code Blog');
});
</script>

The Below code run when your window is load completely. See the Live Demo and Download

<script type="text/javascript">
$(window).load(function()
{
alert('Welcome SEO Website Designing Jquery Basic Code Blog');
});
</script>

Now see what happens in the above three scripts. These three scripts are similar but last script runs when your page load completely.
$ sign is used as Jquery, Remember without $, It will not work.
You have to create a function to execute and implement the JQuery.

JQuery Structure Basic Code:

You can select any html tag as like $(‘h1’), $(‘table’), $(‘div’), $(‘li’) etc.
You can select any id as like $(‘#id-name’)
You can select any class as like $(‘.class-name’)

Basic code of Jquery:

$(selector).function(parameters);

Working with JQuery events: It is very useful because generally the user click, mover hover or Mouse out on your web page, at that point of time JQuery shows his effects.

SOME JQUERY EVENTS

Mouse EventsKeyboard EventsForm EventsDocument/Window Events
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
contextmenufocusinready
hoverfocusout
mousedownselect
mouseout
mouseover
mouseup
toggle

Basic Structure code of events:

$(selector).event()
example: $(#button).click()

Example of JQuery events: See the Live demo and download the code

<script type="text/javascript">
$(function() 
{

$('#buttons').click(function()
{
alert('Hello Button');
});

$('.links').click(function()
{
alert('Hi Link');
});

});
</script>

<body>

<input type="button" value=" Buttons" id="buttons" />

<a href='#' class='links'>LINK</a>

</body>

JQuery Basic Effects and Metods:

Now I will tell you about some basic effects of JQuery. It is very useful for our website user interface. Some of the JQuery basic effects and methods are listed below.

animate, clearQueue, delay, dequeue, fadeIn, fadeOut, fadeTo, fadeToggle, finish, hide, queue, show, slideDown, slideToggle, slideUp, stop, toggle, addClass, after, append, appendTo, attr, before, clone, css, detach, empty, hasClass, height, html, innerHeight, innerWidth, insertAfter, insertBefore, offset, offsetParent, outerHeight, outerWidth, position, prepend, prependTo, prop, remove, removeAttr, removeClass, removeProp, replaceAll, replaceWith, scrollLeft, scrollTop, text, toggleClass, unwrap, val, width, wrap, wrapAll, wrapInner, add, addBack, andSelf, children, closest, contents, each, end, eq, filter, find, first, has, is, last, map, next, nextAll, nextUntil, not, parent, parents, parentsUntil, prev, prevAll, prevUntil, siblings, and slice etc.

Basic Structure code of effects and methods:

$(selector).effect-name()
Example: $(selector).fadeOut()
$(selector).fadeIn()
$(selector).slideUp()
$(selector).slideDown()
$(selector).slideToggle()
$(selector).animate() etc.

See the Live demo and Download the fading effects.

<script type="text/javascript">
$(function()
{

$('.fadeOut_circle').click(function()
{
$('#circle').fadeOut("slow");

 

});

$('.fadeIn_circle').click(function()
{
$('#circle').fadeIn("slow");

 

});

});
</script>

<body>

<a href="#" class="fadeOut_circle">fadeOut()</a>

<a href="#" class="fadeIn_circle">fadeIn()</a>

<div id="circle"></div>

</body>

CSS Code:

#circle
{
background-color:#FF0000;
border:solid 3px #000000;
border-radius:100%;
height:300px;
width:300px;
margin-top:50px;
}

JQuery Attributes: You have to use attr() method for this as like $(selector).attr(attribute). The attr() method returns attributes and values of the selected elements.

You can see the Live Demo and Download.

<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width", "500");
});
});
</script>
</head>
<body>

<img src="http://seowebsitedesigning.com/wp-content/uploads/2015/12/logo.png?x46163" alt="Pulpit Rock" width="284"><br>

<button>Change the width attribute of the above image</button>

</body>

Fetching Html Contents: You have to use . $(selector).html() for fetching innerHTML element contents.

You can see the Live Demo and Download the code eoo.

<script type="text/javascript">
$(function()
{

$('.links').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>

</head>
<body>
<a href="http://seowebsitedesigning.com/" class="links">Click</a>&nbsp; &nbsp;&nbsp;

Link of HREF value : <h1></h1>

</body>

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

Categories: Website Design

Leave a Reply