21 JQuery高级

 

目录

 

for循环

js遍历方式

jq遍历方式

提交表单

事件绑定

on/off 事件绑定与事件解除

toggle事件切换

案例 抽奖

插件

$.fn.extend(object)

$.extend(object)

---

1. for循环

   1. 遍历时元素对象是js对象, 想要使用jq对象方法需要将js对象转为jq对象

   2. js遍历方式

      1. for( 初始化值 ; 循环结束条件 ; 步长 )

   3. jq遍历方式

      1. jq 对象 .each(callback)
         1. callback: 回调函数,写具体的函数体
            1. 根据回调函数的返回值可以实现break和continue的操作
      2. $.each(object, [callback])
         1. callback: 回调函数,写具体的函数体
         2. 优点: 可以遍历js对象, 也可以遍历jq对象(object)
      3. for..of: jquery 3.0 版本之后
         1. 一般不用
         2. 语法简单

2. 提交表单

   1. jq对象.submit()

3. 事件绑定

   1. on/off 事件绑定与事件解除

      1. on: 事件的绑定, 仅仅是事件的绑定
         1. jq对象.on("click" , [Fn])      绑定点击事件
         2. jq对象.click([Fn])     同样也是绑定点击事件
      2. off: 事件的解除
         1. jq对象1.click(function (){ jq对象2.off("click") })
            1. 点击jq对象1来解除jq对象2上面的点击事件

   2. toggle事件切换

      1. jq对象.toggle([fn1],[fn2],[fn3]...)
         1. 点击时会在fn1, fn2..之间切换, 走到最后一个时再从头开始
      2. jq1.9之后把这个toggle删除了, 需要使用migrate插件来回复

4. 案例 抽奖

   1. 按钮的disabled属性是它自带的属性,修改的时候需要使用prop()
   2. 两个图片交替时, 想要呈现淡出的效果, 先要把新图片隐藏掉, 然后再淡出

5. 插件

   1. $.fn.extend(object)

      1. 对象方法, 适用对象名完成调用

   2. $.extend(object)

      1. 定义的是全局方法, 直接使用函数名就可以调用

   3. $.fn.extend({
          check: function () {
              this.prop("checked", true)
          },
          uncheck: function () {
              this.prop("checked", false)
          }
      })