前端学习-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>

文档处理:

内部插入标签

外部插入标签

替换

删除

复制

原文地址:https://www.cnblogs.com/smail-bao/p/9874926.html