[JavaScript知识库]jQuery学习笔记（第一天）

一、初识jQuery:

javaScript代码端：

<script>
    // 方式一：使用原生的js实现功能
    window.onload = function () {
        var btn01 = document.getElementById('btn01');
        btn01.onclick = function () {
            alert(document.getElementById('username').value);
        }
    }
</script>
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $('#btn02').click(function () {
            alert($('#username').val())
        })
    })
</script>

HTML

  <!-- 
        需求：点击"确定"按钮，提示输入的值
     -->

    用户名：<input type="text" id="username">
    <button id="btn01">确定(原生版本)</button>
    <button id="btn02">确定(jQuery版)</button>

二、jQuery核心：两把利器（对象/函数）

?1.jQuery核心函数

????????简称：jQuery函数($/jQuery)

????????jQuery库向外直接暴漏的就是$/jQuery(源代码为window.$=window.jQuery=jQuery);

????????引入jQuery库后，直接使用$即可.

????????????当函数用：$(xxx)

????????????当对象用：$.xxx()

2.jQuery核心对象

????????简称jQuery核心对象

????????得到jQuery对象，执行jQuery函数返回的就是jQuery对象。

????????使用jQuery对象：$obj.xxx()jQ

 
 /*引入jQuery库*/
 <script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
   <script>
        console.log(typeof $);//$是一个function
        console.log($ === jQuery);//true $与jQuery等同
        console.log($ === window.$);//true $是一个全局函数

        console.log(typeof $());//object 这个对象就是jQuery对象

        $('button').click(function () {
            alert(this.innerHTML);
        })
  </script>

  <button>测试</button>

三、jQuery核心函数

????????1.作为一般函数调用:$(param)

????????????1>.参数为函数：当DOM加载完后，执行此回调函数

????????????2>.参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象

????????????3>.参数为DOM对象：将dom对象封装成jQuery对象

????????????4>.参数为html标签字符串（用的少）：创建标签对象并封装成jQyery对于对象

????????2.作为函数使用：$.xxx()

????????????1>.$.each():隐式遍历数组

????????????2>.$.trim():去除两端的空格

<script src="./js/jquery-1.10.1.js"></script>
    <script>
        /*
        需求1：点击按钮：显示按钮的文本，显示一个新的输入框
        需求2：遍历输出数组中所有的元素值
        需求3：去掉“my home”两端的空格
        */
        /* 需求1：点击按钮：显示按钮的文本，显示一个新的输入框*/
        //1).参数为函数：当dom加载完成后，执行其中的函数  回调函数
        $(function () {
            //2.参数为选择器(selector)字符串：查找所有匹配的标签，并将它们封装成jQuery对象
            var $btn = $('#btn');
            $btn.click(function () {
                //显示按钮的文本
                //this就是发生事件的dom元素对象也就是button
                //3)参数为DOM对象，将dom对象封装成jQuery对象
                var text = $(this).html();
                alert(text);

                //显示一个新的输入框
                $('<input type="text" name="msg3"></br>').appendTo('div')
            })
        })

        // 需求2：遍历输出数组中所有元素值
        var arr = [123, "my home", true];
        //1)$.each():隐式遍历数组
        $.each(arr, function (index, item) {
            console.log('第' + (index + 1) + "个元素的值为" + item);
        })

        //需求3：去掉my home两端的空格
        var str = "  my home   ";
        //2).$.trim()；去除两端的空格
        console.log(str.trim() === 'my home');//true
        console.log($.trim(str) === "my home");//true

    </script>

四、jQuery对象：

????????1.jQuery对象是一个包含所有匹配的任意多个dom元素的为数组对象

????????2.基本行为

??????? size()/lenth:包含的DOM元素的个素数

??????? [index]/get(index)；得到对应位置的DOM元素

????????each():遍历包含所有的DOM元素。

????????index()得到所在兄弟元素中的下标。

练习：

<script>
        /*
        需求：
        需求1：统计一共有多少个按钮
        需求2：去除第二个button的文本
        需求3：输出所有button标签的文本
        需求3：输出“测试三”按钮是所有按钮中的第几个
        */
        $(function () {
            var $btns = $('button');
            // console.log($btns);
            //需求1.统计一共有多少个按钮
            // console.log($btns.size(), $btns.length);

            //需求2取出第2个button的文本
            // console.log($btns[1].innerHTML, $btns.get(1).innerHTML);

            //需求3：输出所有button标签的文本
            //each():遍历包含所有DOM元素
            $btns.each(function () {
                console.log(this.innerHTML);
            })
            //参数1：索引值 参数2：元素对象
            $btns.each(function (index, domEle) {
                console.log(index + domEle.innerHTML)
            });

            //需求4：输出“测试三”按钮是所有按钮中的第几个
            // index()；得到在所在兄弟元素中的下标
            console.log($('#btn3').index());

            //  var $btns = $('button');所获得的是伪数组（其实是object对象）
            // 含有length属性，但是没有数组特别的方法：forEach()/push()/pop()/splice()
            console.log($btns instanceof Array);//false

            //自定义伪数组
            var weiArr = {}
            weiArr.length = 0;
            weiArr[0] = 'adad';//设置第一个伪数组元素
            weiArr.length = 1;//必须手动设置长度
            console.log(weiArr, weiArr.length)
        })
    </script>