js 五 jquery的使用，调用

Posted 2021-01-14 Sky__liu

4 this 关键字
    this 表示当前函数或方法的调用者
    1 全局函数由window调用，所以全局函数中的this 指的是window对象
    2 事件处理函数中使用this,指的是当前事件的触发对象
2 事件对象
    1 事件对象伴随事件触发产生，包含当前事件相关的所有信息
    2 获取事件对象
        事件对象伴随事件发生,自动产生，由浏览器以参数的形式传入到事件处理函数中，我们只需要接收参数就可以
            et:
                function fn(evt){
                    console.log(evt)  
                }
                fn(evt);
    3 事件对象的属性
        1 target / srcElement
            表示当前事件的触发对象；
            et:
                console.log(evt)
        2 不同的事件类型对应的事件对象中包含的信息也有所不同
            1 鼠标事件对象常用属性
                1 offsetX offsetY
                    获取鼠标在元素上的坐标位置
                    默认元素左上角为原点
                2 clientX clientY
                    获取鼠标在网页上的坐标位置
                3 screenX screenY
                    获取鼠标在屏幕上的坐标位置
        3 键盘事件对象的常用属性
            1 onkeydown 事件
                1 which 属性
                    获取当前按键的键码
                    对于大小写字母不进行区分
            2 onkeypress 事件
                1 key属性
                    获取当前按键对应的字符
                2 which 属性
                    获取按键对应的ASC码 ，区分大小写
3 事件处理机制
    1 事件传递
        当页面元素触发事件时，其他相关元素都会接收到这个事件，可以选择对事件作出处理
    2 事件传递机制：
        指页面中元素处理事件的顺序  
        1 分类：
            1 冒泡
                冒泡传递指事件由里向外传递机制
            2 捕获
                捕获指事件从外向里传递，IE不支持
            W3C标准事件监听函数
            addEventListener(param,fun,boolean)
            参数：
                param:事件函数名，取消on前缀
                    et : click
                fun:事件触发要执行的操作，通常以匿名函数给出
                boolean:默认为false，可以省略，表示冒泡传递，设置为true，表示捕获传递
        2 阻止事件传递
            evt.stopPropagation()
jquery 使用
    1 jquery是一个JS库，封装了原生的JS,得到一套完整的方法
        核心 ：write less, do more
        版本：
            1 xx.xx版本的jquery兼容IE6.7.8
            2 XX.XX 版本的jquery 不再兼容ie6.7.8
        优点：
            1 简化DOM操作，像操作css一样操作DOM
            2 直接通过选择器设置样式
            3 简化JS事件操作
            4 采用链式调用操作JS节点
            --------------------
            5 Ajax技术更加完善
            6 提供各种便捷的动画处理
            7 基于jquery的插件使用更便捷
            8 可能通过jquery自定义插件
        1 引入jquery 文件
            <script src=‘‘></script>
        2 如果想要使用jQuery语法，必须将文件引入操作放在代码前面
    2  使用jQuety
        1 jquery对象：实际上是对原生的js对象进行封装，封装之后可以使用jQuery提供的方法
            注意：
            1 jQuery对象可以使用jQuery提供的方法，原生js对象可以使用原生JS方法，方法不能混用
            2 jQuery对象和原生JS对象可以共存，也可以互相转换
        2.工厂函数 $()
            jQuery对象可以使用 jQuery或者 $表示
            使用：
                $(‘param‘)
        3 原生对象与jquery对象互相转换
            1 DOM -> jquery
                var h1 = document.get....
                var $h1 = $(h1);
            2 jquery -> DOM
                var h1 = $h1[0];
                var h1 = %h1.get(0);
    3 jQuery选择器
        1 根据提供的选择器到页面获取元素，返回都是jquery对象组成的数组
        2 $(‘选择器‘);
        3 选择器分类：
            1 基础选择器
                1 id 选择器
                    $(‘#id‘);
                2 类选择器
                    $(‘.className‘);
                3 标签选择器
                    $(‘tagName‘);
                4 群组选择器
                    $(‘selector1,selector2,...‘)
            2 层级选择器
                1 后代选择器
                    $(‘selector1 selector2‘);
                2 子选择器
                    $(‘selector1>selector2‘);
                3 相邻兄弟选择器
                    $(‘selector1+selector2‘);  只匹配一个
                    匹配紧跟在seletor1后
                4 通用兄弟选择器
                    $(‘selector1~selector2‘);
                    匹配selector1 后面所有满足selector2的兄弟元素
            3 筛选选择器
                也叫过滤选择器,需要结合其他选择器使用
                1 :first
                    匹配一组元素中的第一个
                    et:        p:first
                2 :last
                    匹配一组元素中的最后一个
                    selector:last
                3 :not
                    否定筛选,将selecctor匹配的元素过滤在外，匹配其他元素
                    :not(selector)
                4 :odd
                    匹配偶数行对应的元素
                5 :even
                    匹配奇数行对应的元素
                6 ：eq(index)
                    匹配下标等于index的元素
                    et:     $(‘p:eq(3)‘).css(‘color‘,‘red‘);
                7 :lt(index)
                    匹配下标小于index的元素
                8 :gt(index)
                    匹配下标大于index的元素
            4 属性选择器
                {引用代码 
                        <h1 id="d1">一级标题</h1>
                        <p class=‘c1‘>什么鬼1</p>
                        <h2 id=‘ad2‘ class=‘d1‘>二级标题</h2>
                }
                1 根据属性名筛选元素
                    [arrtibute]
                    et:        $(‘[id]‘).css(‘color‘,‘red‘);
                2 根据属性名称和属性值筛选元素
                    [arrtibute="value"]
                    et:        $(‘[id=d1]‘).css(‘border‘,‘1px solid‘)
                3 匹配属性名以指定字符开头的元素
                    [arrtibute^=value]
                    ^ 表示以...开头
                    et:        $(‘[id^=d]‘).css(‘font-size‘,‘16px‘)
                4 匹配属性值以指定字符结尾的元素
                    [arrtibute$=value]
                    $表示以...结尾
                    et:        $(‘[class$=1]‘).css(‘font-size‘,‘32px‘)
                5 匹配属性值中包含指定字符的元素
                    [arrtibute*=value]
                    et:        $(‘[id*=d]‘).css(‘background‘,‘orange‘)
                6 匹配属性名不等于指定属性值的元素
                    [arrtibute!=value]
            5 子元素过滤选择器
                1 :first-child
                    匹配属于父元素中的第一个子元素
                2 :last-child
                    匹配父元素中最后一个子元素
                3 :nth-child()
                    匹配第n个子元素
                    et :        $(‘li:nth-child(even)‘).css(‘color‘,‘red‘)
                    将关键字或是表达式做参数传递给：nth-child()
                    关键字 或表达的值会被作为下标匹配元素
                    even 取值： 1 3 5 7 ...
                    odd   取值：0 2 4 6 ...
    4 jQuery 操作DOM
        1 内容操作
            1 html()
                设置或读取jquery中的HTML内容,类似于原生JS innerHTML
            2 text()
                设置或读取jquery对象中的文本内容，类似原生JS innerText
            3 val()
                设置或读取表单对象的value值
        2 属性操作
            1 attr()
                读取或设置jquery对象的属性
                et:
                    $(‘div‘).attr(‘class‘,‘c1‘)
            2 removeattr()
                移除指定属性
                et:
                    $(‘div‘).removeAttr(‘id‘)
        3 样式操作
            1 attr()
                为元素添加id或class属性，对应选择器样式
            2 addClass(‘类名‘)
                为元素的class属性赋值，匹配选择器样式
                注意：    
                    可以重复调用 ，为class添加属性值
                    1 $(‘p‘).addClass(‘类名1 类名2‘)
                    2   $(‘p‘).addClass(‘类名1‘)
                        $(‘p‘).addClass(‘类名2‘)
                    3 $(‘p‘).addClass(‘类名1‘).addClass(‘类名2‘)
            3 removeClass(‘‘)
                移除指定的class属性值
                参数可以省略，省略之后表示清空类选择器
            4 toggleClass()
                切换样式，给出class属性值，如果元素存在指定的类名，则移除，不存在则添加
            5 css()
                设置或读取元素的css属性
                1  css(‘width‘)
                    读取元素的宽度
                2   css(‘width‘,‘300px‘);
                    设置元素的样式
                3  css(JSon对象)
                    为元素设置一组css样式
                    css({‘color‘:‘red‘,‘width‘:‘300px‘})
        4 节点查询
            1 children() / children(‘selector‘)
                获取jquery对象的所有子元素或者获取指定选择器匹配的所有子元素
                注意：只包含直接子元素，不考虑后代子元素
            2 find(‘selector‘)
                获取满足selector的所有后代元素
            3 prev() / prev(‘selector‘)
                获取满足前一个兄弟元素或者获取前一个兄弟元素，必须满足slector
            4 next() / next(‘selector‘)
                获取后一个兄弟元素 或者 获取后一个兄弟元素，必须满足selector
            5 siblings() / siblings(‘selector‘)
                获取前后所有的兄弟元素 或者 满足selector的所有兄弟元素
            6 parent()
                获取jquery对象的父元素
        5 节点操作
            1 创建节点
                var $h1 = $(‘<h1>一级标题</h1>‘);
                var $h1_1 = $(‘<h1></h1>‘);
                h1.attr()
                h1.html()
                h1.css();
            2 添加节点
                1 以子元素的形式插入到页面中
                    1 $parent.append($h1);
                        将新创建的对象作为最后一个子元素插入
                    2 $parent.prepend($h1_1);
                        将新创建的对象作为第一个子元素添加
                2 以兄弟元素的形式插入到页面中
                    1 $obj.after($h1);
                        将新创建的对象作为$obj的下一个兄弟元素插入
                    2 $obj.before($h2);
                        将新创建的对象作为$obj的前一个兄弟元素插入
                        
                3 删除节点
                    $obj.remove()
                    移除 $obj
        6 事件操作
            1 页面加载完毕之后再执行
                原生JS：
                    window.onload = function(){};
                jquery的三种写法
                    1 $(document).ready(function(){});
                    2 $().read(function(){});
                    3 $(function(){})
                原生 onload事件与jquery的ready()方法区别：
                    1 原生的onload事件多次使用时，前面的会被覆盖不执行，需要做特殊判断和处理，而ready方法没有此问题，
                        可以重复调用多次，按顺序依次执行
                    2 原生的onload事件会等待文档中DOM树及所有资源都加载完毕之后才执行，而ready方法会等文档DOM树加载完毕后就执行
            2 jquery事件绑定
                 1 使用bind()
                    $obj.bind(‘事件函数名‘,function(){});
                    注意：省略on 前缀
                        et:
                            $(‘div‘).bind(‘click‘,function(){})
                2 使用事件函数
                     $obj.事件名称(function(){});
                     注意：省略on前缀
                     et:
                        $(‘div‘).click(function(){});
            3 事件对象及属性
                1 获取事件对象与原生方法一致
                    都是以参数形式自动传入
                    $(‘div‘).click(function(evt){console.log(evt)})
                2 事件对象的属性保持一致
                    target
                    offsetX
                    ...
            4 this 对象
                当前函数或方法的调用对象