jQuery-介绍及使用
浏览器支持
版本 | 支持 |
---|---|
jQuery 1.9及以下 | 所有主流浏览器 |
jQuery 2.0及以上 | 不再支持IE6,7,8 |
引用script
可以直接引用官网CDN:
<!-- 开发版: -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- 发行版: -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
入口函数
window指的是整个浏览器窗口,不同于dom的document
onload指的是资源加载完毕,ready指的是结构加载完毕
onload只能用于window和某个具体的资源,不能用于document
一般使用的入口函数都是$(document).ready
原生js
//window所有资源加载完毕
window.onload=function(){};
//某个资源加载完毕
img.onload=function(){};
//整个dom结构加载完毕
把js代码放在所有html代码后即可
jQuery
//window所有资源加载完毕
$(window).on('load',function(){});
//某个资源加载完毕
$("img:first").on('load',function(){});
//整个dom结构加载完毕
$(document).ready(function(){});
或 $().ready(function(){});
或 $(function(){});
//window结构加载完毕(经测试原生js无效)
$(window).ready(function(){});
//dom中某个资源结构加载完毕(经测试原生js无效)
$(img).ready(function(){});
原生js的onload函数只能出现一个,否则后面的函数会覆盖前面的函数
jQuery的onload函数可以出现多个,且所有函数都依次执行
jQuery的ready也可以出现多个
$的含义
入口函数
$(function(){});
等价于 jQuert(function(){});
$(或jQuery)实际上是一个函数名,jQuery也因此占用了两个变量名,jQuery在实际运行中实际上是作为函数去调用的
jQuery变量
dom对象和jQuery对象的获取
有一段html代码如下:
<div class="box" id="box1">box1</div>
<div class="box">box2</div>
原生js(dom对象)
原生js的获取方式:
var box1=document.getElementById('box1');
var boxs=document.getElementsByClassName('box');
console.log(box1);
console.log(boxs);
得到结果:
<!-- 一个dom对象 -->
<div class="box" id="box1">box1</div>
<!-- 一个dom对象数组 -->
<HtmlCollection length="2">...</HtmlCollection>
jQuery(jQuery对象)
jQuery的获取方式:
var box1=$('#box1');
var boxs=$('.box');
console.log(box1);
console.log(boxs);
得到结果:
<!-- 一个包装了jQuery方法的dom对象数组(称为jQuery对象) -->
[object Object]: {0: HTMLDivElement, length: 1}
<!-- 一个jQuery对象 -->
[object Object]: {0: HTMLDivElement, 1: HTMLDivElement, length: 2, prevObject: Object}
原生js的ById返回一个对象,ByTagName和ByClassName返回一个数组(即使只有一个对象)
不同于原生js,jQuery无论如何选择都返回一个包装了jQuery方法的数组(称为jQuery对象)
jQuery转dom
jQuery对象是一个包装了jQuery方法的dom对象数组,因此:
//获取第一个 box类 的dom对象
var box1=$('.box')[0];
//通过id选择的jQuery对象转换为dom对象
var box1=$('#box1')[0];
jQuery对象中的单个元素,是单个不包含jQuery方法的dom对象