Python学习第87天（jQuery属性操作、循环方法）
一、属性操作
1.属性
$(" ").attr( )； 主要用于获取用户自主设定的属性数据，如果设定两个参数，则是将原属性参数修改为第二个属性参数。
$(" ").removeAttr( )；
$(" ").prop( )； 主要用于获取固有属性数据，参数形式和attr一样。
$(" ").removeProp( )；
2.CSS类
$(" ").addClass(class|fn)； 增加节点类名
$(" ").removeClass([class|fn])； 删除节点类名
3.HTML代码/文本/值
$(" ").html([val|fn])； 等同于JavaScript中的innerHTML
$(" ").text([val|fn])； 等同于JavaScript中的innerTEXT
$(" ").val([val|fn|arr])； 获取固有参数属性的value值
4.属性设置
$(" ").css("color","red")； 设定节点属性，设置多个属性的时候
$(" ").css({"color"："red" ，"backgroundcolor” ："red" ’})；
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked </script> attr和prop
二、循环方式
jquery循环的两种方式 方式一 li=[10,20,30,40] dic={name:"yuan",sex:"male"} $.each(li,function(i,x){ console.log(i,x) }) 方式二 $("tr").each(function(){ console.log($(this).html()) })
现在用jQuery的方式写一下正反选的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
function reverse(){
</script>
</head>
<body>
<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>
</body>
</html>
以上就是今天所有内容。。。
