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 Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue中的模态对话框组件实现过程
May 01 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
详解如何使用Node.js实现热重载页面
May 06 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 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
destoon官方标签大全
2014/06/20 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
通过示例彻底搞懂js闭包
2017/08/10 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
深入浅析python继承问题
2016/05/29 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
岗位聘任协议书
2015/09/21 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫