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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
javascript 面向对象 function类
May 13 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
js prototype和__proto__的关系是什么
Aug 23 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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP 正则表达式小结
2015/02/12 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
python 性能提升的几种方法
2016/07/15 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
售后服务承诺书模板
2014/05/21 职场文书
活动总结格式
2014/08/30 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
南湾猴岛导游词
2015/02/09 职场文书