前端学习-jQuery-2
老师的博客地址: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>
文档处理:
内部插入标签
外部插入标签
替换
删除
复制