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 相关文章推荐
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
用PHP调用Oracle存储过程
2006/10/09 PHP
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php 数组的一个悲剧?
2011/05/11 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP可变函数学习小结
2015/11/29 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
利用python批量检查网站的可用性
2016/09/09 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python实现简单图片物体标注工具
2019/03/18 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python装饰器用法与知识点小结
2020/03/09 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
办公室助理岗位职责
2013/12/25 职场文书
社区科普工作方案
2014/06/03 职场文书
农业项目建议书
2014/08/25 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
文员岗位职责范本
2015/04/16 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers