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

The Core Concepts of Angular -- Jithin CJ

I started to learn angular from 2016, I was very curious about the celibacy of this super hero. From my initial understanding is like, the power of angular is only limited on " html decoration "  But this JavaScript framework has the potential to re-define conventional html-css patterns . Modern browsers support for things like modules, classes, lambdas, generators, etc. These features fundamentally transform the JavaScript programming experience. But big changes aren't constrained merely to JavaScript. Web Components are on the horizon. The term Web Components usually refers to a collection of four related W3C specifications: Custom Elements - Enables the extension of HTML through custom tags.  HTML Imports - Enables packaging of various resources (HTML, CSS, JS, etc.).  Template Element - Enables the inclusion of inert HTML in a document.  Shadow DOM - Enables encapsulation of DOM and CSS.  Developers can create fully encapsulated (Shadow DOM) declar
Post a Comment
Read more