頻道欄目
首頁 > 資訊 > JavaScript > 正文

學習JQuery - 3

13-12-30        來源:[db:作者]  
收藏   我要投稿

2. 屬性選擇器

上一節實現的效果用圖片



我們現在需要在email, Hamlet, Herry V增加鏈接圖標和背景色。

怎么在同樣是“a”標簽的選擇器上進行區分呢?

這就是本節要講的內容。

表現形式:

CSS選擇器(Tag, ID, Class).屬性

根據之上的規則,我們的CSS如下所示

a {
	color: #00c;
}
a.mailto {
	background: url(images/email.png) no-repeat right top;
	padding-right: 18px;
}
a.pdflink {
	background: url(images/pdf.png) no-repeat right top;
	padding-right: 18px;
}
a.henrylink {
	background-color: #fff;
	padding: 2px;
	border: 1px solid #000;
}


那么,jQuery的屬性怎么樣表示呢?

jQuery選擇器[屬性]


為了簡化選擇器代碼,我們使用符號匹配。

“^” 開頭匹配

“$” 結尾匹配

“*” 包含匹配

	$('a[href^="mailto"]').addClass('mailto');
	$('a[href$=".pdf"]').addClass('pdflink');
	$('a[href*="henry"]').addClass('henrylink');

實現的效果如下圖:



我們不希望“email”使用“henrylink”樣式,對“Henry V”進一步具體限制

$('a[href*="henry"][href^="http"]').addClass('henrylink');

最終實現效果:



附:

chapter02.css

@charset "utf-8";
/* CSS Document */

.horizontal {
	float: left;
	list-style: none;
	margin: 10px;
}
.sub-level {
	background: #ccc;
}
a {
	color: #00c;
}
a.mailto {
	background: url(images/email.png) no-repeat right top;
	padding-right: 18px;
}
a.pdflink {
	background: url(images/pdf.png) no-repeat right top;
	padding-right: 18px;
}
a.henrylink {
	background-color: #fff;
	padding: 2px;
	border: 1px solid #000;
}

chapter02.js

$(document).ready(function() {
    $('#selected-plays > li').addClass('horizontal');
	// add
	$('#selected-plays li:not(.horizontal)').addClass('sub-level');
	// Section II
	$('a[href^="mailto"]').addClass('mailto');
	$('a[href$=".pdf"]').addClass('pdflink');
	$('a[href*="henry"][href^="http"]').addClass('henrylink');
});

html文件(chapter02.html)詳見《學習JQuery - 2》




相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片