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评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
JS数组方法some、every和find的使用详情
Oct 05 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实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python如何访问字符串中的值
2020/02/09 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
公司员工的自我评价范例
2013/11/01 职场文书
花坛标语大全
2014/06/30 职场文书
教师自查自纠材料
2014/10/14 职场文书
安全员岗位职责
2015/02/10 职场文书
感恩节寄语2015
2015/03/24 职场文书
详解Python类和对象内容
2021/06/22 Python
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS