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