Learning JQuery-3

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.