jQuery排序和动画

最新推荐文章于 2023-04-08 08:17:59 发布
VIP文章 最新推荐文章于 2023-04-08 08:17:59 发布
阅读量329 收藏 5
点赞数 3
分类专栏： 前端学习 jQuery 文章标签： jquery jQuery动画和排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46492364/article/details/118458989
版权

文章目录

前言

这部分学习jQuery的排序和动画。

一、jQuery排序

1.eq（）大排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{
    
			margin: 0;
			padding: 0;
		}
		.box{
    
			width: 500px;
			height: 100px;
			border: 1px solid #000;
			margin-bottom: 10px;
		}
		.box p{
    
			float: left;
			width: 100px;
			height: 100px;
			margin-right: 10px;
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div class="box">
		<p></p>
		<p class="cur"></p>
		<p></p>
		<p></p>
	</div>
	<div class="box">
		<p></p>
		<p class="cur"></p>
		<p></p>
		<p></p>
	</div>
	<div class="box">
		<p></p>
		<p></p>
		<p class="cur"></p>
		<p></p>
	</div>
	<div class="box">
		<p></p>
		<p></p>
		<p></p>
		<p class="cur"></p>
	</div>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
        //eq是大排序，将所有的p都进行了排序
		var $ps = $("p");

        $ps.eq(1).css("background-color","pink")
        $ps.eq(4).css("background-color","pink")
        $ps.eq(9).css("background-color","pink")
        $ps.eq(14).css("background-color","pink")

	</script>
</body>
</html>

效果展示：
在这里插入图片描述

2.index（）在兄弟中排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{
    
			margin: 0;
			padding: 0;
		}
		.box{
    
			width: 500px;
			height: 100px;
			border: 1px solid #000;
			margin-bottom: 10px;
		}
		.box p{
    
			float: left;
			width: 100px;
			height: 100px;
			margin-right: 10px;
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div class="box">
		<p></p>
		<p class="cur"></p>
		<p></p>
		<p></p>
	</div>
	<div class="box">
		<p></p>
		<p class="cur"></p>
		<p></p>
		<p></p>
	</div>
	<div class="box">
		<p></p>
		<p></p>
		<p class="cur"></p>
		<p></p>
	</div>
	<div class="box">
		<p></p>
		<p></p>
		<p></p>
		<p class="cur"></p>
	</div>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
        //index是和自己的兄弟级进行排序
		var $ps = $("p");

        $ps.click(function () {
    
            console.log($(this).index())
        })
	</script>
</body>
</html>

效果展示：
在这里插入图片描述

3.each（）遍历

each循环遍历，与for循环相同。参数是一个函数。函数中也可以传一个参数i，i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置

	<script>
		// 选择所有的 box 元素
		var $box = $(".box")
		//让每个box里面的第二个p颜色为红色
		$box.each(function () {
    
			$(this).children().eq(1).css("background-color","red")
		})
	</script>

使用each遍历实现隔列变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{
    
			margin: 0;
			padding: 0;
		}
    table {
    
      border-collapse: collapse;
    }
		td {
    
      width: 100px;
      height: 40px;
    }
	</style>
</head>
<body>
	<table border="1">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
最低0.47元/天 解锁文章
程序媛Render
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Jquery数字滚动摇奖抽奖特效.rar
12-29
Jquery滚动数字抽奖，点击开始，数字开始滚动，然后慢慢停止，默认是4位数的数字，可以自己设定，去看源代码吧
jQuery实现转动随机数抽奖效果的方法
12-10
本文实例讲述了jQuery实现转动随机数抽奖效果的方法。分享给大家供大家参考。具体实现方法如下： <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> [removed][removed] <style type="text/css"> body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td
在拉钩学习的笔记（十四）jQuery排序和动画
Yao_Huang_的博客
10-11 273
1、jQuery 排序 eq() 方法 jQuery 中获得的对象，内部包含选择的一组原生js对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系 eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标 index() 方法 jQuery 对象调用 index() 方法时，得到的是它自己在HTML结构中的兄弟中的下标位置。与 jQuery 大排序没有关系 2...
jquery数组(排序)
weixin_30532759的博客
08-21 514
HTML： View Code 1 <h3>字符串数组排序前</h3> 2 <div id="show5"></div> 3 <h3>排序后</h3> 4 <div id="show6"></div> jquery： View Code var animals = [...
抽奖动画 - lao虎机抽奖
null_10086的博客
08-05 164
本文介绍一个lao虎机抽奖动画的实现，lao虎机抽奖在各类商家营销活动中非常常见，这里主要介绍动画的实现过程，其他细节不做详细分析。 ps：lao虎机是敏感词，博客园的富文本和markdown编辑器都限制不允许出现，所有老用拼音。 1. 需求尔珍小说网 https://www.juei.info UI给到的蓝湖如下截图1 图1 三栏图片，每栏图片是一样的，都包含所有的奖品图片。 点击抽奖三栏图片从左到右依次开始上下滚动，从慢到块，滚动几轮后根据抽奖结果固定图片位置。 如果中奖三栏显示同一张奖品图片，否.
jQuery动画图片拖动排序效果
08-01
jQuery动画图片拖动排序效果demo，纯jq实现，代码简单易懂，注释清晰。
jQuery插件MixItUp实现动画过滤和排序
12-29
MixItUp是一个jQuery插件，提供动画过滤和排序。 MixItUp是伟大的，像管理投资组合，画廊和博客的任何分类或排序的内容，而且还可以作为一个功能强大的工具，从事应用程序的用户界面和数据可视化。 MixItUp起着很好...
jquery动画切换排序点击放大切换特效代码
03-20
jquery动画切换排序点击放大切换是一款jquery相册代码，画廊效果。
Jquery实现上下移动和排序代码
11-27
下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下。 解决问题 代码实现： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &...
JavaScript每天逻辑练习，两种方式实现动态摇学号
07-29 269
JavaScript每天逻辑练习，两种方式实现动态摇学号
jquery实现动画效果
honey_th的专栏
03-30 619
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 动画效果     $(document).ready(function(){    //alert($(".items>li").length);  //定义第几个图片移动  var i=
jquery/序号问题/动画
weixin_44698566的博客
05-26 311
一，序号问题 1.1 eq（）:选中元素不同，序号也不同 ⦁ 常用的方法 ⦁ find 查找子元素，可以实现指定的过滤 执行代码： 1. <script> 2. // 获得box元素 3. var $box = $('.box'); 4. // 在当前对象的子元素中进行查找，需要有过滤条件 5. console.log($box.find('li')); 6. </script> 结果： 1.2 index（）表示亲兄弟的排名，无视亲兄弟类型（只要是同一父节点） index()
投色子抽奖游戏 html,使用jQuery实现的掷色子游戏动画效果
weixin_30431923的博客
06-02 548
实现原理：当色子掷出后，通过jQuery的animate()函数改变色子位移，中间加入延时效果，并变换色子背景，最终动画运行到随机产生的点数时停止，并显示掷出的点数。其实就是动画过程加入多个不同图片的帧(同flash动画影片中的帧)，帧数越多效果越好，然后逐帧运行后就形成了动画效果。一、准备工作我们需要准备色子素材，本示例中，我采用从网络上获取到的色子素材，我们要做处理的是将6个色子图片(1-6点...
jQuery UI 实例 - 排序（Sortable）
unber的博客
04-08 1172
使用鼠标调整列表中或者网格中元素的排序。如需了解更多有关 sortable 交互的细节，请查看 API 文档。
JQuery动态添加序号
占山为王7064的博客
01-30 950
$(document).ready(function(){ //初始化 dynAddNum(); }); //动态添加序号 function dynAddNum(){ var arr = ['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四']; var count = 0; $(".serialNum").e...
jquery排序 sort()
热门推荐
chongchong1325的博客
03-17 2万+
sort()方法用于对数组进行排序。这种排序是按照字母顺序进行排序的。那么就会疑惑，如果数组里面的元素是数字的话，怎么办？例如： var a = [1,7,33,6,5],利用sort排序怎么处理？接下来会有详细的介绍。 这里有一个无序列表ul，请对其中的数据进行排序。<button onclick="sortArr()">排序</button> <ul> <li>ads</li> <l
jQuery动态改变元素顺序
u010520692的专栏
05-09 7483
该实现主要是利用after（）方法和before（）方法来实现元素的
Jquery eq方法小记
qq_45298704的博客
03-13 1283
今天在编程时遇到了一个问题:取出中指定的进行操作，一开始想的是用数组保存，再用for循环重新赋值回去，但是发现了Jquery的eq（）方法可以轻松的搞定: .eq(参数)：获取当前链式操作中的的第N个jQuery对象，返回jQuery对象。其中参数必须是整数，当参数大于等于0的时候是正向选取，也就是从前面往后面数，0是代表第一个，1是代表第二个，以此类推；当参数小于0的时候是反向选取，也就是从后面往前面数，即倒数，-1代表倒数第一个，-2代表倒数第二个，以此类推。 相对某个标签操作，我们只需要对所有的.
【JQuery】排序组件
weixin_33737774的博客
07-12 188
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery拖曳排序手机端
最新发布
01-29
在手机端使用jQuery进行拖曳排序是一种常见...总之，通过使用jQuery和jQuery UI提供的插件和方法，结合jQuery Mobile提供的手机端交互支持，我们可以很方便地实现拖曳排序功能，并且在手机端也能够提供流畅的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值