jquery

作者: 关耳木南 | 来源:发表于2019-06-18 21:11 被阅读0次
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <style type="text/css">
        
        div{
            width:100px;
            height:100px;
            background: red;
        }
        p{
            height:50px;
            background-color: pink;
        }
        .p1{
            height:50px;
            background-color: yellow;
        }
    </style>
    <body>
    <div>
        <p></p>
    </div>
    <p class="p1"></p>
    <script type="text/javascript">
        /*
        eq(下标)  筛选出来的对象是jq对象
        first()  取集合第一个
        last()
        hasClass()
        filter(规则)  根据规则筛选,返回符合条件的所有新对象的新集合
        has()  判断是否具有某些子元素,如果有  返回这个有子元素的父元素
        not(条件)  满足条件的不要
        **children()     找儿子,找集合里所有对象的所有孩子
        **find()   找后代,必须传递参数,返回符合条件的后代。
        **next() 下一个弟弟元素
        **prev() 返回上一个哥哥元素
        nextAll() 返回所有的弟弟元素
        prevAll() 所有的哥哥元素
        **offsetParent()  返回定位父节点(就近原则)
        **parents(条件) 找到符合条件的父元素
        **siblings() 获取所有的兄弟元素
        *
        * 事件
        *   ready
        *       window.onload  监听页面所有的资源加载(html、css、img)完成后执行
        *       (DOMContentLoaded:当初始的HTML文档被完全加载和解析完成之后执行)
        *       $(document).ready(function(){
        *           //在页面的dom节点准备好后执行
        *       })
        *       $(document).ready(function(){             $(function(){
        *           //执行代码                 ==》简写        //执行代码
        *       })                                          })
        *   on
        *       $(元素).on("事件",function(){})
        *
        *       $(function(){
        *           $("div").on("click",()=>{
        *               console.log(1)
        *           });
        *           $("div").on("mouseenter",()=>{
        *               console.log("enter")
        *           });
        *           $("div").off()//off()不传参,就是把前面元素内的所有事件解绑
        *           $("div").off("click")//只解绑前面元素的click事件,mouseenter事件还在
        *       })
        *   off
        *
        *   jq中的事件代理
        *       html中  <div><p></p></div>
        *
        *       $(function(){
        *           var efn = function(){
        *               console.log("p")
        *           }
        *           $(document).on("click","p",efn) //点击在p标签上执行
        *       })
        *   one 
        *       事件执行一次
        *   trigger
        *       
         */
    
    
                $(function(e){
                    var efn = function(e){
                        // console.log("p");
                        //a: console.log(e.data)//获取{a:1}
                        //b: console.log(1)
                        console.log(e.data)
                        
                    }
                    var obj = {a:1};
                    //$(document).on("click","p",efn) //点击在p标签上执行
                    //a: $(document).on("click","p",{a:1},efn);
                    $(document).on("click",obj,efn);
                    //b: $(document).trigger("click");
                    $(document).trigger("click",obj);
                })
                // $(".p1").one("click",()=>{
                //      $(".p1").html("one()只执行一次")
                //  })
                $(document).hover(
                    function(){
                        //移入时触发,只有一个函数时也是移入时触发
                    },
                    function(){
                        //移出时触发
                    })
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:jquery

          本文链接:https://www.haomeiwen.com/subject/czgqqctx.html