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