jQuery中slice()方法用法实例

本文实例讲述了jQuery中slice()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以选取匹配元素集的子集。

语法结构:


代码如下:

$(selector).slice(start, end)

参数列表:

参数 描述
start 开始选取子集的位置。第一个元素索引是0.如果是负数，则从集合的尾部开始选起。
end 结束选取子集的位置，如果不指定，则就是匹配元素集的结尾。

实例代码:

实例一:

选取第一个元素

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中parentsUntil()方法用法实例

    本文实例讲述了jQuery中parentsUntil()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素的所有的祖先元素,直到遇到expr表达式.DOM元素或者jQuery元素匹配的那个元素为止. 取得祖先元素集合可以通过筛选表达式进行筛选. 注意:祖先元素中并不包含expr表达式.DOM元素或者jQuery元素匹配的元素. 语法: 语法一: 复制代码 代码如下: $(selector).parentsUntil(expr,filter) 参数列表: 参数 描述 expr 可选

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery中parent()方法用法实例

    本文实例讲述了jQuery中parent()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素. 所取得的父元素集合也可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).parent(expr) 参数列表: 参数 描述 expr 可选.用来筛选的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head>

  • jQuery中find()方法用法实例

    本文实例讲述了jQuery中find()方法用法.分享给大家供大家参考.具体分析如下: 此方法获得匹配元素集合中所有元素的子元素,并通过选择器.jQuery 对象或元素删选. find()方法是获取匹配元素后代元素的好方法. 注意:children()只获取一级子元素,而find()将查找所所有子元素. 语法结构一: 复制代码 代码如下: $(selector).find(expr) 参数列表: 参数 描述 expr 字符串值,定义筛选表达式. 实例代码: 复制代码 代码如下: <!DOCTYP

  • jQuery中children()方法用法实例

    本文实例讲述了jQuery中children()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合. 可以通过可选的表达式来过滤所匹配的子元素. 注意:find()将查找所所有子元素,而children()只获取一级子元素. 语法结构: 复制代码 代码如下: $(selector).children(expr) 参数列表: 参数 描述 expr 可选.用以过滤子元素的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYP

  • jQuery中next()方法用法实例

    本文实例讲述了jQuery中next()方法用法.分享给大家供大家参考.具体分析如下: 此方法获得匹配元素集合中每个元素紧邻的同辈元素. 也可以使用可选的表达式对同辈元素集合进行筛选. 语法结构: 复制代码 代码如下: $(selector).next(expr) 参数列表: 参数 描述 expr 可选.用于筛选的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="

  • jQuery中parents()方法用法实例

    本文实例讲述了jQuery中parents()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得一个包含着所有匹配元素的父辈元素的元素集合. 所取得的父辈元素集合也可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).parents(expr) 参数列表: 参数 描述 expr 可选.用于筛选父辈元素的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta

  • jQuery中nextAll()方法用法实例

    本文实例讲述了jQuery中nextAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素之后所有的同辈元素.也可以使用可选的表达式对同辈元素集合进行筛选. 语法结构: 复制代码 代码如下: $(selector).nextAll(expr) 参数列表: 参数 描述 expr 可选.用来过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=&q

  • jQuery中prev()方法用法实例

    本文实例讲述了jQuery中prev()方法用法.分享给大家供大家参考.具体分析如下: 此方法取的匹配元素集合中每个元素紧邻的前一个同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $(selector).prev(expr) 参数列表: 参数 描述 expr 可选.用于筛选前一个同辈元素的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&

  • jQuery中nextUntil()方法用法实例

    本文实例讲述了jQuery中nextUntil()方法用法.分享给大家供大家参考.具体分析如下: 此函数查找指定元素之后所有的同辈元素,直到遇到匹配的那个元素为止,但不包括此匹配的元素. 语法结构一: 复制代码 代码如下: $(selector).closest(expr, filter) 参数列表: 参数 描述 expr 用于筛选匹配元素的表达式. filter 可选.用于筛选nextUntil()函数通过expr表达式取得的jquery元素集合. 实例代码: 实例一: 复制代码 代码如下:

随机推荐