jQuery HTML Methods Dimensions DOCTYPE html html head script

Jquery html methods dimensions doctype html html head

This preview shows page 56 - 63 out of 84 pages.

jQuery: HTML Methods – Dimensions <!DOCTYPE html> <html> <head> <script src=""> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); }); }); </script> </head> <body> <button>Display dimensions of document and window</button> </body> </html> 2014 Mithun Balakrishna, Human Language Technology Research Institute, The University of Texas at Dallas
Image of page 56
jQuery: HTML Methods – Dimensions <!DOCTYPE html> <html> <head> <script src=""> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").width(500).height(500); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>Resize div</button> </body> </html> 2014 Mithun Balakrishna, Human Language Technology Research Institute, The University of Texas at Dallas
Image of page 57
jQuery: DOM Traversing ° jQuery has methods to traverse through the DOM element hierarchy and find/select HTML elements ° jQuery traversing methods can easily move up (to ancestors), down (to descendants) and sideways (to siblings) in the DOM tree 2014 Mithun Balakrishna, Human Language Technology Research Institute, The University of Texas at Dallas
Image of page 58
jQuery: DOM Traversing - Ancestors ° The following jQuery methods can be used to traverse up the DOM tree: - parent() ° returns the direct parent element of the selected element - parents() ° returns all ancestor elements of the selected element all the way up to the document's root element (<html>) ° an optional parameter to filter the search for ancestors - parentsUntil() ° returns all ancestor elements between the two given arguments 2014 Mithun Balakrishna, Human Language Technology Research Institute, The University of Texas at Dallas
Image of page 59
jQuery: DOM Traversing - Ancestors <!DOCTYPE html> <html> <head> <style> .ancestors * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px; } </style> <script src=""> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (great-great-grandparent) <div style="width:500px;">div (great-grandparent) <ul>ul (grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </div> </body> </html> 2014 Mithun Balakrishna, Human Language Technology Research Institute, The University of Texas at Dallas
Image of page 60
jQuery: DOM Traversing - Descendants ° The following jQuery methods can be used to traverse down the DOM tree: - children() ° returns all direct children of the selected element ° an optional parameter to filter the search for children - find() ° returns descendant elements of the selected element, all the way down to the last descendant 2014 Mithun Balakrishna, Human Language Technology Research Institute, The University of Texas at Dallas
Image of page 61
jQuery: DOM Traversing - Descendants <!DOCTYPE html> <html> <head> <style> .descendants * {
Image of page 62
Image of page 63

You've reached the end of your free preview.

Want to read all 84 pages?

  • Winter '14
  • Document Object Model, Technology Research Institute, Dr. Mithun Balakrishna, Language Technology Research, Human Language Technology

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture