jQuery笔记常用知识点

jQuery文档

第一天

CSS方法

$("p").css("color"); 取得属性值
$('li').css("padding", '10px')设置 padding: 10px

事件

// 把点击触发的方法, 通过实参方式传入
    $('li').click(
      function () {
        console.log('this:', this)
        // 使用 jQuery 提供的 css 方法, 则比如把 元素 转为 jQuery 包装的
        console.log('$(this):', $(this))

        // $():属于多功能函数
        // $(字符串): 负责查询到 指定的元素
        // $(元素): 封装成 jQuery 类型的对象
        // $(this) : 把this进行封装后, 能够使用 jQuery提供的功能
        // 类似:  托尼斯塔克 穿上 钢铁侠的机甲, 就能飞天遁地
        $(this).css('color', 'red')
      }
    )

class操作

addClass( ) 添加样式

toggleClass( ) 切换样式

removeClass( ) 删除样式

显示和隐藏

$(‘#box’).hide() 隐藏

$(‘#box’).show() 显示

$(‘#box’).toggle() 切换

滑动

slideDown( ) 滑下

slideUp( ) 滑上

slideToggle( ) 切换滑动

动画 animate

动画分三种制作方式:
- transition: 过渡动画/补间动画
- @keyFrame : 关键帧动画
- JS动画: 捕捉频率刷新频率来实现

$('button').eq(0).click(function () {
      // animate: 用动画的方式, 调整元素的样式
      // - transform 和 颜色相关 不支持
      $('#box').animate({ left: 100, height: 50 })
        // 支持动画队列: 多个动画可以排队执行
        .animate({ top: 200, width: 50 })
        // 可以通过参数2 设置动画时长, 单位毫秒
        .animate({ left: 0 }, 1000)
        // 可以添加函数, 作为结束时的回调函数
        .animate({ top: 0, width: 100, height: 100 }, function () {
          // alert("success!")
        })
    })


    // 结束动画
    $('button').eq(1).click(function () {
      // 停止的默认设定: 立刻停止当前动画, 继续动画队列中后续的
      // 样式默认会保持在停止时的状态

      // 参数1: 是否要清空整个动画队列, 默认false 代表不清空
      // 参数2: 停止时是否要跳转到动画的最终效果: 默认false , 不跳转
      $('#box').stop(true, true)
    })

属性操作（重点）

元素具有两种属性:

• 系统属性
• 自定义属性
  – 旧写法: 随便写. 用 getAttribute 和 setAttribute 操作
  – 新写法: data- 开头; 用 dataset 属性操作

<a data-x="10" data-nan-NAN="楠楠" suibian="随便" v-text="自定义属性" href="https://www.baidu.com" target="_blank">百度一下</a>

修改属性 attr

读取属性 data

prop

<script>
    // jQuery提供了 prop 和 attr 和 data 三种方法可以操作属性

    // prop: 操作系统属性
    console.log(
      $('a').prop('href'),
      $('a').prop('target'),
    )
    // 修改操作: 使用两个参数
    $('a').prop('href', 'https://www.jd.com')

    // 自定义属性: 万能用法 attr
    console.log(
      $('a').attr('suibian'),
      $('a').attr('v-text'),
      $('a').attr('data-x'),
      $('a').attr('href'),
    )

    $('a').attr('suibian', '修改一下')

    // data(): 只能用于读取 data- 定义的属性, 无法修改;  修改用attr
    console.log(
      $('a').data('x') //data-x
    );
  </script>

标签

html( ) 返回标签内容

text( ) 返回文本内容

val( ) 获取元素的值

eq( 1 ) 获取匹配的第二个元素

• 一般跟input使用$("input").val();

get请求

var url = 'https://mfresh.xin88.top/data/news_select.php'

    $.get(url, data => {
      console.log(data)

      $('ul').html(
        data.data.map(value => `<li>${value.title}</li>`)
      )
    })

小结

jQuery: 2006年推出的 javascript 脚本库

• write less, do More: 写的少,做的多

  • 通过封装, 提供的方法名很短
  • 方法基本上都自带遍历操作
  • 方法几乎都有函数重载机制: 根据实参的不同 产生不同的效果

• $: 是jQuery脚本在 全局window对象中注入的一个属性, 是函数类型

  • $(参数)

    • 参数是字符串: 查找操作
    • 参数是元素: 元素封装成jQuery的对象

  • css: 操作 style 属性

  • class相关

    • addClass: 添加
    • removeClass: 删除
    • toggleClass: 切换

  • 事件相关: click mouseover

    • 事件名(): 触发事件
    • 事件名(函数): 给元素绑定事件

  • 显示和隐藏

    • show 和 hide : 简单的添加 display:none
    • slideToggle, slideDown, slideUp : 带有滑动动画的 显示/隐藏

  • 自定义动画 animate

    • 不适用于 颜色 和 transform

  • 属性相关

    • prop: 系统属性
    • attr: 万能方法, 适用于 系统 和 自定义
    • data: 仅适用于 data- 声明的属性 的 读取操作

  • 内容

    • html(): innerHTML
    • text(): innerText

  • 网络请求: get 方法

    • $.get(接口地址, 回调函数)

第二天

新增子元素append( ) （委托事件）

 <button>新增</button>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>SASS</li>
  </ul>

$('button').click(function () {
      // append: 新增
      $('ul').append('<li>新元素</li>')
    })

    // 委托模式: 
    // 前提:事件的冒泡机制 -子元素上触发一个事件后, 会传递给父元素触发相同事件
    // 委托: 让父元素帮子元素完成事件的相关任务

    // 委托模式下: 需要分辨当事元素

    // 提供 on 方法, 特别适合委托场景:
    // 参数1: 事件名
    // 参数2: 可以书写css选择器, 来过滤出要操作的当事元素
    $('ul').on('click', '>li', function () {
      console.log('this:', this) // 代表触发事件的 当事元素

      $(this).css('color', 'red')
    })


    $('li').click(function () {
      $(this).css('color', 'red')
    })

在元素上保存数据 data

data: 可以在元素上存储数据
当使用data方法读取数据时, 拥有附加功能: 如果有 data- 自定义的属性, 也能帮忙读取

 <div id="box"></div>

$('#box').data('x', 100)  //在元素上存储一个属性x, 值是100
    console.log($('#box')) // 展开查看, x存放在哪里

    console.log($('#box').data('x'))

load :加载外部html

<div id="demo01"></div>
  <div id="demo02"></div>
  <div id="demo03"></div>
  <div id="demo04"></div>

 // 此语法仅支持通过服务器运行的html文件
    // 参数1: 要加载文件地址
    // 参数2: 加载完毕后的回调函数
    $('#demo01').load('./02.delegate.html', function () {
      $('ul').css('border', '2px solid green')
    })

    // load操作是异步操作, 类似网络请求
    // 必须在 load 操作完毕后, 才能去操作加载过来的元素
    // $('ul').css('border', '2px solid green')

    // $('#demo02').load('./06.practice.html')

    // $('#demo03').load('./05.practice.html')