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滚动字幕效果实现代码
Jun 22 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
javascript每日必学之多态
Feb 23 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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类的自动加载机制实现方法分析
2019/01/10 PHP
popdiv
2006/07/14 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
李培根演讲稿
2014/05/22 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
初中成绩单评语
2014/12/29 职场文书
离职感谢信怎么写
2015/01/22 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers