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 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
React服务端渲染(总结)
Jul 01 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
Laravel 5 学习笔记
2015/03/06 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
python端口扫描系统实现方法
2014/11/19 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python logging设置level失败的解决方法
2020/02/19 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python3如何判断三角形的类型
2020/04/12 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
本科毕业生自荐信
2014/05/26 职场文书
学校党员干部承诺书
2015/05/04 职场文书
加薪申请报告范本
2015/05/15 职场文书
村主任当选感言
2015/08/01 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Go语言安装并操作redis的go-redis库
2022/04/14 Golang