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>