filtering, binding and animation

First, basic filter

Grammar	Describe	return value
: First	Select the first element	Single element
: Last	Select the last Element	Single element
: Not (selector)	Select to remove all elements that match the given selector	Collection elements
: Even	Select all elements with an even number (index starting from 0)	Collection elements
: Odd	Selects all elements with an odd index (index starting from 0)	Single element
: EQ (Index)	Select an element with index equal to index	Collection elements
: GT	Select an element with an index greater than index	Collection elements
: LT	Select an element with index less than index	Collection elements
: Header	Select all heading elements, such as H1~h6	Collection elements
: Focus	Select the element that currently takes focus	Collection elements

Second, the visibility of filter selector

Selector Selector	Describe	return value
: Visible	Select all visible elements	Collection elements
: Hidden	Select all hidden elements	Collection elements

Iii. binding events and removing events

Bind event method Bind () and Remove event method unbind () when one or more events are bound or removed for a matching element at once

Eg: Achieve light bar effect

        Bind event bind  Unbind        $ (function () {            $ ("li"). Bind ("MouseOver", function () {               $ (this). CSS ("Background", "Pink");            }). Bind ("Mouseout", function () {                $ (this). CSS ("Background", "");           });         Remove Event            $ ("Li"). Unbind ("MouseOver mouseout");        })

Added: Binding removal events can also be implemented using on off, live die, delegate undelegate scenarios

Iv. animations in jquery

1. Simple animation

① control element Display and hide

Show (), Hide ()

② changing element transparency

FadeIn (), FadeOut ()

③ changing the height of the element

Slideup () and Slidedown ()

Eg: Achieve fade effect

    <title></title>    <script src= "js/jquery-1.11.1.js" ></script>    <script type= " Text/javascript ">        $ (function () {            $ (" #btnIn "). Click (function () {                $ (" img "). Slidedown (" slow ");            });            $ ("#btnOut"). Click (function () {                $ ("img"). Slideup ("slow");            })    </script>
2. Complex animation <animate>
  <title></title>    <style type= "text/css" >        div {        height:20px;        border:1px solid red;        }    </style>    <script src= "js/jquery-1.11.1.js" ></script>    <script src= "js/ Jquery-migrate-1.2.0.js "></script>    <script type=" Text/javascript ">        $ (function () {            $ ("[Type=button]"). Click (function () {                $ ("div"). Animate ({                    width: "70%",                    Height: "300%",                    Borderwidth:10                                    }). Animate ({                    fontSize: "50px"                }, {queue:false,duration:5000})            })    </script>
filtering, binding and animation