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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php基础知识:函数基础知识
2006/12/13 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
javascript 闭包详解
2015/07/02 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python 中字典嵌套列表的方法
2018/07/03 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
盛大二次面试题
2016/11/18 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
公司活动邀请函
2014/01/24 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
岳麓书院导游词
2015/02/03 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL