jquery轉換js

剛離職，一直忙於弄簡歷，整理面試題。今天得空吧前幾天學習復習的jq基礎知識整理一下，長時間不用還真的忘記了。所有在深入學習中也不要忘記復習之前的知識。做鞏固，老話說的好打好根基才能蓋好房。基礎知識過后，下面還有聯系題，注意看

分享一個jquery好手冊：http://www.css88.com/jqapi-1.9/

小知識點

2、$("") 獲取元素 （包括標簽名，類名，id名）

3、事件源 . 方法（function(){}）

//jq版
    $(document).ready(function(){
        //獲取元素
        var jqBut=$("button");//更具標簽名獲取元素
        var jqDiv=$("div");
        //綁定事件
        jqBut.click(function(){
            //驅動事件
            jqDiv.show(1000); //顯示盒子
            jqDiv.html("中秋快樂")//設置文字
        })
    });

 

jQuery特點

1、鏈式編程

jqDiv.show(3000).html(ss)
相當於 
jq.show(3000)
jq.html(內容)

 

jq入口問題

js 也有入口， window.onload === ￥（document）.ready();為了防止頁面為加載完就執行

 

1、jq可多個入口函數

2、js只能有一個，多次會覆蓋

3、$實際上表示一個函數 $()調用函數

4、jquery ===$ 相等

  //jq入口函數 1、當頁面加載完畢的時候，圖片沒有加載，執行這個函數
        $(document).ready(function(){
            alert(1)
        });
        //jq入口函數2、當頁面加載完畢的時候，圖片沒有加載，執行這個函數
        $(function(){
            alert(1)
        })
         //jq入口函數 1、當頁面加載完畢的時候，圖片也加載完，執行這個函數
         $(window).ready(function(){
            alert(1)
        })

 

jq和js 改變樣式對比

1、jq對象是一個數組，包含原生jsDOM對象

2、原聲js對象是一個原生對象

 //js改變多個樣式
div.style.cssText="width:100px; height:100px; background:black; margin-bottom:20px;";
 //jq改變多個樣式，是josg數組方式
jqdiv.css({"width":100,"height":100,"background":"red","margin-bottom":20});

 

jq對象轉換為js對象

     A）jq對象名（索引值）

     b）jq對象名.get[ 索引值 ]

<script src="jquery-1.11.1.js"></script>
    <script>
        //入口函數
        jQuery(document).ready(function () {
            //如果想要那種方式設置屬性或方法，必須轉換成該種類型。
            //1.js對象轉換成jquery對象。     $(js對象);
            var box = document.getElementById("box");
            var cbox = document.getElementsByClassName("box");
            var div = document.getElementsByTagName("div");
            
            //js轉換成jq
            box = $(box);
            cbox = $(cbox);
            div = $(div);
            
            //轉換成了jquery對象，皮上面有功能可以直接調用。
            div.css({"width": 100, "height": 100, "border": "1px solid red"});
            box.css("background", "red");
            cbox.css("background", "yellow");
            //jquery對象是一個數組。數組中包含着原生JS中的DOM對象。
            var jqbox = $("#box");
            var jqCbox = $(".box");
            var jqdiv = $("div");
            //2.jquery對象轉換成js對象。     1.jquery對象[索引值]   2.jquery對象.get(索引值)
            //jquery對象轉換成js對象
            jqdiv[0].style.backgroundColor = "black";
            jqdiv.get(4).style.backgroundColor = "pink";
        });
    </script>

 

案例

隔行變色

 <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        //jq函數入口 除了圖片，頁面加載后立即執行
        jQuery(function(){
            //獲取元素
            var jqli=$("li");
            //for遍歷所有li
            for(var i=0; i<jqli.length; i++){
                //判斷條件
                if(i%2===0){
                    //jq對象轉化成js對象
                    jqli[i].style.background="red";
                }else{
                    jqli.get(i).style.background="yellow"
                }
            }
        })
    </script>

 

開關燈案例

 <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        //函數入口
        jQuery(document).ready(function(){
            //獲取函數
            var butArr=document.getElementsByTagName("input");
            var bd=$("body");
            //綁定事件 js對象 轉換成 jquery對象
            $(butArr[0]).click(function(){
                //jquery對象轉化成js
                bd[0].style.background="white";
            });
            $(butArr[1]).click(function(){
                //jquery對象轉化成js
                bd[0].style.background="black";
            });
        })
    </script>