jQuery学习——jQuery入门
Posted 会飞的咸鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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里面的属性和方法。
以上是关于jQuery学习——jQuery入门的主要内容，如果未能解决你的问题，请参考以下文章