jquery中一些操作值的方法：
attr():操作某一个自定义属性值
text():操作文本值；
html():操作html；
val():操作值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input data-value="1" value="这个是一个input的初始化文字"></input>
<div>这个是一个div的初始文字</div>
<button class="getattr">getattr</button><button class="setattr">setattr</button>
<button class="gettext">gettext</button>
<button class="settext">settext</button>
<button class="setvalue">setvalue</button> <button class="getvalue">getvalue</button>
<button class="gethtml"> gethtml</button>
<button class="sethtml"> sethtml</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
//attr方法获取属性
$("body").on("click", ".getattr", function() {
console.log($("input").attr("data-value"));
});
//attr方法设置属性
$("body").on("click", ".setattr", function() {
$("input").attr("data-value", "3");
});
//text方法获取到文本值
$("body").on("click", ".gettext", function() {
console.log($("div").text());
}); //text方法修改文本值
$("body").on("click", ".settext", function() {
$("div").text("这是使用text修改后的文本信息");
});
//val方法修改value
$("body").on("click", ".setvalue", function() {
$("input").val("这个是修改过后的value");
}); //val方法获取value
$("body").on("click", ".getvalue", function() {
console.log($("input").val());
}); //html方法获取html
$("body").on("click", ".gethtml", function() {
console.log($("div").html());
}); //val方法设置html
$("body").on("click", ".sethtml", function() {
$("div").html("<span>这个是修改过后的html</span>");
});
</script>
</html>
js中的实现：
attr(set)：setAttribute();
attr(get)：getAttribute();
text(set):innerText="?";
text(get):innerText;
val(set):value="?";
val(get):value；
html(set):innerHtml="?";
html(get):innerHtml;
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input data-value="1" value="这个是一个input的初始化文字"></input>
<div>这个是一个div的初始文字</div>
<button class="getattr">getattr</button><button class="setattr">setattr</button>
<button class="gettext">gettext</button>
<button class="settext">settext</button>
<button class="setvalue">setvalue</button> <button class="getvalue">getvalue</button>
<button class="gethtml"> gethtml</button>
<button class="sethtml"> sethtml</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
//attr方法获取属性
$("body").on("click", ".getattr", function() {
// console.log($("input").attr("data-value"));
console.log(document.querySelector("input").getAttribute("data-value"));
});
//attr方法设置属性
$("body").on("click", ".setattr", function() {
// $("input").attr("data-value", "3");
document.querySelector("input").setAttribute("data-value", "2");
});
//text方法获取到文本值
$("body").on("click", ".gettext", function() {
// console.log($("div").text());
console.log(document.querySelector("div").innerText);
}); //text方法修改文本值
$("body").on("click", ".settext", function() {
// $("div").text("这是使用text修改后的文本信息");
document.querySelector("div").innerText = "这是使用text修改后的文本信息";
});
//val方法修改value
$("body").on("click", ".setvalue", function() {
// $("input").val("这个是修改过后的value");
document.querySelector("input").value = "这个是修改过后的value";
}); //val方法获取value
$("body").on("click", ".getvalue", function() {
// console.log($("input").val());
console.log(document.querySelector("input").value);
}); //html方法获取html
$("body").on("click", ".gethtml", function() {
// console.log($("div").html());
console.log(document.querySelector("div").innerHTML);
}); //val方法设置html
$("body").on("click", ".sethtml", function() {
// $("div").html("<span>这个是修改过后的html</span>");
document.querySelector("div").innerHTML = "<span>这个是修改过后的html</span>";
});
</script>
</html>
