初識JQuery 實(shí)例一(first)
更新時(shí)間:2011年03月16日 23:51:02 作者:
用jquery為ul下的li依次設(shè)置樣式的代碼,主要是利用了first,next方法。
完整代碼:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlight
{
background-color: yellow;
}
.gray
{
background-color: Gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Look:</li>
<li>This is some text in a paragraph.</li>
<li>This is a note about it.</li>
</ul>
<script type="text/javascript">
$("ul li").first().addClass('highlight');
jQuery("ul li").first().next().addClass('gray');
</script>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlight
{
background-color: yellow;
}
.gray
{
background-color: Gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Look:</li>
<li>This is some text in a paragraph.</li>
<li>This is a note about it.</li>
</ul>
<script type="text/javascript">
$("ul li").first().addClass('highlight');
jQuery("ul li").first().next().addClass('gray');
</script>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
基于jQuery實(shí)現(xiàn)的百度導(dǎo)航li拖放排列效果,即時(shí)更新數(shù)據(jù)庫
基于jQuery實(shí)現(xiàn)的百度導(dǎo)航li拖放排列效果,即時(shí)更新數(shù)據(jù)庫,需要的朋友可以參考下2012-07-07jQuery EasyUI常用數(shù)據(jù)驗(yàn)證匯總
這篇文章主要為大家詳細(xì)匯總了jQuery EasyUI常用數(shù)據(jù)驗(yàn)證,介紹了validatebox()提供的自定義驗(yàn)證,感興趣的小伙伴們可以參考一下2016-09-09JQuery 拾色器插件發(fā)布-jquery.icolor.js
web項(xiàng)目中不少地方需要用到顏色選擇器,比如設(shè)置某個(gè)元素的背景色、邊框色等等,按照我們交互設(shè)計(jì)的期望-設(shè)色器最好簡單易用,僅顯示常用的那些色塊給用戶選擇,另外提供一個(gè)輸入框方便用戶輸入自定義的色值。2010-10-10JQuery中節(jié)點(diǎn)遍歷方法實(shí)例
這篇文章主要介紹了JQuery中節(jié)點(diǎn)遍歷方法,實(shí)例分析了jQuery遍歷節(jié)點(diǎn)的技巧,需要的朋友可以參考下2015-05-05jQuery使用prepend()方法在元素前添加內(nèi)容用法實(shí)例
這篇文章主要介紹了jQuery使用prepend()方法在元素前添加內(nèi)容的方法,實(shí)例分析了prepend方法追加內(nèi)容的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery實(shí)現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法,包含了完整的實(shí)例與關(guān)鍵代碼的注釋說明,并附帶了所需知識點(diǎn)的參考文章地址,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jquery實(shí)現(xiàn)最簡單的滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)最簡單的滑動(dòng)菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁面元素動(dòng)態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09