Skip to main content

JQuery Introduction

JQuery (1)

 

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.


Example

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

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
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.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities
Tip: In addition, jQuery has plugins for almost any task out there.

Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
  • Google
  • Microsoft
  • IBM
  • Netflix

  • Adding jQuery to Your Web Pages

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

Google CDN:

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

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
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 <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".


jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

Syntax                           Description
   
$("*")                             Selects all elements
   
$(this)                             Selects the current HTML element
    
$("p.intro")                      Selects all <p> elements with class="intro"
   
$("p:first")                         Selects the first <p> element    

$("ul li:first")                     Selects the first <li> element of the first <ul>
   
$("ul li:first-child")              Selects the first <li> element of every <ul>

$("[href]")                           Selects all elements with an href attribute
   
$("a[target='_blank']")      Selects all <a> elements with a target attribute value equal to "_blank"
   
$("a[target!='_blank']")     Selects all <a> elements with a target attribute value NOT equal to "_blank"
   
$(":button")                           Selects all <button> elements and <input> elements of type="button"
    
$("tr:even")                        Selects all even <tr> elements    

$("tr:odd")                           Selects all odd <tr> elements

What are Events?

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

The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key".

Here are some common DOM events:

Mouse Events     Keyboard Events     Form Events     Document/Window Events

click                        keypress                      submit                            load
dblclick                    keydown                     change                          resize
mouseenter               keyup                              focus                          scroll
mouseleave                                                 blur                              unload

 

Comments

Post a Comment

Popular posts from this blog

NHibernate QueryOver Class And Projection....

Introduction The ICriteria API is NHibernate's implementation of Query Object . NHibernate 3.0 introduces the QueryOver api, which combines the use of Extension Methods and Lambda Expressions (both new in .Net 3.5) to provide a statically typesafe wrapper round the ICriteria API. QueryOver uses Lambda Expressions to provide some extra syntax to remove the 'magic strings' from your ICriteria queries. So, for example: .Add(Expression.Eq("Name", "Smith")) becomes: .Where<Person>(p => p.Name == "Smith") With this kind of syntax there are no 'magic strings', and refactoring tools like 'Find All References', and 'Refactor->Rename' work perfectly. Note: QueryOver is intended to remove the references to 'magic strings' from the ICriteria API while maintaining it's opaqueness. It is not a LINQ provider; NHibernate 3.0 has a built-in ...
Post a Comment
Read more

Passing Data from View to Controller Using Ajax Example Jquery

Jquery       $ ( '#btnSaveComments' ). click ( function () { var comments = $ ( '#txtComments' ). val (); var selectedId = $ ( '#hdnSelectedId' ). val (); $ . ajax ({ url : '<%: Url.Action("SaveComments")%>' , data : { 'id' : selectedId , 'comments' : comments }, type : "post" , cache : false , success : function ( savingStatus ) { $ ( "#hdnOrigComments" ). val ( $ ( '#txtComments' ). val ()); $ ( '#lblCommentsNotification' ). text ( savingStatus ); }, error : function ( xhr , ajaxOptions , thrownError ) { $ ( '#lblCommentsNotification' ). text ( "Error encountered while saving the comments." ); } }); });     Controller    [ HttpPost ] public ActionResult SaveComments ( int id , string com...
1 comment
Read more

Understanding machine learning

What is machine learning does?  It Finds patterns in data and uses those patterns to predict the future.          EXAMPLES :  Detecting credit card fraud : You can use machine learning  detect credit card fraud, Suppose you have data about previous credit card transactions. You could find patterns in that data potentially  that allows you to detect when a new credit card transaction is likely to be fraudulent. Determining whether a customer is likely to switch to a competitor :  You could possibly find the patterns in the existing customer data that will help you do that Lots more What does it mean to learn ? Yes it's something like your own learning process. You have learned reading,listening, walking everything by using your experience on it, the data you have in your mind and continuous improvements.  How did you learn to read? Well learning requires identifying patterns. Reading for instance you ...
Post a Comment
Read more