"2017-06-02" jquery Foundation

jquery is a method package for JS integration.

Note: The introduction of jquery is in

One, selector

1. ID Selector

$ ("#div1")

2. Class Selector

$ (". Div")

Use the class selector to select a bunch of objects to attach to them, without having to iterate like JS. Attach an event directly, and all objects that are taken will be attached to the event.

Note: This in JS is changed to $ (this) in jquery.

3. Tag Selector

$ ("div")

4. Parallel selector

Use, Separate

$ ("#div1, #div2")

5. Descendant Selector

Separated by a space

6. Filter Selector

First: $ (". Div:first")

Last: $ (". Div:last")

Any of: $ (". Div:eq (index number)")

$ (". Div"). EQ (index number)

Greater than: $ (". DIV:GT (index number)") is taken after the index number

Less than: $ (". DIV:LT (index number)") is taken before the index number

Exclude: $ (". Div:not (selector)") is taken to exclude the left of the selected

$ (". Div:not (. Div:eq (2))") takes out the third remaining

Odd number of: $ (". Div:odd") index odd number of

An even number: $ (". Div:even") index even number, including 0

Property name filtering: $ (". div[attribute name]")

Property name + Value filter: $ (". div[Property name = value]") $ (". div[Property Name = = value]")

Content filtering: $ (". Div:contains (' string ')")

Contains child elements: $ (". Div:has (' selector ')")

Ii. Events:

1. Basic events:

is to remove the JS event.

2. Composite Events

Hover (function () {},function () {})

is to move the mouse into the move out event together, the first function is to move in the event, the second function is to move out of the event.

Toggle (function () {},function () {},....) Need to draw Jquery1.7.1 version.

The mouse clicks the loop to execute the inside method. You can put a myriad of function

3. Future elements attached to the event

Object. Live ("Event name", function () {});

Attach an event to an object that has not yet been created.

4. Block Event bubbling

Finally return false in the event function;

Third, Dom operation

(i) Operation properties

1. Get Properties

var s = $ ("selector"). attr ("attribute name")

2. Setting properties

$ ("selector"). attr ("Property name", "Property value")

3. Delete Attributes

$ ("selector"). Removeattr ("attribute name")

(ii) Operation style

1. Operation Inline Style

Get style

var s = $ ("selector"). CSS ("style name")

Set style

$ ("selector"). CSS ("style name", "value")

2. The class of the operating style sheet

Add class, which is equivalent to a parallel class.

$ ("selector"). AddClass ("Class name")

Remove class

$ ("selector"). Removeclass ("Class name")

Add remove Alternating class

$ ("selector"). Toggleclass ("Class name")

(iii) Operation contents

1. Form elements

Take value

var s = $ ("selector"). Val ()

Assign value

$ ("selector"). Val ("value")

2, non-form elements

Take value

var s = $ ("selector"). html () var s = $ ("selector"). Text ()

Assign value

$ ("selector"). HTML ("content") $ ("selector"). Text ("Content")

(iv) operation of relevant elements

1. Find

Find Parent ()

Find predecessor parents (selector)

Find subset Children (selector)

finding descendants find (selector)

Looking for Brother Prev () Prevall (selector)

Find your brother Next () Nextall (selector)

2. Operation

NEW: $ ("HTML string")

Example: $ ("#div1"). Append ($ ("<div class= ' div2 ' ></div>"));

Add: Appen (jquery object)---Add to interior

After (,..) ----Lower lateral add

Before ("...")-----upper-lateral add

Remove: Empty ()----empty all elements inside

Remove ()-----removing elements

Copy: Clone ()

JS Create object

var d1=document.createelement (' div ');

D1.setattribute ("Class", "Div2"); Set Class Property

$ ("#div1"). Append (D1); Add to the div1 below.

jquery Creating objects

$ ("#div1"). Append ($ ("<div class= ' div2 ' ></div>"));

Four, animation

Show (), Hide () shows, hides.

Slidedown (), Slideup () drop-down display, pull-up hidden

FadeIn (), FadeOut () fades

Custom animations

Animate ({left: "300px", Top: "300px"},3000,function () {callback function})

Stop animation to prevent animation from accumulating:. Stop ()

Navigation bar Making

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <script src="Js/jquery-1.7.2.min.js"></script> <title></title> <style type="Text/css">. div1 {position:relative;            width:100px;            height:50px; Background-color:red; float: Left; Margin-left:20px;            }. div2 {position:absolute; Width: -%;            height:0px;            top:50px; Background-Color:green; }    </style>class="Div1"> <divclass="Div2"></div> </div> <divclass="Div1"> <divclass="Div2"></div> </div> <divclass="Div1"> <divclass="Div2"></div> </div> <divclass="Div1"> <divclass="Div2"></div> </div> <divclass="Div1"> <divclass="Div2"></div> </div></body>"Text/javascript">    $(". Div1"). MouseOver (function () {varAAA = $ ( This). Children (". Div2:eq (0)"); Aaa.stop (). Animate ({height:"300px"}, -, function () {AAA.CSS ("Background-color","Blue");    });    }); $(". Div1"). Mouseout (function () {varAAA = $ ( This). Children (". Div2:eq (0)"); Aaa.stop (). Animate ({height:"0px"}, -, function () {AAA.CSS ("Background-color","Green");    }); });</script>

The animated color gradient requires another jquery.color. Put it under the previously quoted jquery.

"2017-06-02" jquery Foundation