jQuery笔记和案例(3)

目录

 

清空与删除

案例：表格删除

克隆节点

val()的使用

案例：动态添加数据和删除

on注册事件

案例：表格删除委托版

事件解绑

案例：按键变色

jquery操作行内属性

jQuery操作自定义属性

案例： 美女相册

jQuery和原生可以混用

jquery里的事件对象

prop方法

案例：表格全选反选

jQuery中的宽高

jquery中的offset()和position()

scrollLeft()和scrollTop()

案例：固定导航栏

用动画效果滚动页面

---

清空与删除

• 删除已经学过了

  • jq对象.remove()

  • 谁调用就删除自身，1.x版本没有兼容问题

• 清空：

  • 删的不是自己，而是清空自己的内容（也就是删所有后代元素）

  • jq对象.empty()

 

案例：表格删除

 

克隆节点

• 语法：

  • jq对象.clone()

  • 默认是false，也就是浅克隆

  • 也可以传 true， 就是深克隆

  • 不管是浅克隆还是深克隆，都包含后代元素， 浅克隆不包含事件，深克隆包含事件

    • 注意：只包含jq绑定的事件

 

val()的使用

• 如何拿到表单元素输入的值？

  • 原生里是： 元素.value

  • jQuery里：jq对象.val()

• 如果val() 不传参数就是获取

• 如果val() 里传了数据，就是设置

 

案例：动态添加数据和删除

 

on注册事件

• 之前 jq.事件名() 添加事件的缺点

  • 缺点1：如果我要添加多个事件，且多个事件要执行的代码一样，那么代码会多一点，不能写在一起

  • 缺点2：这些事件本质上是jQuery封装的方法，所以有的事件封装了，有的事件没有封装，例如dragstart

  • 缺点3：可以实现事件委托，但是还需要自己拿到事件对象来判断（跟以前原生一样，要拿到事件对象，判断e.target是不是我们想触发的元素）

• 使用 on 来注册事件，会解决上面的缺点

  • 其实jQuery官方也推荐注册事件用 on

• 基本使用：

  jq对象.on('事件名', 回调函数)
  ​
  // 例：
      $('.box').on('click', function () {
  ​
        console.log('触发了')
      })
  ​
  // 它也可以绑定自己没封装的事件，例如：dragstart
  // 所以也就是说用on的方式可以保证能添加任意事件
     $('.box').on('dragstart', function () {
  ​
        console.log('拖拽开始')
      })

  • 它也可以绑定多个事件，多个事件用空格隔开

  • 用on可以保证能添加任意事件，例如就可以添加拖拽相关的事件

• 事件委托版

  jq对象.on('事件名', '选择器', 回调函数)

  • 事件是绑定在这个jq对象身上的，但是只能由选择器匹配的元素来触发

  • 并且在jq事件委托里的this变成了真正触发事件的元素（也就是e.target）

  • 例：

    // 事件绑定在box身上，但是只能由类叫get的触发
    $('.box').on('click', '.get', function () {
    ​
         console.log(this)
    })

     

案例：表格删除委托版

 

事件解绑

• 就是jq里的删除事件

• 语法：

  • jq对象.off()

    • 默认删除的是所有jq绑定的事件，原生的事件就要用原生的方式

  • jq对象.off('事件名')

    • 就只删这个事件，不影响别的事件

    • 如果要删除多个，那么用空格隔开

 

案例：按键变色

 

 

jquery操作行内属性

• jq对象.attr

  • 写一个参数就是获取

    • 参数1：行内的属性名

  • 写两个参数就是设置

    • 参数1：行内的属性名

    • 参数2：行内的属性值

• jq对象.removeAttr()

  • 只有一个参数，写行内的属性名，就能删掉这个行内属性

 

jQuery操作自定义属性

• 自定义属性标准写法： data-

• jQuery的获取就是

  • jq对象.data()

  • 得到的是一个对象，对象里就保存了所以以 data- 写的自定义属性，遵循驼峰命名法

• 它能设置，但改变的只是代码里的值，行内没有改变

 

案例： 美女相册

 

 

jQuery和原生可以混用

• 有的时候混用更方便

 

jquery里的事件对象

• 如何获取？

  • 就是在jQuery绑定的里写一个形参e

  • 用法跟以前的用法也完全一样

  • 跟原生的区别仅仅在于，jQuery的事件对象解决了兼容问题

 

prop方法

• 它专门用来操作布尔类型的行内属性

  • 例如：

    • selected

    • disabled

    • checked

    • multiple

• 这种属性用attr不准确

  • 原因：attr只能操作在行内的属性，那些不在行内的属性就得到undefined

• 这种属性用prop

  • 语法

    • jq对象.prop('属性名')

      • 只写一个参数代表获取

    • jq对象.prop('属性名', '属性值')

      • 写两个参数代表设置

 

案例：表格全选反选

 

 

jQuery中的宽高

 

 

• width() 和 height()

  • 获取盒子放内容区域的宽和高

• innerWidth() 和 innerHeight()

  • 获取盒子放内容区域宽和高 + padding

• outerWidth() 和 outerHeight()

  • 获取盒子放内容区域宽和高 + padding + border

• outerWidth(true) 和 outerHeight(true)

  • 获取盒子放内容区域宽和高 + padding + border + margin

• 用的最多的还是width() 和 height()

 

jquery中的offset()和position()

• offset() 和 position() 得到的都是一个对象，对象里有left个top属性

• offset()获取的是相对于页面（文档）左上角的距离

• position() 获取的是相对于定位父级的距离（换句话说就是获取left和top值）

 

scrollLeft()和scrollTop()

• 写法dom原生是一样的，但是要记住dom原生是属性，jQuery里面是方法

• 获取的是内容往左、往上滚出去的距离

• 也可以设置，设置就是设置往左滚出去距离、往上滚出去距离（相当于设置滚动条滚动）

• jQuery里面要设置滚动条以动画形式滚动内容，就用animate

• 代码如下：

  $('.box').animate({
          scrollLeft: 600,
          scrollTop: 1400
        }, 1000)

   

案例：固定导航栏

 

 

用动画效果滚动页面

• 固定写法， 要给html,body加animate

• 例：

       $('html,body').animate({
  ​
          scrollTop: 0
        },300)
      })