1. 程式人生 > >JS和JQ中獲取標籤裡的內容方法總結

JS和JQ中獲取標籤裡的內容方法總結

JQ獲得內容 - text()、html() 以及 val()
三個簡單實用的用於 DOM 操作的 jQuery 方法:
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容(包括 HTML 標記)
val() - 設定或返回表單欄位的值
參考:http://www.runoob.com/jquery/jquery-dom-get.html
1、獲取input標籤的值,方法:
 根據input的name或者id獲取其值,假如有:<input type='text' id='name' value=123>
JQ中獲取方法:$("#name").val();
2、獲取input標籤的屬性內容,方法:
如有:<input type='text' id='name' value=123 ind='1'>
要獲取ind的值,方法:
$("#name").attr("ind");
3.把獲取的JQ物件轉成dom物件,用dom物件的方式獲取
$("#name")[0].value;
=========================================================
JS獲取內容的方法

<body>
    <input type="button" name="" value="新增li">
    <ul>
      <li>春</li>
      <li>夏</li>
      <li>秋</li>
    </ul>
  </body>

<script type="text/javascript">
var li=document.getElementsByTagName('li); //先選中li標籤
li[0].innerHTML;  //JS裡獲取裡li標籤裡的文字內容的方法  春
</script>
--------------------------------------------------------------------------
//1、獲取input標籤的值,方法:
 <input type="text" name="" value="abc123">
 var ul=document.getElementsByTagName('input')[0];  //先選中input標籤
方法一:  
var ul.value; //  獲取input裡的value值
方法二:
$("ul").val(); //把ul裡的dom物件轉成JQ物件,用JQ裡的獲取方法
//2、獲取select 下option裡標籤的值,方法:
例:
<body>
    <p>
      <select id="con">
 <option value="SF">順豐</option>
      <option value="YTO">圓通</option>
      <option value="STO">申通</option>
      <option value="ZTO">中通</option>
      <option value="YD">韻達</option>
    </select>
</p>
</body>
<script type="text/javascript">
//獲取select 下option裡標籤的值
var con = document.getElementById('con').value;
</script>