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 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js实现简单的无缝轮播效果
Sep 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 Token(令牌)设计
2008/03/15 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php中rename函数用法分析
2014/11/15 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
python实现12306火车票查询器
2017/04/20 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Django model反向关联名称的方法
2018/12/15 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
图书室管理制度
2014/01/19 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python