値属性の操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
console.log($("#tt2").val());
console.log($("#tt2").text());
$("#tt2").val("雏菊");
$("#tt2").text("雏菊");
});
$("#btn").click(function () {
$("#s1").val(5);
});
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
<br/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="r2"/>女
<input type="radio" value="3" name="sex"/>保密
<br/>
<input type="checkbox" value="1" />吃饭
<input type="checkbox" value="2" />睡觉
<input type="checkbox" value="3" id="ck3"/>打豆豆
<input type="checkbox" value="4" />打铅球
<br/>
<textarea name="tt" id="tt2" cols="30" rows="10">
太真的,太假的,太残忍的话
</textarea>
<br/>
<select id="s1">
<option value="1">妲己</option>
<option value="2">王昭君</option>
<option value="3">西施</option>
<option value="4">貂蝉</option>
<option value="5">小乔</option>
<option value="6">大乔</option>
<option value="7">武则天</option>
</select>
</body>
</html>
カスタム属性の操作
-
- .attr(パラメータ1、パラメータ2); ---->属性の値を設定します
- .attr(parameter 1); ---->属性の値を取得します
- .removeAttr( "attribute");カスタム属性を削除します
- パラメータ1:属性の名前
- パラメータ2:属性の値
- 彼は要素のカスタム属性を操作したり、要素の属性を操作したりできます
- 操作要素をチェックするときは、propメソッドを使用することをお勧めします
要素選択の問題[attr()]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("#r3").attr("checked",false);
console.log($("#r3").attr("checked"));
});
});
</script>
</head>
<body>
<input type="button" value="选中" id="btn"/><br/>
请选择您的性别:
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex"/>女
<input type="radio" value="3" name="sex" id="r3"/>保密
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("#uu>li:first").attr("score",100);
$("#a").attr("href","http://www.baidu.com");
console.log($("#a").attr("href"));
});
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
<br/>
<a id="a">百度</a>
<ul id="uu">
<li>小白</li>
<li>小黑</li>
<li>小红</li>
<li>小绿</li>
</ul>
</body>
</html>
要素選択の問題[prop()]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
if($("#ck").prop("checked")){
$("#ck").prop("checked",false)
}else{
$("#ck").prop("checked",true)
}
});
});
</script>
</head>
<body>
<input type="button" value="选中/不选中" id="btn"/>
<input type="checkbox" value="1" name="play" id="ck" />吃好吃的
</body>
</html>