This document provides an overview of jQuery, including what it is, why it's useful, how to get started, and some common jQuery syntax. jQuery is a JavaScript library that makes it much easier to use JavaScript on websites. It simplifies tasks like DOM manipulation, event handling, animation, and Ajax. The document explains how to download jQuery, includes some basic jQuery syntax using selectors and methods, and covers various features like effects, HTML/CSS manipulation, events, traversing, and Ajax.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
Things you should know about jQuery JavaScript library. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
As humans, we never fail to think that we are highly intelligent beings, and that we are mentally superior than any other creatures found on Earth.
Well, that...... may be true.
However, we can be equally stupid and dumb too.
Worse still, we don't even realize it - in terms of how we can make erroneous judgments, decisions and choices, based on how our mind processes and filters information, as well as how our belief system works.
As intriguing and exciting this topic is to me, I find it difficult to illustrate the concepts involve, and that took me nearly 6 months to complete this work. (The Planning Fallacy in play?!) Throughout writing this deck, I've made a total of 8 major revisions before coming to this final piece.
I hope you'll find this deck both interesting and useful!
How to Use Social Media to Influence the WorldSean Si
Here's the deck to my talk for the 23rd ASA Congress which was at The Grand Ballroom of Marriott Hotel. It was an awesome experience and I only had two points:
1) Use social media for good and
2) You have to have authority to use social media influentially.
My company: https://seo-hacker.net
Mobile applications Development - Lecture 12
Javascript
jQuery (Zepto)
useful microframeworks
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
How to increase Performance of Web Application using JQuerykolkatageeks
Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery.
Follow us
www.kolkatageeks.com
to get more.
Introduction to jQuery covers overall introduction and implementation of jQuery, here you can learn jQuery selection, events, animation, and various Built-in methods.
In this intro-level session on utilizing jQuery with SharePoint, the focus will be to empower users on how to satisfy some of the common UI changes clients request by writing clean and unobtrusive Javascript with the help of the jQuery library. We'll begin by diving into the different ways that jQuery can be hooked up to SharePoint. We'll talk about CDN versus local copies of the library, as well as linking jQuery via masterpages, custom actions, content editor web parts, and more.
We'll then spend time discussing css selectors, and some of the common patterns and jQuery methods you'll want to familiarize yourself with when targeting page-level elements. After that, the remainder of the presenation will be focused on walking through real-life scenarios of altering the UI with jQuery, such as adding interaction and animation to content query webparts, changing the behavior of links inside a page, and more. The code utilized in the presentation will be made available online after the Conference is completed.
3. 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 an`imations
AJAX
Utilities
4. 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
Will jQuery work in all browsers?
5. Downloading jQuery
There are two versions of jQuery available for
downloading:
Production version - this is for your live website
because it has been minified and compressed
Development version - this is for testing and
development (uncompressed and readable
code)
Both versions can be downloaded
from jQuery.com.
The jQuery library is a single JavaScript file,
and you reference it with the HTML <script>
tag (notice that the <script> tag should be
inside the <head> section):
6. jQuery to Your Web Pages
Download the jQuery library from
jQuery.com
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>
Include jQuery from a CDN, like Google
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jqu
ery/1.11.1/jquery.min.js"></script>
</head>
7. 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".
8. Document Ready Event
You might have noticed that all jQuery
methods are inside a document ready event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running
before the document is finished loading (is ready).
Actions that can fail if methods are run before the
document is fully loaded:
Trying to hide an element that is not created yet
Trying to get the size of an image that is not
loaded yet
9. Even shorter method
$(function(){
// jQuery methods go here...
});
Use the syntax you prefer but document
ready event is easier to understand when
reading the code.
10. 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.
All selectors in jQuery start with the dollar
sign and parentheses: $().
12. jQuery Selector
#id Selector - $("#test")
The .class Selector - $(".test")
Html tag Selector - $(“button”)
13. $("*") Selects all elements Try it
$(this) Selects the current HTML element Try it
$("p.intro") Selects all <p> elements with class="intro" Try it
$("p:first") Selects the first <p> element Try it
$("ul li:first") Selects the first <li> element of the first <ul> Try it
$("ul li:first-child") Selects the first <li> element of every <ul> Try it
$("[href]") Selects all elements with an href attribute Try it
$("a[target='_blank']") Selects all <a> elements with a target attribute
value equal to "_blank"
Try it
$("a[target!='_blank']") Selects all <a> elements with a target attribute
value NOT equal to "_blank"
Try it
$(":button") Selects all <button> elements and <input>
elements of type="button"
Try it
$("tr:even") Selects all even <tr> elements Try it
$("tr:odd") Selects all odd <tr> elements Try it
14. jQuery Event Methods
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".
Mouse Events Keyboard
Events
Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
20. Callback Functions
$(selector).hide(speed,callback);
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
21. Method Chaining
Chaining allows us to run multiple jQuery
methods (on the same element) within a
single statement.
$("#p1").css("color","red").slideUp(2000).slide
Down(2000);
22. jQuery HTML
One very important part of jQuery is the
possibility to manipulate the DOM.
The DOM defines a standard for
accessing HTML and XML documents:
Get Content - text(), html(), and val()
text() - Sets or returns the text content of
selected elements
html() - Sets or returns the content of
selected elements (including HTML markup)
val() - Sets or returns the value of form fields
26. jQuery Traversing
"move through", are used to "find" (or
select) HTML elements based on their
relation to other elements.
An ancestor is a parent, grandparent,
great-grandparent, and so on.
A descendant is a child, grandchild,
great-grandchild, and so on.
Siblings share the same parent.
29. jQuery Ajax
AJAX is the art of exchanging data with a
server, and updating parts of a web page
- without reloading the whole page.
With the jQuery AJAX methods, you can
request text, HTML, XML, or JSON from a
remote server using both HTTP Get and
HTTP Post
$(selector).load(URL,data,callback);
30. The optional callback parameter specifies a callback
function to run when the load() method is completed. The
callback function can have different parameters:
responseTxt - contains the resulting content if the call succeeds
statusTxt - contains the status of the call
xhr - contains the XMLHttpRequest object
The following example displays an alert box after the load()
method completes. If the load() method has succeeded, it
displays "External content loaded successfully!", and if it fails
it displays an error message:
Example
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,
xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
31. get() and post() Methods
$.get(URL,callback);
$.post(URL,data,callback);