jQuery_day1

1.js与jQuery区别
1.
原生js和jQuery入口函数的加载模式不同
原生js会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行

2.
原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的
jQuery中编写多个入口函数，后面的不会覆盖前面的



2.jQuery写法

       //1.原生js的固定写法
        window.onload=function (ev) {
            alert("h1")
            alert("h2")
        }
         
        //jQuery写法1
         $(document).ready(function(){
             alert("hello");
         });
        
        //jQuery写法2
        jQuery(document).ready(function () {

        })
         
        // jQuery写法3（推荐）
         $(function () {
             alert("hello")
         })

3.jquery冲突问题

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/test.js"></script>
//后引入框架中有$会把前面的框架中的$ 覆盖掉
    /*可以通过jQuery.noConflict();释放$的使用权
    释放之后就不能再使用$改为
     */
    jQuery.noConflict();
     jQuery(function () {
         alert("hello")
     })
     //自定义一个访问符号
        var nj=jQuery.noConflict();

text.js

var $=123;

4.jquery核心函数

  <script>
    //$() 表示jQuery的核心函数
        /*
        1.接收一个函数
        2.接收一个字符串
        2.1接收一个字符串选择器
        2.2接收一个代码片段
        3.接收一个DOM
         */
        //1.
     $(function () {
         console.log(1)
        alert("hello")
         //2.1返回一个jQuery对象，对象中保存了找到DOM的元素
         var $box1=$(".box1")
         var $box2=$("#box2")
         console.log($box1);
         console.log($box2);
         //2.2返回一个jQuery对象，对象中保存了找到DOM的元素
         var $p=$("<p>123</p>")
         console.log($p);

         var span=document.getElementsByTagName("span")
         console.log(span)
         //3.会被包装成一个jQuery对象返回给我们
         var $span=$(span);
         console.log($span)
     });
    </script>


5.jQuery对象、静态方法和实例方法

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
    /*
    jquery对象是一个伪数组-有0~length-1元素，有length属性
     */
    var $div=$("div")
    console.log($div)
        /*
        js没有类的概念，这里比拟Java中类的概念
        静态方法：类上面的 类方法是属于整个类的，所以类方法的方法体中不能有与类的对象有关的内容。
        实例方法：原型上面的 当一个类创建了一个对象后，这个对象就可以调用该类的方法（对象方法）。

         */
        function f() {

        }
        f.staticMethod=function(){
            alert(1)
        }
        //静态方法通过类名来调用
        f.staticMethod()
        f.prototype.instanceMethod=function () {
            alert(2)
        }
        //实例方法通过类的实例调用
        //创建一个实例（对象）
        var a=new f();
        a.instanceMethod();
    </script>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>

6.jquery的each方法

    <script>
   //原生foreach 第一个参数-元素 第二个参数-索引
        var arr=[1,2,3,4,5]
        arr.forEach(function (value,index) {
            console.log(index,value)
        })
        //元素foreach方法只能遍历数组，不能遍历伪数组
        var obj={0:1,1:2,2:5,length:5}
        //报错
   //      obj.forEach(function (value,index) {
   //     console.log(index,value)
   // })
       //jQuery的each方法既能静态数组，也能遍历伪数组
        //第一个参数-索引 第二个参数-元素
        $.each(obj,function (index,value) {
            console.log(obj)
        })
    </script>

7.jquery的map方法

    <script>
   //原生map 第一个参数-元素 第二个参数-索引
        var arr=[1,2,3,4,5]
        var obj={0:1,1:2,2:5,length:5}
        //用原生js的map方法遍历 能遍历静态数组，不能遍历伪数组
   //第一个参数-元素 第二个参数-索引 第三个参数-数组
        arr.map(function (value,index,arr) {
            console.log(index,value,arr)
        })
    /*
    jQuery的map 可以遍历静态数组和伪数组 
    第一个参数-数组 第二个参数-每遍历一个元素之后执行的回调函数
    回调函数参数：第一个参数-元素 第二个参数-索引
     */
    var res=$.map(obj,function (index,value) {
        console.log(index,value)
    })
        var res1=$.each(obj,function (index,value) {
            console.log(index,value)
        })
   /*
     jQuery的each静态方法和map静态方法区别：
     each静态方法默认的返回值-遍历谁就返回谁
     map静态方法默认值为空

     each静态方法不支持在回调函数中对遍历的数组进行处理
     map静态方法可以在回调函数中通过return对遍历的数组进行处理，生成一个新的数组返回
    */
        console.log(res)
        console.log(res1)
   var res3=$.each(obj,function (index,value) {
       console.log(index,value)
       return value+index
   })
        console.log(res3)//Object { 0: 1, 1: 2, 2: 5, length: 5 }
    </script>