2. Attribute Selector
Image used for the effect implemented in the previous section
Now we need to add the link icon and background color in email, Hamlet, and Herry V. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + release + 9 + NDQx/i31sTYo788L3A + release + 3 dauyc + release + cq + release = "brush: java;"> a {color: # 00c ;} a. mailto {background: url (images/email.png) no-repeat right top; padding-right: 18px20.20.a.pdf link {background: url (images/pdf.png) no-repeat right top; padding-right: 18px;}. henrylink {background-color: # fff; padding: 2px; border: 1px solid #000 ;}
So how do jQuery attributes be represented?
JQuery selector [attribute]
To simplify the selector code, we use symbol matching.
Match starting with "^"
"$" Matches the end
"*" Contains matching
$('a[href^="mailto"]').addClass('mailto');$('a[href$=".pdf"]').addClass('pdflink');$('a[href*="henry"]').addClass('henrylink');
The effects are as follows:
We do not want "email" to use the "henrylink" style to further limit "Henry V"
$('a[href*="henry"][href^="http"]').addClass('henrylink');
Final effect:
Appendix:
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');});
For HTML file (chapter02.html), see learning JQuery-2.