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

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)