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写的一个自定义弹出式对话框代码
Jan 17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP处理二进制数据的实现方法
2016/06/13 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
javascript实现轮显新闻标题链接
2007/08/13 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Python全局变量用法实例分析
2016/07/19 Python
Python实现单词翻译功能
2017/06/06 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python模拟表单提交登录图书馆
2018/04/27 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
医学生毕业自我鉴定
2014/03/26 职场文书
学生请假条
2014/04/11 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
导游词开场白
2015/01/31 职场文书
西柏坡观后感
2015/06/08 职场文书
微观世界观后感
2015/06/10 职场文书
鸡毛信观后感
2015/06/11 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript