【JQuery】JQuery入门——知识点讲解(一)

简介: 本期主要介绍JQuery入门——知识点讲解(一)

1. jQuery 简述


jQuery 是一个 JavaScript 框架。底层封装了大量 JavaScript 代码。

它兼容 CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

image.png

注: 压缩版和非压缩版功能代码一模一样 ,区别仅为压缩版将所有的回车换行全部删掉,并且删除了

绝大部分的注释,使得代码没有格式地堆在一起。

这样虽然牺牲了代码的可读性,但可以大大减少回车换行和注释占用的空间,功能和原来也是相同的。

非压缩版适合于学习 jQuery 查看源码;

压缩版适合于正式开发

jQuery2.0 及后续版本不再支持 IE6/7/8 浏览器

核心理念是 write less,do more( 写得更少 , 做得更多 )

image.png

2. jQuery 的引入及使用


image.png

jQuery 版本有很多,不同版本的 jQuery 之间方法和功能有一定改变。

为了教学统一,我们统一使用 jquery-1.11.3 版本。

将“资料”中的 jquery-1.11.3.min.js 引入页面,即可引入 jQuery

image.png

基本语法

jQuery(选择器);

$(选择器);

以上两种写法效果等价,开发中使用第二种

例如:

image.png

3. jQuery 对象和 JS 对象的互转


开发中,为了使用 JS 方法和属性,我们也会选择将 jQuery 对象转回 JS 对象。

格式: js 对象=jQuery 对象[0];

开发中,我们为了方便开发,会将 JS 对象转为 jQuery 对象使用;

格式: jQuery 对象=$(js 对象);

示例:

image.png

注:

jQuery 对象只能调用 jQuery 方法和属性;

JS 对象只能调用 JS 方法和属性;

4. jQuery 页面加载完成时执行代码


JS 中我们使用 JS onload 事件,保证页面加载完成时执行何种代码。

jQuery onload 进行了包装,变为了更为方便的代码:

image.png

以上两种方式效果等价,开发中我们使用第二种方式。

jQuery 页面加载完成事件也能绑定多个函数。

image.png

5. jQuery 基本选择器


jQuery 也有和 CSS 一样,也有选择器概念,即 选择性获取某些标签对象

jQuery 有大量复杂选择器,这里先介绍三个基本选择器。

ID 选择器

$("#id 值 ")

元素选择器

$(" 标签名 ")

类选择器

$(". 类名 ")

代码准备:

image.png

6. jQuery 动画效果(了解)


jQuery 的隐藏和显示相对 JS 更为动感圆滑。

代码准备:

image.png

以下所有动画效果方法中都有两个参数:

speed

动画效果的持续时间,单位:毫秒

一般快速效果设置 500 ,正常效果设置 1000 即可

fn

动画效果成功展示完成后,回来调用的函数。(回调函数)

基本效果:(放大缩小滑动)

image.png

image.png

image.png

相关文章
|
9月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
35 0
|
9月前
|
JavaScript 前端开发
jQuery01-入门-选择器
jQuery01-入门-选择器
|
9月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
9月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
48 0
|
18天前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
17 1
|
7月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
32 0
|
8月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
38 0
|
9月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
32 0
|
9月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
47 0
|
9月前
|
JavaScript 前端开发
js和jQuery知识点总结(二)
js和jQuery知识点总结