JQuery
animate()
$("#idName").animate({left: 200});
css()
$(".className p").css({"background": "red"});
var colour = $(".className p").css("background"); // colour: red
$(".className p").css("background", "red").css("left", "100px");
Filters
:first :last :first-child :last-child
$("header li:first").css({"border": "2px solid red"});
$("header li:last").css({"border": "2px solid red"});
$("#idName ul:first-child").css({"border": "2px solid red"});
$("#idName ul:last-child").css({"border": "2px solid red"});
:even :odd
$("header li:even").css({"border": "2px solid red"});
$("header li:odd").css({"border": "2px solid red"});
// starts from 0
:not
$("ul:not('.contact')").css({"border":"2px solid red"});
:lt :gt
$("header li:lt(3)").css({"border": "2px solid red"}); // index less than 3
$("header li:gt(2)").css({"border": "2px solid red"}); // index greater than 2
1/4
[class], [id], [href], [alt]...
$("div[class]").css({"border": "2px solid red"});
$("img[alt]").css({"border": "2px solid red"});
next() prev() parent() children()
// next and previous elements in line
$("#idName").next().css({"border":"2px solid red"});
$("#idName").prev().css({"border":"2px solid red"});
$("#idName").parent().css({"border":"2px solid red"});
$("#idName").parents().css({"border":"2px solid red"});
$("#idName").children().css({"border":"2px solid red"});
find()
$("#sectionId").find(".subsectionClass").css({"border":"2px solid red"});
closest()
$("#sectionId").closest("li").css({"border":"2px solid red"});
Chaining
$("#idName").next().css({"border":"2px solid red"})
.next().css({"border":"2px solid blue"})
.closest("ul").css("border":"2px solid green);
append() before() after() html() text()
var content = "<div> This is some random content </div>";
var content2 = "<div> This is some random content 2</div>";
var content3 = "<div> This is some random content 3 </div>";
var content4 = "<div> This is some random content 4 </div>";
2/4
var content5 = "This is some random content 5";
$("#content div").append(content); // add at the end
$("#content div p").before(content2); // add before
$("#content div p").after(content3); // add after
$("#content div").html(content4); // replace
$("#content div p").text(content5); // replace exact (plain) text
wrap() unwrap() wrapAll()
$("#idName").wrap("<div>");
$("#idName").unwrap();
$("#idName").wrapAll("<div>");
var button = $(".button");
button[0].onclick = function(){
$("section").unwrap();
button.text("Wrap");
};
empty() remove()
$("#idName").empty(); // empties what is inside the element
$("#idName").remove(); // deletes the element
removeAttr() attr()
$("img").removeAttr("alt");
$("img").attr("alt", "comment");
var comment = $("img").attr("alt");
removeClass() addClass() toggleClass
$("header .wrapper").removeClass("wrapper");
$("header").addClass("wrapper");
$("#idName").css("height", "0").css("overflow", "hidden");
$(".open").css({height: "auto:Important"});
var button = $("#buttonId");
button[0].onclick = function(){
3/4
$("#idName").toggleClass("open");
return false;
};
on() off()
$("#buttonId").on("dblclick", function(){
$(this).css({"background": "pink"})
$("#buttonId").off("click");
});
myList = $("li");
myList.on("click", function(){
$(this).css({"background": "pink"})
$("#buttonId").off("click");
});
click() dblclick()
$("#buttonId").click(function(){
$(this).css({"background": "pink"})
$("#buttonId").off("dblclick");
});
$("#buttonId").dblclick(function(){
$(this).css({"background": "blue"})
$("#buttonId").off("click");
});
Other Events:
mouseenter
mouseleave
keypress
keydown
keyup (event.keyCode)
submit
change
focus
blur
load
resize
scroll
unload
4/4
