【JQuery】JQuery入门——知识点讲解(一)
【摘要】
🔎这里是【JavaScript】,关注我学习前端不迷路 👍如果对你有帮助,给博主一个免费的点赞以示鼓励 欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JQuery】 目前主要更新JavaScript,一起学习一起进步。
👀本期介绍
本期主要介绍JQuery入门——知识点讲解(一)
文章目录
1. jQ...
🔎这里是【JavaScript】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JQuery】 目前主要更新JavaScript,一起学习一起进步。
👀本期介绍
本期主要介绍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)