特殊事件的绑定

  jQuery

                1,选择器

                    支持所有html和css允许的语法

                    注意:

                        (1),操作结果一定是一个伪数组

                                jQuery获取的伪数组不能直接使用js语法进行操作

                                js语法获取的标签对象,也不能使用jQuery来操作

                        (2),转化:  

                                $()[索引] --- jQuery转js,只能是js语法操作

                                $(js标签对象) --- js转jQuery,只能是jQuery语法操作

                        (3),纯css语法,按照标签顺序获取

                                $('ul>li:nth-child(2)')   第二个

                            纯jQuery语法,按照索引下标获取

                                $('ul>li:eq(2)')   索引2

                2,筛选器

                    在选择器获取结果的基础上,进行筛选

                3,属性操作   获取  设定  删除

                    prop  操作布尔类型属性使用

                    attr  操作其他类型属性使用

                4,class操作

                    addClass()     原有基础上新增

                    removeClass()  原有基础上删除

                    toggleClass()  切换

                    hasClass()     判断是否有

                5,事件绑定

                    $().on('事件类型' , 事件处理函数)

                    $().on('事件类型' , {对象形式传参} , 事件处理函数(e){})

                        存储在 e.data 中 

                    $().on('事件类型' , 事件委托的对象 , 事件处理函数

                    $().on('事件类型' , 事件委托的对象 , {对象形式传参} , 事件处理函数(e){})

 

     /*

            在 jQuery 中 有一些特殊的事件绑定语法

            on语法可以绑定所有的事件,一些特殊事件,可以有特殊的语法

        

        */ 

        // 1, click 等特殊事件

        // 可以直接写事件类型,不用写on方法绑定

        // 输出 jQuery标签对象,支持的语法,都定义在 __proto__ 中

        console.dir($('div'));

        // $('div').click(()=>{

        //     console.log(123);

        // })

        // 2, hover() 同时设定移入移出效果

        // 第一个参数 : 匿名函数 移入事件处理函数

        // 第二个参数 : 匿名函数 移出事件处理函数

        // 效果是 enter 和 leave 效果 子级不会触发

        // $('div').hover( ()=>{console.log('进进')} , ()=>{console.log('出出')} );

        // 3, one()  只会触发一次的事件        

        // 普通绑定,会一直触发

        // $('div').click(()=>{console.log(123)})

        // $('div').one( 'click' , ()=>{

        //     console.log('只触发一次');

        // } )

        

        // 4, trigger()   不用触发,直接执行,但是只能直接执行一次

        

        // $('div').click(()=>{console.log(1111)})

        // 绑定在这个标签上的,这个事件类型,不会触发会直接执行

        // 自动执行,只会触发一次

        // $('div').trigger( 'click' )

        // 5, $(window).ready()   标签加载完毕,会执行定义的程序

        //    window.onload       要所有内容都加载完毕,包括图片的加载显示

        //    $(window).ready()   只需要标签结构加载完毕,就可以执行程序

        //                        图片不需要加载完,显示完,定义的程序就可以执行

        $(window).ready(()=>{

            console.log('我是ready输出的内容');

        })

        window.onload = function(){

            console.log('我是onload输出的内容');

        }