elements">
Download presentation
Presentation is loading. Please wait.
JQuery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation.
Similar presentations
Presentation on theme: "JQuery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation."— Presentation transcript:
1
jQuery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation
2
Element Selectors Use CSS selectors to select HTML elements
Identify them just as you would in style sheet Examples: $("li") selects all <li> elements $("li.myClass") selects all <li> elements w/ class myClass $(".myClass“) selects any element w/ class myClass $("p#myID") selects 1st <p> element w/ID myID $("#myID") selects 1st element w/ID myID $("li, p") selects any <li> and any <p> elements
3
Attribute Selectors Possible to select elements with particular attributes Examples: $("[href]") selects all elements with an href attribute $("[href='stuff'] ") selects all elements with href value equal to "stuff" $("[href!='stuff'] ") selects all elements with href value NOT equal to "stuff" $("[src$='.jpg'] ") selects all elements with src attribute that ends with ".jpg" jQuery Selectors Reference:
![Attribute Selectors Possible to select elements with particular attributes. Examples: $( [href] ) selects all elements with an href attribute.](http://slideplayer.com./slide/12052647/69/images/3/Attribute+Selectors+Possible+to+select+elements+with+particular+attributes.+Examples%3A+%24%28+%5Bhref%5D+%29+selects+all+elements+with+an+href+attribute..jpg "$( [href= stuff ] ) selects all elements with href value equal to stuff $( [href!= stuff ] ) selects all elements with href value NOT equal to stuff $( [src$= .jpg ] ) selects all elements with src attribute that ends with .jpg jQuery Selectors Reference:")
4
Event Functions Event handlers are functions that get called when “something happens” – triggered .click – which you have already used – is one of these Can be placed in the <head> section OR – can be placed in your own separate .js file (not the jQuery library file, but your own .js file)
5
Example Events $(document).ready(function) $(selector).click(function)
Fires when DOM has finished loading $(selector).click(function) Fires when selected elements are clicked $(selector).dblclick(function) Fires when selected elements are double-clicked $(selector).focus(function) Fires when selected elements get focus $(selector).mouseover(function) Fires when selected elements have mouseover More:
6
HTML Manipulation Functions to alter the HTML elements & attributes
Examples: $("p").html("Example"); Replaces current contents of all <p> elements with the text “Example” $("p").append("Example"); Appends (goes inside and adds to end) the text “Example” between all <p> elements $("p").prepend("Example"); Appends (goes inside and adds to beginning) the text “Example” between all <p> elements
7
HTML Manipulation Examples:
$("p").after("Example"); Adds the text “Example” directly after all <p> elements (outside of <p></p> $("p").before("Example"); Adds the text “Example” directly before all <p> elements (outside of <p></p>
8
HTML Manipulation $("p").addClass("intro"); Adds the class intro to all <p> elements $("p").removeClass("intro"); Removes the class intro from all <p> elements $("p").toggleClass("intro"); Toggles the class intro on or off for all <p> elements – if it has the class, it removes it; if it doesn’t have the class, it adds it Reference:
9
CSS Manipulation Return a CSS Property
Have the jQuery get a value for it, and then write it out to the page Will work for any CSS property Example: $(document).ready(function(){ $("div").click(function(){ $("p").html($(this).css("background-color")); });
10
CSS Manipulation Set a CSS Property & Value Example: $("p").css("background-color","yellow"); Sets the background color of all <p> elements to yellow Set Multiple Properties & Values $("p").css({"background-color":"yellow","font-size":"200%"}); Sets background color of all <p> elements to yellow and the font-size to 200%
11
CSS Manipulation Access Manipulate the size Examples:
$("p").html($("#div1").height()); Writes the current height of element with id div1 into all <p> elements $("#div1").height("200px"); Set the height of element with id div1 to 200 pixels $("p").html($("#div2").width()*2); Writes a value that is twice the current width of element with id div2 into all <p> elements $("#div2").width("300px"); Set the width of element with id div2 to 300 pixels
12
Accessing Values from Textboxes
Possible to extract text from input box and put it places (write to the page, use as a value for other functions, etc) This function writes whatever is in the textbox between any <p> elements when the box is changed $("input").change(function(){ $("p").html($("input").val()); });
13
Accessing Attributes It is possible to retrieve the values of various attributes of an element Example: When an image is clicked, its src attribute (file name) is written to the <p> element $("img").click(function(){ $("p").html("Filename: " + $(this).attr('src') ); });
Similar presentations