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>

　　以上就是今天所有内容。。。

posted @ 2020-05-24 23:02  崆峒山肖大侠  阅读(170)  评论(0)    收藏  举报