jQuery

yx-02

已于 2022-03-03 20:24:48 修改

阅读量425

点赞数

CC 4.0 BY-SA版权

文章标签： jquery javascript 前端

于 2022-02-16 21:30:12 首次发布

本文链接：https://blog.youkuaiyun.com/YANG_helloworld/article/details/122971755

一 jQuery的基本介绍

        1, 概念
            jQuery是前端的一个类库, 本质上是一个js文件, 其中定义了很多的函数方法, 通过导入jQuery文件可以调用其中封装定义的函数.
            实际项目中应用的不多.

        2, 网站
            官网 https://jquery.com
            中文 https://jquery.cuishifeng.cn/

        3, 外部js文件
            jQuery.min.js
                压缩的jQuery文件

            jQuery.js
                原生的jQuery文件

            要导入jQuery必须导入jQuery文件.

二 jQuery_选择器

1, jQuery函数的调用

-----需要导入外部js文件 , 通过关键词$ 或者 jQuery 来调用 jQuery外部文件中的函数方法.

2, jQuery的选择器
是jQuery获取标签对象的语法

$(‘条件’) jQuery(‘条件’)

支持的条件:

       和querySelector一样, 支持所有的html,css的语法形式
                     '标签名称'
                     '#id'
                     '.class'
                     '[属性="属性值"]'
                     'ul>li'
                     'ul>li:first-child'

       jQuery特有的条件
                    'ul>li:first()'
                        获取li中的第一个
                        
                    'ul>li:last()'
                        获取li中最后一个


                    'ul>li:eq(索引下标)'
                        从0开始按照索引下标获取li标签

                    'ul>li:odd()'
                        奇数索引下标 偶数个数

                    'ul>li:even()'
                       按照偶数索引下标 获取li标签, 获取的是奇数个数的li标签.

获取结果
是一个jQuery特有的伪数组
只能支持jQuery的函数方法操作, JavaScript数组的操作方法\DOM操作都不支持

jQuery伪数组中存储的是js的标签对象, jQuery伪数组[索引下标] 获取的是 js标签对象, 支持js的DOM操作

js的标签对象使用$() 或者 jQuery() 包裹
就转化为jQuery伪数组, 可以使用jQuery的函数方法操作

        总结:
           1, 选择器是jQuery获取标签对象的方法
           2, 获取的结果是jQuery伪数组
           3, jQuery伪数组只支持jQuery的函数操作, 不支持js的操作方法.
           4, jQuery伪数组中 存储的是js标签对象, 通过jQuery伪数组[索引下标] 可以获取一个独立的js标签对象, 独立的js标签对象支持js的操作语法.

           5, js标签对象通过 $() 或者 jQuery() 包裹就转化为jQuery伪数组,就支持jQuery的操作语法.

           6, jQuery选择器的语法:
              支持所有的html和css语法形式, 有jQuery特有的选择器语法

              $('ul>li:eq(索引下标)')
                  按照索引下标获取指定的标签对象

              $('ul>li:first()')
                  第一个
              $('ul>li:odd()')
                  奇数索引下标 偶数个数

              $('ul>li:even()')
                  偶数索引下标 奇数个数

三 jQuery的筛选器

在jQuery选择器获取的结果基础上, 对jQuery选择器的获取结果再次进行筛选.

jQuery筛选器的原理:
在jQuery编程中, 有一种编程方式称为链式编程, 选择器和筛选器配合可以完成链式编程

jQuery的筛选器语法:

            $().first()
                获取第一个标签对象

            $().last()
                获取 最后一个 标签对象

            $().eq(索引下标)
                按照索引下标查询

            $().prev()
                获取 上一个 标签对象

            $().next()
                获取 下一个 标签对象

            $().prevAll()
                获取 上所有 标签对象

            $().nextAll()
                获取 下所有 标签对象

            $().siblings()
                获取 所有 兄弟标签对象

            $().parent()
                获取 直接 父级标签对象

            $().parents()
                获取 所有 父级标签对象

            $().find(条件)
                按照条件查询

            $().index()
                获取 标签对象的索引下标

            $().end()
                返回上一个操作对象

四 jQuery标签属性的操作方法

1, 专门操作布尔属性的函数方法:

           $().prop(属性, 属性值);
                设定属性值

            $().prop(属性);
                获取属性值

            $().removeProp(属性)
                删除属性

2, 操作其他属性

           $().attr(属性 , 属性值);
               设定属性值

            $().attr(属性)
                获取属性值

            $().removeAttr(属性)
                删除属性

五 query 标签class选择器操作

jQuery操作语法:

            $().addClass()
               新增

            $().removeClass()
               删除

            $().hasClass()
               判断有没有
                  有  true
                  没有 false

            $().toggleClass()
               切换

附加:

    js操作语法:
           
           标签对象.classList.add()
              新增

           标签对象.classList.remove()
              删除

           标签对象.classList.toggle()
              切换

           标签对象.classList.replace(旧的 , 新的)
             替换

六 jQuery 标签内容和数据的操作

jQuery

$().html()
$().text()
$().val()

  附加:  
   js操作标签内容和数据
           标签对象.innerHTML
           标签对象.innerText

           标签对象.value

七标签css样式的操作

语法形式1:

    一次只设定一个css属性和属性值
         $().css('属性','属性值');

语法形式2:

     一次设定多个属性属性值
         $().css({属性1:属性值1 , 属性2:属性值2, 属性3:属性值3 ...})

八 jQuery_标签的占位

       $().height()    $().width()  
              内容宽高

       $().innerHeight()       $().innerWidth()
              内容+padding

       $().outerHeight()     $().outerWidth()
         内容+padding+border+margin

       $().outerHeight(true)     $().outerWidth(true)
         内容 + padding + border +margin (display:none 的标签仍然可以获取占位数据)

       $().offset()
        获取标签 和 html页面的间距

        执行结果是一个对象
            left属性 存储左间距
            top属性 存储上间距

        display:none 的标签不能获取间距.

九 jQuery的隐式迭代

1, 针对jQuery伪数组的设定操作
自动循环遍历伪数组中的每一个标签对象, 对每一个标签对象执行需要的设定操作.

2, 针对jQuery伪数组的获取操作
只获取第一个标签的数据数值, 不会获取每一个标签的数据数值

十 jQuery的循环遍历

   $().each(function(key , item){
          参数1  索引下标
          参数2  数组的数据数值

          参数2 以js标签对象形式 存储的标签对象, 不支持jQuery的操作函数, 支持js的DOM操作

          可以$(item) 转化为jQuery伪数组, 再使用jQuery函数执行操作.
      })

十一 jQuery的ajax请求

在jQuery中封装好了ajax请求, 只需要我们调用函数执行就可以了

jQuery封装的ajax请求函数

    $.get(参数1 , 参数2 , 参数3 , 参数4)

             参数1  请求的url地址
             参数2  请求携带的参数, 可以是对象形式, 可以是字符串形式
             参数3  请求成功执行的函数程序
             参数4  设定的响应体格式

             只能执行get请求方式

    $.post(参数1 , 参数2 , 参数3, 参数4)
             参数1   请求的url地址
             参数2   请求携带的参数, 可以是对象形式, 也可以是字符串形式
             参数3   请求成功执行的函数程序
             参数4   设定的响应体格式

             只能执行post请求方式

     $.ajax({ 
                url :  请求的url地址  ,
                type :  请求方式  ,
                data :   携带参数数据可以是对象,可以是字符串  ,
                dataType : 响应体格式  ,
                success  :   请求成功执行的函数程序
                error   :  请求失败执行的函数程序

              ......

           })

十二 jQuery的跨域问题

proxy

服务器代理, 只要你配置好服务器代理 , jQuery直接使用代理名称 , 就可以完成跨域请求.

也就是只要配置好服务器代理, jQuery的proxy 和原生js的proxy是一样的程序过程

jsonp

1, 不用专门的定义一个函数, jQuery使用success定义的函数作为后端程序调用的函数

2, 不用定义script标签 , 设定好相关参数, jQuery来执行定义script标签

3, data设定携带参数 ,

data中设定携带的参数, 必须要删除 cb=函数名称 , 不是在data中定义传参函数名称键值对 , 通过专门的属性来设定传参函数名称键值对

4, 通过dataType 和jsonp 两个属性来设定传参函数名称键值对

5, 还会给success定义的匿名函数定义一个函数名称, 也就是传参函数名称键值对的键值

6, jsonp:‘cb’, 告诉jQuery程序, 后端程序定义的传参函数名称键值对的键名, 也就是告诉jQuery程序使用cb键名传参jQuery定义的函数名称

十三 jQuery的深浅拷贝

jQuery中的深浅拷贝比较特殊

    1, jQuery中没有封装传统意义上的浅拷贝的函数

    2, jQuery中封装的 $.extend() 默认执行的是就是传统意义上的深拷贝

    3, jQuery中的所谓的浅拷贝
             指的是 一维数据深拷贝 多维数据浅拷贝
             
    4, jQuery中 深浅拷贝的语法形式

          const 变量 = 数组/对象 ;
           $.extend(变量 , 原始数组/对象) ;
                 浅拷贝
                   一维数组深拷贝  多维数组 浅拷贝

          $.extend(true, 变量 , 原始数组/对象) ;
                 深拷贝
                  一维数组,多维数组都是深拷贝

       //原始数组
         const arr1 = ['北京' , '上海' , '广州' , '重庆' , '天津' , [100,200,300,400] , {name:'张三' , age:18 , sex:'男'}];

         //jQuery的浅拷贝
         //创建一个arr2
         const arr2 = [];
         //将arr1中的数据 按照jQuery的浅拷贝语法 复制拷贝到arr2中
         //执行的是jQuery浅拷贝  (一维深拷贝, 多维浅拷贝)
         $.extend(arr2 , arr1) ;   

         //创建一个arr3
         const arr3 = [];
         //将arr1中的数据 按照jQuery的深拷贝语法 复制拷贝到arr3中
         //执行的是jQuery的深拷贝
         $.extend(true , arr3, arr1);
         arr1[0] = '深圳';
         arr1[5][0] = 9000;
         arr1[6][0] = '王傻子';

         console.log(arr1);
         console.log(arr2);
         console.log(arr3);

十四 jQuery的事件绑定语法

1, jQuery伪数组支持的语法形式 (只能是jQuery伪数组支持的事件类型)

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

2,jQuery伪数组不支持的语法形式(就是jQuery不支持的事件类型可以用以下方式去绑定), 也就是支持所有事件类型的绑定

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

        //jQuery伪数组支持的语法形式
         $('div').click(function(){
             console.log(111);
         })

         $('div').on('click', function(){
             console.log(333);
         })
         

         //jQuery伪数组不支持的语法形式
         console.log($('input'));
         $('input').on('input' , function(){
             console.log(555);
         })

十五 jQuery的事件委托

$().on(事件类型 , ‘判断条件’ , 事件处理函数)
给标签中包含的后代标签进行判断 , 符合判断条件的标签添加事件处理函数

          条件是HTML ,css 支持的所有语法形式
          jQuery获取 标签对象(就是符合html, css 支持的所有语法形式的标签对象)

        //  jQuery的事件委托
        //给div标签里面的span标签点击事件
        $('div').on('click' , 'span' , function(){
            console.log(111);
        })

        //给div标签里面的类名是h1的标签添加点击事件
        $('div').on('click' , '.h1' , function(){
            console.log(222);
        }) 

        //不能通过事件委托的语法形式 给div标签本身 添加点击事件
        $('div').on('click' , 'div' , function(){
            console.log(333);
        })

十六 jQuery的特殊事件

      $().hover(参数1 , 参数2) ;
            参数1 鼠标移入的事件处理函数
            参数2 鼠标移出的事件处理函数

            绑定的事件类型是
               mouseenter 和 mouseleave

       $().one(事件类型 , 事件处理函数) ;
            绑定的事件类型 和事件处理函数 只会触发执行一次

       $().trigger(事件类型) ;
           事件的发布
            标签指定时间类型的事件处理函数
            会 直接重复执行一次

       $(window).ready(function(){})
       $(function(){ })
          jQuery的加载事件
          当html所有的标签加载完毕, 才会执行定义的函数程序
          例如 img标签加载完毕, jQuery加载事件就会触发执行

       window.addEventListener('load' , function(){ })
         js的加载事件
         当html所有的标签 和 标签内容 加载完毕后才会执行定义的函数程序
         例如: img标签和图片内容都加载完毕, window加载事件才会触发执行.

十七 jQuery的事件删除

        $().off()
           删除所有类型的所有事件处理函数

        $().off(事件类型)
           删除指定事件类型的事件处理函数

        $().off(事件类型 , 事件处理函数)
           删除指定事件类型的指定的事件处理函数
           只能删除绑定函数名称的事件.

十八 jQuery的节点操作

   1, 创建节点:
          $('新增的标签名称')
              可以设定标签内容, 标签属性等

   2, 设定节点:
          可以使用链式编程 使用jQuery语法
          设定标签节点的css样式 , 事件等

   3, 写入节点:
           因为要满足jQuery的链式编程, 写入的语法形式比较多

          (1) 父级标签中写入子级标签

             父级的结束位置, 写入新的子级节点
                     $(父级标签).append(节点标签)
                     节点标签.appendTo($(父级标签))

             父级标签的起始位置 写入新的子级标签
                     $(父级标签).prepend(节点标签)
                     节点标签.prependTo($(父级标签))

          (2) 同级标签前后写入新节点
                同级标签之前写入
                    $(同级标签).before(节点标签)
                    节点标签.insertBefore($(同级标签))

               同级标签之后写入
                     $(同级标签).after(节点标签)
                     节点标签.insertBefore($(同级标签))


      4,  删除标签
                   $().remove()
                        删除节点本身

                   $().empty()
                         删除节点内容

十九 jQuery的钩子函数

所谓的钩子函数就是和异步程序相互挂钩 , 异步程序执行到不同步骤不同状态时触发的函数程序 .

jQuery中和ajax异步请求相关的钩子函数

$(window).ajaxStart(函数程序)
  在所有的ajax程序触发前执行
  多个ajax程序只会触发一次

$(window).ajaxSend(函数程序)
   在每个ajax程序发送之前执行
   多个ajax程序触发执行多次

$(window).ajaxSuccess(函数程序)
   在每个ajax程序发送成功之后执行, 
   多个ajax程序触发执行多次

$(window).ajaxError(函数程序)
   在每个ajax程序发送失败之后执行
   多个ajax程序触发执行多次

$(window).ajaxComplete(函数程序)
   在每个ajax程序发送结束之后执行
   多个ajax程序触发执行多次

$(window).ajaxStop(函数程序)
   在所有的ajax程序请求之后执行
   多个ajax程序 只会触发一次

    <button>请求</button>

    <script src="../26/jquery.min.js"></script>

    <script>
        //定义全局函数/钩子函数

        //所有的请求之前触发
        $(window).ajaxStart(function(){console.log('有ajax请求, 准备要执行了')}) ;

        // 每个 ajax请求 正式发送之前 触发
        $(window).ajaxSend( function(){ console.log( '有ajax请求 已经发送了' ) } ) ;

        // 每个 ajax请求 发送成功之后 触发
        $(window).ajaxSuccess( function(){ console.log( '有ajax请求 发送成功了' ) } ) ;

        // 每个 ajax请求 发送失败之后 触发
        $(window).ajaxError( function(){ console.log( '有ajax请求 发送失败了' ) } ) ;

        // 每个 ajax请求 发送结束之后 触发
        $(window).ajaxComplete( function(){ console.log( '有ajax请求 发送结束了' ) } ) ;       

        // 所有 ajax请求 发送结束之后 触发
        $(window).ajaxStop( function(){ console.log( '所有ajax请求 发送都结束了' ) } ) ;  


        $('button').click(function(){
            //第一个请求
            $.ajax({
                url:'http://localhost:8888/test/second',
                type:'get' ,
                success: function(response){ console.log(response)}
            })

             // 第二个请求
             $.ajax({
                url:'http://lohost:8888/test/third',
                type:'get',
                data:{name:'张三' , age:18} ,
                success:function(response){ console.log( response ) }
            })

            // 第三个请求
            $.ajax({
                url:'http://localhost:8888/test/fourth',
                type:'post',
                data:{name:'李四' , age:50} ,
                success:function(response){ console.log( response ) }
            })
        })
    </script>

二十 jQuery的动画

jQuery的动画

jQuery动画函数的原理和 move()运动函数原理相同 , 都是通过定时器将css样式改变逐步完成 .

jQuery的动画介绍

       隐藏显示
            $().show()   显示
            $().hide()   隐藏
            $().toggle()  切换
                参数1:  时间   单位毫秒
                参数2:  方式    liner线性
                参数3:   函数   运动结束执行的回调函数

        下拉上卷
            $().slideDown()   显示
            $().slideUp()     隐藏
            $().slideToggle()   切换
                 参数1:  时间   毫秒
                 参数2:  方式    linear线性
                 参数3:  函数    运动结束后执行的回调函数

        渐隐渐现
            $().fadeIn()    显示
            $().fadeOut()   隐藏
            $().fadeToggle() 切换
                参数1: 时间 单位毫秒
                参数2: 方式 linear线性
                参数3: 函数 运动结束执行的回调函数
    
      $().fadeTo()  切换到指定透明度
          参数1 时间 单位 毫秒
          参数2 透明度
          参数3 方式  默认linear线性
          参数4 函数 运动结束后执行的回调函数
              

        自定义动画
            $().animate()
                参数1:  运动的属性  {top:100 ,left:100}
                参数2:  运动的时间  单位毫秒
                参数3:  运动的方式  linear线性
                参数4:  运动结束的回调函数


        结束动画
            $().stop()
                   在当前运动的当前位置 立即终止没有执行完毕的运动, 在当前位置 触发执行 新的位置
            $().finish()
                  当前位置 立即终止没有执行完毕的运动, 在上一个运动的结束位置 触发执行 新的运动.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 吸顶div -->
    <div class="searchTop">我是吸顶的搜索栏</div>


    <!-- 右侧侧边栏 -->
    <div class="sidebar">
        <ul>
            <li name="other" class="active">京东秒杀</li>
            <li name="other">今日特价</li>
            <li name="other">品牌闪购</li>
            <li name="other">发现好货</li>
            <li name="other">新品首发</li>
        </ul>
    </div>

    <!-- 楼层导航内容 -->
    <div class="container">
        <!-- 页面顶部内容 -->
        <div class="header">页面的顶部导航栏</div>

        <!-- 页面顶部的搜索栏 -->
        <div class="search">我是头部的搜索栏</div>

        <!-- 页面的轮播图 -->
        <div class="banner">我是轮播图内容</div>

        <!-- 楼层导航内容 -->
        <div class="storey">
            <ul>
                <li>
                    <h3>京东秒杀区域</h3>
                    <div>京东秒杀区域内容</div>
                </li>

            </ul>
        </div>

        <!-- 页面底部内容 -->
        <div class="footer">我是页面底部内容</div>
    </div>

    <script src="../26/jquery.min.js"></script>

    <script>
        //页面滚动监听事件
        $(window).scroll(function(){
            //当页面上卷至指定高度时 , 让吸顶div和侧边栏div显示
            if($(window).scrollTop() >500){
                //以运动方式显示
                $('.searchTop').stop().slideDown(1000) ;
                $('.sidebar').stop().fadeIn(1000) ;
            }else{
                //以运动方式隐藏
                $('.searchTop').stop().slideUp(1000);
                $('.sidebar').stop().fadeOut(1000);
            }

            //循环遍历 给所有的楼层li添加判断
            $('.storey ul li').each(function(key , item){
                //如果上卷高度+预留高度 > 楼层li距离页面顶部间距
                if($(window).scrollTop() + 500 > $(item).offset().top){
                    //给楼层li对应的侧边栏li添加css
                    //其他侧边栏li清除css
                    $('.sidebar li').removeClass('active').eq(key).addClass('active');
                }
            })
        })
        

        //侧边栏点击事件
        $('.sidebar li').click(function(e){
            if($(e.target).attr('name') === 'back'){
                //点击标签的那么属性是back , 点击都是返回顶部标签
                //页面上卷高度为0
                //通过运动完成
                $('html').animate({scrollTop:0} , 1000);
            }else if($(e.target).attr('name') === 'other'){
                //点击的是侧边栏li标签
                //页面上卷高度是点击的侧边栏li对应的楼层li距离页面顶部的间距
                //按照点击的侧边栏li的索引下标查询楼层导航li获取顶部间距
                $('html').animate({scrollTop:$('.storey ul li').eq($(e.target).index()).offset().top -300} , 1000);
            }
        })
    </script>
    
</body>
</html>