Wednesday 19 October 2016

Java scripts and JQuery technical concept and tricky question.


JQuery :

1. It is not a programming language but a well written java script code.
2. It is a java script code which do
    document traversing ,event handling ,ajax interactions and animations.

3. Why JQuery needed

A .       Used to develop browser compatible web applications
B .       Improve the performance of an application
C .       Very fast and extensible
D .       UI related functions are written in minimal lines of codes.

Methods used to provide effects :

Show() , Hide() , Toggle() , FadeIn() and FadeOut()

Basic selectors in JQuery :

A. Element ID B. CSS Name C. Tag Name  D. Dom Hierarchy

1.  Selectors are used to select one or a group of html elements from your web page
2.  Support all the css selectors as well as many additional custom selectors.
3.  Selector always start with dollar sign and parentheses:$()

1. Select elements by tag name

Eg :  $(div) it will select all the div elements in the document

2. Select element by ID

Eg : $(‘#abcd’)

It will select single element that has an ID

1.     3.   Select elements by class

Eg : $(“.abcclass”)

It will select all the elements having class abcclass

Examples : JavaScript and Jquery

JavaScript:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AllExamples.aspx.cs" Inherits="JqueryJavascript.AllExamples" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <title></title>
</head>
<body>
    <div>
       <input type="text" id="txtText" />
    </div>
        <script type="text/javascript">

            document.getElementById("txtText").value = "Hello Sandeep";
           
        </script>
  
</body>

</html>

JQuery:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AllExamples.aspx.cs" Inherits="JqueryJavascript.AllExamples" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <title></title>
</head>
<body>
    <div>
       <input type="text" id="txtText" />
    </div>
        <script type="text/javascript">
           
            $("#txtText").val("Hello Sandeep");

        </script>
</body>
</html>

OutPut:























Difference between .js and min.js :

JQuery Library comes in two different versions  Production and Deployment.
The Deployment version is also known as minified version so min,js is basically the minified version of jquery library file.
Both the files are same far as functionality is concerned but min,js is quite small in size so it loads quickly and saves band width.

Dollar sign($) in jquery :
It is nothing but it's an alias for jquery.
$(document).ready(function(){});
over here $sign can be replaced with "JQuery"key word.
JQuery(document).ready(function(){});


No comments:

Post a Comment