脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ѧϰJQuery - 3，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

2. 属性选择器

上一节实现的效果用图片

我们现在需要在email, Hamlet, Herry V增加链接图标和背景色。<"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ICAginT1w7TU2s2s0fnKx6GwYaGxserHqbXE0aHU8cb3yc+9+NDQx/i31sTYo788L3A+CjxwPiAgICDV4r7Nysexvr3a0QQ9srXExNrI3aGjPC9wPgo8cD4gICAgse3P1tDOyr2jujwvcD4KPHA+ICAgIENTU9Gh1PHG96OoVGFnLCBJRCwgQ2xhc3OjqS7K9NDUPC9wPgo8cD4gICAgPC9wPgo8cD4gICAguPm+3dauyc+1xLnm1PKjrM7Sw8e1XenTU8jnz8LL+cq+PC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">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》

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-ѧϰJQuery - 3全部内容，希望文章能够帮你解决javascript代码实例教程-ѧϰJQuery - 3所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。