jQuery入门

一、jQuery概括

jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

“写的更少，做的更多” 的轻量级 JavaScript 库。

通过访问jQuery获得最新的jQuery版本

二、jQuery引用

 本地引入 <script src="js/jquery-3.6.0.min.js"></script>

远程官网引入(前提必须要联网 使用其他网络的cdn) 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

百度引用 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

boot引用 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

三、window.onload 与 $(document).ready() 的区别

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法 
$(document).ready(function(){})可以简写成$(function(){});

Jquery中$(document).ready()和window.onload的区别_马大头的博客-优快云博客

四、dom对象转换为jQuery

原生js

var _div = document.getElementById("box");
 _div.style.color = "red";
 _div.style.width = "200px";

jQuery

//jQuery(_div).css("color", "#00f");
// $(_div).css("color", "#00f");
$(_div).css({ width: "200px", height: "100px", color: "yellow" });

五、jQuery对象转换为dom对象

    1、 jQuery对象[索引]

    2、 jQuery对象.get(索引)

 $("div")[1].style.backgroundColor = "red";
 $("div").get(0).style.backgroundColor = "yellow";