jQuery settings

jQuery - Setting content and attributes

Setting content - text(), html() and val()

We will use the same three methods from the previous chapter to set content:

text() - Sets or returns the text of the selected element Content
html() - Sets or returns the content of the selected element (including HTML tags)
val() - Sets or returns the form Field value

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").text("你好!");
            });
            $("#btn2").click(function(){
                $("#test2").html("<b>你好!</b>");
            });
            $("#btn3").click(function(){
                $("#test3").val("php.cn");
            });
        });
    </script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="php中文网"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

Run the program to try it

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

The three jQuery methods above: text(), html() and val() also have callback functions. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").text(function(i,origText){
                    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
                });
            });
            $("#btn2").click(function(){
                $("#test2").html(function(i,origText){
                    return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
                });
            });
        });
    </script>
</head>
<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

Run the program to try it

Settings Attributes - attr()

jQuery attr() method is also used to set/change attribute values.

The following example demonstrates how to change (set) the value of the href attribute in the link:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#php").attr("href","http://www.baidu.com/");
            });
        });
    </script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

Run the program Try it

attr() method also allows you to set multiple attributes at the same time.

The following example demonstrates how to set the href and title attributes at the same time:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#php").attr({
                    "href" : "http://www.baidu.com",
                    "title" : "baidu"
                });
            });
        });
    </script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>

Run the program to try it

The callback function of attr()

jQuery method attr() also provides a callback function. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#php").attr("href", function(i, origValue){
                    return origValue + "/course.html";
                });
            });
        });
    </script>
</head>
<body>
<p><a href="//m.sbmmt.com" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>

Run the program to try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("你好!"); }); $("#btn2").click(function(){ $("#test2").html("<b>你好!</b>"); }); $("#btn3").click(function(){ $("#test3").val("php.cn"); }); }); </script> </head> <body> <p id="test1">这是一个段落。</p> <p id="test2">这是另外一个段落。</p> <p>输入框: <input type="text" id="test3" value="php中文网"></p> <button id="btn1">设置文本</button> <button id="btn2">设置 HTML</button> <button id="btn3">设置值</button> </body> </html>

submit Reset Code

Automatic operation

jQuery settings

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]