国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery - setting content and properties

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

Use the same three methods from the previous chapter to set content:

text() - set or Returns the text content of the selected element

html() - Sets or returns the content of the selected element (including HTML tags)

val() - Sets or returns the value of a form field

<!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>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("php");
  });
});
</script>
</head>
<body>
<p id="test1">段落1</p>
<p id="test2">段落2</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>

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

The above three 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, and the original (old) value.

Then return the string you wish to use as the new value of the function.

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


attr()Set attributes

attr() method allows You set multiple properties 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://miracleart.cn/jquery",
      "title" : "jQuery 教程"
    });
  });
});
</script>
</head>
<body>
<p><a href="http://miracleart.cn" id="php">php中文網</a></p>
<button>修改 href 和 title</button>
<p>點擊按鈕修改后,可以查看 href 和 title 是否變化。</p>
</body>
</html>

attr() callback function

The callback function takes two parameters:

The subscript of the current element in the selected element list, and the original (old) value .

Then return the string you wish to use as the new value of the 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 + "/jquery";
        });
    });
});
</script>
</head>
<body>
<p><a href="http://miracleart.cn" id="php">php中文網</a></p>
<button>修改 href 值</button>
<p>點擊按鈕修改后,可以點擊鏈接查看 href 屬性是否變化。</p>
</body>
</html>


Continuing Learning
||
<!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 type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $("td").attr({width:"200",height:"200"}); }); }); </script> </head> <body> <table border="1"> <tr> <td>歡迎來到php.cn</td> </tr> </table> <br> <button id="btn">點擊查看效果</button> </body> </html>
submitReset Code