文章目录
- 前言
- 一、关于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("执行结束");
})
})
})总结
就此停笔，希望对你有所帮助吧，最后依旧诚挚祝福看到文章的你有个好心情~
