什么是JQuery?
在原生js中,js的代码冗长复杂,不利于阅读和记忆。而JQuery很好地帮我们解决了这个问题。
举个例子来说:
同样实现这种效果:
js代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生js</title> 6 <style> 7 div{ 8 width:150px; 9 height:150px; 10 border:1px solid; 11 } 12 </style> 13 <script type="text/javascript"> 14 window.onload=function(){ 15 var div1=document.getElementsByTagName ("div")[0]; 16 var div2=document.getElementsByClassName("div2")[0]; 17 var div3=document.getElementById("div3"); 18 div1.style.backgroundColor="blue"; 19 div2.style.backgroundColor="green"; 20 div3.style.backgroundColor="red"; 21 alert("ME"); 22 }; 23 </script> 24 </head> 25 <body> 26 <div></div> 27 <div class="div2">如果冬天到了,</div> 28 <div id="div3">春天还会远吗?</div> 29 </body> 30 </html> 31
当我们使用JQuery达到同样效果时,代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生js</title> 6 <style> 7 div{ 8 width:150px; 9 height:150px; 10 border:1px solid; 11 } 12 </style> 13 <script src="js/jquery-3.3.1.js"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 var $div1=$("div"); 17 var $div2=$(".div2"); 18 var $div3=$("#div3"); 19 $div1.css({ 20 background:"blue" 21 }); 22 $div2.css({ 23 background:"green" 24 }); 25 $div3.css({ 26 background:"red" 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 <div></div> 33 <div class="div2">如果冬天到了,</div> 34 <div id="div3">春天还会远吗?</div> 35 </body> 36 </html>
两者对比,JQuery简洁明了,方便记忆。
而且JQuery是跨浏览器的,也就是说,我们不必再考虑兼容性了。这简直是美滋滋~~~~~~
(在JQuery中,为了标识JQuery对象,我们通常在JQuery变量名之前加上“$”)
引入JQuery
JQuery是一个javascript脚本库,不需要特别地安装,只需要我们在页面<head>中,通过script标签引入JQuery库即可。
引入本地JQuery <script scr="JQuery所在路径"></script> 除了引入本地JQuery外,我们还可以引入在线资源 <script src="JQuery的url"></script>>
入口函数
第一种写法:
$(document).ready(function(){
});
第二种写法:
jQuery(document).ready(function(){
});
第三种写法:
$(function(){
});
第四种写法:
jQuery(function(){
});
推荐使用第三种写法,方便简洁。
和window.onload的区别
区别一:书写个数不同
Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。 jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
区别二:执行时机不同
Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。 jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
jQuery冲突问题
在使用jQuery库又同时使用其他库,在jQuery库中,$代表jQuery的核心函数,在其他库中$代表其他含义,就会导致"$"含义冲突。
在这种情况下,jQuery选择“让步机制”,在JQuery代码头部加上:
1 jQuery.noConflict();//这行代码会释放jQuery对$的使用权
这样一来,我们今后必须用jQuery代替$。
无疑,这样加大了我们的难度,我们可以通过
var M=jQuery.noConflict() //这行代码的意思是通过M来代替$