jQuery学习(一)——jQuery入门

1、jQuery基础

Jquery它是一个库(框架)，要想使用它，必须先引入！

jquery-1.8.3.js：一般用于学习阶段。

jquery-1.8.3.min.js：用于项目使用阶段

官网下载后，复制到当前WEB项目的js文件夹下，如下：

引入代码：<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>

2、JS和JQ页面加载的区别

传统的JavaScript页面加载函数是最后一个生效，它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】

jQuery的页面加载函数可以存在多个(不会发生覆盖)，它会按照顺序进行执行。【dom数加载完成】

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>JS与JQ页面加载的区别</title>
         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
         <script>
             window.onload=function(){
                 alert("张三");
             }
             //传统的页面加载会存在覆盖问题，加载比JQ慢（整个页面加载完毕（包括里面的其他内容，比如图片））
             window.onload=function(){
                 alert("李四");
             }

             //JQ的加载比JS加载要快！（当整个dom树结构绘制完毕就会加载）
             jQuery(document).ready(function(){
                 alert("王五");
             });

             //JQ不存在覆盖问题，加载的时候是顺序执行
             $(document).ready(function(){
                 alert("苏牧")
             });

             //简写方式
             $(function(){
                 alert("汾九");
             });
         </script>
     </head>
     <body>
     </body>
 </html>

3、JS和JQ方式获取的区别

JS:document.getElementById();

JQ:$(“#id”);

案例事先要创建一个名为“惊喜”的HTML文件，并放在同一个文件夹下。

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>JS和JQ获取的区别</title>
         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
         <script>
             $(function(){
                 //1.JS方式获取
                 /*document.getElementById("btn").onclick=function(){
                     location.href="惊喜.html"
                 }*/
                 //2.JQ方式获取
                 $("#btn").click(function(){
                     location.href="惊喜.html"
                 });
             });
         </script>
     </head>
     <body>
         <input type="button" value="点我有惊喜！" id="btn" />
     </body>
 </html>

4、DOM对象和JQuery对象的转换

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>DOM对象与Jquery对象转换</title>
         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
         <script>
             function write1(){
                 //1.JS的DOM操作，DOM对象无法操作JQ对象里面的属性和方法
                 document.getElementById("span1").innerHTML="萌萌哒！";
                 //document.getElementById("span1").html("萌萌哒！");

                 var spanEle=document.getElementById("span1");

                 //5.将DOM对象转换成JQuery对象
                 $(spanEle).html("胖胖哒！");
             }

             $(function(){
                 $("#btn").click(function(){
                     //2.JQ的JQuery操作，JQ对象无法操作JS里面的属性和方法！！！
                     //$("#span1").innerHTML="呵呵哒！"
                     $("#span1").html("呵呵哒！");

                     //3.JQuery对象向DOM对象转换方式一
                     $("#span1").get(0).innerHTML="美美哒！";

                     //4.JQuery对象向DOM对象转换方式二
                     $("#span1")[0].innerHTML="棒棒哒！";
                 });
             });
         </script>
     </head>
     <body>
         <input type="button" value="JS写入" onclick="write1()"/>
         <input type="button" value="JQ写入" id="btn"/><br />
         男神：<span id="span1">你好帅!</span>
     </body>
 </html>

注意：JQ对象只能操作JQ里面的属性和方法

　JS对象只能操作JS里面的属性和方法。