ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端类库之jQuery

2022-02-15 18:01:23  阅读:150  来源: 互联网

标签:类库 jQuery ... function 标签 前端 元素 对象


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(){...})

标签:类库,jQuery,...,function,标签,前端,元素,对象
来源: https://www.cnblogs.com/jyc666/p/15897627.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有