入门 jQuery

目录

一、jQuery概括

二、jQuery引用

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

四、dom对象转换为jQuery

五、jQuery对象转换为dom对象

---

一、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(){});

四、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";