Web Development

Card Set Information

Web Development
2013-05-01 21:44:27

Web Development
Show Answers:

  1. 001 What is web page layer separation?
    HTML, CSS, JavaScript
  2. 002 CSS rule syntax
    selector {property: value; …}
  3. 003 CSS Inheritance
    Property value is inheritance in DOM hierarchy
  4. 004 CSS Style Sheet Types Cascading
    Closed rule wins - Inline, Embedded, Linked, User, Browser
  5. 005 CSS rule specific
    • Specific rule wins
    • 1. Write a table with the following columns:[Inline, ID, Class, Element]

    2. For each conflict rule, check if it is inline, number of ID#, number of class, and number of element
  6. 006 CSS Selectors
    • Element, Class, ID, Pseudo class, Descendent, Child, Adjacent sibling, Attribute, Pseudo
    • element.

    • Element - p {...}
    • Class - .myClass {...}
    • ID - #myId {...}
    • Pseudo Class - a:hover
    • Child - E>F
    • Descendent - E F
    • Adjacent Sibling - E+F
    • Attribute - a[attribute-name]
    • Pseudo Element - E:first-line
  7. 007 Box modal
    Every element creates a box: Content, Border, Padding, Margin
  8. 008 Normal Flow
    A default flow for content flowing down/up and left/right.
  9. 009 CSS Float
    1.  {float: left} or {float: right}

    • 2. Floats are not in the normal flow so that
    • other text and elements will continue to flow around the floated elements

    • 3. Get floats stack up by floating them in one
    • direction

    4. Clearing float {clear: both}
  10. 010 CSS Position
    • 1. Relative (Offset) Position – Related to its position in the normal flow. Remain in the normal flow Create a new instance of normal
    • flow within it

    • 2. Absolute Position – Removed from normal flow. Related to its parent element. Subsequent content flows into the
    • available space in original normal flow.

    • 3. Fixed Position – A kind of Absolute position.
    • Fixed at the position.
  11. CSS Z-Index
    {z-index: number}, It can be used to achieve overlap.
  12. 012 CSS grouping?
    All elements in selectors separated by coma have the same CSS rules

    E, F, G {...}
  13. 013 What is jQuery
    Lightweight JavaScript library. It can be summarized as select a set of HTML elements and apply a set of functions. 

    • 1. HTML/DOM manipulation
    • 2. CSS manipulation
    • 3. HTML event methods
    • 4. Effects and animations
    • 5. AJAX 
    • 6. Utilities
  14. 014 jQuery Syntax
  15. 015 jQuery Document Ready Event
    • $(document).ready(function() {
    • …}) prevent any jQuery code from running before the document is finished loading (is ready).
  16. 016 jQuery Basic Selectors
    1. Element selector - $(“p”).hide() – hide all <p> elements

    2. .Class selector - $(“.test”).hide() – hide all elements with class=”test”

    3. #id selector - $(“#test”).hide() – hide the element with id=”test”

    • 4. Basic CSS selectors – Follow CSS3 syntax and semantics
    •   E F – Match F is descendant of E
    •   E>F – Match F is direct child of E
    •   E+F – Match F is E’s sibling and just before E is just before F
    •   E:has(F) – Match E with at least one descendant F
    •   E.c – Match E with class c
    •   E[a=v]– Match E has attribute a with value v.
  17. 017 jQuery Positional selectors
    Based upon positional relationships between elements. Filter the matches

    • B:first – First B
    • B:last
    • B:first-child
    • B:las-child
    • B:only-child
    • B:nth-child
    • B:nth-child(odd|even)
    • B:even – Even B
    • B:odd
    • B:eq(n) - nth element
    • B:gt(n) - all elements larger than n
    • B:lt(n) - all elements smaller than n
  18. 018 jQuery Customer Selectors
    Not CSS selector but provided by jQuery. Filter the matches. Like the Positional Selectors, these selectors filter a base matching set.

    • B:button – Button type element
    • B:header – Header type element
    • B:checkbox
    • B:enabled
    • B:file
    • B:hidden
    • B:image
    • B:input
    • B:not(f)
    • B:parent
    • B:password
    • B:radio
    • B:reset
    • B:selected
    • B:submit
    • B:text
    • B:visible
  19. 019 jQuery Wrapped Set
    The wrapped set from the result of applying selector can be treated as JavaScript array.

    var element = $(‘p’)[0]
  20. 020 jQuery Union selectors
    Using comma to separate selectors: $(‘p’, ‘div’). Same as CSS grouping
  21. 021 Include jQuery files
    <script src="my_jquery_functions.js"></script>
  22. 022 jQuery Matched Set Methods
    Methods operates on matched set

    add(selector | element | array) – Add elements to the original matched set. 

    $('div').add(p).css('color', 'red');

    not(selector | element | array) – Remove matched elements from the original matched set

    $(find(selector) – Find descendants of the original matched set

    filter(selector | function) - inverse of not(selector) by keeping those matched element.

    slice(being, end) – Slice a matched set upon the position

    map(callback) – Translate elements to other values. (Use .get() to convert result to array)

    end() – Back to last matched set

    andSelf() – Union two top matched set
  23. 023 jQuery empty() vs remove()
    empty() removes all the child element of the matched element where remove() removes set of matched elements from DOM.
  24. 024 jQuery document.ready() vs window.onload
    document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.
  25. 025 jQuery noConflict()
    Releases the hold on the $ shortcut identifier, so that other scripts can use it.
  26. 026 jQuery event handling
    $(selector).event(function() { … })

    where event can be click, dblclick, mouseenter, mouseleave, mousedown, mouseup, hover, focus, blur
  27. 027 jQuery Effect
    Hide and Show – hide(), show(), toggle()

    Fade – fadeIn(), fadeOut(), fadeToggle(), fadeTo()

    Slide – slideDown(), slideUp(), slideToggle()

    Animation - $(selector).animate({params}, speed, callback);  stop()

    • callback function - executed after the current
    • effect is finished.

    $(selector).hide(speed, callback)
  28. 028 Method Chaining
    Append an action to the previous action.
  29. 029 jQuery HTML Manipulation
    text() - Sets or returns the text content of selected elements

    html() - Sets or returns the content of selected elements (including HTML markup)

    val() - Sets or returns the value of form fields

    attr() – Sets or returns attribute value

    append() - Inserts content at the end of the selected elements

    • prepend() - Inserts content
    • at the beginning of the selected elements

    after() - Inserts content after the selected elements

    before() - Inserts content before the selected elements

    remove() - Removes the selected element (and its child elements)

    empty() - Removes the child elements from the selected element

    addClass() - Adds one or more classes to the selected elements

    removeClass() - Removes one or more classes from the selected elements

    toggleClass() - Toggles between adding/removing classes from the selected elements

    css() - Sets or returns the style attribute

    width() – sets or returns the width of an element (No padding, border, or margin)

    height() – sets or returns the height of element (No padding, boarder, or margin)

    innerWidth() – sets or returns the width of an element (include padding)

    innerHeight() – sets or returns the height of element (include padding)

    outerWidth() – sets or returns the width of an element (include padding and border)

    outerHeight() – sets or returns the height of element (include padding and boarder)
  30. 030 jQuery Ajax
    Exchanging data with a server, and updating parts of a web page - without reloading the whole page.


    $.get(URL ,callback);

    $.post(URL, data, callback);
  31. 031 jQuery - What is CDN and what are the advantage of loading jQuery framework from CDN?
    Always load your jQuery framework from Google, Microsoft or jQuery CDN(Content Delivery Network).

    1. You always use the latest jQuery framework.

    2. It reduces the load from your server.

    3. It saves bandwidth. jQuery framework will load faster from these CDN.

    4. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.