简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

tetapan jQuery

jQuery - Tetapkan kandungan dan atribut

Tetapkan kandungan - text(), html() dan val()

Kami akan menggunakan tiga kaedah yang sama dari bab sebelumnya untuk menetapkan kandungan:

  • teks() - Menetapkan atau mengembalikan teks elemen yang dipilih Kandungan

  • html() - Menetapkan atau mengembalikan kandungan elemen yang dipilih (termasuk teg HTML)

  • val() - Menetapkan atau mengembalikan nilai Medan bentuk

Contoh berikut menunjukkan cara menetapkan kandungan melalui kaedah text(), html() dan val(): 

<!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>

Jalankan atur cara untuk mencuba it out

Fungsi panggil balik text(), html() dan val()

Tiga kaedah jQuery di atas: teks (), html() dan val() juga mempunyai fungsi panggil balik. Fungsi panggil balik mengambil dua parameter: indeks elemen semasa dalam senarai elemen yang dipilih dan nilai asal (lama). Kemudian kembalikan rentetan yang anda ingin gunakan sebagai nilai baharu fungsi tersebut.

Contoh berikut menunjukkan teks() dan html() dengan fungsi panggil balik: 

<!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>

Jalankan atur cara untuk mencubanya

Atribut Tetapan - attr()

kaedah jQuery attr() juga digunakan untuk menetapkan/menukar nilai atribut.

Contoh berikut menunjukkan cara menukar (menetapkan) nilai atribut href dalam pautan:

Contoh

rreee

Jalankan program Cubalah

kaedah attr() juga membolehkan anda menetapkan berbilang atribut pada masa yang sama.

Contoh berikut menunjukkan cara untuk menetapkan atribut href dan tajuk pada masa yang sama: 

<!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="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

Jalankan program untuk mencubanya

Fungsi panggil balik attr()

kaedah jQuery attr() juga menyediakan fungsi panggil balik. Fungsi panggil balik mengambil dua parameter: indeks elemen semasa dalam senarai elemen yang dipilih dan nilai asal (lama). Kemudian kembalikan rentetan yang anda ingin gunakan sebagai nilai baharu fungsi tersebut.

Contoh berikut menunjukkan kaedah attr() dengan fungsi panggil balik: 

<!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="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>

Jalankan atur cara untuk mencubanya




Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492163 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！