JQuery的属性操作
JQUery的属性操作
- html() 他可以设置和获取起始标签和结束标签中的内容. 跟dom属性 innerHTML 一样。
- text() 它可以设置和和获取起始标签和结束标签中的文本 跟 dom 属性 innerText 一样
- val() 它可以设置和获取表单项目的value值 跟dom中的value值一样
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// //不传参数 是获取 传递的参数值设置
// alert($("div").html());//获取
// $("div").html("<h1>我是div中的标题 1</h1>")//设置
//
// alert($("div").text());//获取
// $("div").text("<h1>我是div中的标题 1</h1>");//设置
//不传参数 是获取 传递参数时设置
$("button").click(function () {
alert($("#username").val());//获取
$("#username").val("大钊牛逼");//设置
})
})
</script>
</head>
<body>
<div>我是div标签
<span>我是div中的span</span>
</div>
<input type="text" name="username" id="username">
<button>操作输入框</button>
</body>
</html>
jquery批量操作
$(function () {
//批量操作单选
// $(":radio").val(["radio2"]);
// //批量操作筛选框的选中状态
// $(":checkbox").val(["checkbox3","checkbox2"]);
//
//
// // 批量操作多选的下拉框选中状态
// $("#multiple").val(["mul2","mul3","mul4"]);
// // 操作单选的下拉框选中状态
// $("#single").val(["sin2"]);
$("#single,:radio,#multiple").val(["radio2","sin2","mul2","mul3"]);
})
attr() prop()
-
attr()可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
-
prop()
在没返回值的情况下返回flase可以设置和获取属性的值只推荐操作 checked、readOnly、selected、disabled 等等
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//attr()
/*
可以设置和获取属性的值,不推荐checked readonly selected disabled等着
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值 只推荐checked、readOnly、selected、disabled 等等
*/
alert($(":checkbox:first").attr("name"))//获取
// $(":checkbox:first").attr("name","asdas")//设置 在浏览器中查看源代码
$(":checkbox").prop("checked", true);// 官方觉得返回undefined是一个错误
$(":checkbox:first").attr("abc", "abcValue");
alert($(":checkbox:first").attr("abc"));
})
</script>
</head>
<body>
<body>
<br/>
多选：
<input name="checkbox" type="checkbox" checked="checked" value="checkbox1"/>checkbox1
<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
<br/><br/>
<div>1234</div>
<div>1234</div>
</body>
</body>
</html>