2017.4.9 jquery Learn to continue writing

1. First step: Write down this function

<script>
$ (document). Ready (function () {
});
</script>

2. Step two: All jquery methods are started by $ jquery by 选择器 Selecting an element and then manipulating the elements to make some changes

To get all the 按钮 bounce back, just write the code in document ready function there.

$ ("button"). AddClass ("animated bounce");

3. Just use the jquery .addClass() method, you can add class to the element

Use $(".well") to get all the class well div elements, add 2 classes using jquery .addClass() method: animated ,shake

$ (". Well"). AddClass ("animated Shake");

4. You can also get elements based on the id attribute

First Use $("#target3") to select target3 the element with ID button .

Then use the jquery .addClass() method to add animated and fadeOut class

$ ("#target6"). AddClass ("Animated FadeOut")

5. Now you have learned about 3 selectors: element selector: $("button") , class selector: $(".btn") , ID selector: $("#target1") .

Code:

<script>
$ (document). Ready (function () {
$ ("button"). AddClass ("animated");
$ (". Btn"). AddClass ("Shake");
$ ("#target1"). AddClass ("Btn-primary");
});
</script>

6. You can add class to an element by means of jquery addClass() , or you can removeClass() remove the class from the element by means of the jquery method.

Like this:

$("#target2").removeClass("btn-default");

7. We can use jquery to change the CSS style of HTML elements. jquery has a .css() method called that allows you to change the CSS style of an element.

Here's how we're going to change the color to blue:

$("#target1").css("color", "red");

8. You can also use jquery to change properties other than CSS. For example, you can make the button not selectable. When you set the button to not be selectable, it turns the button gray and cannot be clicked.

jquery has a .prop() way for you to adjust the attributes of an element.

Here's what we do to make the button not selectable:

$("button").prop("disabled", true);

9.jQuery not only changes the text between the start and end tags of an element, it can even change the element tag itself.

The jquery .html() method can add HTML tags and text to an element, and the content before the element is replaced by the contents of the method.

We use em the [emphasize] tab to rewrite and emphasize the title text:

$("h4").html("<em>#target4</em>");

10. Now let's use jquery to remove HTML elements from the page. jquery has a way to .remove() remove HTML elements

$ ("#target4"). Remove ("#target4");

11. Now let's try to move elements from one div to another div .

jquery has a appendTo() way to add selected elements to other elements.

You want to target4 move from us right-well to left-well , we can use this:

$("#target4").appendTo("#left-well");

12. In addition to moving elements, you can also copy elements. Simple to understand: Moving an element is cut, copying the element is copying.

The jquery clone() method can copy elements.

For example, if I want target2 to left-well copy from to right-well , we can write this:

$("#target2").clone().appendTo("#right-well");

13. Each HTML element has a parent element, depending on the inherited attribute parent .

jquery has a method called parent() , which allows you to access the parent element of the specified element.

For example, change the left-well background color of the parent element of an element to parent() red.

$("#left-well").parent().css("background-color", "red")

14. Many HTML elements have children (child elements), and each child element inherits some attributes from the parent element.

For example, each HTML element is a body child element, and your "jQuery Playground" h3 element is a <div class="container-fluid"> child element.

jquery has a method called children() , which allows you to access the child elements of the specified element.

For example, make the left-well text color of the element's child elements children() blue.

$("#left-well").children().css("color", "blue")

15.jQuery uses CSS selectors to select elements, and target:nth-child(n) CSS selectors allow you to choose all child elements of the target element in index order (starting at 1).

Example: You can add a bounce class to the third child element of the target element.

$(".target:nth-child(3)").addClass("animated bounce");

16. Example: Get all the target elements that are class and have an odd index, and add class to them.

$ (". Target:odd"). AddClass ("animated Shake");

Remember, the index in jquery starts at 0, which means: :odd select 2nd, 4, and 6 elements, because target#2 (index 1), TARGET#4 (index 3), TARGET6 (index 5).

Get all even-numbered actions:

$ (". Target:even"). AddClass ("animated Shake");

17. We have the entire body fade out effect (fadeOut):$("body").addClass("animated fadeOut");

$ ("Body"). AddClass ("animated hinge");

2017.4.9 jquery Learn to continue writing