jQuery Getting Started

来源：互联网发布：索尼网络授权经销商编辑：程序博客网时间：2024/04/29 16:41

"jQuery is a fast, small, and feature-rich JavaScript library."

1.Google CDN

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script></head>

2.jQuery Syntax

$(document).ready(function(){    $("p").click(function(){        $(this).hide();    });});

3. jQuery selector

3.1 Element selector

$("p")$("button")

3.2 ID selector

$("#id")

3.3 class selector

$(".class")

4. DOM Events

Mouse EventsKeyboard EventsForm EventsDocument/Window Eventsclickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload

5. on() Method

The on() method attaches one or more event handlers for the selected elements.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function(){    $("p").on({        mouseenter: function(){            $(this).css("background-color", "lightgray");        },          mouseleave: function(){            $(this).css("background-color", "lightblue");        },         click: function(){            $(this).css("background-color", "yellow");        }      });});</script>

6. jQuery Effect Methods

MethodDescriptionanimate()Runs a custom animation on the selected elementsclearQueue()Removes all remaining queued functions from the selected elementsdelay()Sets a delay for all queued functions on the selected elementsdequeue()Removes the next function from the queue, and then executes the functionfadeIn()Fades in the selected elementsfadeOut()Fades out the selected elementsfadeTo()Fades in/out the selected elements to a given opacityfadeToggle()Toggles between the fadeIn() and fadeOut() methodsfinish()Stops, removes and completes all queued animations for the selected elementshide()Hides the selected elementsqueue()Shows the queued functions on the selected elementsshow()Shows the selected elementsslideDown()Slides-down (shows) the selected elementsslideToggle()Toggles between the slideUp() and slideDown() methodsslideUp()Slides-up (hides) the selected elementsstop()Stops the currently running animation for the selected elementstoggle()Toggles between the hide() and show() methods

Reference: http://www.w3schools.com/jquery/jquery_events.asp

0 0