[JavaScript知识库]jQuery高级

jQuery高级

一、动画

三种方式显示和隐藏元素

二、遍历

1. js的遍历方式

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

2. jq的遍历方式

   1. jq对象.each(callback)

      1. 语法：jquery对象.each(function(index,element){});

         • index:就是元素在集合中的索引
         • element：就是集合中的每一个元素对象
         • this：集合中的每一个元素对象

      2. 回调函数返回值

         • true:如果当前function返回为false，则结束循环(break)

         • false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

      3. // 方式2：each
         /*var cities = $("#city li");
         cities.each(function (index, element) {
             // alert(index + ":" + element.innerHTML);
             // alert(index + ":" + $(element).text());
         
             // 如果是上海则结束循环
             if ("上海" === $(this).text()) {
                 // 如果当前function返回为false，则结束循环(false)
                 // 如果返回为true，则结束本次循环，继续下次循环(continue)
                 return true;
             }
             alert(index + ":" + $(this).html());
         });*/
         
         // 方式3：$.each(object, [callback])
         var cities = $("#city li");
         $.each(cities, function (index, element) {
             alert($(element).text());
         });
         

   2. $.each(object, [callback])

   3. for…of: jquery 3.0 版本之后提供的方式

      for(元素对象 of 容器对象)

三、事件绑定

1. jquery标准的绑定方式
   • jq对象.事件方法(回调函数);
2. on绑定事件/off解除绑定
   • jq对象.on("事件名称",回调函数);
   • jq对象.off("事件名称");
3. 事件切换：toggle
   • jq对象.toggle(fn1,fn2...)：当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
   • 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
     <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

四、案例

五、插件