前端类库之jQuery

jQuery简介

        宗旨:Write less, do more.
        内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器
        版本:1.x 2.x 3.x  # 可以使用3.x最新版
        第三方的类库:使用它需要提前导入  # 很容易遗忘


        jQuery下载
            压缩之后的版本将很多变量名全部使用英文字母代替了
        本地导入
            缺点在于需要提前下载文件
            优点在于不会受到网络的影响
        CDN导入
            # CDN:内容分发网络
            网站:bootcdn  jquery最好使用3.4.1版本


        基本使用
            很多时候jQuery都是一行代码搞定所有
            """
            使用jQuery需要有关键字声明
                jQuery === $
            """

基本选择器

        """
        如何通过变量名来区分指代的是何种对象
            eg:
                如果是原生的js对象
                    var pEle = ...
                如果是jQuery的对象
                    var $pEle = ...
        """
        $('#d1')  # document.getElementById('d1')
        $('.c1')  # document.getElementsByClassName('d1')
        $('p')  # document.getElementsByTagName('p')
        $('div.c1')  # 查找class含有c1的div标签
        $("#d1, .c1, p")  # 并列查找
        $("x y")	// x的所有后代y（子子孙孙）
        $("x > y")	// x的所有儿子y（儿子）
        $("x + y")	// 找到所有紧挨在x后面的y
        $("x ~ y")	// x之后所有的兄弟y

基本筛选器

        :first // 第一个
        :last // 最后一个
        :eq(index)// 索引等于index的那个元素
        :even // 匹配所有索引值为偶数的元素，从 0 开始计数
        :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
        :gt(index)// 匹配所有大于给定索引值的元素
        :lt(index)// 匹配所有小于给定索引值的元素
        :not(元素选择器)// 移除所有满足not条件的标签
        :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

        $('[name]')
        $('[name="jason"]')
        $('input[name="jason"]')

表单筛选器

    $(':text')  # 查找属性值是text的form表单内的标签
    $(':checked')  # 会连同option默认的selected一起找到

筛选器方法

        """
        使用原生js代码批量查找到标签之后  结果是一个数组
        需要索引取值之后才可以调用标签的一些方法

        使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
        不需要索引取值 就可以直接调用封装的方法

        两者对象的转换
            js对象转jQuery对象
                $(js对象)
            jQuery对象转jd对象
                jQuery对象索引取值
        """
        .next()  下一个
        .nextAll()  后边所有
        .nextUntil()  往后数直到哪一个为止
        .prev()  上一个
        .prevAll()
        .prevUntil()
        .parent()  父级
        .parents()  所有父级
        .parentsUntil()
        .children()  儿子
        .siblings()  兄弟
        .find()  查找

节点操作

        # 样式类操作
            addClass()  # classList.add()
            removeClass()  # classList.remove()
            hasClass()  # classList.contains()
            toggleClass()  # classList.toggle()

        # 样式操作
            css('属性名','属性值')

        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
              $("#b2").removeClass("hide");
            }else {
              $("#b2").addClass("hide");
            }
          });

        # 文本操作
            text()  # innerText
            html()  # innerHTML
            val()  # value
            jQuery对象先转js对象之后.files
            '''括号内不写参数就是获取值 写参数就是设置值'''

        # 属性操作
            attr()  # setAttribute()
            '''适用于属性为静态的情况(不经常修改动态变化的)'''
            prop()
                $($(':checkbox')[1]).prop('checked',true)
            """适用于动态变化的情况 尤其是选择类标签"""


        # 文档处理
            append()  # 内部的尾部追加元素
            prepend()  # 内部的头部追加元素
            after()  # 同级别下面添加元素
            before()  # 同级别上面添加元素
            remove()  # 移除当前元素
            empty()  # 清空当前元素内部所有的数据
            clone()  # 克隆标签 括号内可以加布尔值来明确是否克隆事件

事件

        绑定事件的两种方式
            方式1
                jQuery对象.事件名(function(){})
                    $('#d1').click(function(){alert(123)})
            方式2
                jQuery对象.on('事件名',function(){})
                    $('#d1').on('click',function(){alert(123)})
        """
        有时候绑定事件可能没有效果 这个时候可以考虑切换绑定方式
            方式1不行就方式2
            方式2不行就方式1
        """

        click(function(){...})
        hover(function(){...})
        blur(function(){...})
        focus(function(){...})
        change(function(){...})
        keyup(function(){...})

阻止后续事件执行

        $('#d1').click(function (e) {
                    alert(123)
                    // 1.阻止该标签后续事件的执行 方式1   推荐
                    // return false
                    // 2.阻止该标签后续事件的执行 方式2   了解
                    // e.preventDefault()
                })

事件冒泡

        $('div').click(function (e) {
                alert('div')
            })
        $('p').click(function (e) {
                alert('p')
                // 阻止事件冒泡的方式1
                // return false
                // 阻止事件冒泡的方式2
                // e.stopPropagation()
            })
        $('span').click(function (e) {
                alert('span')
            })

文档加载

        // 原生js文档加载方式
        window.onload = function () {}
        // jQuery文档加载方式01
        $(document).ready(function () {})
        // jQuery文档加载方式02
        $(function(){})

事件委托

        // 将body内部所有的点击事件委托给button按钮执行
        $('body').on('click','button',function () {
        // 创建一个button标签
        var btnEle = document.createElement('button')
        // 设置内部文本
        btnEle.innerText = '点我'
        // 将button标签添加到body内部
        $('body').append(btnEle)
        })

动画效果

          $("#d1").on("click", function () {
            var newI = document.createElement("i");
            newI.innerText = "+1";
            $(this).append(newI);
            $(this).children("i").animate({
              opacity: 0
            }, 1000)
          })

__EOF__

本文作者：祈安
本文链接：https://www.cnblogs.com/jyc666/p/15897627.html
关于博主：没有收拾残局的能力，就别放纵善变的情绪
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！