jQuery入门（一）---jQuery初体验（与原生js对比）

1、体验jquery

 框架：
    <input type="button" value="设置边框" id="btnOne"/>
    <input type="button" value="设置文本" id="btnTwo"/>
    <div></div>
    <div></div>
    <div></div>

 原生js写法：
          //入口函数
            window.onload=function(){
            //1 先要获取对应元素
            var btnOne = document.getElementById('btnOne');
            var btnTwo = document.getElementById('btnTwo');
            var divs = document.getElementsByTagName('div');
            //2 给btnOne按钮设置点击事件
            btnOne.onclick = function(){
                for(i=0;i<divs.length;i++){
                    divs[i].style.border = '1px solid red';
                }
            }
            btnTwo.onclick = function(){
                for(i=0;i<divs.length;i++){
                    divs[i].style.textContent = '我是设置的文本';
                }
            }
       
       
        //再添加一个入口函数，此时后面的这个函数会覆盖前面的入口函数
          window.onload = function(){
            console.log('我又是一个入口函数');
          }

  js缺点：
    1、不能添加多个入口函数（window.onload）,若添加了多个，后面的会覆盖前面的
    2、原生js的api名字太长难记
    3、原生js有点时候代码冗余
    4、原生js中有些属性和方法有浏览器兼容问题，如textContent和innerhtml
    5、原生js容错率较低，前面的代码出了问题，后面的代码执行不了

   jQuery写法：
       //入口函数
        $(document).ready(function(){
            //设置边框
            $('#btnOne').click(function(){
                $('div').css('border','1px solid red');
            });
            //设置文本
            $('#btnTwo').click(function(){
                $('div').text('我是设置的文本');
            })
        })
  
             //第二个入口函数
        $(document).read(function(){
            console.log('我又是一个入口函数');
        })

 //jQuery优势：
     1、可以写多个入口函数
     2、jQuery的api名字容易记忆
     3、jQuery代码简洁（隐式迭代）
     4、jQuery帮我们解决了浏览器兼容性问题
     5、容错率较高，前面的代码出了问题，后面的代码可以执行

2、什么是jquery？

 封装了很多方法的JavaScript库

3、如何使用jQuery？

 （1）引入jquery文件（官网下载文件）
 
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

（2）写一个入口函数(可以写多个入口函数)

   方法一 :
   $(document).ready(function( ){
      $('div').width(100).height(100).css('backgroundColor', 'red').text('哈哈')； //链式编程
   })
   
   方法二 ：
  $ (function(){
	  $('div').width(100).height(100).css('backgroundColor', 'red').text('哈哈')；
  })

(3) 找到要操作的元素（jQuery选择器），执行相应操作。

4、jquery入口函数与window.onload入口函数的区别

（1） window.onload入口函数不能写多个，但jQuery入口函数可以。

 (2)  执行时机不同：jQuery入口函数要比window.onload入口函数入先执行，
      因为jQuery入口函数要等待页面上的dom树加载完成后执行，
      window.onload入口函数要等待页面上所有资源（dom树，外部css，js连接，图片）都加载完毕后执行

5、$是什么？

 + $是一个函数，如果报这个错，$ is not defined，就说明没有引入jQuery文件。
 +参数传递不同，效果也不一样。
 
   *如果参数传递的是一个匿名函数----入口函数
         $(function(){ 
 
          });
   *如果参数传递的是一个字符串----选择器 / 创建一个标签
          $('#one')   id为one的选择器
          $('<div>啦啦啦，我是一个div标签</div>');
   *如果参数是dom对象，那他就会把dom对象转换为jQuery对象
           $(dom对象)；

6、什么是dom对象？什么是jQuery对象？

6.1 dom对象

  元素js选择器获取到的对象，如  
     var btnOne = document.getElementById('btnOne');
  特点：只能调用dom方法或属性，不能调用jQuery的属性或方法
      var btnOne = document.getElementById('btnOne');
        //dom对象可以调用dom的属性和方法
    √ btnOne.style.backgroundColor = ' red ' ;
        //dom对象不能调用jQuery的属性或方法
    × btnOne.css('backgroundColor' , 'green' ); 

6.2 jQuery对象

  利用jQuery选择器获取到的对象
  特点：只能调用jQuery的方法或属性，不能调用原生js dom的属性和方法
     var $btnOne = $( '#one' );
      //jquery对象能调用jQuery的属性或方法
   √ btnOne.css('backgroundColor' , 'green' ); 
   //jQuery对象不可以调用dom的属性和方法
   × btnOne.style.backgroundColor = ' red ' ; 

6.3 jQuery 对象长什么样？

 jQuery 对象：（伪数组，jQuery对象就是dom对象的一个包装集）
             var  $btnOne = $( '#one' );
             console.log($btnOne);        ---> 
 普通对象：  
           var btnOne = document.getElementById('one');
           console.log(btnOne);

6.4 dom对象转换为jQuery对象

  var div1 = document.getElementById('one');
  var $div1 = $(div1);
  console.log($div1);

6.5 jQuery对象转换为dom对象

6.5.1 使用下标取出来

  var $divs = $('div');
  var div1 = $divs[0];
  console.log(div1);

6.5.2 使用jQuery的方法 get（）

  var $divs = $('div');
  var div2=$divs.get(1);
  console.log(div2);

7、jQuery文件结构

  其实是一个自执行函数
  (function（）{
      window.jQuery = window. $ = jQuery;
   }（）) ;

• 引入一个js文件，是会执行js文件中的代码
• jQuery文件是一个自执行文件，执行这个jQuery文件中的代码，其实就是执行这个自执行函数
• 这个自执行文件就是给window对象添加一个jQuery属性和$属性
• $和jQuery是等价的，是一个函数。console.log(window.jQuery===window.$ ); true