value属性的操作
- val()
- html()
- text()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.1.js"></script>
<script>
$(function () {
//点击按钮,设置单选框的value值
// $("#btn").click(function () {
// $("#r2").val("6");
// });
//点击按钮,设置复选框的value值
// $("#btn").click(function () {
// $("#ck3").val("7");
// });
//点击按钮,设置文本域的value值
$("#btn").click(function () {
//获取文本域中的value值
console.log($("#tt2").val());
console.log($("#tt2").text());
//设置文本域中的value值
$("#tt2").val("雏菊");
$("#tt2").text("雏菊");
});
//选中标签中value值为5的这个option标签
$("#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(参数1);---->获取某个属性的值
- .removeAttr(“属性”);移除自定义属性
- 参数1:属性的名字
- 参数2:属性的值
- 他可以操作元素自定义的属性,也可以操作元素自带的属性
- 操作元素选中的checked的时候,推荐使用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 () {
//DOM中的写法
//document.getElementById("r3").checked=true;
//jQuery中的写法,需要用使用自定义属性
$("#r3").attr("checked",false);//设置
console.log($("#r3").attr("checked"));//checked
//如果标签选中了,attr("checked")--->结果:checked
//如果标签没有选中,attr("checked")---->结果:undefined
});
});
</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>
//点击按钮,为li添加自定义属性
$(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()]
* 设置或者是获取元素的选中的问题
* 推荐使用prop()方法
* .prop("属性",值); 值一般是布尔类型
* .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>