Day38

最新推荐文章于 2024-08-31 14:16:22 发布

今天十五

最新推荐文章于 2024-08-31 14:16:22 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/qq_26016931/article/details/116939276

版权

js

事件绑定

传统绑定
在这里插入图片描述
bind绑定
不会绑定新元素

on绑定
delegate

  <title>Document</title>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            //普通绑定
            // $('p').click(function(){
            //     console.log("12");
            //     console.log("sdf");
            // });

            //不会绑定新添加的事件
            // $('p').bind('click mouseover',function(){
            //         console.log(this.innerHTML);
            //         $('#home').append('<p>--------------1</p>');
            // });
            
            //on 不动态绑定
            // $('p').on('click',function(){
            //     console.log(this.innerHTML);   
            // })
            //on 只动态绑定p
            // $('#home').on('click','p',function(){
            //     console.log(this.innerHTML);
            //     $('#home').append('<p>-------</p>')
            //     $("#home").append('<h4>子节点3</h4>'); 
            // });

            //delegate对父标签绑定，由子标签触发
            $('#home').delegate('p','click',function(){
                console.log(this.innerHTML);
                $('#home').append('<p>-----</p>')
                $('#home').append('<h4>asf</h4>')
            })
           
        });
    </script>
</head>
<body>
    <div id="home">
        <p>afsfdaa</p>
        <h4>asf</h4>
    </div>
</body>

each方法

在这里插入图片描述

 <title>Document</title>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            var lis=$('li')
            console.log(lis);
            //js
            for(i=0;i<lis.length;i++){
                console.log(lis[i].textContent);
                console.log(lis.length);
                
            }
            //jquery
            lis.each(function(){
                console.log($(this).text());
                console.log($(this));
                
            })
        });
    </script>
</head>
<body>
    <ul>
        <li>111</li>
        <li>221</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>

原型

相当于对象

 <title>Document</title>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script>
        //this.name相当于成员变量，有对象
        function Person(name){
            this.name=name;
        }
        //原型中添加属性（相当于静态变量，所有对象共享）
        Person.prototype.addr='--werqwasf'
        var p1=new Person('a');
        var p2=new Person('b');
        //对象没有的属性，会去原型中找,原型中也没有,去父类原型找,都没有就报错
        console.log(p1.name,p1.addr);
        console.log(p2.name,p2.addr);
        
        p1.__proto__.addr='--00000'
        //对象都有__proto__属性，该属性指向原型
        console.log(Person.prototype===p1.__proto__);
        console.log(p1.name,p1.addr);
        console.log(p2.name,p2.addr);
        
        //原型也有__proto__属性，指向父类原型
        console.log(Person.prototype.__proto__==Object.prototype);
        console.log(Object.prototype.__proto__);
        Object.prototype.age='r';
        console.log(p1.age);
        
        
    </script>
</head>
<body>
    
</body>

jQuery设置

在这里插入图片描述全选示例

  <title>Document</title>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("#all").click(function(){
                //undefine
                console.log($(this).attr('checked'));
                //true
                console.log(this.checked);
                //null
                console.log(this.getAttribute('checked'));
                //true
                console.log($(this).prop('checked'));
                //只能操作标签自带属性
                $(this).attr('s',000);
                $(this).prop('class','a');
                if($(this).prop('checked')){
                    $("input[type='checkbox']").prop('checked',true);
                }else{
                    $("input[type='checkbox']").prop('checked',false);
                } 
            });
            
            $("#reverse").click(function(){
                // 已选
                var c = $("input[type='checkbox']:not(#all):checked");
                // 未选择的
                var nc = $("input[type='checkbox']:not(#all):not(:checked)");
                c.prop('checked',false);
                nc.prop('checked',true);
                // c是已选择的,但是反转之后,就是未选择的了
                // 判断未选择的个数,决定是否要对全选打钩
                if(c.length > 0){
                    $("#all").prop('checked',false);
                }else{
                    $("#all").prop('checked',true);
                }    
            })
            $("input:not(#all,#reverse)").click(function(){
                var c=$("input[type='checkbox']:not(#all):checked")
                console.log(c.length);
                if(c.length==5){
                    $("#all").prop('checked',true)
                }else{
                    $("#all").prop('checked',false)
                }
                
            })

        })
    </script>
</head>
<body>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <input type="checkbox" id="all"><span>all</span>
    <input type="button" id="reverse" value="反选">
</body>