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 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Vue 中使用 typescript的方法详解
Feb 17 Javascript
微信小程序实现购物车小功能
Dec 30 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
win10 64bit下python NLTK安装教程
2018/09/19 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python和c语言哪个更适合初学者
2020/06/22 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
护理实习自我鉴定
2013/12/14 职场文书
环保专项行动方案
2014/05/12 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技