jQuery Rescue Adventure · 32 | SharePoint Saturday Columbus 2011 jQuery ScottGu: jQuery and...

Post on 06-Oct-2020

2 views 0 download

Transcript of jQuery Rescue Adventure · 32 | SharePoint Saturday Columbus 2011 jQuery ScottGu: jQuery and...

jQuery Rescue Adventure

2 | SharePoint Saturday Columbus 2011

Name

Location

Work

Blog

Twitter

3 | SharePoint Saturday Columbus 2011

4 | SharePoint Saturday Columbus 2011

jQuery is a new kind of JavaScript Library.

5 | SharePoint Saturday Columbus 2011

6 | SharePoint Saturday Columbus 2011

7 | SharePoint Saturday Columbus 2011

8 | SharePoint Saturday Columbus 2011

9 | SharePoint Saturday Columbus 2011

▪ http://jquery.com/

10 | SharePoint Saturday Columbus 2011

11 | SharePoint Saturday Columbus 2011

12 | SharePoint Saturday Columbus 2011

13 | SharePoint Saturday Columbus 2011

14 | SharePoint Saturday Columbus 2011

15 | SharePoint Saturday Columbus 2011

16 | SharePoint Saturday Columbus 2011

http://api.jquery.com/browser/

17 | SharePoint Saturday Columbus 2011

18 | SharePoint Saturday Columbus 2011

Description Selector

Equals Or Starts With Followed by Hyphen [name|=“value”]

Contains Text [name*=“value”]

Contains Word Delimited by Spaces [name~=“value”]

Ends With [name$=“value”]

Starts With [name^=“value”]

Equals [name=“value”]

Not Equals [name!=“value”]

Has Attribute [name]

Multiple Attributes [name=“value”][name2=“value2”]

19 | SharePoint Saturday Columbus 2011

Description Selector

Currently Animating :animated

Element at Given Index :eq()

Even or Odd Elements in Results :even, :odd

First or Last Element in Result :first, :last

Currently Focused :focus

Greater Or Less than Given Index :gt(), :lt()

Header Elements :header

Elements That Do Not Match :not()

First or Last Child :first-child, :last-child

Child at Given Index :nth-child()

Only Children :only-child

20 | SharePoint Saturday Columbus 2011

Description Selector

Contains Content (case-sensitive) :contains()

Empty Element :empty

Has An Element :has()

Parent Elements :parent

21 | SharePoint Saturday Columbus 2011

22 | SharePoint Saturday Columbus 2011

Description Method

Adding, Removing, Toggling CSS Classes addClass(), removeClass(), toggleClass()

Adding Content .after(), .insertAfter(), .before(), .insertBefore(), .append(), .appendTo(), .prepend(), .prependTo()

Reading and Setting Attributes .attr(“name”), .attr(“name”, “value”),.attr({“name1”: “value1”, “name2”: “value2”})

Reading and Setting CSS Styles .css(“name”), .css(“name”, “value”), .css({“name1”: “value1”, “name2”: “value2”})

Reading and Setting Form Values .val(), .val(“newvalue”)

Reading and Setting Text .text(), .text(“newvalue”)

Reading and Setting HTML .html(), .html(“<strong>newvalue</strong>”)

Wrapping Elements .wrap(), .wrapAll(), .wrapInner()

Removing Elements .remove(), .empty(), .detach(), .unwrap()

23 | SharePoint Saturday Columbus 2011

24 | SharePoint Saturday Columbus 2011

Description Method

Loop through all items .each()

Add Elements to Current Results .add()

Filter Results .filter()

Filter Descendants .find()

Map to a New Result .map()

Children Selector .children()

Parent Selectors .parent(), .offsetParent(), .parentsUntil()

Sibling Selectors .siblings(), .next(), .prev(), .nextUntil(), .prevUntil()

25 | SharePoint Saturday Columbus 2011

26 | SharePoint Saturday Columbus 2011

Description Method

Generic Bind .bind(“method”, function() { })

Bind Event Once .one(“method”, function() { })

Bind Shortcuts .click(), .change(), .select(), .mouseover(), .mouseout(), .blur()

Hover (Mouseover and Mouseout) .hover(function() { }, function() { })

Trigger Event .trigger(“method”)

27 | SharePoint Saturday Columbus 2011

28 | SharePoint Saturday Columbus 2011

Browser Description

Firefox FirebugConsole WindowHTML, CSS, JavaScript

Internet Explorer Developer ToolbarConsole WindowHTML, CSS, JavaScript

29 | SharePoint Saturday Columbus 2011

30 | SharePoint Saturday Columbus 2011

31 | SharePoint Saturday Columbus 2011

33 | SharePoint Saturday Columbus 2011

Thanks to Our Sponsors!