jquery UI，JQuery 高級

動畫

1. 默認顯示和隱藏方式
   1. show([speed,[easing],[fn]])
   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. speed：動畫的速度。三個預定義的值(“slow”,“normal”, “fast”)或表示動畫時長的毫秒數值(如：1000)
   
   
2. easing：用來指定切換效果，默認是"swing"，可用參數"linear"
   • swing：動畫執行時效果是 先慢，中間快，最后又慢
   • linear：動畫執行時速度是勻速的
     
     
3. fn：在動畫完成時執行的函數，每個元素執行一次。

示例：

 <script>//隱藏divfunction hideFn(){/* $("#showDiv").hide("slow","swing",function(){alert("隱藏了...")});*/
/*//默認方式$("#showDiv").hide(5000,"swing");
*/
/*//滑動方式$("#showDiv").slideUp("slow");*///淡入淡出方式$("#showDiv").fadeOut("slow");}//顯示divfunction showFn(){/*$("#showDiv").show("slow","swing",function(){alert("顯示了...")});*//*//默認方式$("#showDiv").show(5000,"linear");*/
/*//滑動方式$("#showDiv").slideDown("slow");*///淡入淡出方式$("#showDiv").fadeIn("slow");}//切換顯示和隱藏divfunction toggleFn(){/*//默認方式$("#showDiv").toggle("slow");
*//*//滑動方式$("#showDiv").slideToggle("slow");
*///淡入淡出方式$("#showDiv").fadeToggle("slow");}</script>

遍歷

jquery UI？jq的遍歷方式

1. jq對象.each(callback)

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

      • index:就是元素在集合中的索引
      • element：就是集合中的每一個元素對象（也可用this表示）

   2. 回調函數返回值：

      • true:如果當前function返回為false，則結束循環(break)。
      • false:如果當前function返回為true，則結束本次循環，繼續下次循環(continue)

	//1.獲取所有的ul下的livar citys = $("#city li");//2. jq對象.each(callback)citys.each(function (index,element) {//3.1 獲取li對象 第一種方式 thisalert(this.innerHTML);//或者alert($(this).html());//3.2 獲取li對象 第二種方式 在回調函數中定義參數   index（索引） element（元素對象）alert(index+":"+element.innerHTML);//或者alert(index+":"+$(element).html());//判斷如果是上海，則跳出本次循環if("上海" == $(element).html()){//如果當前function返回為false，則結束循環(break)。//如果返回為true，則結束本次循環，繼續下次循環(continue)return true;}                    

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

     $.each(citys,function () {alert($(this).html());}

3. for…of ：jquery 3.0 版本之后提供的方式
   for(元素對象 of 容器對象)

	for(li of citys){alert($(li).html());}

事件綁定

1. jquery標準的綁定方式

• jq對象.事件方法(回調函數)；
  • 注：如果調用事件方法，不傳遞回調函數，則會觸發瀏覽器默認行為。如（讓文本輸入框獲得焦點）
  • 表單對象.submit();—讓表單提交
    
    

2. on綁定事件/off解除綁定

• jq對象.on(“事件名稱”,回調函數)
• jq對象.off(“事件名稱”)
  • 如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁

3. 事件切換：toggle

• jq對象.toggle(fn1,fn2…)

  • 當單擊jq對象對應的組件后，會執行fn1.第二次點擊會執行fn2…

• jquery vue。注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。