jQuery核心函數-核心對象

jQuery

查

優秀的Js函數庫

 

鏈式調用

讀寫合一

 

jQuery核心函數

jQuery核心對象

    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script>
     
        //綁定文檔加載監聽
        $(function(){
            $("#btn2").click(function () {
                var username = $("#username").val()
                alert(username)  
              })
        })
        //核心函數 $ jQuery
        //使用jQuery對象：執行$()返回的對象 
    </script>

       //jQuery函數
        console.log($,typeof $)
        console.log(jQuery, typeof jQuery)
        console.log($===jQuery)
        //jQuery對象：執行jQuery函數得到它
        console.log($() instanceof Object)

JQuery函數

$作爲函數，作爲調用使用

        //作爲函數調用
        //參數爲函數：當Dom加載完成之後執行此回調函數
        $(function(){//綁定文檔加載完成的監聽
            //參數爲選擇器String:查找所有的匹配標籤，並將它們封裝成jQuery對象
            $('#btn').click(function(){//綁定事件監聽
               //this是什麼，發生事件的dom元素（button）
              // alert(this.innerHTML)
                alert($(this).html())
                //參數爲html標籤String，創建標籤對象並封裝爲jQuery對象
                $('<input type="text" name="msg3"><br/>').appendTo('div')

                
            })

        })

作爲對象調用

        var arr = [2,3,4,5]
        $.each(arr,function (index,item) {
            console.log(index,item)
        })
        var str = " my baby"
        console.log($.trim(str))

jQuery核心對象

僞數組是Object對象：

length

數值下標屬性

沒有數組特別方法。forEach（），push（），pop（），splice（）

    <script type="text/javascript">
        //統計按鈕
        var $buttons = $('button')
        console.log($buttons.size(),$buttons.length)
        //第二個button
        console.log($buttons[2].innerHTML,$buttons.get(2).innerHTML)
        //輸出所有button的文本
        $buttons.each(function(index,domEle){
            //console.log(index,domEle.innerHTML,this)
        })
        $buttons.each(function () {
            console.log(this.innerHTML)
        })
        //輸出測試三按鈕是所有按鈕中的第幾個
        var i = $('#btn3').index()
        console.log(i)

       
    </script>