你的位置:首页 > Java教程

[Java教程]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数加载完成】

 1 <!DOCTYPE html> 2 <html> 3  <head> 4   <meta charset="UTF-8"> 5   <title>JS与JQ页面加载的区别</title> 6   <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7   <script> 8    window.onload=function(){ 9     alert("张三");10    }11    //传统的页面加载会存在覆盖问题,加载比JQ慢(整个页面加载完毕(包括里面的其他内容,比如图片))12    window.onload=function(){13     alert("李四");14    }15    16    //JQ的加载比JS加载要快!(当整个dom树结构绘制完毕就会加载)17    jQuery(document).ready(function(){18     alert("王五");19    });20    21    //JQ不存在覆盖问题,加载的时候是顺序执行22    $(document).ready(function(){23     alert("苏牧")24    });25    26    //简写方式27    $(function(){28     alert("汾九");29    });30   </script>31  </head>32  <body>33  </body>34 </html>

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

JS:document.getElementById();

JQ:$(“#id”);

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

 1 <!DOCTYPE html> 2 <html> 3  <head> 4   <meta charset="UTF-8"> 5   <title>JS和JQ获取的区别</title> 6   <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7   <script> 8    $(function(){ 9     //1.JS方式获取10     /*document.getElementById("btn").onclick=function(){11      location.href="惊喜.html"12     }*/13     //2.JQ方式获取14     $("#btn").click(function(){15      location.href="惊喜.html"16     });17    });18   </script>19  </head>20  <body>21   <input type="button" value="点我有惊喜!" id="btn" />22  </body>23 </html>

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

 1 <!DOCTYPE html> 2 <html> 3  <head> 4   <meta charset="UTF-8"> 5   <title>DOM对象与Jquery对象转换</title> 6   <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7   <script> 8    function write1(){ 9     //1.JS的DOM操作,DOM对象无法操作JQ对象里面的属性和方法10     document.getElementById("span1").innerHTML="萌萌哒!";11     //document.getElementById("span1").html("萌萌哒!");12     13     var spanEle=document.getElementById("span1");14     15     //5.将DOM对象转换成JQuery对象16     $(spanEle).html("胖胖哒!");17    }18    19    $(function(){20     $("#btn").click(function(){21      //2.JQ的JQuery操作,JQ对象无法操作JS里面的属性和方法!!!22      //$("#span1").innerHTML="呵呵哒!"23      $("#span1").html("呵呵哒!");24     25      //3.JQuery对象向DOM对象转换方式一26      $("#span1").get(0).innerHTML="美美哒!";27      28      //4.JQuery对象向DOM对象转换方式二29      $("#span1")[0].innerHTML="棒棒哒!";30     });31    });32   </script>33  </head>34  <body>35   <input type="button" value="JS写入" onclick="write1()"/>36   <input type="button" value="JQ写入" id="btn"/><br />37   男神:<span id="span1">你好帅!</span>38  </body>39 </html>

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

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