jquery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation

Size: px

Start display at page:

Download "jquery Element & Attribute Selectors, Events, HTML Manipulation, & CSS Manipulation"

Aubrie Cross
6 years ago
Views:

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 1 st <p> element w/id myid $("#myid") selects 1 st 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:

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) 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:

any CSS property Example: $(document).ready(function(){ $("div").

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("backgroundcolor")); }); });

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 Example: $("p").css({"background-color":"yellow","fontsize":"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') ); });

SEEM4570 System Design and Implementation Lecture 04 jquery

SEEM4570 System Design and Implementation Lecture 04 jquery jquery! jquery is a JavaScript Framework.! It is lightweight.! jquery takes a lot of common tasks that requires many lines of JavaScript code