jQuery入门（一）

什么是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变量名之前加上“$”)

扫描二维码关注公众号，回复： 3326856 查看本文章

引入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来代替$

猜你喜欢