jQuery Reviewer

What is jQuery?
It is a JS library with a motto – write less, do more. It simplifies various tasks by writing less code.

What are the features of jQuery?
DOM Manipulation
Event Handling
AJAX Support
Animations
Lightweight – about 19kb
Cross Browser Support

How will you make sure that DOM is ready?
$(document).ready(function() { … }); OR $(function() { … });

How to resolve conflict with another JS library?
You can use jQuery() instead of $()

$(“selector”).action(); OR
$(“selector”).action(“event”, function() { … });

function functionName(elemID, showText) {
$(elemID).on(‘click’, function(){
$(‘#show’).html(showText);
}); }
functionName(elemID, showText);

Selecting Multiple Items: $(“selector1, selector2”)

Chaining: $(“selector”).action().action();

Variable: var varName = $(“selector”); OR

Create New Element: varName = $(“<tag>”); OR varName = $(“<tag class=’…’>…</tag>”);

Removing Event Handlers: $(“selector”).off(“event”);

Triggering Events: $(“selector”).trigger(“event”);

Finding Elements: $(“selector”).find(“selector”);

 

Basic Selector: * / element / id / class

Effects: .show() / .hide() / .toggle

Fading: .fadeIn() / .fadeout()
.fadeTo() / .fadeToggle()

Sliding: .slideDown() / .slideUp() / .slideToggle()

Custom Effects: .animate({cssProperty: value, cssProperty: value}, speed, easing, complete)

Ascending Sorting
arrayName.sort(function(a, b) {return a-b;});

Descending Sorting
arrayName.sort(function(a, b) {return b-a;});

Ascending Dates Sorting
var arrayDate = [“yr-mm-dd”, “yr-mm-dd”];
arrayDate.sort(function(a, b) {
var dateA = new Date(a);
var dateB = new Date(b);
return dateA – dateB;});

Basic Filter Selector:
:not – $(‘p:not(.intro)’)
:first / :last
:even / :odd
:focus

Content Filters Selector:
:contains(“text”)
:empty
:parent
:has(selector)

Child Filters Selector:
:first-child / :last-child
:first-of-type / :last-of-type
:nth-child(num)
:only-child

Visibility Filters Selector:
:hidden / :visible

Attribute Filters Selector:
[attribute]
[attribute=”value”]
[attribute!=”value”]
[attribute^=”value”] / [attribute$=”value”]
[attribute*=”value”]
[attribute|=”value”]
[attribute~=”value”]
[attribute=”value”][attribute2=”value2″]

Form Selector:
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:selected
:enabled / :disabled
:checked

Get the Attribute Value:
.attr(“attrName”) / .css(“property”)

Create / Add an Attribute Value:
.css(“property”, “value”) or
.css({“property”: “value”, “property”: “value”})
.attr(“attrName”, “attrNewValue”)
.removeAttr(“attrName”)
.addClass(“class1 class2”)
.removeClass(“class1 class2”)
.toggleClass()

jQuery CSS Properties:
marginLeft / fontSize / borderLeftWidth

Get Content:
.html() / .text()
Change Content:
.html(“text”) / .text(“text”)

Add New Elements / Contents
.before() / .after()
.prepend() / .append()
.prependTo() / .appendTo()
.insertAfter() / .insertBefore()

Get or Update Dimension
.height() / .width()
.innerHeight() / .innerWidth()
.outerHeight() / .outerWidth()
.outerHeight(true) / .outerWidth(true)
$(window).height() / $(window).width()

Get or Update Position
.offset() / .position() /
.scrollLeft() / .scrollTop()

Find and Select Elements
.find()
.closest()
.parent().”…”() / .parents()
.children().”…”()
.siblings()
.next() / .nextAll()
.prev() / .prevAll()

Filter/Test Elements:
.filter()
.find()
.not()
.has()
.is()

Get or Change Element:
.remove()
.empty()
.clone()
.add()

Get or Change Form Values:
.val()
.isNumeric()

Keyboard Events:
Input
keydown() / keyup()
keypress()

Mouse Events:
click() / dblclick()
mouseup() / mousedown()
mouseenter() / mouseleave()
mouseover()
mousemove()
mouseout()
hover()

Form Events:
blur()
change()
focus()
focusin() / focusout()
submit()
select()

Browser Events:
resize()
scroll()

Event Object:
event.type
event.data
event.target

DOM Insertion / Removal Around
.wrap()
.wrapAll()
.wrapInner()
.unwrap()

How to get JSON?
$.getJSON(“url.json”, function(json){
$(“selector”).action(JSON.stringify(json));
});

How to know if a class is present on at least one of the matched elements?
.hasClass() returns true if class is present

How to get the top and left position of an element?
Use .position()

How to remove elements matching from the matched elements?
Use .not(selector)

How to search for descendant elements that match the specified selector?
Use .find(selector)

How to remove an attribute from each of the matched elements?
Use .removeAttr()

How to filter out elements from matched elements?
Use .filter(selector)

How to get elements containing the ancestors of the matched elements?
Use .parents(selector)

How to get elements containing the closest parent element that matches the selector?
Use .closest(selector)

How to remove set of matched elements using jQuery?
Use .remove()

How to remove all child nodes from the matched elements?
Use .empty()

How to check if event.preventDefault() was ever called on this event?
Use .isDefaultPrevented()

How to stop the rest of the event handlers from being executed?
Use .stopImmediatePropagation()

How to check if event.stopImmediatePropagation() was ever called on this event?
Use .isImmediatePropagationStopped()

How to check if event.stopPropagation() was ever called on this event?
Use .isPropagationStopped()

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in jQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s