前端jquery结合confirm web前端jquery

Web前端第三阶段–JQuery

---

文章目录

• Web前端第三阶段--JQuery
• 前言

• 下载链接 官网: https://jquery.com 下载: https://jquery.com/download/

• 样式操作-style
• 点击事件
• Class操作
• 显示与隐藏
• 动画效果
• 自定义动画
• 轮播图（思路）
• 属性操作
• 评分效果案例

• 准备就序

• 委托
• 数据添加
• Ajax

---

前言

下载链接
官网: https://jquery.com
下载: https://jquery.com/download/

``

样式操作-style

$('#box span').css('color', 'red')

点击事件

$('button').click(function () {
      alert("按钮被点击")
    })

Class操作

$('div>span').click(function () {
      // 为当前项添加class
      // 原生
      // this.classList.add('active')
      console.log('this', this) //原生的DOM元素
      // 利用 $(): 把原生DOM元素 转换成 jQuery的对象类型. 就可以使用jQuery的各种方法
      console.log('$this', $(this))
      // $(this).addClass('active')

      // 排他写法: 
      // sibling: 兄弟姐妹
      $(this).addClass('active').siblings().removeClass('active')
      // 当前项.添加样式.兄弟项们.移除样式
      // siblings: 可以选中所有的兄弟元素们
    })

显示与隐藏

// 细节: 如果频繁查询的元素, 最好是查询一次 保存起来, 以后复用
    // 命名规范: 为了能够通过变量名 分辨出是 JQ对象的, 习惯上给变量添加$做前缀 -- 非强制
    const $box = $('#box')


    // 隐藏按钮:
    // 通过css方式, 准确查找到指定按钮
    $('button:nth-child(2)').click(function () {
      console.log('隐藏');
      $box.hide()
    })

    console.log($('button'))
    // JQ提供了 eq 方法. equal等于, 按照序号获取元素
    $('button').eq(0).click(function () {
      console.log('显示');
      $box.show()
    })

    // 切换: 三个按钮中最后一个
    // eq: 有两种用法.  正数代表正着数,  负数就是倒着数
    $('button').eq(-1).click(function () {
      console.log('切换');
      $box.toggle()
    })
    //next()下一个兄弟元素

动画效果

//隐藏
    // eq: 可以当伪类选择器使用
    $('button:eq(1)').click(function () {
      // slideUp: 滑动收起
      // 参数1: 动画时长. 可以写字符串 slow fast 或 数字 毫秒数
      // 参数2: 结束后的回调函数
      // $box.slideUp('slow')
      $box.slideUp(3000, () => { alert('动画完毕!') })
      // 本质: 利用 JS的定时器
    })

    // JQ提供的伪类选择器: first 选中第一个元素
    // 显示
    $('button:first').click(function () {
      console.log(111);
      $box.slideDown()
    })

    // 最后一个
    $('button:last').click(function () {
      $box.slideToggle()
    })

自定义动画

// jQuery的动画只适合做一些简单的动画效果
    // 不支持: transform 和 颜色

    // 真正做动画, 还需要用 css 实现

    $('button').eq(0).click(function () {
      // 参数1: 目标css样式
      $('#box').animate({ borderRadius: "50%", left: '100px' })

      // 支持动画队列: 多个动画依次执行
      $('#box').animate({ width: '200px', height: '200px' })

      // 参数2: 时长  单位毫秒  1000ms == 1s
      $('#box').animate({ top: '300px' }, 4000)

      // 参数3: 完成后的回调
      $('#box').animate(
        {
          left: 0,
          top: 0,
          width: '140px',
          height: '140px',
          borderRadius: 0
        },
        2000,
        () => { alert("完毕!") })
    })


    // 结束:
    $('button').eq(1).click(function () {
      // stop: 结束
      // 默认设定: 结束动画队列中正在执行的动画, 然后执行剩余的动画
      // 参数1: 是否清空动画队列. 默认 false 不清空
      // 参数2: 停止时 是否直接跳转到当前动画结尾, 默认false 不跳转
      $('#box').stop(true, true)
    })

轮播图（思路）

<script>
    // 1. 鼠标悬浮(mouseover)在小圆点上, 让其高亮, 其他的不高亮
    $('#banner span').mouseover(function () {
      // 自己.添加样式.兄弟元素们.移除样式
      $(this).addClass('active').siblings().removeClass('active')

      // 移动图片的思路: 依赖 margin-left; 需要小圆点序号; 宽度;
      // index(): 获取某个元素 在兄弟元素中的序号
      const index = $(this).index()
      console.log('index', index);
      // 图片宽度:
      const width = $('#banner img').width()
      console.log('width:', width);
      // 移动的距离: 负数 图片宽度 * 序号
      const x = -width * index + 'px'
      console.log('移动距离:', x);

      // 用动画方式切换:
      // stop: 立刻停止当前动画, 开始新的
      $('#banner>div').eq(0).stop().animate({ marginLeft: x })
    })


    // 后一页: 当前页+1
    $('button').eq(1).click(function () {
      //当前激活的小圆点
      const span_a = $('#banner span.active')
      const index = span_a.index()
      console.log('index:', index);
      // 判定: 最后一个要特殊处理, 回归到第一个
      if (index == 3) {
        // 激活第一个小圆点
        $('#banner span').eq(0).mouseover()
      } else {
        // 激活元素的 下一个元素: 触发下一个元素的 鼠标悬浮事件
        span_a.next().mouseover()
      }
    })


    // 上一页按钮的实现
    // next:下一个   prev:上一个
    $('#banner button').eq(0).click(function () {
      const span_a = $('#banner span.active')
      const index = span_a.index()

      if (index == 0) {
        // 最后一个:  兄弟元素中.倒数第一个
        span_a.siblings().eq(-1).mouseover()
      } else {
        span_a.prev().mouseover()
      }
    })


    // 自动滚动:  利用 setTimeInterval  每4000毫秒, 触发下一页按钮的点击
    setInterval(() => {
      $('#banner button').eq(1).click()
    }, 4000);

  </script>

属性操作

const $a = $('#a1')

    // prop(): 对应原生的 点语法读属性
    console.log($a.prop('href'))
    // 写入
    $a.prop('title', '欢迎来到Tmooc')

    // 提供了 data方法, 专门读取定义属性
    console.log($a.data('x'))

    // attr(): 对应原生的 getAttribute
    console.log($a.attr('href'))
    $a.attr('target', '_self')

    console.log($a.attr('data-x')) //自定义属性

评分效果案例

// 鼠标悬浮在哪个星星上, 就让其 和 其前方的所有星星都亮
    $('#box img').mouseover(function () {
      // 把图片替换
      $(this).prop('src', './imgs/star1.png')

      // 替换前方的所有图 : prevAll 上方所有的兄弟
      $(this).prevAll().prop('src', './imgs/star1.png')
      // 后方的图, 是不亮的
      $(this).nextAll().prop('src', './imgs/star.png')

      //根据序号,算出分数
      const score = $(this).index() + 1
      // 标签内容的原生 innerHTML 或 innerText
      $('#box b').html(score + '.0')
    })

    // 点击时: 修改评分
    $('#box img').click(function () {
      const s = $(this).index() + 1 + '.0'
      // 把分数设置给 box的自定义属性 data-score 中

      // parent: 父元素
      $(this).parent().data('score', s)
      console.log($(this).parent().data('score'));
    })

    // 鼠标离开时, 分数和 box上的自定义属性一致
    $('#box img').mouseout(function () {
      const s = $(this).parent().data('score')
      $('#box b').html(s) //分数设置到b标签内容里

      // 如果没有点击操作, 则鼠标离开后, 恢复到之前的分数状态
      // 获取分数对应的序号
      console.log(parseInt(s)); //把 3.0 -> 3
      const index = parseInt(s) - 1

      // 排除bug: 如果序号是 -1 则单独处理
      if (index == -1) {
        $('#box img').prop('src', './imgs/star.png')
        return //阻止后续代码执行
      }

      // 获取序号对应的元素
      const e = $('#box img').eq(index)
      e.mouseover() //触发元素的 悬浮态
    })
  </script>

准备就序

// 作为书写外部JS文件的开发者, 必须有 防御性编程的 意识

// 预防使用者, 不知道要在body结尾引入, 错误的在 头部引入

// 利用 onload 监听器, 监听页面加载完毕后的时机, 再执行代码

// onload是 HTML的最后一行代码执行结束后触发的
onload = function () {
  $('#box').css('color', 'green')
}

// JQ做了简化
// $(): 如果参数是函数, 则自动在 DOM加载完毕后执行
$(function () {
  $('#box').css('border', '1px solid gray')
})

// 总结: 如果以后书写外部的JS, 切记放在 准备就绪后的函数里执行

// JQ提供另外一个较长的写法, 同含义同作用
$(document).ready(function () {})

委托

// 给 父元素 box 加点击
    // $('#box').click(function (e) {
    //   console.log(e)
    //   // 需要通过 if 判断, 来区分出 哪些元素要处理
    //   // target: 当事元素
    //   $(e.target).css('background', 'red')
    // })

    // on: 专为委托而生的方法
    // 参数1: 事件名   参数2: css选择器,选择要监听的子元素
    // 参数3: 触发的事件函数, 其中的this 指向 当事元素
    $('#box').on('click', 'span', function () {
      // 原生中, 必须用e.target来读取当事元素
      // JQ 自动把this指向当事元素
      console.log('this:', this);
      $(this).css({ 'borderRadius': '50%', 'background': 'blue' })
    })

  </script>

数据添加

<script>
    const skills = ['vue', 'dom', 'css', 'html', 'jQuery']

    // 把数组的元素转换成 按钮, 放到 box 里
    const x = skills.map(s => `<button>${s}</button>`)

    console.log(x)

    // append:添加.  自动识别参数是数组还是字符串, 数组则会在内部自动拼接
    $('#box').append(x)

    // 合写简化
    $('#box').append(skills.map(s => `<button>${s}</button>`))
    // append本质是累加拼接,  innerHTML += xxx

    // 不累加拼接, 则需要用 empty  清空原有内容
    $('#box').empty().append('<h1>Hello ..</h1>')
  </script>

Ajax

var url = 'https://api.xin88.top/game/heros.json'
    $.get(url, data => {
      console.log(data);

      $('#heros').append(data.hero.map(h => {
        // 字符串替换 replace
        var src = data.baseURL.replace('{alias}', h.alias)

        // console.log('src:', src);

        return `<div data-s="${h.selectAudio}">
          <img src="${src}" alt="">
          <span>${}</span>
        </div>`
      }))
    })

    // 请求外部书写: 由于子元素是 通过网络请求后, 动态添加的. 用委托实现
    $('#heros').on('click', 'div', function () {
      // 获取播放器
      const au = document.querySelector('#au')
      // 获取元素上保存的自定义属性 data-s
      const s = $(this).data('s')
      // 把音频的地址设置给播放器
      au.src = s
      au.play() //播放
    })