老师的博客地址:https://www.cnblogs.com/yuanchenqi/articles/6070667.html
day44
属性操作:
--------------------------属性
$("").attr();取属性值
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red") 修改属性值
关于属性操作,固有属性用prop,自定义属性用attr
Jquery 遍历:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
<p>000</p>
<p>111</p>
<p>222</p>
<script>
arr=[11,22,33];
// 方式一
// $.each(arr,function (x,y) {
// console.log(x);
// console.log(y)
// })
//方式2
$("p").each(function () {
console.log($(this))
})
</script>
</body>
</html>
prop 以及each 的实例正反选:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script>
// 这里我们使用each遍历input标签,因为这个input是html自带元素,$(this)当前遍历对象,所以这里我们用prop方法,我们把checked设置为true
function selectall() {
$("input").each(function () {
$(this).prop("checked",true)
})
}
function cancel() {
$("input").each(function () {
$(this).prop("checked",false)
})
}
function reverse() {
$("input").each(function () {
if ($(this).prop("checked")){
$(this).prop("checked",false)
}
else {
$(this).prop("checked",true)
}
})
}
</script>
</body>
</html>
文档处理:
内部插入标签
外部插入标签
替换
删除
复制