jQuery中slice()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中slice()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以选取匹配元素集的子集。

语法结构:

$(selector).slice(start, end)

参数列表:

参数 描述
start 开始选取子集的位置。第一个元素索引是0.如果是负数,则从集合的尾部开始选起。
end 结束选取子集的位置,如果不指定,则就是匹配元素集的结尾。

实例代码:

实例一:

选取第一个元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").slice(0,1).css("color","red") 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

实例二:

选取前两个元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").slice(0,2).css("color","red") 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

实例三:

选取第二个元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").slice(1,2).css("color","red") 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

实例四:

选取最后一个元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").slice(-1).css("color","red") 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
angularJS中$apply()方法详解
Jan 07 #Javascript
jQuery中not()方法用法实例
Jan 06 #Javascript
jQuery中has()方法用法实例
Jan 06 #Javascript
jQuery中map()方法用法实例
Jan 06 #Javascript
jQuery中is()方法用法实例
Jan 06 #Javascript
JavaScript中document对象使用详解
Jan 06 #Javascript
jQuery中Form相关知识汇总
Jan 06 #Javascript
You might like
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
python实现网站的模拟登录
2016/01/04 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
《猴子种树》教学反思
2014/02/14 职场文书
新学期决心书
2014/03/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
工作检讨书怎么写
2015/01/23 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
西游降魔篇观后感
2015/06/15 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python