jQuery修改標籤的內容或值
阿新 • • 發佈：2019-01-03
我一直知道要修改標籤的內容和值有三種方式，但是最近遇到一專案卻讓我在改變表單元素的值上浪費了很多時間，其實我大概都知道他們的區別在哪裡，只是有的時候總是會忘記，現在就來給幾個簡單的例子，希望以後不要再犯糊塗；
1.關於表單
這裡我就寫一個關於textarea的例子吧，
描述一下這個例子吧，點選“拒絕”會彈出拒絕原因填寫頁面，讓文字框第一次獲取焦點清空文字，在未提交（未按確定）之前關閉此頁再次用過“拒絕”按鈕開啟此頁任然保留資料，當點選“確認”就會將框類的值跟換成“請輸入拒絕原因”；<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .modle-wrap{ width: 100%; height: 100%; position: fixed; z-index: 999; left: 0; bottom: 0; background: rgba(0,0,0,0.5 )!important; background: #000; filter: alpha(opacity=80); /*ie6/7/8*/ display: none; } .modle-container{ width: 100%; height: 100%; position: relative; z-index: 2; } .refuse{ width: 740px; height: 350px; position: absolute; left:50%; top:50%; margin-top:-175px; margin-left:-370px; background: #fff; } .refuse_title{ height: 50px; font-size: 16px; line-height: 50px; background: #1A8CDC; color: #fff; } .refuse_content{ padding:40px 30px 0; width: 100%; } .refuse_word_height{ width: 628px; height: 150px; overflow:scroll; overflow-x: hidden; } .refuse_word{ width: 628px; border:1px solid #CCCCCC; resize: none; min-height: 150px; height: auto; color: #999; line-height: 30px; padding:0 5px; } .refuse_btn{ width: 160px; line-height: 36px; height: 36px; text-align: center; border:1px solid #1A8CDC; background: #fff; margin-top:40px; border-radius: 2px; } .refuse_btn+.refuse_btn{ margin-left: 40px; } .refuse_btn.on{ background: #1A8CDC; color: #fff; } </style> <body> <p class="agreen text_center"> <button class="pc_btn on pointer pc_yes">同意</button> <button class="pc_btn pointer pc_no" id="">拒絕</button> </p> <div class="modle-wrap refuse_box"> <div class="modle-container"> <div class="refuse"> <h5 class="refuse_title">拒絕原因</h5> <div class="refuse_content"> <span class="float_left">原因</span> <div class="float_right" id="refuse_word_height"> <textarea class="refuse_word" id="refuse_word">拒絕原絕原因拒絕原因拒絕原因拒絕原因拒絕原因拒絕原因拒絕原因拒絕原因拒絕原因拒絕原</textarea> </div> </div> <p class="refuse_btnOut"> <button class="on refuse_btn yes" id="yes">確定</button> <button class="refuse_btn close" id="close">關閉</button> </p> </div> </div> </div> <script type="text/javascript" src="jquery-3.0.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".pc_no").click(function(){ $(".refuse_box").show(); }) var refuse_word=$("#refuse_word").text(); var focus=0; $("#refuse_word").focus(function(){ focus+=1; console.log(focus); if(focus==1){ $("#refuse_word").text(""); } }); $(".close").click(function(){ $(".modle-wrap").hide(); }) $(".yes").click(function () { focus = 0; $(".refuse_box").hide(); refuse_word="請輸入拒絕原因"; console.log(refuse_word); $("#refuse_word").val(refuse_word); }) $(".refuse_btnOut .refuse_btn").click(function(){ $(this).addClass("on").siblings('.refuse_btn').removeClass('on'); }) }) </script> </body> </html>
我之前用text（）來獲取值改更改值，發現始終在頁面顯示不出來，只能打印出來
總結，表單元素順利修改他的內容，就的使用val（）；
2.再說說html（）與text（）的區別
不同點一：
html()在獲取元素內容時，如果選擇器匹配多於一個的元素，那麼只有第一個匹配元素的 HTML 內容會被獲取。
text()在獲取元素內容時，結果是由所有匹配元素包含的文字內容組合起來的文字
- <p>段落一</p>
- <p>段落二<p>
- $(function(){
- alert($("p").text());
- })
- 彈出框結果為： 段落一段落二
[javascript] view
plain copy
- $(function(){
- alert($("p").html());
- })
不同點二：
html()在獲取內容時，會將其中的其他標籤也讀取出來
text()在獲取內容時，會忽略其中的標籤
不同點三：
html()在更改內容時，可以加入標籤
text()更改的全是內容