jq與js獲取值操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq與js獲取值操作</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
$(function() {
//jquery通過id獲取值
console.log($("#nameText").val());
//jquery通過name獲取值
console.log($("input[name=nameText]").val());
//jquery通過class獲取值
console.log($(".nameText").val());
//js通過id獲取值
console.log(document.getElementById("nameText").value);
//js通過name獲取值
console.log(document.getElementsByName("nameText")[0].value);
//js通過class獲取值
console.log(document.getElementsByClassName("nameText")[0].value);
/*jq獲取屬性*/
var temp1 = $("#divTest").css("width");
//alert("開始修改背景顏色");
/*jq修改屬性*/
$("#divTest").css("background", "red");
/*js獲取屬性*/
var temp2 = document.getElementById('divTest').style.width;
//alert("開始修改寬度");
/*js修改屬性*/
document.getElementById('divTest').style.width = "100%";
console.log(temp1);
console.log(temp2);
})
// /**
// * 拓展資料：
// * var returna_date = $("input[name$='returna_date']");//匹配所有name結尾為returna_date的數組
// * for(var x=0; x<returna_date.length;x++){
// * alert($(returna_date[x]).val());
// * }
// * $("input[name^='news']") 選擇所有的name屬性以'news'開頭的input元素
// * $("input[name$='news']") 選擇所有的name屬性以'news'結尾的input元素
// * $("input[name*='man']") 選擇所有的name屬性包含'news'的input元素
// */
</script>
</head>
<body>
<div id="divTest" style="background: gold;width: 30%;">
<input type="text" value="任秀興" id="nameText" name="nameText" class="nameText" />
<input type="text" value="JavaScript" id="nameText2" name="nameText" class="nameText" />
</div>
</body>
</html>
- 更多精彩內容，請關注微信關注公眾號 明葉師兄的學堂
