- first add a script
<script>
$(document).ready(function() {
});
</script>
- . All jQuery functions start with a $ , usually referred to as a dollar sign operator, or as bling.
- jQuery often selects an HTML element with a selector , then does something to that element.
// included both the jQuery library and the Animate.css library
<script>
$(document).ready(function() {
// jQuery's .addClass() function, which allows you to add classes to elements.
//
//aimed at HTML element
$("button").addClass("animated bounce");
$("button").removeClass("btn-default");
//aimed at clsss
$(".well").addClass("animated shake");
//aimed at ID
$("#target3").addClass("animated fadeOut");
});
</script>
- change CSS
jQuery has a function called .css() that allows you to change the CSS of an element.
$("#target1").css("color", "blue");
- Disable an element(cant click on it)
$("button").prop("disabled", true);
- Change Text Inside an Element
$("#target4").html("<em>#target4</em>");
- remove element
$("#target4").remove();
- move element by function called appendTo
$("#target2").appendTo("#right-well");
- clone an element
$("#target5").clone().appendTo("#left-well");
- target the parent/children of element
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange")
//target on specific child--the second child here
$(".target:nth-child(2)").addClass("animated bounce");
//all odd target
$(".target:odd").addClass("animated shake");
- can also target on
<body>
- sum up
element.addClass
element.removeClass
element.css
element.prop
element.remove
element.appendTo
Some new WORDS:
distracting adj. 分心的；分散注意力的