logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
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

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: Jquery Basic codes, Jquery tutorial, Learn JQUERY Code Step By Step For Beginners, Learn JQUERY Code Step By Step For New Comers

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.