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 相关文章推荐
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
vue离开当前页面触发的函数代码
Sep 01 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python和opencv实现抠图
2018/07/18 Python
Python多线程原理与用法详解
2018/08/20 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python如何随机生成高强度密码
2020/08/19 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
财产保全担保书范文
2014/04/01 职场文书
公司承诺书范文
2014/05/19 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
公司员工活动策划方案
2014/08/20 职场文书