Uferryman FCC study Record (iii)--jquery

Source: Internet
Author: User

1.jQuery Basic Understanding:

jquery is an open source JavaScript library, founder John Resig

Start of 2.jQuery Preparation:

  $(document).ready(function() {方法});在没有document ready function以前,你的代码会在HTML没有渲染完成就执行,这样会产生bug。  

3.jQuery selector:

Basic selector:

Tag Selector: Select by the tag name of the HTML element ("button"). AddClass ("animated bounce");

ID selector: Gets the element of the specified ID in the document $ (". Text-primary"). AddClass ("animated Shake");

Class Selector: Select $ ("#target6")based on the CSS class. addclass ("Animated FadeOut")

You can locate the BODY element $ ("body"). AddClass ("animated hinge");

Document Operation for 4.jQuery:

  html () 1. Returns the element content (if no argument is set, returns the selected element current Gijon) $ (selector). HTML ()

2. Set the element content (overwrite all matching element contents) $ (selector). HTML (content)

 Remove () removes the selected element, including text and child nodes $ (selector). Remove

The method does not remove the matching elements from the JQuery object, so that the matching elements can be used in the future.

Except that the element itself is retained, remove () does not preserve the jQuery data for the element. Other, such as bound events, attached data, and so on, will be removed. This is different from detach ()

  AppendTo () inserts the specified content $ ("#target2") at the end of the selected element (still inside). AppendTo ("#right-well");

  Clone () generates a copy of the selected element, including child nodes, text, and attributes. $ (selector). Clone (Includeevents);

includeevents is optional. Boolean value. Specifies whether to copy all event handling for an element. By default, the replica does not contain the event handler.

5.jQuery Property Operation Method:

addclass () adds one or more classes (separated by spaces) like the selected element, and the method does not remove the already existing class attribute   $ (selector). AddClass (Class)

removeclass () removes the selected element by adding one or more classes (separated by spaces) and removes all classes $ (selector) If no parameters are specified in parentheses     . Removeclass (Class)

6.jQuery CSS Operation:

  css () 1. Returns the CSS property (not supported by shorthand CSS properties) $ ("P"). CSS ("color"); Gets the value of the color style property of the first paragraph

2. Set CSS Properties $ ("P"). CSS ("Color", "red"); Set all paragraph elements to red

7. Traversal:  

  Parent () Gets the parents of each element in the current matching element collection (traversing a single level up the DOM tree)

$ ("P"). Parent (". selected"); Find the parent element with the "selected" class for each paragraph

  children () returns all the immediate child elements of the selected element. (Walk up a single level along the DOM tree)

$ ("div"). Children (". Selected"). CSS ("Color", "blue"); Find the child elements of all div with the class name "selected" and set it to blue:

8. Other:

$ (". Target:nth-child (2)"). AddClass ("animated bounce"); selects all nth elements using a class target or element type. (Target3/6 up and down in the picture)

  $ (". Target:even"). AddClass ("animated Shake"); Use class target to locate all even numbers (target1/5/6s in figure)

Note that jquery is 0 indexed, which means, counter-intuitively: Odd to select the second element, the fourth element, and so on.

Uferryman FCC study Record (iii)--jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.