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对象

转载于:https://www.cnblogs.com/yangjiale/p/11364886.html