jQ基础(2)

jQuery高级

一. 动画

（一）. 三种方式显示和隐藏元素
1.默认显示和隐藏方式

（1）show([speed,[easing],[fn]])

1.speed动画速度，slow，normal，fast(预定义)或毫秒值(1000)

2.easing，切换效果，swing(默认值)，先慢，再快，再慢，linear匀速

3.fn,回调函数，当动画执行完成后调用吗，每个元素执行1次

（2）. hide([speed,[easing],[fn]])

（3）. toggle([speed],[easing],[fn])，切换

2.滑动显示和隐藏方式

（1）.slideDown([speed],[easing],[fn])

（2）.slideUp([speed,[easing],[fn]])

（3）slideToggle([speed],[easing],[fn])

3.淡入淡出显示和隐藏方式

（1）.fadeIn([speed],[easing],[fn])

（2）.fadeOut([speed],[easing],[fn])

（3）.fadeToggle([speed,[easing],[fn]])

二.遍历

1.js的遍历方式
         for(初始化值;循环结束条件;步长)
       2.jq的遍历方式
         1.    jq对象.each(callback)
         2.    $.each(object, [callback(回调函数)])
         3.    for(... of ...);增强for循环

$(function() { 
      1.获取所有的ul的li标签  cities是jq对象    city是一个js对象   jq html()
      var cities = $('#city li');
      2.遍历li
       for(var i = 0; i < cities.length; i++) {
        alert(cities[i].innerText);
       }
      jq的第一种方式
      cities.each(function() {
        js对象
        alert(this.innerHTML);
        jq对象
       alert($(this).html());
      });
      cities.each(function(index, element) {
       alert(index + ' ' + element.innerHTML);
       如果遍历到上海，则结束循环;
       if ('上海' === $(element).html()) {
        跳出循环  true表示continue
        注意，jq遍历不是for循环，所以不能用break 
        return  true 表示continue
        return false 表示break
        return false;       
       }
      })；

      jq的第二中方式
      $.each(cities, function() {
       alert(this.innerHTML);
      })；
      jq的第三种方式
      for (li of cities) {
       alert($(li).html());
      }
     });

三.事件绑定

//1.使用on绑定点击事件
      // jq对象.on('事件名称', 回调函数)
      $('#btn').on('click', function() {
       alert('点击');
      });

//2.使用off解绑点击事件
      $('#btn2').click(function() {
       //解除btn2的单击事件
       //$('#btn').off('click');
       $('#btn').off();//将事件源上的所有事件全部解绑
      })