JQuery简介

    <!--
    为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. 
    JavaScript 库封装了很多预定义的对象和实用函数。
    能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。
    jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库
    jQuery 理念: 写得少, 做得多. 
    -->
 

       <!--1.导入js类库-->
       <script type="text/javascript" src="../js/jquery-3.1.1.min.js" ></script>
       
       <script>
       	//页面加载事件
       	window.onload=function(){
       		alert("js");
       	}
       	
       	//$代表jquery
       	//$(document).ready(function(){}同等于window.onload,代码写在{}里面
       	$(document).ready(function(){
       		alert("jquery");
       	})
       	
//     	jQuery(document).ready(function(){
//     		alert("jquery");
//     	})不要用

        //简写
        $(function(){
        	alert("jquery1");
        })
       	
       </script>

 

JQuery对象：

    <!--
        JQuery对象：
        jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象
        jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 
        那么它就可以使用 jQuery 里的方法: $("#persontab").html();
        jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
        约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
        var $variable = jQuery 对象
        var variable = DOM 对象

        JQuery 对象转成 DOM 对象：
        jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 
        不得不使用 DOM 对象的时候, 有如下两种处理方法:
        (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.  
        (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象                    
     -->

    <script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
    <script>
    	//jquery对象和dom对象
    	$(function(){
    		//var p1=document.getElementById("p1");和var $p1=$("#p1");作用一致
    		//var p1=document.getElementById("p1");
    		//1.jquery对象转成dom对象
    		//1）.使用jquery获取元素节点
    		var $p1=$("p");
    		//2)jquery对象是一个数组对象
    		alert($p1.length);
    		//3)可以通过数组的下标转成dom对象
    		var p1=$p1[0];
    		alert(p1.firstChild.nodeValue);
    		
    		//4)可以通过get（index）方法得到相应的dom对象
    		var $p2=$("#p2");
    		var p2=$p2.get(0);
    		alert(p2.firstChild.nodeValue);
    		
    		//2.dom对象转成jquery对象
    		var p3=document.getElementById("p3");
    		//使用$()包装，就可以吧dom对象转成jquery对象
    		alert($(p3).text());
    	})
    </script>

DOM对象：

	<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
    <script>
        //如何获得p元素的内容
        /*
            jQuery 对象就是通过jQuery 包装DOM 对象后产生的对象。
            jQuery 对象是jQuery 独有的。如果一个对象是jQuery 对象，那么就可以使用jQuery 里的方法。
            
            注意事项：
            1.在jQuery对象中，无法使用DOM对象的任何方法
              $(“#id”).innerHTML;
            2.在DOM对象中，也无法使用jQuery对象的任何方法
              document.getElementById(“#id”).html();
        */
       //改变id是testP的元素节点的文本值
//     window.onload=function(){
//     	  document.getElementById("testP").innerHTML="你不喜欢吃什么水果";
//     }
//   
       $(function(){
       	//获取p标签
       	$("#testP").html("<h2>你不喜欢吃什么水果</h2>");
       })
    </script>

ready()：

        等待DOM元素都加载完毕，类似window.onload  
        $=jQuery

            $(document).ready()和Window.onload区别
            1.执行时间 
            2.编写个数不同
            window.onload不能同时编写多个，如果编写多个，只会执行最后一个
            $(document).ready(function(){})可以写多个
            3.简写方法
            window.onload没有简化写法 
            $(document).ready(function(){})可以简写成$(function(){});
            4.总结
                    以浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。
                    在常规的 Javascript 代码中，通常使用 window.onload 方法，
                    而在 Jquery 中，使用的是 $(document).ready() 方法。 
            $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。