学习jQuery的第四篇日记
2011-01-08 阅读 45
今天我还接着与大家分享我的第四篇jQuery日记。在本章中我们重点来说属性选择符。
1, 属性选择符。
属性选择符是css选择符中比较有用的一类选择符。顾名思义，属性选择符通过HTML元素的属性选择元素，例如链接的title属性或图像的alt属性。假如要选择带有alt属性的所有图像元素，可以使用如下代码：$('img[alt]')。
为链接tianjia样式：
属性选择符允许以类似正则表达式的语法来标示字符的开始（^）和结尾（$）。也可以用星号（*）表示字符串中任意位置的值，使用叹号（！）表示相反的值。
假如我们想让不同的链接显示不同的颜色，该怎么办。
解决办法如下：
首先在样式中定义如下样式代码如下：
<pre class="brush:css;"> ＜style type="text/css"＞
a{ color:#00c;}
a.mailto{ background:url(../images/maito.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;}
＜/style＞
```
<p>
让后，就可以使用jquery为符合条件的链接添加这三个类了。</p>
<p>
jquer代码如下：</p>
<pre class="brush:jscript;"> ＜script type="text/javascript"＞
$(document).ready(function(){
$('a[href^=mailto:]').addClass('mailto'); //为所有链接以mailto开头的添加 mailto样式。
$('a[href$=pdf]').addClass('pdflink'); //为所有链接以pdf结尾的添加 pdflink样式。
$('a[href^=http][href*=henry]').addClass('henrylink');
});
```
<p>
注：本节中的HTML代码还是使用上一篇中的HTML代码，为了是页面更整洁在这就不再重复了。当然本例中jquery也可以分开写。</p>
<p>
上述代码运行的结果如图示：</p>
<p>
<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294474739.png" style="width: 553px; height: 119px; "></p>
<p>
例子中所用的的图片如下：</p>
<p>
<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294474608.png" style="width: 15px; height: 14px; "> <img alt="" src="http://www.huilinwang.com/uploads/01-2011/1294474624.png" style="width: 18px; height: 18px; "></p>
jQuery document ready onload click
更新于 2023年03月28日
