some rarely used handy Type Extension Selectors (we may never use them) :button All buttons :checkbox all check boxes :file all file elements :header all header elements (h1, h2, and so on) :hidden all hidden elements :image all image elements :input all input elements :last the last matched element :parent all of the elements that are parents hierarchy :password all password elements :radio all radio elements :reset all elements that reset a form :selected all elements that are selected :submit all form submission elements :visible all visible elementsv
2012-08-17 03:01
both following code snippets do the same job -- Notice the one is with jquery
Let me start with a function
function linkscount() {
return $('a').length;
}
You have create such function after doument is loaded
$(document).ready(
function() { console.log("link count: " + linkscount()); }
);
Or call it as below...
$(document).ready(
console.log("links count: " + linkscount())
);
Important thing here is $() function works only after the document is fully loaded/ready.
following functiom works on all odd links
$(document).ready(function() {
$("a:odd").mouseenter(function(e) {$(this).css("color", "red"); })
.mouseout(function(e) { $(this).css("color", "blue"); })
});
:button All buttons
:checkbox all check boxes
:file all file elements
:header all header elements (h1, h2, and so on)
:hidden all hidden elements
:image all image elements
:input all input elements
:last the last matched element
:parent all of the elements that are parents hierarchy
:password all password elements
:radio all radio elements
:reset all elements that reset a form
:selected all elements that are selected
:submit all form submission elements
:visible all visible elementsv
both following code snippets do the same job -- Notice the one is with jquery
$(document).ready(function() {
$('label').css("color", "red").css("font-size", ".50em");
var labelElems = document.getElementsByTagName("label");for (var i = 0; i < labelElems.length; i++) {
labelElems[i].style.color = "red";
labelElems[i].style.fontSize = ".50em";
}
});
one more TIP for now
not(condition) Removes all elements that match the condition.
Some proximity based finders that can be applied on the found element
closest(jQuery) , offsetParent() , parent(), parent(selector) , parents(),parents(selector) , parentsUntil(selector) , parentsUntil(selector, selector) , parentsUntil(HTMLElement) , parentsUntil(HTMLElement, selector) , parentsUntil(HTMLElement[]) ,parentsUntil(HTMLElement[], selector)
Sp appenders and prependers == Frequently used
Add as last children append(HTML) append(jQuery) append(HTMLElement[]) , appendTo(jQuery) appendTo(HTMLElement[]) , append(function) prepend(function)
add as first children prepend(HTML) prepend(jQuery) prepend(HTMLElement[]) , prependTo(HTML) prependTo(jQuery) prependTo(HTMLElement[])
Wraps around the set of elements in the jQuery object (as a single group)
Wraps the set of elements in the jQuery object (as a single group)
Wraps content of the elements in the jQuery object
CSS method
css(name) ,css(name, value) ,css(map) ,css( function)
$(document).ready(function() {
var cssVals= {
"font-size": "1.2em",
"color":"blue"
};
$('a').css(cssVals);
$('a').css("color","blue");
$('a').css("color":"blue");
});
Some get set(value) functions:
width() width(value)
height(function) width(function)
height(), height(value)
text() text(value)
html() html(value)
val() val(value) text(function)
html(function) val(function)
data(key, value) data(map)
data(key) data()
removeData(key) removeData()
bind(eventType, function)
bind(eventType, data, function)
bind(eventType, boolean)
bind(map)
one(eventType, function)
one(eventType, data, function)
unbind()
unbind(eventType)
unbind(eventType, boolean)
unbind(Event)
innerHeight() innerWidth()
offset() outerHeight(boolean) outerWidth(boolean) // booean with/without margin - easy measurements
position() coordinates of offset with
scrollLeft() scrollTop()
scrollLeft(value) scrollTop(value) v
event Bubbling manipulation /control
preventDefault() , stopImmediatePropagation() , stopPropagation()
Methods for Automatically Registering Event Handlers (Dont use them for perf reasons)
live(eventType, function) live(eventType, data, function) live(map)
die() ,die(eventType) ,
delegate(selector, eventType, function)
delegate(selector, eventType, data, function)
delegate(selector, map)undelegate()undelegate(selector, eventType)
Keyboard Event Methods