JQuery总结------元素选择，操作，特效动画

最新推荐文章于 2024-03-12 07:00:00 发布

原创最新推荐文章于 2024-03-12 07:00:00 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #html

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

本文介绍了JQuery的基础概念及其常用函数，包括元素选取、事件处理、动画特效等，并提供了丰富的实例帮助理解。

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

作为一名后端开发，怎么可以不懂点前端~~~
这里将常用的JQuery函数进行了一些总结

1.什么是jquery?

总的来说，jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：（忽略废话。。因为真的不知道怎么解释）

作用	简介
HTML 元素选取	选择HTML元素
HTML 元素操作	对选择的元素进行操作
CSS 操作	用于改变HTML元素css属性—-$(“p”).css(“background-color”,”red”);
HTML 事件函数	各类事件函数，例如click等
JavaScript 特效和动画	各类JS特效
HTML DOM 遍历和修改	操控DOM，很有用
AJAX	实现AJAX，相对于JS ajax方便了很多
Utilities	工具函数

下面详细说说：

1.HTML选取

选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

//公式
$(selector).action()
//$:表示这是个是Jquery
//selector:表示选择什么HTML元素
//action:表示执行的操作

selector:

1）jQuery 元素选择器：

可以使用 CSS 选择器来选取 HTML 元素
例如：

//元素选择器
$("p").action()
//类选择器
$(".class").action()
//id选择器
$("#id").action()
//交集选择器
$("p#id").action()
//并集选择器
$("p,class").action()
//后代选择器
$("p class").action()
//子元素选择器
$("p>class").action()
//相邻兄弟选择器
$("p+class").action()
//通用兄弟选择器
$("p~class").action()
//还有序选择器，属性选择器等暂时不说

2)jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
例如：

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
//这些语法比较多，有机会开单章。。。

3）jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

//把p标签的背景色该为yellow
$("p").css("background-color","yellow");

2.JQuery事件处理格式

jQuery 事件处理方法是 jQuery 中的核心函数。
是指的是当 HTML 中发生某些事件（触发）时所调用的方法。。
通常会把 jQuery 代码放到部分的事件处理方法中：

例如：

<head>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
//单击后，<p>的内容隐藏
//嵌套使用

3.JQuery常用的特效动画

1.隐藏，显示

隐藏	显示	切换
hide()	show()	toggle()

$("#id").click(function(){
  $("p").hide();
});
$("#id").click(function(){
  $("p").show();
});
$("#id").click(function(){
  $("p"). toggle();
});

2.淡入淡出

淡入	淡出	转换（转换成另外一种）	是否给定透明度
fadeIn()	fadeOut()	fadeToggle()	fadeTo()

$(document).ready(function(){
  //slow代表缓慢（淡入）
  $("#id").click(function(){
  $("p").fadeIn("slow");
  });
  //fast代表快速（淡出）
  $("#id").click(function(){
  $("p").fadeOut("fast");
  });
  //3000代表毫秒
  $("#id").click(function(){
  $("p").fadeToggle(3000);
  });
  //给定透明度，0~1
  $("#id").click(function(){
  $("p").fadeTo("slow",0~1);
  }); 
});

3.滑动

淡出淡入或者隐藏时怎么滑动

下滑	上滑	切换
slideDown()	slideUp()	slideToggle()

$("#id").click(function(){
  $("p").slideDown() ;
});
$("#id").click(function(){
  $("p").slideUp();
});
$("#id").click(function(){
  $("p").slideToggle();
});

4.jQuery 动画

利用animate() 方法来创建动画

格式：
$(selector).animate({params},speed,callback);


//animate:表示这是个动画
//param:必须：定义形成动画的CSS属性
//speed:可选：规定动画时长
//callback:可选:规定返回的函数
//=====================================
//例如：左移
$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

//======================================
//同时设置多个属性
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 
//====================================
//利用相对值设定
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
//=====================================
//使用队列值，就是按照顺序执行
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
//=====================================
//使用其他的动画效果，这里使用了显示隐藏
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

5.jQuery 停止动画

$(selector).stop(stopAll,goToEnd);
//stopAll：可选：表示其他的动画序列是否继续
//goToEnd：可选：表示是否立即结束

例如：
$(selector).stop(true,true);
//两值均默认false

6.callback停止动画

回调函数，此函数的前提是动画已经完全完成

格式：
$(selector).animate({params},speed,callback);
例如：
$("p").hide(1000,function(){
alert("我是callback");
});

6.Chaining概念

表示可以像链表一样执行多个函数,注意，是顺序执行！

例如：
$("p").hide().show().sildeUp().slideDown();