專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-08-15 07:28:18 來源：動力節點 瀏覽5435次
大家在學習Java教程的時候會學到jQuery，那么，怎么用jq獲取input的value值呢？動力節點小編來告訴大家。在進行內容操作時，對于設置和獲取元素的內容使用同一個函數進行操作，設置元素內容時直接在函數中傳入參數即可。
1. html()
// 獲取mydiv的標簽體內容
var divValue = $("#mydiv").html()
// 設置mydiv的標簽體內容
var divValue = $("#mydiv").html(“你好”)
2. text()
// 獲取mydiv文本內容
var divText = $("#mydiv").text()
// 設置mydiv文本內容
var divText = $("#mydiv").text(“你好”)
3. val()
// 獲取myinput 的value值
var value = $("#myinput").val()
// 設置myinput 的value值
var value = $("#myinput").val(“你好”)
關于上述代碼的實際演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function (){
// 獲取myinput 的value值
var value = $("#myinput").val()
// alert(value);
// 獲取mydiv的標簽體內容
var divValue = $("#mydiv").html()
alert(divValue);
// 獲取mydiv文本內容
var divText = $("#mydiv").text()
// alert(divText)
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="張三" /><br />
<div id="mydiv"><p><a href="#">標題標簽</a></p></div>
</body>
</html>
通用屬性操作
1. attr():
//獲取北京節點的name屬性值
var bj = $("#bj").attr("name");
alert(bj);
//設置北京節點的name屬性的值為dabeijing
$("#bj").attr("name", "dabeijing");
//新增北京節點的discription屬性 屬性值是didu
$("#bj").attr("discription", "didu");
//刪除北京節點的name屬性并檢驗name屬性是否存在
2. removeAttr()
//刪除北京節點的name屬性并檢驗name屬性是否存在
$("#bj").removeAttr("name");
3. prop()
//獲得hobby的的選中狀態
var hobby_type = $("#hobby").prop("checkbox");
4. removeProp()
//刪除hobby的CheckBox屬性
var hobby_type = $("#hobby").removeProp("checkbox");
5.attr和prop區別
如果操作的是元素的固有屬性，則建議使用prop
如果操作的是元素自定義的屬性，則建議使用attr
對class屬性操作
1. addClass()
//<input type="button" value=" addClass" id="b2"/>
//給one標簽增加屬性
$("#b2").click(function () {
$("#one").addClass("second");
});
2. removeClass()
//<input type="button" value="removeClass" id="b3"/>
//刪除one標簽的class屬性
$("#b3").click(function () {
$("#one").removeClass("second");
});
3. toggleClass()
//<input type="button" value=" 切換樣式" id="b4"/>
//為one標簽的class樣式進行切換，有class屬性就刪除，沒有就添加
$("#b4").click(function () {
$("#one").toggleClass("second");
});
在這里對該函數做一個詳細的介紹：
如toggleClass(“one”):
* 判斷如果元素對象上存在class=”one”，則將屬性值one刪除掉。 如果元素對象上不存在class=”one”，則添加
4. css()
//<input type="button" value=" 通過css()獲得id為one背景顏色" id="b5"/>
$("#b5").click(function () {
var backgroundColor = $("#one").css("backgroundColor");
alert(backgroundColor);
});
//<input type="button" value=" 通過css()設置id為one背景顏色為綠色" id="b6"/>
$("#b6").click(function () {
$("#one").css("backgroundColor","green")
});
1. append()
作用：父元素將子元素追加到末尾
樣例：對象1.append(對象2): 將對象2添加到對象1元素內部，并且在末尾
2. prepend()
作用：父元素將子元素追加到開頭
樣例：對象1.prepend(對象2):將對象2添加到對象1元素內部，并且在開頭
3. appendTo()
樣例：對象1.appendTo(對象2):將對象1添加到對象2內部，并且在末尾
4. prependTo()
樣例：對象1.prependTo(對象2):將對象1添加到對象2內部，并且在開頭
5. after()
作用：添加元素到元素后邊
樣例：對象1.after(對象2)： 將對象2添加到對象1后邊。對象1和對象2是兄弟關系
6. before()
作用：添加元素到元素前邊
樣例：對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關系
7. insertAfter()
樣例：對象1.insertAfter(對象2)：將對象1添加到對象2后邊。對象1和對象2是兄弟關系
8. insertBefore()
樣例：對象1.insertBefore(對象2)： 將對象1添加到對象2前邊。對象1和對象2是兄弟關系
9. remove()
作用：移除元素
樣例：對象.remove():將對象刪除掉
10. empty()
作用：清空元素的所有后代元素。
樣例：對象.empty():將對象的后代元素全部清空，但是保留當前對象以及其屬性節點
以上就是關于“教你用jq獲取input的value值”的介紹，大家如果想了解更多相關知識，可以關注一下動力節點的jQuery教程，里面有更豐富的知識等著大家去學習，希望對大家能夠有所幫助哦。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號