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 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
JavaScript Tab菜单实现过程解析
May 13 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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue实例的选项总结
2020/06/09 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
学年个人总结范文
2015/03/05 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
胡桃夹子观后感
2015/06/11 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android