1. Selectors / 2. Events / 3. Hide, Show / 4. Fade / 5. Slide / 6. Animate / 7. Stop / 8. Get / 9. Set
10. Add / Remove
11. CSS / 12. Dimensions / 13. Traversing
1. Selectors
//Use the correct selector to hide all <p> elements.
$("p").hide();
//id="test".
$("#test").hide();
//class="test"
$(".test").hide();
//all elements in the document.
$("*").hide();
//all elements with an href attribute.
$("[href]").hide();
//all odd table rows in a table.
$("tr:odd").hide();
2. Events
// all <p> elements with a "click"
$("p").click(function(){
$(this).hide();
});
// all <p> elements with a "double click"
$("p").dblclick(function(){
$(this).hide();
});
//When the mouse pointer enters a <p> element
$("p").mouseenter(function(){
$(this).hide();
});
//press a keyboard key inside an <input> element
$("input").keypress(function(){
$(this).hide();
});
//attach a click event handler to all <p> elements
$("p").on("click", function(){
$(this).hide();
});
//change background-color when mouseenter / mouseleave / mouseclick
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
3. Hide, Show
hide / show / toggle /
4. Fade
fadeOut / fadeTo / fadeToggle
ex) $("div").fadeTo("slow", 0.2 ); //method to fade a <div> element to an opacity of "0.2".
ex) $("button").click(function(){
$("div").fadeToggle(1000);
}); //method to toggle between fading in and out a <div> element, when clicking on a button. duration : 1000 milliseconds.
5. Slide
slideUp / slideDown / slideToggle
6. Animate
animate
- left, opacity, height, width, fontSize
ex) $("div").animate({opacity : '0.4', height: '500px', width: '500px', fontSize: '100px'}, "slow");
ex) $("div").animate({left: '250px'}); // move a <div> element 250 pixels to the right
7. Stop
stop
8. Get
text / html/ val / attr
$("div").text();
9. Set
text / html/ val / attr
$("div").text("Hello World");
ex) $("a").attr("href");
ex) $("div").text("Hello World"); //change the text of a <div> element to "Hello World".
ex) $("img").attr("src", "myimage.jpg"); // change the value of an image's src attribute to "myimage.jpg".
10. Add / Remove
append / prepend
empty(only remove the child elements) / remove
11. CSS Classes / CSS
addClass / removeClass / toggleClass
css
ex) $("p").css("border", "5px dotted red");
ex) $("p").css({"border": "5px dotted red", "color": "white"});
12. Dimensions
height/ width / innerHeight / outerHeight (padding, border and margin 포함 시 outerHeight(true)로 true값 주면 된다.) /
ex) $("div").height(500).width(500);
ex) $("div").height() //get the height of div element
13. Traversing
parent / parents / children / find / siblings / first
ex) $("div").find("span"); //get all <span> elements that are descendants of <div>