标签：title 加载完成 hide 转换 概念 col div sele 轻量
仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了
javaScript库：即library,是一个封装好的特定的集合（方法和函数）。
从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show比如获取元素
简单理解：库就是一个JS文件，对原生JS代码进行封装，高效使用
常见的javaScript库
jQuery
prototype
YUI
Dojo
Ext js
移动端的zepto
jQuery 是一个快速、简介的javaScript库，宗旨是"write Less,Do More" ,倡导写更少的代码做更多的事情
j 是 javaScript ,Q 是 Query查询，意思就是查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能
优化了DOM操作、事件处理、动画设计、Ajax交互
学习jQ的本质就是学习调用这些函数（方法），提高开发效率
优点
轻量级。核心文件才几十kb,不会影响页面加载速度
跨浏览器兼容，基本兼容主流浏览器
链式编程，隐式迭代
对事件、样式、动画支持、大大简化DOM操作
支持插件扩展开发，如：树形菜单、日期控件、轮播图
免费、开源
1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
官网地址： https://jquery.com/
各个版本的下载：https://code.jquery.com/
引入jQuery文件
使用即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(‘div‘).hide()
</script>
</body>
</html>
两种写法
$(document).ready(function() {
...// DOM加载完成的入口
})
$(function() {
...// DOM加载完成的入口
})
等着DOM结构渲染完毕即可执行内部代码，不用等待外部资源加载完成加载完成，jQuery帮我们完成了封装
相当于原生js中的DOMcontentLoaded
不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
更推荐使用第一种方式
$是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$
$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1.$是jQuery的别称
$(function() {
alert(‘11‘)
})
jQuery(function() {
alert(‘22‘)
})
// 2.$是jQuery的顶级对象，相当于原生javaScript中的window
</script>
</body>
原生JS获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象
jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
jquery 对象只能使用jquery方法，DOM对象则使用 原生js属性和方法
这两个可以互相转换，因为原生js比jq更大，原生有的属性jq没有，想要使用这些属性和方法需要把jq对象转换DOM对象才能使用
DOM对转换jq对象
$(DOM对象)
jq对象转换为DOM对象
$(‘‘)[index]
$(‘‘).get(index)
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为jquery对象
// （1）直接获取视频，得到jq对象
$(‘video‘)
// (2) 使用原生js 获取过来DOM对象
var myvideo = document.querySelector(‘video‘)
// $(myvideo).play() jq 没有play方法
// myvideo.play()
// 2.jq对象转换为DOM对象
$(‘video‘)[0].play()
$(‘video‘).get(0).play()
</script>
</body>
</html>标签：title 加载完成 hide 转换 概念 col div sele 轻量
原文地址：https://www.cnblogs.com/xujinglog/p/12990898.html
