jQuery概述
javascript库,即library,是一个封装好的特定的集合(方法和函数),就是在这个库里面。封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素
简单理解,就是一个js文件,里面对原生js进行了封装,存放到里面,这样我们可以快速高效地使用这些封装好了的功能。直接调用就好了。
比如 jQuery,就是为了快速方便地操作DOM,里面基本都是函数(方法)。里面都是用原生js实现的。
常见js库:
jQuery、prototype、YUI、Dojo、Ext JS、移动端的zepto
jQuery是一个快速简洁的javascript库
jQuery封装了javascript常用的功能代码,优化了DOM操作、事件处理、动画操作和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)
jQuery的优势:
- 轻量级。jQuery非常bai轻巧,,大小保持在30KB左右。
- 强大的选择器。
允许开发者dao使用从CSS1-CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择权。 - 出色的DOM操作的封装。
jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候,更得心应手。 - 可靠的事件处理机制
- 完善的Ajax
jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 - 不污染顶级变量。
- 出色的浏览器兼容性
- 链式操作方式
对发生在同一个jQuery对象上的操作,可以直接连写而无重复获取对象。 - 隐式迭代
当想找到带有“.myclass”类的全部元素,并将其隐藏,无需循环遍历每一个返回的元素。 - 行为层与结构层的分离
开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。使各个方面的开发人员各司其职,互不干涉。 - 丰富的插件支持
- 完善的文档
- 开源
jQuery的入口函数:
$是jQuery 的顶级对象,相当于原生js里面的window
有两种解决方法:
方法一:(推荐使用)
$(function(){
// 此处是页面DOM加载完的入口
});
方法二:
$(document).ready(function(){
// 此处是页面DOM加载完的入口
});
<script src="jquery.min.js"></script> //引用jQuery.js文件
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<script>
//1.等页面DOM加载完毕后再执行js代码
$(document).ready(function(){
$('div').hide(); //将盒子隐藏
})
//2.方法二
$(function(){
$('div').hide(); //实现的结果是一样的
})
</script>
<div></div>
</body>
Dom对象与jQuery对象对比
- DOM对象:用原生js获取过来的对象就是Dom对象
- jQuery对象:用jQuery方式获取过来的对象是jQuery对象,本质:通过 $ 把 DOM元素进行了包装(伪数组形式存储)。
- jQuery对象只能使用jQuery方法,DOM对象则使用原生的js属性和方法,不能混用。
jQuery对象与DOM对象间的互相转换
因为原生js 比 jQuery 大,原生的一些属性和方法 jQuery没有给我们封装,要想使用需要把 jQuery对象转换为DOM对象
1.DOM对象转换为jQuery对象: $(DOM对象)
var div = document.querySelector('div');
$(div);
2.jQuery对象转换为DOM对象:$('div')[index]
或 $('div').get(index)
index 是索引号
$(video);
$('video')[0].play();//视频播放
$('video').get[0].play();