1、jQuery基础
Jquery它是一个库(框架),要想使用它,必须先引入!
jquery-1.8.3.js:一般用于学习阶段。
jquery-1.8.3.min.js:用于项目使用阶段
官网下载后,复制到当前WEB项目的js文件夹下,如下:
引入代码:<script type="text/javascript" src='/images/loading.gif' data-original="../../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='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../../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里面的属性和方法。
原标题:jQuery学习(一)——jQuery入门
关键词:jquery