前端学习笔记（七）：JQ学习及其常用的插件

★追梦赤子心★

已于 2023-03-31 11:00:40 修改

阅读量482

点赞数 6

文章标签： javascript 学习 css

于 2023-03-06 14:45:03 首次发布

本文链接：https://blog.csdn.net/flytrybest/article/details/128279357

版权

文章目录

1. 初识JQ-元素操作

JQuery是JavaScript类库，使用它封装的方法可以极大的提升开发效率
首先下载jq的文件包：网址：https://jquery.com/download/ ，然后导入即可

 <script src="./jquery/jquery-3.5.1.min.js"></script>

引入jq后会多一个 $ 全局函数，可以用来进行选择元素，返回选中的所有元素，使用为 $ (‘选择器’)，通常声明的jq对象前最好带上一个$ 符号。
调用 $ 方法传入选择器或dom元素获取到jQuery对象,注意我们之前使用document获取元素的是DOM对象和jq对象不能混着使用，但是可以，将dom对象传入$ 中将其转为jq对象进行使用。
调用事件的方法：里面调用this获得的就是触发事件的 dom 元素，因此后续可以使用$(this)给该元素添加特定的事件

$('选择器').事件名(function () {         // 逻辑....       })

链式编程 通过点(.) 把多个操作(方法)连续的写下去, 形成和链子一样的结构，因为大部分 jQ对象方法的返回值还是同一个 jQ对象如下述的代码：

$('.text').focus(回调函数).blur(回调函数)

jQuery 中封装了设置和读取网页元素文本内容的方法，设置时（可以使用链式编程）: html 方法解析标签 , text 不解析标签取值时（不可以使用链式编程，返回的是字符串）: html 方法获取标签 , text 只获取文本
注意伪类选择器first，last要精确的匹配到所需的元素，不是指的后代的意思，jq中提供了便捷的选择方式如下，eq的索引是从0开始，下面三个返回的都是jq对象：

//  匹配的第一个元素       
.first()       
// 匹配的最后一个元素       
.last()       
// 根据索引匹配元素       
.eq(索引)

jq操纵样式的方式，数值类如果省略单位默认时px：

// 1. 键值对设置       .css('样式名','值')       
.css('backgroundColor','pink')       
.css('color','red')       
.css('width','200px')       
.css('height',200)
// 2. 对象方式设置       .css(对象)       
.css({         
backgroundColor:'pink',         
color:'red',       
width:'200px',         
height:200       })
// 3. 样式获取       .css('样式名')       
.css('width')

jq操纵属性如：href，src，也可以操纵自定义的属性，属性不是样式，不要搞混了：

// 1.赋值 .attr('属性名','值') 
// 2.取值 .attr('属性名') 
// 3.删除属性 .removeAttr('属性名')

输入框value值的操作为$(‘选择器’).val(),里面传入参数表示赋值，不传入参数表示取值
jq的其它常用的查找方法如下，find方法方法需要传入选择器 children 、sibings 方法支持传入选择器：

  // 1. 父元素（只招亲爹）       
  .parent()       
  // 2. 子元素        
  .children()       
  // 3. 兄弟元素（不包含自己）       
  .siblings()       
  // 4. 后代元素       
  .find('选择器')

jq对类名的操作常用的如下：

    // 1. 添加类名     .addClass('类名')     
    // 2. 移除类名     .removeClass('类名')    
     // 3. 判断类名 返回布尔值     .hasClass('类名')     
     // 4. 切换类名     .toggleClass('类名')

因为jq中并没有对所有的事件都有对应的函数，如input，因此jq提供一个通用的绑定事件的方法：

// 1. 注册事件 .on('事件名', function(){}) 
// 2. 移除指定事件 .off('事件名') 
// 3. 移除所有事件 .off() 
// 4. 注册一次性事件 .one('事件名', function(){})

获取焦点和失去焦点只能给输入框或者文本域添加，不能给div盒子添加。
jq触发事件的方式，自定义的事件只能用trigger触发，trigger也可以触发原生的事件：

// 1. 直接触发 .事件名() 
// 2. trigger触发 .trigger('事件名') 
// 3. 触发自定义事件 .trigger('自定义事件') 
// 4. 注册自定义事件 .on('自定义事件',function(){})，类似上述14条的用法

jq给window绑定事件如下所示，注意括号里面不能加引号，不然就变成了选择器：

// 滚动       
$(window).scroll(function () {})      
//  点击       
$(window).click(function () {})

jq获取元素的位置，offset参照html标签 position参照离他最近有定位的祖先元素，offset以内容开始，如果元素有内边距，计算距离的时候会包阔内边距，position是不计算元素内边距，直接看整个元素的距离。

    // 取值       $('选择器').offset()      
    // 取值       $('选择器').position()

jq获取页面滚动的距离，获取页面的滚动距离里面是html，如果添加滚动事件，注意是给window添加的！！：

// 取值       $('选择器').scrollLeft()       $('选择器').scrollTop()       
// 赋值       $('选择器').scrollLeft(值)       $('选择器').scrollTop(值)

2. 设置动画效果

通过jQuery以动画的方式切换元素的显示&隐藏，其本质是控制display属性，括号里面的时间单位是毫秒，可以不加单位：

      // 显示       $('选择器').show(持续时间)       
      // 隐藏       $('选择器').hide(持续时间)       /
      // 显示&隐藏       $('选择器').toggle(持续时间)

通过jQuery以淡入&淡出的方式切换元素的显示隐藏,持续时间单位是毫秒，淡入淡出效果是通过修改元素的opactity，最终还是实现display改变的效果。元素本身的尺寸不会变化

// 淡入       $('选择器').fadeIn(持续时间)       
// 淡出       $('选择器').fadeOut(持续时间)       
// 淡入&淡出       $('选择器').fadeToggle(持续时间)

通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏，单位也是毫秒，最终实现的也是修改的display属性**！！！若想实现动画从无到有的动画效果，记得给初始的值设置display：none！！！**：

 // 展开       $('选择器').slideDown(持续时间)       
 // 收起       $('选择器').slideUp(持续时间)       
 // 展开&收起       $('选择器').slideToggle(持续时间)

上述的三个基本动画都会改变使得元素隐藏起来，并且不占位置，并且返回的都是当前的jq对象，因为最后display的属性会发生变化，因此，无需特地再设置display属性
通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放，停止动画的方式如下【当同时依次添加多个动画时候才会有队列才有效】：

// 停止当前动画（后面队列里的动画依然会执行）       $('选择器').stop()      
// 清空队列 在动画当前状态代码停止       $('选择器').stop(true)       
// 清空队列 直接到当前动画的结束状态后代码停止       $('选择器').stop(true,true)

自定义动画,注意仅仅支持非数值的样式动画，对于背景颜色等就不支持，注意如果样式里面有-，要用驼峰。

$('选择器').animate({         
width: 100,         
height: '100%',        
margin: '100px',        
  ...
  },持续毫秒数)

3. 设置轮播效果

jq插入节点的方式，可以新增节点或者改变节点位置，新增插入，参数通常是引号包含的html代码或者dom元素，移动节点的位置，参数是要移动的节点的jq对象或者dom对象：

    // 4个方法参数一样  位置不同 ，里面的参数可以是    
     $('父元素选择器').append(参数)   // 父元素结尾    
     $('父元素选择器').prepend(参数)  // 父元素开头 （注意选择的是父元素）  
     $('兄弟元素选择器').before(参数) // 兄弟元素前面     
     $('兄弟元素选择器').after(参数) // 兄弟元素后面

动画的回调函数，回调函数会在动画执行完毕时立刻执行，回调函数中的this是执行动画的dom元素，animate里面属性是多个的时候注意加上{}：

      $('选择器').基础动画方法(回调函数)
      $('选择器').基础动画方法(持续时间, 回调函数)
      $('选择器').animate(属性, 回调函数)
      $('选择器').animate(属性, 持续时间, 回调函数)

jQuery 不仅可以设置动画执行的速度，还能在动画执行前设置一定的延时，时间单位是毫秒，每个延时作用于其后面跟着的动画：

    $('选择器').delay(延迟时间).动画方法()
    $('选择器').delay(延迟时间).动画方法().delay(延迟时间).动画方法()

获取尺寸：

      $('选择器').width() // 内容宽度
      $('选择器').height() // 内容高度
      $('选择器').innerWidth() // 内容宽度 + 内边距
      $('选择器').innerHeight() // 内容高度 + 内边距
      $('选择器').outerWidth() // 内容宽度 + 内边距 + 边框
      $('选择器').outerHeight() // 内容高度 + 内边距 + 边框
      $('选择器').outerWidth(true) // 内容宽度 + 内边距 + 边框 + 外边距（即整个盒子）
      $('选择器').outerHeight(true) // 内容高度 + 内边距 + 边框 + 外边距

轮播向下滚动实现，依次把子元素中的最后一个添加到第一个盒子的前面，然后修改定位，可以使用动画效果。下面是一个上下滚动的代码的示例：

 <div class="outer">
          <div class="wbdesc">
            <div class="wblist"> </div>
            <div class="wblist"></div>
            <div class="wblist"></div>
          </div>
        </div>

  <script>
  function auto() {
      let $last = $('.wblist').last()
      $('.wbdesc').prepend($last)
      let height = $last.outerHeight(true)
      $('.wbdesc').css('top', -height)
      $('.wbdesc').delay(2000).animate({ 'top': 0 }, function () {
        auto()//动画执行完成后执行该函数
      })
    }
    auto()
   </script>

4. 事件参数与事件委托

jQuery已经处理好了事件参数的兼容性，用法和原生js一样（如事件冒泡，阻止事件默认参数等）

// 定义了事件参数   
$('选择器').事件(function (event) {})

上述删除元素结点的方法是需要找到父元素，还有更简便的是谁调用就删除谁，这个方法只有jq中才有：

	jQuery对象.remove()

事件委托，使用方法，可以用来解决动态增加后代元素的事件绑定问题，jq钟的this注意要用$包含：

   // 直接绑定
     $('选择器').on('事件名',function(){})
   // 事件委托（委托给祖先即可）
     $('祖先选择器').on('事件名', '后代选择器', function () {})

onload资源加载完后执行(包括图片、css等等），ready只需要dom元素加载完毕即可，因此ready函数会先执行

  // 原生写法
   window.onload = function () {}
  // jQ写法
   $(window).on('load', function () {})
   // 完整写法
   $(document).ready(function () {})
   // 简化写法
    $(function () {})

阻止表单提交的时候默认刷新的行为：

  $('form').submit(function (event) {
        // 第一种：阻止默认行为
        event.preventDefault()
        // 第二种：阻止默认行为（常用）
        return false
      })

jq中克隆的方式，方法返回的还是 jQuery 对象，假如原来克隆的样式被设置了display：none，在克隆的后面记得加上 .show(),让其显示出来：

      // 不带事件
      .clone()
      // 带着事件一起克隆
      .clone(true)

jQuery 封装了获取内部 dom 对象的方法，索引从 0 开始，获取到的是 dom 对象，获取到之后就可以直接去使用dom对象相关的属性

      // get方法获取
      .get(索引)
      // 中括号获取，直接在jq后加中括号
      [索引]

5. jq常用的插件（工作常用）

相关插件的文件见阶段三-jq-第三天的课程

5.1 轮播图插件

下包：把插件下载到本地
导包：先导入 jQuery , 再导入插件 , 导入css(需要的话)
用包：根据文档(说明书)使用：https://github.com/kenwheeler/slick

   <!-- 引入插件所需要的样式表 -->
   <link rel="stylesheet" href="./slick/slick.css">
   <link rel="stylesheet" href="./slick/slick-theme.css">

    <!-- 先导入 jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 在 jQuery 之后引入插件 -->
    <script src="./slic k/slick.min.js"></script>

语法：

    <div class="your-class">
      <div>轮播元素一</div>
      <div>轮播元素二</div>
      <div>轮播元素三</div>
    </div>

$('.your-class').slick({
属性名：属性值
})

常用的轮播图属性如下，默认样式不符合需求直接添加 CSS 覆盖即可，prevArrow的值可以是引号加上选择器来指代：
在这里插入图片描述

5.2 懒加载插件

懒加载：图片用到了再去加载，常见于有大量图片的网页，比如电商

 <!-- 先导入jQueery -->
  <script src="./jquery/jquery-3.5.1.js"></script>
 <!-- 再导入lazyload插件 -->
  <script src="./jquery.lazyload.min.js"></script>


使用方式，图片地址设置给 data-original：
    <img class="lazyload" data-original="./images/1.png" alt="" />
   // 找到希望懒加载的图片并调用lazyload方法
      $('.lazyload').lazyload()

官方文档:https://github.com/tuupola/lazyload/tree/1.x

5.3 全屏滚动插件

    <!-- 导入 fullpage 配套样式 -->
    <link rel="stylesheet" href="./jquery.fullpage.css" />

    <!-- 导入 jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 在 jQuery 之后导入 fullpage 插件 -->
    <script src="./fullpage/jquery.fullpage.js"></script>

每个区域必须有 section 这个类名
    <div id="fullpage">
      <div class="section">第一屏</div>
      <div class="section">第二屏</div>
      <div class="section">第三屏</div>
    </div>

   $('#fullpage').fullpage({
        ....
      })

常用的属性如下，索引可以使用e：
在这里插入图片描述
官方文档：https://github.com/alvarotrigo/fullPage.js/tree/2.9.7

5.4 选择日期插件

   <!-- 导入日期选择器的样式 -->
    <link rel="stylesheet" href="./datepicker/datepicker.css" />

    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 导入日期选择器插件 -->
    <script src="./datepicker/datepicker.js"></script>
    <!-- 导入语言包，默认显示的是英文，需要导入中文语言包
 -->
    <script src="./datepicker/i18n/datepicker.zh-CN.js"></script>
   <!-- 准备html结构 -->
    <input type="text" class="datapicker" />

      // 调用插件方法
      $('.datapicker').datepicker({
        …
      })

调用的时候常用的配置如下，导入中文包后记得还要加上language: ‘zh-CN’，不然还是没用：
在这里插入图片描述
官方文档：https://github.com/fengyuanchen/datepicker/blob/master/README.md

5.5 表单验证插件

<!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.js"></script>
    <!-- 导入validate插件 -->
    <script src="./jquery-validate/jquery-validate.js"></script>
    $('form').validate({
        // 配置
      })

配置中常用的属性如下，注意函数要想使用的时候记得加上小括号
在这里插入图片描述
除了js中写相应的代码，还要在对应的html表单中设置自己的属性：

用法举例：

  <input
            type="password"
            name="password"
            data-required
            data-describedby="password-error"
            data-description="password"
 	data-pattern=".{6,}"
          />
          <span class="error" id="password-error"></span>

      $('form').validate({
        description: {
          password: {
            required: '密码不能为空!',
            pattern: '密码不能少于6位!',
          },
        },
        })

6. jq补充小结

解决新增的时候删除了第一个导致没办法按照样式新增的问题，可以再代码中多写一个放在第一行，样式写为display：none。如果克隆记得把其show出来。
表单序列化： $(‘form’).serialize()，表单元素要有 name 属性才可以获取到 value 值，获取到的数据格式是 name1=value1&name2=value2 的字符串，后面前后端交互的时候能够用到

('form').submit(function () {
      let data = $(this).serialize()
      console.log('data:', data)
      return false//阻止默认刷新事件
    })

自定义插件，加在jq对象的原型上面，jQuery 是 $ 的别名，写哪个都行

      jQuery.fn.extend({
        插件名 (参数) {
          // 逻辑
        }
      })
    jq对象.插件名（参数）可以进行调用

jq的工具，常用的两个如下，还有其他的了解即可，同时如果原生的js可以用，尽量可以使用原生的js，因为原生的js其实也有这种方法的（参考js语法进阶）：

       // 遍历数组
      $.each(数组, function (下标, 值) {})
      // 遍历并返回新数组
      $.map(数组,function(值){
         操作运算
        // 返回新的值，返回的是数组的形式
      })

jq的版本兼容性问题，一般没啥特别需求，使用最新的版本即可：
兼容信息查看：https://jquery.com/browser-support/
历史版本下载:https://code.jquery.com/

★追梦赤子心★

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
前端学习笔记（七）：JQ学习及其常用的插件

JQ学习笔记
复制链接

扫一扫