JavaScript--jQuery框架-优快云博客

本文链接：https://blog.youkuaiyun.com/zhqi9277/article/details/130435726

该文详细介绍了jQuery的基本使用，包括如何引入jQuery库，以及jQuery的选择器如:first,:last,:odd,:even,:gt(index),:lt(index),:eq(index)。还讲解了css方法用于设置样式，attr方法用于获取和设置属性，以及如何操作节点文本。此外，文章还探讨了slide、fade特效函数和事件绑定的应用，例如淡入淡出轮播图的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JQuery简介

在这里插入图片描述
概述：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.1 引包

概述:目前而言：我们接触过文件类型css、html、js。JS这门脚本语言需要嵌套在静态页面中才可以执行的，
独立JS文件【书写JS语法】不能单独运行，需要在静态页面中引入。
在这里插入图片描述
注意：JS文件里面可以书写JS代码,JS脚本语言（代码），需要嵌套在静态页面中才可以执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 引包:静态页面引入JS文件：让静态页面给JS文件提供执行环境 -->
	<script type="text/javascript" src="./jQuery.js"></script>
</head>
<body>
	 <h1>我是一级标题</h1>
</body>
</html>

JS文件里面代码：务必在静态页面中引包【给JS文件提供执行环境，JS文件里面代码才可以执行】

1.2JQ体验

概述：jQuery框架（函数库）：简称JQ。它是人家封装好的非常优秀的一个JS函数库。
在使用JQ函数库的时候，需要将人家的源码获取到。
下载源码地址:http://www.jq22.com/jquery-info122
学习手册：https://jquery.cuishifeng.cn/
注意：JQ有三个版本1、2、3
注！jquery-2.0以上版本不再支持IE 6/7/8,并不是最新的版本就最好的，而是根据您项目需求所适合的版本！

<script type="text/javascript">
    $("li").click(function(){
       $(this).css({'background':"red"});
    });
    $("div").animate({'left':1000},1000);
</script>

JQ函数库在使用的时候切记引包
因为JS文件不能独立运行，需要在静态页面环境下才可以运行

2.jQuery基本使用

概述：jQuery是前端当中非常优秀一个JS函数库。这个函数库对外暴露一个$函数，它是jQuery函数库非常核心的一个函数可以用来匹配节点树上标签。
注意：jQuery函数库支持我们曾经学习过的全部选择器：*【通配选择器】、标签选择器、类选择器、id选择器等。
在这里插入图片描述

<script type="text/javascript">
    //jQuery函数库:对外暴露的是$函数,$函数是整个框架中最为重要的一个函数，可以获取节点
    //JQ函数库：支持我们曾经学习过全部选择器，用来获取响应节点
    //标签选择器
    // $("li").css("color",'red');
    // 类选择器
    // $('.cur').css('background','cyan');
    // id选择器
    $('#study').css('fontSize',40);
</script>

JQ函数库对外暴露一个核心函数$,可以获取节点树上节点
JQ支持链式语法，连续大点【永远是$函数开头的】
JQ支持我们曾经学习过的全部全部选择器
CSS函数，也是JQ函数库提供的，用来设置匹配节点的行内样式
JQ对象（类数组）才可以使用JQ里面方法

2.1jQuery独有选择器

概述：jQuery函数库支持我们曾经学习过全部选择器【通配符选择器、标签选择器、id选择器、class选择器】。
但是，jQuery框架给我们提供一些CSS拓展选择器【JQ框架独有的：只能在JQ中使用】

2.1.1 :first||:last

概述:这两者选择器，是JQ框架中独有的。他们两个选择器主要的作用是，可以获取匹配节点的第一个元素、最后一个元素。
语法格式:

$(selector: first)

如：在这里插入图片描述

<script type="text/javascript">
   //selecotr：first:获取匹配节点第一个元素
   //selector:last:获取匹配节点最后一个元素
   $("li:first").css("color",'red');
   $("ul li:last").css('color','pink');
</script>

2.1.2:odd||:even

概述:这两者也是JQ独有选择器，可以获取匹配元素奇数索引值、偶数索引值节点。
语法格式：

$(selector: odd)
//selector:odd 奇数选择器
   //selector:even 偶数选择器
   $("li:odd").css('color','cyan');
   $('li:even').css('color','orange');

2.1.3 :gt(index)与:lt(index)

概述:他们两者也是JQ独有选择器，主要的作用是可以获取匹配节点大于某一个索引值、小于某一个索引值节点。
语法格式:

$(selector:gt(index))
//代码如下：
    //:gt(index):大于选择器
    $("ul li:gt(3)").css('color','white');
    //:lt(index):小于选择器
    $('ul li:lt(3)').css('color','cyan');

2.1.4 :eq(index)

概述：它也是JQ独有选择器，主要的作用是获取匹配节点，某一个准确索引值节点。

//语法格式：
$(selector:eq(index))
//代码如下：
 $("ul li:eq(3)").css('color','pink');

2.1.5表格制作

<script type="text/javascript">
  //表格各行标颜色
  $("tr:even").css('background','skyblue');
  $('tr:odd').css('background','orange');
</script>

2.2css方法

概述：css这个方法，它是JQ框架给我们提供的，它主要的作用是可以设置匹配节点行内样式。

 $("div").css("color","red");

第一个参数：匹配节点添加样式名字。
第二个参数：匹配节点添加样式的属性值。
注意：当前这种写法不常用，因为只能给元素设置一个样式。

<script type="text/javascript">
   //CSS方法是JQ框架提供，给匹配节点添加行内样式
   //JQ支持链式语法:从左到右
   $("div").css({
   	   color:"red",
   	   background:"cyan",
   	   fontSize:30,
   	   opacity:.3
   });
 </script>

以后再给匹配节点添加样式，传递JSON数据格式即可【可以设置多个样式】
而且属性值可以省略px单位，中间带有横杠的样式可以变为驼峰写法。

2.3attr方法

在这里插入图片描述
概述：attr方法是JQ框架给我们提供的，它主要的作用是可以获取或者设置节点的属性。

<script type="text/javascript">
  //attr方法：JQ框架提供的，用来获取||设置节点属性
  //获取节点属性值
  console.log($("input:eq(1)").attr("type"))
  //动态设置节点属性值
  $("input:eq(1)").attr("type","text");
  //获取节点属性值
  console.log($('img').attr("src"));
  //修改节点属性值
  $("img").attr("src","./images/2.jpg")
</script>

attr是JQ框架提供的：可以用来获取||设置节点属性

2.4操作节点文本方法

概述：原生DOM操作的时候，我们可以操作节点文本。分为两种情况：
操作非表单元素文本-----使用的是innerHTML属性
操作表单元素文本----- 使用的是value属性
/*********************************************/
JQ框架也给我们提供了一些操作文本的方法：分为两种情况
操作非表单元素文本----使用html方法
操作表单元素文本-----使用val方法

<script type="text/javascript">
  //JQ提供的val方法：可以用来获取||设置表单元素文本
  //获取表单元素文本
  console.log($("input").val());
  //修改表单元素文本
  $("input").val("我是大帅哥");
  //JQ提供html方法：可以用来获取||设置非表单元素文本
  console.log($("div").html());
  //重新设置
  $("div").html("我是奥利给");
</script>

JQ函数库：对外暴露都是函数，切记加上小括号呀！！！

2.5特效函数

概述：jQuery函数库给我们提供很多特效函数。特效函数只能在JQ当中使用。

2.5.1slideDown||slideUp

概述：slideDown与slideUp这两个方法是有JQ提供的，他们两者主要的作用是可以让匹配元素进行，
向下滑动、下上卷起操作。
语法格式:
$(selector).slideDown(time,callBack)

第一个参数：代表动画每一次动画时间。（可有可无的）
第二个参数：回调函数，当动画结束以后立即执行一次。（可有可无）

<script type="text/javascript">
  //匹配第一个按钮：绑定单机事件
  $("button:eq(0)").click(function(){
  	  //匹配div：将div进行卷起操作
  	  $(".cur").slideUp(2000,function(){
  	  	  //当前这个函数：当动画结束之后立即执行一次
  	  	  console.log('我的动画结束了');
  	  }); 
  });

//匹配第二个按钮：绑定单机事件

  $("button:eq(1)").click(function(){
      $("div").slideDown(2000,function(){
      	   //动画结束之后可以做任意事件
      	   $("div").css({'background':"red","borderRadius":'50%'});
      })
  });

</script>

这两个特效函数：参数可有可无的。
第二个参数：这个回调函数，是在动画结束之后立即执行一次。

2.5.2fadeOut||fadeIn

概述：他们两者也是JQ函数库提供方法。他们也可以给匹配元素添加特效。就是可以给匹配元素添加淡出、淡入效果。
语法格式：
$(selector).fadeIn(time,callback)

第一个参数：动画每一次时间【单位：毫秒】
第二个参数：回调函数，当动画结束以后立即执行一次。
//匹配第三个按钮：绑定单机事件

  $("button:eq(2)").click(function(){
  	  //匹配div：绑定淡出效果
  	  $(".cur").fadeOut(2000,function(){
  	  	  console.log('animation结束了');
  	  });
  });

//匹配第四个按钮：绑定单机事件

  $("button:eq(3)").click(function(){
  	//匹配div：绑定淡入效果
  	$(".cur").fadeIn(2000,function(){
         //动画结束之后才会执行一次
         $(".cur").css({'background':'red','width':100})
  	});
  })

slideDown||slideUp:动态修改表现的高度
fadeIn||fadeOut::动态修改标签透明度而已。

2.6绑定事件

概述：在我们学习DOM的时候，经常通过DOM方法获取节点。经常给节点绑定事件。
当时的语法画风：

div.onclick = function(){}

注意：JQ函数库也给我们提供了给匹配节点绑定事件方法。在DOM学习的那些事件，在JQ当中也有，
但是需要注意的时候：JQ把他们封装成了函数，给匹配节点绑定事件。

$(selector).eventType(callBack)

注意1：JQ里面绑定事件函数都没有on关键字
注意2：回调函数【就是当年所谓事件处理函数】

<script type="text/javascript">
  //单机事件
  //注意：JQ支持链式语法【连续打点:从左到右】
  $("div:eq(0)").click(function(){
  	  //事件处理函数
  	  $("div:eq(0)").css({"background":"cyan"});
  });

  //鼠标以上
  $("div:eq(1)").mouseenter(function(){
     //事件处理函数
     $("div:eq(1)").css({'width':100,'height':100,'background':"yellow"});
  });
  //鼠标移除
  $("div:eq(1)").mouseleave(function(){
  	//事件处理函数
  	$('div:eq(1)').css({"width":250,'height':250,'background':'pink'});
  })
</script>

当年我们学习事件：JQ都支持：单机、双击、鼠标移上、鼠标移下、鼠标按下、鼠标抬起、鼠标移动等等

2.7淡入淡出轮播图

业务分析：
1：左侧、右侧按钮需要绑定单机事件
2:利用特效函数淡入与淡出【当前显示这张图淡出之后、下一张图渐渐淡入】

<script type="text/javascript">
    //声明一个信号量
    var idx = 0;
   //左侧按钮
   $(".lbtn").click(function(){
        //当前显示图片淡入
        $("li:eq("+idx+")").fadeOut(1000,function(){
        	  idx++;
        	  //约束信号量范围
        	  idx = idx > 4 ? 0 :idx;
        	  //下一张图片淡入
        	  $('li:eq('+idx+')').fadeIn(1000);
        });
   });
   //右侧按钮
   $('.rbtn').click(function(){
      $('li:eq('+idx+')').fadeOut(1000,function(){
      	   idx--;
      	   idx = idx < 0 ? 4 :idx;
      	    $('li:eq('+idx+')').fadeIn(1000);
      })
   });
</script>