jQuery基礎入門學習

jQuery基礎入門學習

入口函數

• JavaScript的入口函數

    window.onload=function(){
    	console.log('這是Javascript的入口函數！');
    };
  

• jQuery的兩種入口函數

    $(document).ready(function(){
    	console.log('只是jq的第一種入口函數！');
    });
    
  
    $(function(){
    	console.log('只是jq的第二種入口函數！');
    });
  

javaScript上的入口函數是等網站加載完（圖片也要加載完纔會執行），而JQuery上的入口函數只是讓網站的代碼加載完就執行，（不需要等圖片加載），所以Jq的入口函數會比Js的入口函數要快。

DOM對象和jQuery對象

DOM對象和jQuery對象不能換着用

• dom對象->jQuery對象 加上$()
• jQuery對象->dom對象 $li[0] 或者 $li.get(0)

jQuery中$的作用

$ === jQuery 成立

1. 參數是一個function，表示入口函數 $(function(){})
2. 把dom對象轉換成jq對象 $(document).ready(function(){})
3. 參數可以是一個字符串，用來找對象 $('#id') $('.class') $('li')

選擇器

• $("s1,s2") 並集選擇器
• $("s1 s2") 後代選擇器
• $("s1>s2") 子代選擇器
• $(".s1.s1") 交集選擇器

更多選擇器查找API

修改樣式

• 修改單個樣式

    <script>
       $(function(){
    	   	$("li").css("backgroundColor","pink")
    		.css("color","red")
    		.css("fontSize","14px")
       })
    </script>
  

• 修改多個樣式

    <script>
     $(function(){
    	$("li").css({
    	backgroundColor:"pink",
    	color:"red",
    	fontSize:"14px",
    	})
    })
    </script>	
  

• 獲取樣式

    <script>
     $(function(){
    	$("li").css("fontSize");
    	})
    </script>
  

修改class和屬性

• 增加一個類

  $("li").addClass("bigger");

• 移除一個類

  $("li").eq(0).removeClass("bigger");

• 判斷是否有這個類

  $("li").hasClass("bigger");

• 判讀有沒有這個類，有就添加，沒有就移除

  $("li").toggleClass("bigger");

• 操作屬性

  $("img").attr("title","這是一張圖片")

  $("img").attr([title:"這是一張圖片",alt:"錯錯錯"])

  $("img").removeAttr("title")

對於布爾類型(disabled,selected,checked)的屬性，不要用attr方法，用prop方法，因爲沒有定義的屬性用attr方法回返回一個undefine，

`$(".select").prop("select","true")`

三組基本動畫

• 顯示動畫 show(speed) speed是動畫持續時間

  $("div").show();

  $("div").show(1000); //可以傳字符串，"slow","fast","normal"

  $("div").show([speed],[callback]);

  $("div").show(1000,function(){alert("測試")});

• 隱藏動畫

  $("div").hide();

• 滑入滑出

  $("div").slideDown(1001); //劃入
$("div").slideUp(1000); //劃出
$("div").slideToggle(); //切換

• 淡入淡出

  $("div").fadeIn(1001); //劃入
$("div").fadeOut(1000); //劃出
$("div").fadeToggle(); //切換

• 自定義動畫

  第一個參數：對象，裏面傳的是需要動畫的樣式

  第二個參數：speed 動畫的執行時間

  第三個參數：動畫的執行效果

  第四個參數：回掉函數

  $("#box").animate({left:800},8000,"swing");

  $("#box").animate({left:800},8000,"linear");

  動畫隊列問題，每個動畫都放在一個隊列裏面，一個一個執行。當鼠標過快，隊列速度跟不上，鼠標突然停了，但是動畫還是在進行。在鼠標移入移出的動畫的前面加上stop()

• 停止動畫

  第一個參數：clearQueue 是否清楚動畫隊列 true or false
  第二個參數：jumpToEnd 是否跳轉到當前動畫的最終效果

  $(“div”).stop(true,true);

創建節點

`$("div").append('<a href="" targey="_blank">'); //添加節點`    
`$("p").appendTo($('div'));`

`$("div").prepend($("p"));  //在之前`        
`$("p").prependTo($("div"));`

` $("div").after($("p"));   //在之後`.   
`$("div").before($("p"));`

清空、刪除、克隆元素

$("div").html(""); //儘量不要使用，因爲不刪除時間，導致內存泄漏

$("div").empty(); //把節點內容還有對應的事件都刪除

$("div").remove(); //移除一個節點

$("div").clone(); //有參數，ture和false，ture把時間也複製上
原文地址：http://biyongyao.com/archives/189