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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
js数组去重的方法总结
Jan 18 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
小程序实现上传视频功能
Aug 18 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
vue实现购物车案例
2020/05/30 Javascript
Python之Web框架Django项目搭建全过程
2017/05/02 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
浅谈python3中input输入的使用
2019/08/02 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
英文自我鉴定
2013/12/10 职场文书
九年级历史教学反思
2014/01/27 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
购房意向书范本
2014/04/01 职场文书
班主任新年寄语
2014/04/04 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
全网非常详细的pytest配置文件
2022/07/15 Python