Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/swtutori/public_html/tecwallet.com/header_footer_.php on line 4
Learn JQUERY - by Deep - Tecwallet

Home » Tutorial » Learn JQUERY - by Deep

If you are subscribed user, I will answer any of your query related to this course with in 24 hrs.

•So we've used HTML to create basic webpages and then used CSS to add some styling to it. Our pages look great, but they're not yet a little far from being interactive, for e.g. we can't drag elements around the page or open-close sliding panels, animate elements, or add/remove new elements to our pages simply by a click.

•jQuery is where all this magic starts to happen…

•Let’s see a quick demo of this here:

http ://jsfiddle.net/DeepSukhwani/xAbqS /

•This link is accessible globally, so even you can access this and other similar links. I will make and keep these links public so that you can use them for your learning

Tutorial Topics
Leaderboard

Tutorial Topics

What is jQuery

Open Close

•So we've used HTML to create basic webpages and then used CSS to add some styling to it. Our pages look great, but they're not yet a little far from being interactive, for e.g. we can't drag elements around the page or open-close sliding panels, animate elements, or add/remove new elements to our pages simply by a click.

•jQuery is where all this magic starts to happen…

•Let’s see a quick demo of this here:

http ://jsfiddle.net/DeepSukhwani/xAbqS /

•This link is accessible globally, so even you can access this and other similar links. I will make and keep these links public so that you can use them for your learning

Document Object Model (DOM) - Part 1 Preview

Open Close

•In order to really understand jQuery, we need to see how an HTML page is put together.

•An HTML page is structured according to the Document Object Model or DOM. It is by interacting this DOM that jQuery is able to do the magic of interacting and modifying elements on an HTML page.

•The DOM consists on every element that is present on an HTML page, laid out in a hierarchical way that reflects the way the HTML document is ordered.

•Lets look at this link to see and example of what DOM looks like:

http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

•Another example is here:
http://jsfiddle.net /DeepSukhwani /L6cvD/

Document Object Model (DOM) - Part 2 Preview

Open Close

•In order to really understand jQuery, we need to see how an HTML page is put together.

•An HTML page is structured according to the Document Object Model or DOM. It is by interacting this DOM that jQuery is able to do the magic of interacting and modifying elements on an HTML page.

•The DOM consists on every element that is present on an HTML page, laid out in a hierarchical way that reflects the way the HTML document is ordered.

•Lets look at this link to see and example of what DOM looks like:

http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

•Another example is here:
http://jsfiddle.net /DeepSukhwani /L6cvD/

Using Selectors Preview

Open Close

•Just like the CSS div refers to the HTML element <div>, the jQuery 'div' refers to the same HTML element <div>. You can think of the element name passed to jQuery as identical to the CSS element, only wrapped in quotes. So, for instance, you could target anything of class button with:

$('.button').someAction

•We use dot (.) to target elements by their classes and hash/pound (#) to target elements by their ids.

•So if it was an element with id button, you could target it as:

$(’#button').someAction

Lets check it out:

http://jsfiddle.net /DeepSukhwani /Z4WmA/

Functional approach Preview

Open Close

•When we say ‘function’, we can think ‘action’. Functions are the basic unit of doing work in jQuery.

•Lets try adding a function inside our .ready(). jQuery will run the code in our function as soon as HTML document loads:

•The code might look a little overwhelming, but don’t worry. We will go through it bit by bit.

http://jsfiddle.net/DeepSukhwani/a8hL2 /

•Lets go into more in depth view of functions and selectors in our following lessons.

Functions-$(document).ready

Open Close

•Functions are the basic unit of action in jQuery. The main entry point of most jQuery applications is a block of code that looks like this:

$(document).ready(function() {

Do something

});

-- $(document) is a jQuery object. The $() is actually a function, it turns the document into a jQuery object

-- .ready() is a type of function. It runs the code inside its parenthesis as soon as the HTML document is ready.

-- function(){} is the action that .ready() will perform as soon as the HTML document is loaded.

Functions-In depth

Open Close

•A function is made up of three parts:

1.function keyword

2.Any inputs that function takes (they go between ()s and are separated by commas if there are more than one)

3.Whatever actions the function should perform (they go between the {}s).

•In jQuery, you can give functions just about anything as input, even other functions. That’s why .ready() can take function between its parentheses. Its actually taking a function as input.

Selecting by Class

Open Close

•We don't have to limit ourselves to selecting HTML elements like <p> and <div>, essentially, we can put any CSS selector in quotes and pass it into $(). This means we can select classes, too!

•We can select classes in CSS by using a dot (.). If we have class=”vanish" in our HTML, we can target it in CSS with .vanish. In jQuery, all we need to do is put '.vanish' in quotes, and we can pass it to $() to make a jQuery object.

•Lets see it in action here:

http://jsfiddle.net /DeepSukhwani /XL2HL/

Selecting by ID

Open Close

•We can select by ID by using a hash/pound (#). We could target id=‘one’ in this way:

$(‘#one’);

•Lets see it in action here:

http://jsfiddle.net /DeepSukhwani /JXj2N/

click()

Open Close

•.click() event triggers the required action as the user clicks on the selected HTML element.

•Lets try it:

http://jsfiddle.net/DeepSukhwani/4p9kD /

hover()

Open Close

•.hover() event triggers the required action as the user hovers on the selected HTML element.

•We can use multiple events in one go, lets see an example where we use .click() and .hover() events together.

http ://jsfiddle.net/DeepSukhwani/TsdkL/

dblclick()

Open Close

•.dblclick() causes a jQuery effect when a user double clicks on an element.

•Here’s an example:

http://jsfiddle.net /DeepSukhwani /vtxRu /

focus()

Open Close

•.focus() causes a jQuery effect when a user clicks on that element or tab overs to it.

•The .focus() event handler only works on elements that can receive focus—the list of these elements is a bit vague, but HTML elements like <textarea>s and <input>s are the usual suspects.

•Here’s an example:

http://jsfiddle.net /DeepSukhwani /ZYmLb /

Featured Courses

,UI/UX,HTML,JAVASCRIPT,CSS,JQUERY,

Leaderboard

Rank Score Time Taken (h:m:s) Student

Comments ( To Post Your Comment Please Login First! )

$15

Organiser : Web Development Tutorials
Category : Jquery

Other Benifits :

Placement Assistance

Subscribe Contact Tutor

Web Development Tutorials
(18)

Biography
Enrolled Students : 0

Web Developer by profession and teaching is my passion.

Create account

Purpose : Teach Learn Recruiter Partner

OR

Sign In

Forgot password? Create account

OR

Subscribe to Tecwallet

New Features Course Updates Job Updates Deals

Quick links

Home

Courses

Blog

Partner Dashboard

FAQ

About us

Contact

Sitemap

Privacy Policy

Contact information
support@tecwallet.com
Phone : +91-9468472070

Headquarter : 1201 Orange St. #600 , Wilmington, Delaware 19899

Development office : F-121 sector-10 D.L.F Faridabad, Haryana 121006

Monthly Newsletter

© 2015-20 Tecwallet

Copyright 2016-17 © TecWallet