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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
js中arguments对象的深入理解
May 14 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php实现登陆模块功能示例
2016/10/20 PHP
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
python类继承用法实例分析
2014/10/10 Python
Python随机读取文件实现实例
2017/05/25 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
人事部主管岗位职责
2013/12/26 职场文书
项目计划书范文
2014/01/09 职场文书
财务出纳岗位职责
2014/02/03 职场文书
团委竞选演讲稿
2014/04/24 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
董事长新年致辞
2015/07/29 职场文书
自荐信范文
2019/05/20 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript