Scribd
Upload
134 views

JQuery Set Content and Attributes

The document discusses using jQuery methods to set content and attributes in HTML elements. It covers using text(), html(), and val() to set text, HTML markup, and form field values. It also covers using attr() to set attributes and shows examples of setting single and multiple attributes at once.

Uploaded by

Godwin Larry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
134 views

JQuery Set Content and Attributes

The document discusses using jQuery methods to set content and attributes in HTML elements. It covers using text(), html(), and val() to set text, HTML markup, and form field values. It also covers using attr() to set attributes and shows examples of setting single and multiple attributes at once.

Uploaded by

Godwin Larry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

8/30/2015

jQuerySetContentandAttributes

jQueryTutorial
jQueryHOME(default.asp)
jQueryIntro(jquery_intro.asp)
jQueryGetStarted(jquery_get_started.asp)
jQuerySyntax(jquery_syntax.asp)
jQuerySelectors(jquery_selectors.asp)
jQueryEvents(jquery_events.asp)
HTML(/html/default.asp)
CSS(/css/default.asp)
(/default.asp)
JAVASCRIPT(/js/default.asp)
SQL(/sql/default.asp)
jQueryEffects
jQueryHide/Show(jquery_hide_show.asp)
PHP(/php/default.asp)
jQUERY(/jquery/default.asp)
jQueryFade(jquery_fade.asp)
BOOTSTRAP(/bootstrap/default.asp)
ANGULAR(/angular/default.asp)
jQuerySlide(jquery_slide.asp)
jQueryAnimate(jquery_animate.asp)
XML(/xml/default.asp)
TUTORIALS

REFERENCES

jQuerystop()(jquery_stop.asp)
EXAMPLES
FORUM(/forum/default.asp)
jQueryCallback(jquery_callback.asp)
jQueryChaining(jquery_chaining.asp)

jQueryHTML
jQueryGet(jquery_dom_get.asp)
jQuerySet(jquery_dom_set.asp)
jQueryAdd(jquery_dom_add.asp)
jQueryRemove(jquery_dom_remove.asp)
jQueryCSSClasses(jquery_css_classes.asp)
jQuerycss()(jquery_css.asp)
jQueryDimensions(jquery_dimensions.asp)

jQueryTraversing
jQueryTraversing(jquery_traversing.asp)
http://www.w3schools.com/jquery/jquery_dom_set.asp

1/8

8/30/2015

jQuerySetContentandAttributes

jQueryAncestors(jquery_traversing_ancestors.asp)
jQueryDescendants(jquery_traversing_descendants.asp)
jQuerySiblings(jquery_traversing_siblings.asp)
jQueryFiltering(jquery_traversing_filtering.asp)

jQueryAJAX
jQueryAJAXIntro(jquery_ajax_intro.asp)
jQueryLoad(jquery_ajax_load.asp)
jQueryGet/Post(jquery_ajax_get_post.asp)

jQueryMisc
jQuerynoConflict()(jquery_noconflict.asp)

jQueryExamples
jQueryExamples(jquery_examples.asp)
jQueryQuiz(jquery_quiz.asp)
jQueryCertificate(jquery_exam.asp)

jQueryReferences
jQuerySelectors(jquery_ref_selectors.asp)
jQueryEvents(jquery_ref_events.asp)
jQueryEffects(jquery_ref_effects.asp)
jQueryHTML/CSS(jquery_ref_html.asp)
jQueryTraversing(jquery_ref_traversing.asp)
jQueryAJAX(jquery_ref_ajax.asp)
jQueryMisc(jquery_ref_misc.asp)
jQueryProperties(jquery_ref_prop.asp)

http://www.w3schools.com/jquery/jquery_dom_set.asp

2/8

8/30/2015

jQuerySetContentandAttributes

jQuerySetContentandAttributes

Previous(jquery_dom_get.asp)NextChapter(jquery_dom_add.asp

SetContenttext(),html(),andval()
Wewillusethesamethreemethodsfromthepreviouspagetosetcontent:
text()Setsorreturnsthetextcontentofselectedelements
html()Setsorreturnsthecontentofselectedelements(includingHTML
markup)
val()Setsorreturnsthevalueofformfields
ThefollowingexampledemonstrateshowtosetcontentwiththejQuerytext(),html(),
andval()methods:

Example
$("#btn1").click(function(){
$("#test1").text("Helloworld!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Helloworld!</b>");
});
$("#btn3").click(function(){
$("#test3").val("DollyDuck");
});
Tryityourself(tryit.asp?filename=tryjquery_dom_html_set)

ACallbackFunctionfortext(),html(),andval()
AllofthethreejQuerymethodsabove:text(),html(),andval(),alsocomewitha
callbackfunction.Thecallbackfunctionhastwoparameters:theindexofthecurrent
elementinthelistofelementsselectedandtheoriginal(old)value.Youthenreturn
thestringyouwishtouseasthenewvaluefromthefunction.
Thefollowingexampledemonstratestext()andhtml()withacallbackfunction:

Example
$("#btn1").click(function(){
http://www.w3schools.com/jquery/jquery_dom_set.asp

3/8

8/30/2015

jQuerySetContentandAttributes

$("#test1").text(function(i,origText){
return"Oldtext:"+origText+"Newtext:Helloworld!
(index:"+i+")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return"Oldhtml:"+origText+"Newhtml:Hello<b>world!</b>
(index:"+i+")";
});
});
Tryityourself(tryit.asp?filename=tryjquery_dom_html_callback)

SetAttributesattr()
ThejQueryattr()methodisalsousedtoset/changeattributevalues.
Thefollowingexampledemonstrateshowtochange(set)thevalueofthehrefattribute
inalink:

Example
$("button").click(function(){
$("#w3s").attr("href","http://www.w3schools.com/jquery");
});
Tryityourself(tryit.asp?filename=tryjquery_dom_attr_set)

Theattr()methodalsoallowsyoutosetmultipleattributesatthesametime.
Thefollowingexampledemonstrateshowtosetboththehrefandtitleattributesatthe
sametime:

Example
$("button").click(function(){
$("#w3s").attr({
"href":"http://www.w3schools.com/jquery",
"title":"W3SchoolsjQueryTutorial"
});
});

http://www.w3schools.com/jquery/jquery_dom_set.asp

4/8

8/30/2015

jQuerySetContentandAttributes

Tryityourself(tryit.asp?filename=tryjquery_dom_attr_set2)

ACallbackFunctionforattr()
ThejQuerymethodattr(),alsocomewithacallbackfunction.Thecallbackfunctionhas
twoparameters:theindexofthecurrentelementinthelistofelementsselectedand
theoriginal(old)attributevalue.Youthenreturnthestringyouwishtouseasthenew
attributevaluefromthefunction.
Thefollowingexampledemonstratesattr()withacallbackfunction:

Example
$("button").click(function(){
$("#w3s").attr("href",function(i,origValue){
returnorigValue+"/jquery";
});
});
Tryityourself(tryit.asp?filename=tryjquery_dom_attr_callback)

TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_set1)

Exercise2(exercise.asp?filename=exercise_set2)

Exercise3(exercise.asp?filename=exercise_set3)

Exercise4(exercise.asp?filename=exercise_set4)

Exercise5(exercise.asp?filename=exercise_set5)

jQueryHTMLReference
ForacompleteoverviewofalljQueryHTMLmethods,pleasegotoourjQuery
HTML/CSSReference(jquery_ref_html.asp).

http://www.w3schools.com/jquery/jquery_dom_set.asp

5/8

8/30/2015

jQuerySetContentandAttributes

Previous(jquery_dom_get.asp)NextChapter(jquery_dom_add.asp

W3SCHOOLSEXAMS
HTML,CSS,JavaScript,PHP,jQuery,andXMLCertifications(http://www.w3schools.com/cert/default.asp)

COLORPICKER
(/tags/ref_colorpicker.asp)

http://www.w3schools.com/jquery/jquery_dom_set.asp

6/8

8/30/2015

jQuerySetContentandAttributes

SHARETHISPAGE

(http://www.facebook.com/sharer.php?u=http://www.w3schools.com/jquery/jquery_dom_set.asp)
(http://twitter.com/home?status=Currentlyreading
http://www.w3schools.com/jquery/jquery_dom_set.asp)

(https://plus.google.com/share?url=http://www.w3schools.com/jquery/jquery_dom_set.asp)

REPORTERROR()
PRINTPAGE()
FORUM(/forum/default.asp)
ABOUT(/about/default.asp)

Top10Tutorials
HTMLTutorial(/html/default.asp)
CSSTutorial(/css/default.asp)
JavaScriptTutorial(/js/default.asp)
SQLTutorial(/sql/default.asp)
PHPTutorial(/php/default.asp)
jQueryTutorial(/jquery/default.asp)
BootstrapTutorial(/bootstrap/default.asp)
AngularTutorial(/angular/default.asp)
ASP.NETTutorial(/aspnet/default.asp)
XMLTutorial(/xml/default.asp)

Top10References
HTMLReference(/tags/default.asp)
CSSReference(/cssref/default.asp)
JavaScriptReference(/jsref/default.asp)
http://www.w3schools.com/jquery/jquery_dom_set.asp

7/8

8/30/2015

jQuerySetContentandAttributes

BrowserStatistics(/browsers/default.asp)
HTMLDOM(/jsref/dom_obj_document.asp)
PHPReference(/php/php_ref_array.asp)
jQueryReference(/jquery/jquery_ref_selectors.asp)
HTMLColors(/tags/ref_colornames.asp)
HTMLCharacterSets(/charsets/default.asp)
XMLDOM(/dom/dom_nodetype.asp)

Top10Examples
HTMLExamples(/html/html_examples.asp)
CSSExamples(/css/css_examples.asp)
JavaScriptExamples(/js/js_examples.asp)
HTMLDOMExamples(/js/js_dom_examples.asp)
PHPExamples(/php/php_examples.asp)
jQueryExamples(/jquery/jquery_examples.asp)
XMLExamples(/xml/xml_examples.asp)
XMLDOMExamples(/dom/dom_examples.asp)
ASPExamples(/asp/asp_examples.asp)
SVGExamples(/svg/svg_examples.asp)

WebCertificates
HTMLCertificate(/cert/default.asp)
HTML5Certificate(/cert/default.asp)
CSSCertificate(/cert/default.asp)
JavaScriptCertificate(/cert/default.asp)
jQueryCertificate(/cert/default.asp)
PHPCertificate(/cert/default.asp)
BootstrapCertificate(/cert/default.asp)
XMLCertificate(/cert/default.asp)

W3Schoolsisoptimizedforlearning,testing,andtraining.Examplesmightbesimplifiedtoimprovereadingand
basicunderstanding.Tutorials,references,andexamplesareconstantlyreviewedtoavoiderrors,butwecannot
warrantfullcorrectnessofallcontent.Whileusingthissite,youagreetohavereadandacceptedourtermsof
use(/about/about_copyright.asp),cookieandprivacypolicy(/about/about_privacy.asp).Copyright19992015
(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
(http://www.w3schools.com)

http://www.w3schools.com/jquery/jquery_dom_set.asp

8/8

You might also like