JQuery for beginners with clear understanding


This Article will help you to understand the Concepts of JQuery . Most helpful for the beginners. JQuery is open source lightweight Javascript Library which makes easy interaction between HTML and JavaScript. JQuery is not a language. JavaScript is a Language. JQuery is built over JavaScript and acts like a extendable javascript framework to simplifies HTML document manipulation, event handling, animating, and Ajax interactions for rapid web development.

The status of this resource is Pending and require some modification by the author.

JQuery is open source lightweight Javascript Library which makes easy interaction between HTML and JavaScript.

JQuery is not a language. JavaScript is a Language. JQuery is built over JavaScript and acts like a extendable javascript framework to simplifies HTML document manipulation, event handling, animating, and Ajax interactions for rapid web development.

Purpose of jQuery is to make it easy to use JavaScript on your website. JQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

If we know HTML CSS and JavaScript then jQuery learning will not be a big problem

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.
The jQuery library contains the following options (means what JQuery can do):
1. HTML and DOM operation or management
2. CSS operation or management
3. HTML event methods
4. Animations and Effects
5. AJAX

JQuery a single JavaScript file and can be used by adding JQuery library in HTML file. (The <script> tag should be inside the section):

<script src="jquery-3.1.1.min.js"></script>


No ned to add type="text/javascript" inside the <script> tags as JavaScript is the default scripting language in HTML5 and in all modern browsers.

i will write some more to this topic in future.

Common Syntax for JQuery is
$().();

Explanation : I want to show a message when ever document is ready or loaded completely.

Where(Selectors) : On Document.
When (Action): Document is in ready state or loaded completely.
What(Function) : Show an alert message.

JQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.

JQuery syntax for above requirement is
$(document).ready(alert("Hi this is for for Dotnestspider lovers"));

Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all

elements.
$(".test").hide() - hides all elements with class="test".

Complete Skeleton Example




Dotnetspider tutorial



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

$(document).ready(alert("Hi"));

</script>



One special thing in JQuery
$(document).ready(function(){
// jQuery methods are to be here
});

Why this is required?
This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is nice to wait for the document to be completly loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

When it fails fail if methods are run before the document is fully loaded
• Trying to hide an element that is not generated yet
• Trying to get the size of an image that is not loaded yet

The shorter method for above document.Ready is
$(function(){
// jQuery methods are to be here
});


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: