jQuery中slice()方法用法实例
生活随笔
收集整理的這篇文章主要介紹了
jQuery中slice()方法用法实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文實例講述了jQuery中slice()方法用法。分享給大家供大家參考。具體分析如下:
此方法可以選取匹配元素集的子集。
語法結構:
參數列表:
實例代碼:
實例一:
選取第一個元素
復制代碼 代碼如下:<!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程序設計有所幫助。
總結
以上是生活随笔為你收集整理的jQuery中slice()方法用法实例的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jQuery的选择器——可见性过滤选择器
- 下一篇: 关于 DOM 操作的几个类型