jquery筆記整理

01-jquery簡介

1）功能：
     ·html元素選取
     ·Html元素操做
     ·Css操做
     ·Html事件函數
     ·JavaScript特效和動畫
     ·DOM的遍歷及修改
     ·AJAX
     ·Utilities
     ·插件
2）版本支持
     ·jquery2 及以上不支持IE6,7,8
     ·使用註釋:
     ·<!--[if lt IE 9]>
     ·<script src="Script/jquery-1.9.0.js"></script>
     ·<![endif]-->
     ·<!--[if gte IE 9]><!-->
     ·<script src="Script/jquery-2.0.0.js"></script>
     ·<!--<![endif]-->
3）版本
     ·Production version:實際網站，壓縮版
     ·Development Version：測試和開發，未壓縮
4)引用：
     文件類型:xxx.js
     ·<script src="xxx.js"></script>
     ·CDN（內容分發網絡）引用
     ·<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     --CDN:
         https://baike.baidu.com/item/CDN/420951?fr=aladdin
     經常使用CDN引用：
     一、谷歌
     <script src="http://ajax.googleapis.com/ajax/1ibs/jquery/1.10.2/jquery.min.js">
     </script>
     二、微軟
     <script src="http://ajax.Microsoft.com/ajax/jquery/jquery/1.10.2/jquery.min.js">
     </script>
     使用百度、又拍雲、新浪、谷敵或微軟的jQuery，有一個很大的優點：
     許多用戶在訪問其餘站點時，已經從百度、又拍雲、新浪、谷歌或微軟加載過 jQuery。
     全部結果是，當他們訪問您的站點時，會從緩存中加載jQuery，這樣能夠減小加載時間。
     同時，大多數CDN均可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，
     這樣也能夠提升加載速度。

02-jquery語法

1）步驟：
$(selector).action();
     ·$:jquery
     ·查詢：selector
     ·操做: action
2)選擇器：Xpath(xml中的查詢信息的語言)+CSS
     $(this).hide();
     $("p").hide();
     $("p.test").hide();
     $("#test").hide();
3)文檔就緒事件：
//文檔加載完執行方法
     $(document).ready(function(){
    
     });
     $(function(){
     });

 

03-jquery選擇器

1）HTML
     一、元素
     二、id
     三、class
2）CSS
     $("p").css("background","red");
3)more
     $("*")        --選取全部元素
     $(this)        --選取當前htnl元素
     $("p.td")    --選取class爲td的p元素
     $("p:first")--選取第一個p元素
     $("ul li:first")--選取第一個ul li元素   
     $("ul li:first-child")選取每一個ul的第一個li元素
     $("[href]")    --選取帶有href屬性的元素
     $("a[target='_blank']")--選取全部target屬性爲"_blank"的a元素
     $("a[target!='_blank']")--選取全部target屬性不爲"_blank"的a元素
     $(":button")--選取全部type="button"的input元素和button元素
     $("tr:even")--選取偶數位置的tr元素
     $("tr:odd")--選取奇數位置的tr元素
4)獨立文件內引用jquery函數

 

04-jquery事件

1）dom事件對應的Jquery事件
2）常見事件：
鼠標事件            鍵盤事件            表單事件            文檔/窗口事件
click            keypress        submit            load
dblclick        keydown            change            resize
mouseenter        keyup            focus            scroll
mouseleave        blur                            unload

3）比較keypress、keydown與keyup
·keydown：    在鍵盤上按下某鍵時發生，一直按着則會不斷觸發（opera瀏覽器除外），它返回的是鍵盤代碼；
·keypress：    在鍵盤上按下一個按鍵，併產生一個字符時發生，返回ASCII碼。
             注意：shift、alt、ctrl等鍵按下並不會產生字符，因此監聽無效，
             換句話說，只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。
·keyup：        用戶鬆開某一個按鍵時觸發，與keydown相對，返回鍵盤代碼。

 

05-jquery效果-01隱藏顯示及切換

1)隱藏和顯示，切換
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//$(selector)選中的元素爲n，callback執行n次
//callback能夠是函數名，也能夠是匿名函數
//callback函數名後加括號，函數會當即執行，而不是完成顯示隱藏後執行
可選參數speed爲顯示速度
取值：slow,fast,毫秒
可選參數callback是隱藏或顯示或切換後執行的函數名稱
例：$("p").hide(1000,function(){
     $(p).show();
     });

 

05-jquery效果-02淡入淡出

1）淡入淡出函數
     ·fadeIn()--淡入
     ·fadeOut()--淡出
     ·fadeToggle()--若是淡入，則淡出，反之。
     ·fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);--speed,opacity爲必選參數

 

05-jquery效果-03滑動

1)滑動函數
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);--在slideUp,slideDown之間切換
--沒有註明都爲可選參數

 

05-jquery效果-04動畫

1)animate簡介

--用於建立自定義動畫
--語法：
$(selector).animate({params},speed,callback);
--params爲必選參數，定義了造成動畫的CSS屬性
$(selector).animate({styles,speed,easing,callback);
--easing爲內置函數
     取值：swing,liner
$(selector).animate(styles,options);
--options爲規定動畫的額外選項
可能的值：
·speed-設置動畫的速度
·easing-規定要使用的easing 函數
·callback-規定動畫完成以後要執行的函數·step-規定動畫的每一步完成以後要執行的函數
·queue-布爾值。指示是否在效果隊列中放置動畫。若是爲false，則動畫將當即開始
·specialEasing-來自styles參數的一個或多個CSS屬性的映射，以及它們的對應 easing函數
//默認狀況下html都有一個靜態的位置，設置位置時要相對於CSS設置，如設置子屬性
//父級relative,子absolute
//params能夠爲多個屬性，逗號隔開
--animate能夠全部的css屬性，必須使用Camel命名屬性名，如paddingLeft,marginLeft
--若是要生成顏色動畫，jquery提供了Color Animations插件
--只有數字值可建立動畫(margin:30px)，字符串沒法建立動畫(background:red)
2)animate()使用相對值
+=,-=   --建立相對動畫，相對於元素的當前值改變
例：
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({
       left:'250px',
       height:'+=150px',
       width:'+=150px'
     });
   });
});
</script>
3)animate()使用預約義的值
show,hide,toggle
例：
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({
       height:'toggle'
     });
   });
});
</script>
4)animate()使用隊列功能
例：
<script>
$(document).ready(function(){
   $("button").click(function(){
     var div=$("div");
     div.animate({height:'300px',opacity:'0.4'});
     div.animate({width:'300px',opacity:'0.8'});
     div.animate({height:'100px',opacity:'0.4'});
     div.animate({width:'100px',opacity:'0.8'});
   });
});
</script>

    

05-jquery效果-05中止動畫

1)stop()
語法：
$(selector).stop(stopAll,goToEnd);
--可選參數stopAll規定是否清除動畫隊列，默認爲false
--可選參數goToEnd規定是否當即完成當前動畫，默認爲false
--

 

05-jquery效果-06callback方法

1)
callback函數在當前動畫完成後執行。
//JavaScript代碼是逐條執行的經過傳參執行函數能夠避免動畫
//效果衝突。
例：
有回調函數
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("p").hide("slow",function(){
       alert("段落如今被隱藏了");
     });
   });
});
</script>
無回調函數
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("p").hide(1000);
     alert("如今段落被隱藏了");
   });
});
</script>

 

05-jquery效果-07Chaining方法

1)chaining方法 --容許咱們一條語句中執行多個jquery方法（相同元素上） --jquery方法連接 --即將多個動做函數連接起來執行 例： <script> $(document).ready(function()   {   $("button").click(function(){     $("#p1").css("color","red").slideUp(2000).slideDown(2000);   }); }); </script> 書寫格式：（厲害！！！） //jquery會捨棄多餘的空格，當成一句去執行 <script> $(document).ready(function()   {   $("button").click(function(){     $("#p1").css("color","red")       .slideUp(2000)       .slideDown(2000);   }); }); </script>