jQuery 是一个快速、简洁的 JavaScript 库。j是JavaScript,Query是查询,jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery的本质就是学习调用这些函数(方法)。
即library,是一个封装好的特定的集合(方法和函数)。在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
常见的JavaScript 库有jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto,这些库都是对原生 JavaScript 的封装,内部都是用JavaScript 实现的,我们主要学习的是 jQuery。
简单理解JavaScript 库就是JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
官网地址: https://jquery.com/
各个版本的下载: https://code.jquery.com/
版本:1x :兼容 IE 678 等低版本浏览器, 官网不再更新。
2x :不兼容 IE 678 等低版本浏览器, 官网不再更新。
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的。
1.进入官网点击
2.选择压缩版本
3.全选复制
5.引入
Document
Document
jq的入口函数 和 js的入口函数 有什么区别?
原生js的入口函数里面的代码:页面文档、外部的 js 文件、css 文件、图片等加载完毕才执行。
jquery的入口函数里面的代码: dom节点加载完毕时执行。
1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $。
2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对 象,就可以调用jQuery 的方法。
1.DOM对象:利用原生JS获取来的对象就是DOM对象【document.getElement等方法】
Document
2.jQuery对象:jQuery 方法获取的元素就是 jQuery 对象【$('div')等】
本质:通过$把DOM元素进行了包装(以伪数组形式存储)
Document
dom对象只能使用原生js方法,jquery对象只能使用jq的方法,不能混用。
如隐藏功能:dom对象:div.style.display='none' jquery对象:$('div').hide()
DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法 需要把jQuery对象转换为DOM对象才能使用。(例如jQuery中没有play方法)
JQ对象转换成DOM $( )[0]或者; $( ).get(0) DOM对象转换JQ对象:$(DOM对象)
Document
遍历内部 DOM 元素(伪数组形式存储)即把匹配的所有元素内部进行遍历循环的过程就叫做隐式迭代。ps:迭代会对元素做相同的操作
Document
隐式迭代
隐式迭代
补充:checked选择器 查找被选中的表单元素
Document
1
2
3
4
5
Title
- 0-测试
- 1-测试
- 2-测试
- 33333
- 4-测试
- 5-测试
123
Document
下拉菜单
- 111
- 222
- 333
- 122
- 233
- 344
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
案例:多个按钮点击改变当前按钮颜色,其他的不变
Document
Document