Shulou(Shulou.com)06/01 Report--

Editor to share with you how to set jQuery HTML element content and attributes, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

JQuery-set content and properties

Set content-three simple and practical jQuery methods: text (), html (), and val ()

Text ()-sets or returns the text content of the selected element

Html ()-sets or returns the contents of the selected element (including the HTML tag)

Val ()-sets or returns the value of the form field

The following example shows how to set content through the text (), html (), and val () methods:

$(document) .ready (function () {$("# btn1") .click (function () {$("# test1"). Text ("Hello world!");}); $("# btn2") .click (function () {$("# test2"). Html ("Hello world!");}); $("# btn3") .click (function () {$("# test3"). Val ("Dolly Duck") }); this is a paragraph.

This is another paragraph.

Input field:

Set text setting HTML setting value

Callback functions for text (), html (), and val ()

The jQuery methods: text (), html (), and val (), also have callback functions. The callback function takes two parameters:

The subscript of the current element in the selected element list, as well as the original value. Then return the string you want to use with the new value of the function.

The following example demonstrates text () and html () with callback functions:

$(document) .ready (function () {$("# btn1") .click (function () {$("# test1") .text (function) {return "Old text:" + origText + "New text: Hello world! (index: "+ I +");});}); $("# btn2") .click (function () {$("# test2") .html (function) {return "Old html:" + origText + "New html: Hello world! (index: "+ I +") ";}); this is bold text.

This is another bold text.

Show Old / New text Show Old / New HTML

Set property-attr ()

The jQuery attr () method is also used to set / change property values. The following example changes (sets) the value of the href property in the link:

$(document) .ready (function () {$("button") .click (function () {$("# w3s") .attr ("href", "http://www.yisu.com/jquery");});})

HuluMiao.cn

Change the href value

Please move the mouse pointer over the link, or click on the link to see the changed href value.

The attr () method also allows you to set multiple properties at the same time. The following example shows how to set both the href and title properties:

$("button") .click (function () {$("# w3s") .attr ({"href": "http://www.yisu.com/jquery"," title ":" HuluMiao jQuery Tutorial "});})

Callback function of attr ()

The jQuery method attr () also provides a callback function. The callback function takes two parameters:

The subscript of the current element in the selected element list, as well as the original value. Then return the string you want to use with the new value of the function.

The following example demonstrates the attr () method with a callback function:

$(document) .ready (function () {$("button") .click (function () {$("# w3s") .attr ("href", function (iMagneOriValue) {return origValue + "/ jquery";});})

HuluMiao.cn

Change the href value

Please move the mouse pointer over the link, or click on the link to see the changed href value.

The above is all the content of the article "how jQuery sets the content and attributes of HTML elements". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.