Jquery 1.4: Working With Properties, Attributes, And Styles

Front 1

explain how to fetch the src attribute from an image tag with id 'myImage'

Back 1

$('img#myImage').attr('src')

Front 2

explain the purpose of the attr() method

Back 2

retrieves attributes from DOM elements or sets them if two parms are provided

Front 3

explain the primary difference between attr() and the getAttribute()/setAttribute() methods

Back 3

attr() provides access to some special normalized properties that help deal with browser specifics, like cellspacing, class, colspan, etc

Front 4

what DOM attribute corresponds to the normalized attr() key 'cellspacing'?

Back 4

cellSpacing

Front 5

what DOM attribute corresponds to the normalized attr() key 'class'

Back 5

class (IE) or className

Front 6

what DOM attribute corresponds to the normalized attr() key 'colspan'?

Back 6

colSpan

Front 7

what DOM attribute corresponds to the normalized attr() key 'cssFloat'?

Back 7

styleFloat (IE) or cssFloat

Front 8

what DOM attribute corresponds to the normalized attr() key 'float'

Back 8

(same as cssFloat) styleFloat (IE) or cssFloat

Front 9

what DOM attribute corresponds to the normalized attr() key 'for'

Back 9

htmlFor

Front 10

what DOM attribute corresponds to the normalized attr() key 'frameborder'

Back 10

frameBorder

Front 11

what DOM attribute corresponds to the normalized attr() key 'maxlength'

Back 11

maxLength

Front 12

what DOM attribute corresponds to the normalized attr() key 'readonly'

Back 12

readOnly

Front 13

what DOM attribute corresponds to the normalized attr() key 'rowspan'

Back 13

rowSpan

Front 14

what DOM attribute corresponds to the normalized attr() key 'styleFloat'

Back 14

(same as float) styleFloat (IE) or cssFloat

Front 15

what DOM attribute corresponds to the normalized attr() key 'tabindex'

Back 15

tabIndex

Front 16

what DOM attribute corresponds to the normalized attr() key 'usemap'

Back 16

useMap

Front 17

explain how to set an attribute value on a dom element

Back 17

attr(name, value)

Front 18

explain what attr(Object) does

Back 18

sets several parms at once on all dom elements in the wrapped set, where Object contains the name/value pairs to be set

Front 19

what restrictions does IE place on setting dom attributes?

Back 19

The name and type of input elements cannot be changed, the value of file and password fields cannot be changed

Front 20

How can the name or type of an input field be changed in IE?

Back 20

replace the dom element with a new one containing the corrected name or type

Front 21

explain removeAttr(name)

Back 21

removes attribute name from the dom element, some properties like "readOnly" are only set to false when the corresponding attribute is removed

Front 22

how can the "disabled" attribute be set on a dom element to cause the element to become enabled?

Back 22

set it to false or remove the attribute using removeAttr()

Front 23

what does the following call do?

$(...).attr("disabled", "false");

Back 23

this would actually disable the element, setting the disabled property to any string will disable it, even the string "enabled" - use boolean false or removeAttr() instead

Front 24

what method allows custom data to be stored directly on DOM elements, instead of relying on global variables?

Back 24

data(name,value)

Front 25

explain the arguments for data(name,value)

Back 25

name - (String) name of value to be stored

value - (Object|Function) if a function, it is invoked and the return value is stored

Front 26

explain the result of data(name)

Back 26

returns the custom value stored with name on the first element of the wrapped set provided

Front 27

what method removes custom data stored directly on dom elements, in lieu of global variables?

Back 27

removeData(name)

Front 28

what must be done to remove custom data from elements that are removed from the dom?

Back 28

nothing, jQuery does this automagically

Front 29

what method adds a css class to all elements in a wrapped set?

Back 29

addClass(names)

Front 30

explain the possible values for names in addClass(names)

Back 30

a space-delimited string or a function that returns a space-delimited string

Front 31

explain how to remove a css class from a list of wrapped elements

Back 31

removeClass(String|Function)

if a function is provided, it must return a space-delimited string

Front 32

Explain how to easily add or remove a css class, based on whether it already exists on the element

Back 32

toggleClass(String|Function)

Front 33

explain the purpose of toggleClass(name, boolean)

Back 33

if boolean is true, class is added, otherwise it is removed

Front 34

what is returned by hasClass(String)

Back 34

returns true if ANY element in the wrapped set contains the class name provided

Front 35

which is more efficient internally:

a) $('tag:first').is(".className")
b) $('tag:first').hasClass('className')

Back 35

b - hasClass is more efficient than is() because it only checks CSS and does not need to parse a selector

Front 36

explain css(name,value)

Back 36

sets the value of a CSS property 'name' to value on each element of wrapped set

Front 37

explain the possible types of value in css(name,value)

Back 37

can be a string, number, or function, if a function it is invoked for each element and the return value used

Front 38

explain the use of css(Object)

Back 38

Object is a list of keys/values and each is assigned as a CSSproperty to the elements of the wrapped set

Front 39

explain the return value for $(...).css('color')

Back 39

returns the CSS color property for the first element in the wrapped set

Front 40

explain jQuery shortcut methods for setting CSS width and height

Back 40

width(value) or height(value) where value is a number in pixels or a string specifying p, em, or %

A function can be used and the return value is set to width/height

Front 41

when dealing with window and document elements, should width/height, innerHeight/innerWidth, or outerHeight/outerWidth be used?

Back 41

width/height should be preferred

Front 42

explain the return value of innerHeight() and innerWidth()

Back 42

returns the value for the first matched element, which excludes the border but includes padding

Front 43

explain the return value of outerWidth()/outerHeight()

Back 43

returns the value for the first matched element, which includes border and padding, and by default it includes the margin

the margin can be excluded with optional parameter set to false

Front 44

explain the return value of the offset() method

Back 44

returns values for first matched element

an object containing left and top properties as floats

represents element's position relative to document origin

Front 45

explain the return value of the position() method

Back 45

returns values for first matched element

an object containing left and top properties as floats

represents element's position relative to the closest offset parent

Front 46

explain how to fetch the horizontal and vertical scroll offset of an element

Back 46

scrollLeft() and scrollTop()

Front 47

explain how to set the horizontal and vertical scroll offset of a wrapped set

Back 47

scrollLeft(value) and scrollTop(value)

Front 48

explain the return value of html()

Back 48

returns the html content as a string from the first matched element - identical to accessing innerHTML

Front 49

explain the purpose and arguments for html(content)

Back 49

sets content as innerHTML of the wrapped set

content - (String|Function)

returns the wrapped set

Front 50

explain the return value of text()

Back 50

collects all text from all elements of the wrapped set and concatenates them

Front 51

explain the text(String|Function) method

Back 51

sets the text content of all elements in the wrapped set, any <, >, or & symbols are escaped

Front 52

explain the purpose of and possible data types that can be passed to append(content)

Back 52

appends html to the end of all matched elements

content - (String|Element|Function|jQuery)

returns the wrapped set

Front 53

explain how to add html to the beginning of an element's content

Back 53

prepend(content)

Front 54

explain the purpose of before(content)

Back 54

inserts content before (as a prior sibling to) each wrapped element in the set

the elements in wrapped set MUST exist in the DOM

Front 55

explain the purpose of after(content)

Back 55

inserts content after (as the next sibling to) each wrapped element in the set

the elements in wrapped set MUST exist in the DOM

Front 56

explain appendTo(String|Element)

Back 56

adds all elements in the wrapped set to the end of the content of the target.

String - a selector
Element - the element wrapped set is appended onto

Front 57

explain prependTo(String|Element)

Back 57

adds elements in wrapped set to beginning of content

String - a selector
Element - the element wrapped set is prepended onto

Front 58

explain insertBefore(String|Element)

Back 58

Inserts all elements in wrapped set before (as prior siblings to) the target provided

String - a selector
Element - the element wrapped set is appended onto

Front 59

explain insertAfter(String|Element)

Back 59

Inserts all elements in wrapped set as siblings (after) the target provided

String - a selector
Element - the element wrapped set is appended onto

Front 60

explain wrap(String|Element)

Back 60

individually wraps each element in matched set with the passed html tags or a clone of the passed element

String - html fragment
Element - the element to clone

Front 61

explain wrapAll(String|Element)

Back 61

wraps all elements in the wrapped set with the passed (String)html or a clone of the Element

Front 62

explain wrapInner(String|Element)

Back 62

wraps the CONTENTS of all elements in the wrapped set with the html fragment(String) or clone of the Element provided

Front 63

explain unwrap()

Back 63

removes the parent element of the wrapped elements, the child element along with any siblings replaces the parent in the DOM

Front 64

explain remove(selector)

Back 64

removes all elements in the wrapped set from the DOM

selector is optional and can further restrict which ones are removed

the elements removed remain in the wrapped set

Front 65

what happens to bound events when remove() is called on a wrapped set?

Back 65

the events are removed

Front 66

what happens to bound events when detach() is called on a wrapped set?

Back 66

the events are preserved

Front 67

explain detach(selector)

Back 67

removes elements from the DOM but retains the bound events attached to them

selector is optional and can further restrict which ones are removed

the elements removed remain in the wrapped set

Front 68

explain empty()

Back 68

removes contents (innerHTML) of all DOM elements in the matched set

Front 69

explain clone(boolean)

Back 69

Creates copies of the elements in the wrapped set.

If boolean is true, event handlers are copied-defaults to false

Front 70

explain replaceWith(content)

Back 70

removes the DOM element and inserts content (String|Element|Function) in its place

Front 71

explain replaceAll(selector)

Back 71

replaces all elements matched by the passed selector with the elements in the wrapped set

Front 72

explain the return value of the val() method

Back 72

returns the value attribute of the first element in the wrapped set, if a multi-select, an array of selections is returned

Front 73

explain the purpose of val(value)

Back 73

sets the value(String|Function) attribute of all elements in the wrapped set