jQuery——jQuery学习笔记(完整版）
文章目录
- 前言
- 一、关于jQuery
- 二、初步使用
- 三、 jQuery选择器
- 四、JQUERY动画
- 五 、JQUERY属性操作
- 六、JQUERY位置操作
- 总结
一、关于jQuery
什么是jQuery ？
- jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
- 开始使用 jQuery 可能很容易，也可能具有挑战性，这取决于您对 JavaScript、HTML、CSS 和一般编程概念的经验。
- 要知道的一件重要事情是 jQuery 只是一个 JavaScript 库 。 jQuery 的所有功能都是通过 JavaScript 访问的，因此对 JavaScript 有深入的了解对于理解、构建和调试代码至关重要。 虽然定期使用 jQuery 可以随着时间的推移提高您对 JavaScript 的熟练程度，但如果不了解 JavaScript 的内置结构和语法，就很难开始编写 jQuery。
jQuery的特点
1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 免费、开源。
下载
jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。
各个版本的下载：jQuery CDN
二、初步使用
1. 引入
<script type="text/javascript" src='js/jquery-3.6.0.min.js'></script>
2. 准备工作
相当于JS中的 window.onload(function( ){ })
方式一
$(document).ready(function(){
alert("页面加载完成");
})
方式二
$(function () {
alert("页面加载完成");
}) ;
三、 jQuery选择器
第一节：基础选择器
语法：$("选择器") 里面写css选择器如：
1：基础选择器
$("#demo") ：获取id
$(“.demo”) : 获取类选择器
$(“div”) : 获取标签选择器
$(“div,p,span”) :获取多个元素(并集选择器)
$(“div.demo”) :获取交集选择器
$(“div>li”) : 获取子代选择器
$(“div li”) : 获取后代元素选择器
2：筛选选择器
$("div:first") 获取第一个 div元素
$("div:last") 获取最后一个div元素
$("div:eq(2)") 获取div元素中，索引为2的元素 ，从0开始
$(div:odd) 获取到div元素中，索引为奇数的元素
$(div:even) 获取到div元素中，索引为偶数的元素
代码举例：
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>
$(function(){
var v = $("li:eq(1)").text();
var odd = $("li:odd");
console.log(v);
console.log(odd)
})
</script>
第二节：更改样式
2.1 语法格式
$('div').css('属性', '值')
举例：$("div").css("color","red");
注意：它会让页面所有div标签都变为红色，称之为隐式迭代，不需要我们在遍历。
2.2 链式编程
$(".red1").siblings().css("color","red")
当期元素的兄弟元素变为红色，自己不变色。
$(".red1").css("color","blue") .siblings().css("color","red")
当期元素的兄弟元素变为红色，自己变蓝色。
2.3 对象形式
$(".red1").css({ color:"red",'font-size':"20px"});
属性可以不加‘’，但-需要注意。
2.4 类的方式
$("div").addClass("current"); //添加类
$("div").removeClass("current");//删除类
$("div").toggleClass("current");//切换类
第三节：tab栏切换
示例代码：
<div class="tab"><div class="nav" ><a href="javascript:;" class="hover">公司新闻</a><a href="javascript:;">公司动态</a><a href="javascript:;">行业新闻</a></div><div class="nav_con"><div>公司新闻-show</div><div>公司动态-show</div><div>行业新闻-show</div></div></div><script src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$(".tab .nav a").click(function(){$(this).addClass("hover").siblings().removeClass("hover");var index = $(this).index();$(this).parent().siblings().find("div").eq(index).show().siblings().hide();})})</script>四、JQUERY动画
第一节：显示隐藏
show() / hide() / toggle() ;
举例：
show(speed,easing,fn)
Speed：速度，slow,normal fast 或者毫秒
$("#demo").click(function(){
$(this).hide(2000)
})
第二节：滑入滑出
滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;
<button>下拉滑动</button><button>上拉滑动</button><button>切换滑动</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 下滑动 slideDown()$("div").slideDown(500);})$("button").eq(1).click(function() {// 上滑动 slideUp()$("div").slideUp(500);})$("button").eq(2).click(function() {// 滑动切换 slideToggle()$("div").slideToggle(500);});});</script>第三节：淡入淡出
淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
<button>淡入效果</button><button>淡出效果</button><button>淡入淡出切换</button><button>修改透明度</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 淡入 fadeIn()$("div").fadeIn(1000);})$("button").eq(1).click(function() {// 淡出 fadeOut()$("div").fadeOut(1000);})$("button").eq(2).click(function() {// 淡入淡出切换 fadeToggle()$("div").fadeToggle(1000);});$("button").eq(3).click(function() {// 修改透明度 fadeTo() 这个速度和透明度要必须写$("div").fadeTo(1000, 0.5);});});</script>五 、JQUERY属性操作
第一节：元素固有属性prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
<input type="button" name="hello" value="查看信息" id="btn"/>
<script type="text/javascript">
$("#btn").click(function(){
console.log($(this).prop("name"));
})
</script>
第二节： 元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
$("#btn").click(function(){
console.log($(this).attr("index"));
})
第三节： 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
六、JQUERY位置操作
第一节：尺寸操作
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
第二节：位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:
offset() 定义和用法
方法设置或返回被选元素相对于文档的偏移坐标。
返回偏移坐标：
$(selector).offset()
设置偏移坐标：
$(selector).offset({top:value,left:value})
使用函数设置偏移坐标：
$(selector).offset(function(index,currentoffset))
Position() 方法使用
jQuery position() 方法 | 菜鸟教程
scrollTop()方法使用
jQuery scrollTop() 方法 | 菜鸟教程
第三节：动画练习
$(function(){var boxtop = $(".main").offset().top;$(window).scroll(function(){var scrolltop = $(document).scrollTop();console.log(scrolltop);if(scrolltop>=boxtop){$(".backtop").fadeIn();//显示}else{$(".backtop").fadeOut(); //淡出}})$("#backtop").click(function(){$("body,html").stop().animate({scrollTop:0},3000,'linear',function(){alert("执行结束");})})})总结
就此停笔，希望对你有所帮助吧，最后依旧诚挚祝福看到文章的你有个好心情~
jQuery——jQuery学习笔记(完整版）相关推荐
- go语言基础学习笔记完整版
目录 背景 基础 helloworld 变量 常量 数据类型 基本数据类型与复杂数据类型 值类型与引用类型 查看变量类型 字符与字符串 类型转换 指针 打包 读取控制台数据 for-range遍历 生 ...
- Opencv学习笔记完整版
opencv下载 https://www.raoyunsoft.com/wordpress/index.php/2020/03/09/opencvdownload/ opencv下载 https:// ...
- 韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
- AI工程师职业规划和学习路线完整版
AI工程师职业规划和学习路线完整版 如何成为一名机器学习算法工程师 成为一名合格的开发工程师不是一件简单的事情,需要掌握从开发到调试到优化等一系列能 力,这些能力中的每一项掌握起来都需要足够的努力和经 ...
- java 笔记 pdf_JAVA笔记完整版.pdf
JAVA笔记完整版 1.Basic Linux 操作 1)Linux 是模仿UNIX 的操作系统, 是山寨版的Unix 2)Linux 命令 pwd 打印当前工作目录 cd 改变工作目录 ls 显示目 ...
- vb教材笔记_金文老师vb教程笔记(完整版).doc
金文老师vb教程笔记(完整版) 金文老师vb教程笔记 vasual basic 程序开发环境 第一章visual basic 的启动与退出 启动vb的四种方法: 使用"开始"菜单中 ...
- jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
- jQuery基础学习笔记(上)
1.简介及语法 认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
- 野火洋桃STM32开发版学习指导完整版
该文章是我历时一个月整理总结而成,专门针对想要通过野火&洋桃STM32开发板入门stm32的读者.由于csdn编辑限制,该学习指导只包含文字信息.如需查看含图片的完整版可进入我的博客下载页.完 ...
最新文章
- 鱼佬：我的数据挖掘之路！
- SQL Server 2012 安装杂谈
- python中的散点图代码-绘制python中的线和散点图
- AVS 通信模块之HTTP2Transport
- DBMS_SQL系统包的使用
- Ruby 的环境搭建及安装
- Kubesphere查看token
- 诗与远方：无题（四十）
- jQuery检查某个元素在页面上是否存在
- Python基础——字符串、列表、元组
- tastypie使用cache对list data无效问题
- Map转JSON内容解释
- 机器视觉软件能够做什么？-龙熙视觉机器视觉培训李杰
- ior - POSIX文件系统测试工具
- 如何安装微信解决小黑块问题（一定可以使用）
- 把Eclipse修改为黑色主题！配色方案详细图文并茂可供下载！
- 搭建ADSL自动拨号高匿代理池
- Quartus Prime下载地址（17.1Standard）
- 什么是MES系统，实施难度大不大？
- cannot connect to 192.168.137.137:5555: 由于目标计算机积极拒绝，无法连接。