jQuery - සිංහලෙන් - basics - 3 - jQuery HTML

jQuery - Get Content and Attributes

jQuery DOM Manipulation:

DOM = Document Object Model

The DOM defines a standard for accessing HTML and XML documents.

මෙමගින් text field, link එකක attributes, වගේ දේවල් button එකක් click කරාම page එක refresh නොවී display කරන්න හරි, වෙන div එකකට pass කරන්න වගේ දෙයක් කරන්න පුළුවන් ලේසියෙන්ම.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_val_get

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_get

 

jQuery - Set Content and Attributes

මෙමගින් paragraph, text field වලට අලුත් text, links වල attributes සෙට් කරන්න පුළුවන් button එකක් ක්ලික් කරාම page එක refresh වෙන් නැතිව. 

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_callback

 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_set

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_callback 

 

jQuery - Add Elements

තියෙන elements වලට තව අලුතින් එකතු කිරීම මෙමගින් සිදුකරයි. තියෙන element එකට කලින්, පසුව සහ selected element එකකට පෙර සහ පසුව මෙය සිදුකල හැක.

• 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

append() Method:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append

prepend() Method:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append2

after() and before() Methods:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_after

 

jQuery - Remove Elements

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

remove() Method:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove

empty() Method: 
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_empty

Filter the Elements to be Removed:
Remove class elements which are belongs to class test,
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove2

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove3

jQuery - Get and Set CSS Classes

jQuery has several methods for CSS manipulation.

• 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

addClass() Method:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass2

removeClass() Method: 
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_removeclass

toggleClass() Method:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_toggleclass

css() Method:
return current background css colour
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_getcolor

set new background colour and other attributes
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_setcolor

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_set_multiple

jQuery Dimension Methods

jQuery has several important methods for working with dimensions:

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

for more info: http://www.w3schools.com/jquery/jquery_dimensions.asp

 

 

 

 

jQuery - සිංහලෙන් - basics - 3 - jQuery HTML