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

举报
陶然同学 发表于 2022/08/03 00:32:55 2022/08/03
【摘要】 🔎这里是【JavaScript】,关注我学习前端不迷路 👍如果对你有帮助,给博主一个免费的点赞以示鼓励 欢迎各位🔎点赞👍评论收藏⭐️ 👀专栏介绍 【JQuery】 目前主要更新JavaScript,一起学习一起进步。 👀本期介绍 本期主要介绍JQuery入门——知识点讲解(一) 文章目录 1. jQ...

🔎这里是【JavaScript】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【JQuery】 目前主要更新JavaScript,一起学习一起进步。

👀本期介绍

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

文章目录

1. jQuery 简述

2. jQuery 的引入及使用

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

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

5. jQuery 基本选择器

6. jQuery 动画效果(了解)

1. jQuery 简述

jQuery 是一个 JavaScript 框架。底层封装了大量 JavaScript 代码。
它兼容 CSS3 ,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。
注: 压缩版和非压缩版功能代码一模一样 ,区别仅为压缩版将所有的回车换行全部删掉,并且删除
绝大部分的注释,
使得代码没有格式地堆在一起。
这样虽然牺牲了代码的可读性,但可以大大减少回车换行和注释占用的空间,功能和原来也是相同
的。
非压缩版适合于学习 jQuery 查看源码;
压缩版适合于正式开发
jQuery2.0 及后续版本不再支持 IE6/7/8 浏览器
核心理念是 write less,do more( 写得更少 , 做得更多 )

 

2. jQuery 的引入及使用

jQuery 版本有很多,不同版本的 jQuery 之间方法和功能有一定改变。
为了教学统一,我们统一使用 jquery-1.11.3 版本。
将“资料”中的 jquery-1.11.3.min.js 引入页面,即可引入 jQuery
基本语法
jQuery( 选择器 );
$( 选择器 );
以上两种写法效果等价,开发中使用第二种
例如:

 

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

开发中,为了使用 JS 方法和属性,我们也会选择将 jQuery 对象转回 JS 对象。
格式: js 对象 =jQuery 对象 [0];
开发中,我们为了方便开发,会将 JS 对象转为 jQuery 对象使用;
格式: jQuery 对象 =$(js 对象 );
示例:
注:
jQuery 对象只能调用 jQuery 方法和属性;
JS 对象只能调用 JS 方法和属性;

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

JS 中我们使用 JS onload 事件,保证页面加载完成时执行何种代码。
jQuery onload 进行了包装,变为了更为方便的代码:
格式 1

格式 2

以上两种方式效果等价,开发中我们使用第二种方式。
jQuery 页面加载完成事件也能绑定多个函数。

 

5. jQuery 基本选择器

jQuery 也有和 CSS 一样,也有选择器概念,即 选择性获取某些标签对象
jQuery 有大量复杂选择器,这里先介绍三个基本选择器。
ID 选择器
$("#id ")
元素选择器
$(" 标签名 ")
类选择器
$(". 类名 ")
代码准备:

6. jQuery 动画效果(了解)

jQuery 的隐藏和显示相对 JS 更为动感圆滑。
代码准备:
以下所有动画效果方法中都有两个参数:
speed
动画效果的持续时间,单位:毫秒
一般快速效果设置 500 ,正常效果设置 1000 即可
fn
动画效果成功展示完成后,回来调用的函数。(回调函数)
基本效果:(放大缩小滑动)

 

滑动效果:(上下滑动)

淡入淡出效果:(改变透明度的效果) 

文章来源: blog.csdn.net,作者:陶然同学,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_45481821/article/details/125994664

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。