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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue-iview动态新增和删除的方法
Jun 17 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自定义大小验证码的方法详解
2013/06/07 PHP
php删除数组元素示例分享
2014/02/17 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python3实现单目标粒子群算法
2019/11/14 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python实现二分查找算法
2020/09/18 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
python 实现简易的记事本
2020/11/30 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
写给老师的表扬信
2014/01/21 职场文书
2015年消防工作总结
2015/04/24 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书