JavaScript库
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大推函数的精度理解库,就是在找个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解:就算一个JS文件,里面对我们原生的js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery,就算为了快速方便的操作DOM,里面基本都是函数(方法)。
常见的JavaScript库
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
这些库都是对原生的JavaScript的封装,内部都是用JavaScript实现的。
jQuery的概念
jQuery是一个快速、简洁的JavaScript框架(js库),其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
优点:
- 轻量级。核心文件从几十kb,不会影响页面加载速度
- 跨游览器兼容。基本兼容现在的主流游览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大大简化了DOM操作
- 支持插件拓展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
- 免费、开源
jQuery的入口函数
$(function () { ... // 此处是页面DOM加载完成的入口 });
$(document).ready(function () { ... // 此处是页面DOM加载完成的入口 });
jQuery的顶级对象 $
jQuery对象和DOM对象
- DOM 对象:用原生js获取过来的对象就是DOM对象
- jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装 形成一个伪数组的形式
- jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
jQuery对象和DOM对象相互转换
因为原生的js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法,需要把jQuery对象转换为DOM对象才能使用
1.DOM对象转jQuery对象
$(DOM对象)
2.jQuery对象转换为DOM对象(两种方式)
$('div')[index] // index是索引号 div 根据实际情况获取
$(‘div’)get(index)
<video src="mov.mp4" muted></video>
<script>
// 我们直接获取视频,得到就是jQuery对象
$('video');
// 我们已经使用原生js 获取过来 DOM对象
var myvideo = document.querySelector('video');
// 1. DOM对象转换为 jQuery对象
// $(myvideo)
// 2. jQuery对象转换为DOM对象 才能调用里面的play()方法
$('video')[0].play()
$('video').get(0).play()
</script>