1 / 13

jQuery Part 2

jQuery Part 2. Creating HTML Elements. Create element with HTML var txt1=“<p>Text.</p>”; Create element with jQuery var txt2=$(“<p></p>”).text(“Text.”); Create element with DOM var txt3= document.createElement (“p”); txt3.innerHTML(“Text.”);. DOM Manipulation.

ward
Download Presentation

jQuery Part 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery Part 2

  2. Creating HTML Elements • Create element with HTML • var txt1=“<p>Text.</p>”; • Create element with jQuery • var txt2=$(“<p></p>”).text(“Text.”); • Create element with DOM • var txt3=document.createElement(“p”);txt3.innerHTML(“Text.”);

  3. DOM Manipulation • Getting the content of an element • text() – Returns the text content of selected elements • $(“div”).text() • html() – Returns the content of selected elements • $(“div”).html() • val() – Returns or sets the value from form fields • $(“#fname”).val() • attr() – Returns or sets the attribute value • $(“#foo”).attr(“href”)

  4. DOM Manipulation • Setting the content of an element • text(“value”) – Sets the text content of selected elements • $(“#foo”).text(“bar”) • text(function(i,origText){…}) • html(“value”) – Sets the content of selected elements • $(“#foo).html(“<b>bar</b>”) • html(function(i,origHtml){…}) • val(“value”) – Sets the value from form fields • $(“#fname”).val(“Cam”) • val(function(i,origVal){…}) • attr(“attr”,“value”) – Sets the attribute value • $(“#foo”).attr(“href”, “http://example.com”) • attr(“attr”,function(i,origVal){…})

  5. Adding Elements • append() – inserts content at the end of selected elements • prepend() – inserts content at the beginning of selected elements • after() – inserts content after the selected elements • before() – inserts content before the selected elements • All four methods support multiple elements • $(“img”).after(txt1,txt2,txt3);

  6. Removing Elements • remove() – removes the selected elements and their children • $(“#foo”).remove(); • remove() supports filters. Filters are selectors • $(“#foo”).remove(“.italic”) • empty() – removes the child elements of the selected elements • $(“#foo”).empty();

  7. Manipulating the CSS • addClass() – Adds one or more classes to the selected elements • $(“#foo”).addClass(“important blue”); • removeClass() – Removes one or more classes from the selected elements • $(“#foo”).removeClass(“blue important”); • toggleClass() – Toggles one or more classes from the selected elements • $(“#foo”).toggleClass(“blue”); • css() – Returns or sets the style attribute • $(“#foo”).css(“property-name”) • $(“#foo”).css(“property-name”,”value”)

  8. jQuery Dimensions Margin Border Padding Element height() innerHeight() outerHeight() outerHeight(true) width() innerWidth() outerWidth() outerWidth(true)

  9. Dimensions • width() – Returns or sets the width of selected element • height() – Returns or sets the height of selected element • innerWidth() – Returns the width with padding of selected element • innerHeight() – Returns the height with padding of selected element • outerWidth() – Returns the width with padding and border • outerHeight() – Returns the height with padding and border • outerWidth(true) – Returns the width with padding, border and margin • outerHeight(true) – Returns the height with padding, border and margin • $(document).height() • $(window).width()

  10. Traversing up the DOM • parent() – Returns the direct parent of the selected element • parents() – Returns all ancestor elements all the way to <html> • parentsUntil(selector) – Returns all ancestor elements between selected element and selector

  11. Traversing down the DOM • children() – Returns all the direct children of the selected element • find(selector) – Returns descendant elements matching selector of the selected element

  12. Traversing Sideways • siblings() – Returns all sibling elements • Takes optional filter • next() – Returns the next sibling element • nextAll() – Returns all the next siblings • nextUntil(selector) – Returns next siblings between selected and selector • prev(), prevAll(), prevUntil() – are similar, but return previous siblings

  13. Filtering Selections • first() – Returns the first element in the selection • $(“div p”).first(); • last() – Returns the last element in the selection • $(“div p”).last(); • eq(num) – Returns the element at the given index. • $(“div p”).eq(1); • filter() – Removes the elements that do not match the selection criteria from the list • $(“div p”).filter(“.intro”); • not() – Returns all elements that do not match the selection criteria • $(“div p”).not(“.intro”)

More Related