專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-08-15 07:28:18 來源：動力節(jié)點(diǎn) 瀏覽5943次
大家在學(xué)習(xí)Java教程的時候會學(xué)到j(luò)Query，那么，怎么用jq獲取input的value值呢？動力節(jié)點(diǎn)小編來告訴大家。在進(jìn)行內(nèi)容操作時，對于設(shè)置和獲取元素的內(nèi)容使用同一個函數(shù)進(jìn)行操作，設(shè)置元素內(nèi)容時直接在函數(shù)中傳入?yún)?shù)即可。
1. html()
// 獲取mydiv的標(biāo)簽體內(nèi)容
var divValue = $("#mydiv").html()
// 設(shè)置mydiv的標(biāo)簽體內(nèi)容
var divValue = $("#mydiv").html(“你好”)
2. text()
// 獲取mydiv文本內(nèi)容
var divText = $("#mydiv").text()
// 設(shè)置mydiv文本內(nèi)容
var divText = $("#mydiv").text(“你好”)
3. val()
// 獲取myinput 的value值
var value = $("#myinput").val()
// 設(shè)置myinput 的value值
var value = $("#myinput").val(“你好”)
關(guān)于上述代碼的實(shí)際演示如下：
<!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的標(biāo)簽體內(nèi)容
var divValue = $("#mydiv").html()
alert(divValue);
// 獲取mydiv文本內(nèi)容
var divText = $("#mydiv").text()
// alert(divText)
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="張三" /><br />
<div id="mydiv"><p><a href="#">標(biāo)題標(biāo)簽</a></p></div>
</body>
</html>
通用屬性操作
1. attr():
//獲取北京節(jié)點(diǎn)的name屬性值
var bj = $("#bj").attr("name");
alert(bj);
//設(shè)置北京節(jié)點(diǎn)的name屬性的值為dabeijing
$("#bj").attr("name", "dabeijing");
//新增北京節(jié)點(diǎn)的discription屬性 屬性值是didu
$("#bj").attr("discription", "didu");
//刪除北京節(jié)點(diǎn)的name屬性并檢驗(yàn)name屬性是否存在
2. removeAttr()
//刪除北京節(jié)點(diǎn)的name屬性并檢驗(yàn)name屬性是否存在
$("#bj").removeAttr("name");
3. prop()
//獲得hobby的的選中狀態(tài)
var hobby_type = $("#hobby").prop("checkbox");
4. removeProp()
//刪除hobby的CheckBox屬性
var hobby_type = $("#hobby").removeProp("checkbox");
5.attr和prop區(qū)別
如果操作的是元素的固有屬性，則建議使用prop
如果操作的是元素自定義的屬性，則建議使用attr
對class屬性操作
1. addClass()
//<input type="button" value=" addClass" id="b2"/>
//給one標(biāo)簽增加屬性
$("#b2").click(function () {
$("#one").addClass("second");
});
2. removeClass()
//<input type="button" value="removeClass" id="b3"/>
//刪除one標(biāo)簽的class屬性
$("#b3").click(function () {
$("#one").removeClass("second");
});
3. toggleClass()
//<input type="button" value=" 切換樣式" id="b4"/>
//為one標(biāo)簽的class樣式進(jìn)行切換，有class屬性就刪除，沒有就添加
$("#b4").click(function () {
$("#one").toggleClass("second");
});
在這里對該函數(shù)做一個詳細(xì)的介紹：
如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()設(shè)置id為one背景顏色為綠色" id="b6"/>
$("#b6").click(function () {
$("#one").css("backgroundColor","green")
});
1. append()
作用：父元素將子元素追加到末尾
樣例：對象1.append(對象2): 將對象2添加到對象1元素內(nèi)部，并且在末尾
2. prepend()
作用：父元素將子元素追加到開頭
樣例：對象1.prepend(對象2):將對象2添加到對象1元素內(nèi)部，并且在開頭
3. appendTo()
樣例：對象1.appendTo(對象2):將對象1添加到對象2內(nèi)部，并且在末尾
4. prependTo()
樣例：對象1.prependTo(對象2):將對象1添加到對象2內(nèi)部，并且在開頭
5. after()
作用：添加元素到元素后邊
樣例：對象1.after(對象2)： 將對象2添加到對象1后邊。對象1和對象2是兄弟關(guān)系
6. before()
作用：添加元素到元素前邊
樣例：對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關(guān)系
7. insertAfter()
樣例：對象1.insertAfter(對象2)：將對象1添加到對象2后邊。對象1和對象2是兄弟關(guān)系
8. insertBefore()
樣例：對象1.insertBefore(對象2)： 將對象1添加到對象2前邊。對象1和對象2是兄弟關(guān)系
9. remove()
作用：移除元素
樣例：對象.remove():將對象刪除掉
10. empty()
作用：清空元素的所有后代元素。
樣例：對象.empty():將對象的后代元素全部清空，但是保留當(dāng)前對象以及其屬性節(jié)點(diǎn)
以上就是關(guān)于“教你用jq獲取input的value值”的介紹，大家如果想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點(diǎn)的jQuery教程，里面有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助哦。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實(shí)驗(yàn)班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號