2015-07-22 JQuery Lesson II (JQ elements get, add, delete, Judge, traverse, value, style set, change object, toggle)

Source: Internet
Author: User

1. Get the element:

1). Size (): Gets the number of elements.

$ ("img"). Size (): Gets the number of IMG.

2). EQ (): Gets the element.

$ ("Img[title]"). EQ (1): Gets the second img tag with the title attribute.

You can also write: $ ("img[title]") [1], the 1 in this bracket represents index 1, so it corresponds to the second one, generally multi-use EQ ().

3). Get (): Gets the DOM element specified by the selector.

x=$ ("P"). Get (0): Gets the value of the first P element.

4) Index (): Gets the index of a label.

$ ("div"). Index ($ (this)): Gets the index of the current operation of this div in all div.

5) Find (): Search for tags to get new collections.

$ ("P"). FIND ("span"): searches for a span tag in all P-tag elements and gets a new collection of elements.

*$ (This): represents the current action object.

"Example" Var inum=$ ("Li"). Index ($ ("LI[TITLE=ISAAC") [0]), explaining the meaning of the sentence.

Answer: 1) $ ("Li"): Search all the LI tags;

2) $ ("Li"). Index (): Find () The indexes of the objects within all the LI tags;

3) $ ("LI[TITLE=ISAAC]") [0]: Find the first Li tag with the title attribute "TITLE=ISAAC";

4) The final explanation is: To find all the Li tags, find out "first has ' title=isaac ' this attribute of the Li tag" in all the Li tag index.

2. Add element : AddClass ()

$ ("Img[title]"). AddClass ("MyClass"): Adds a myClass style to all IMG tags with the title attribute.

3. Delete element : not ()

$ ("Li[title]"). Not ("[TITLE*=ISAAC]"): In all Li tags that have the title attribute set, remove the Li tag with the title attribute [TITLE*=ISAAC]. ([TITLE*=ISAAC]: the title containing the Isaac string)

  

Note: The parameters accepted by the not () method cannot contain specific elements, but can only be generic expressions.
Error: $ ("Li[title]"). Not ("IMG[TITLE*=ISAAC]")
Correct: $ ("Li[title]"). Not ("[TITLE*=ISAAC]")

4. Filtering element : Filter ()

$ ("Li"). Filter ("[TITLE*=ISAAC]") is equivalent to $ ("LI[TITLE*=ISAAC]"): For all Li tags, filter out the label containing the title attribute [TITLE*=ISAAC].

Attention:

1) filter in the parameters, can not be directly equal to match, can only be pre-matching ^=, after matching &=, any match *=

2) the filter (function) function requires a Boolean value to be returned, which is reserved for elements with a return value of true, otherwise the removal

5. Judging element : Is ()

var bimge=$ ("Div"). Is ("img"): Determines whether the div block in the page contains an IMG tag, returns a Boolean value, yes or No.

6. Traversing elements:each ()

* Traverse: Will select the label, one by one all go through again.

In JS:

$ (function () {
$ ("img"). each (function (index) {
This.title= "This is the" +index+ "sub-figure, the ID is" +this.id+ ", the name is" +THIS.NAME;
});
});

In HTML:

Iterate through all the IMG and have each IMG set a Title property value: This is the nth image, the ID is img1,name is A1

7. Get attribute/Set property value : attr ()

attr () has 2 functions: one is to get the property value, and one to set the value for the property.

1) Get the property value:

var s = $ ("#txt"). attr ("value"); Gets the value of the values property inside the TXT

2) Set the property value:

$ ("#txt"). attr ({"Value": "xxxxx", "title": "AAAAA"}); Query txt, set the value of value xxxxx for the value in which value AAAAA

8. Set the element style:

1) Add Style: AddClass ()

$ ("#btn"). Click (function () {
$ (this). addclass ("B"); Find the tag with ID btn and click it to add Style B to the original style
});

2) Delete style: Removeclass ()

$ ("#btn"). Click (function () {
$ (this). Removeclass ("B"); Locate the tag with ID btn, and then click it to remove the style from the original style B
});

3) Write style: CSS ()

$ ("#btn"). Click (function () {
$ (#d1). CSS ("Color", "blue"); Locate the tag with ID btn, and then click to let the tag with id D1 have a CSS style of "color changed to blue"
});

4) Toggle Style: Toggleclass ()


$ ("#btn"). Click (function () {
$ (#d1). Toggleclass ("highlight"); When you click on the switch, the style is alternately executed, and in a moment there is no
});

  

9. Change the Operating object:

1). End (): Action for the previous step object of the current object

2). Andself (): Operates on both the current object and its previous step object

"Example" illustrates the meaning of the following three words:

1) $ ("P"). FIND ("span"). AddClass ("MyClass1"). AddClass ("MyClass2")

2) $ ("P"). FIND ("span"). AddClass ("MyClass1"). End (). addclass ("MyClass2")

3) $ ("P"). FIND ("span"). AddClass ("MyClass1"). Andself (). addclass ("MyClass2")

A: 1) in all P tags, find the span tag for them plus the MYCLASS1 style, plus the MYCLASS2 style

2) in all P tags, locate the span tag for them with the MyClass1 style, and then return to the previous object $ ("P"), and add the MyClass2 style to all P tags

3) in all P tags, locate the span tag to add the MyClass1 style to them, and add the MyClass2 style for themselves and the previous object $ ("P")

10. Dynamic Switching:

1) mouseover (): Change style when mouse moves up

$ ("P"). MouseOver (function () {

$ (this). CSS ("Color", "red");

});

2) Mousetout (): Change the style after the mouse is removed

$ ("P"). Mouseout (function () {

$ (this). CSS ("Color", "red");

});

3) Hover (Event 1, event 2): Mouse Up Event 1, remove event 2

$ ("P"). Hover (function () {

$ ("#d1"). AddClass ("C");

},function () {

$ ("#d1"). Removeclass ("C");

});

The ID=D1 label in the P tag, the mouse is placed on the C style, remove the C-style when moving away.

11. Judging style : Hasclass ()

$ ("Li"). Hasclass ("MyClass"); Determine if Li contains a MyClass style, return as Boolean, yes or no

2015-07-22 JQuery Lesson II (JQ elements get, add, delete, Judge, traverse, value, style set, change object, toggle)

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.