2.4 通过属性来选择元素

2.4 通过属性来选择元素 

属性选择器(attribute seelctors)十分强大,允许基于属性来选择元素。


<ul class="my-list">
 <li>
 <a href="http://jquery.com">jQuery11</a>
  <a href="https://jquery.com">jQuery22</a>
   <a href="ftp://jquery.com">jQuery33</a>
 <ul>
 <li><a href="css1">CSS1</a></li>
 <li><a href="css2">CSS2</a></li>
 <li><a href="css3">CSS3</a></li>
 <li>Basic XPath</li>
 </ul>
 </li>
 <li>jQuery also supports</li>
 <ul>
 <li>Custom selectors</li>
 <li>Form selectors</li>
 </ul>

</ul>
<script src="jquery-1.6.4.js" type="text/javascript"></script>

<script>
console.log($('ul.my-list>li>a')[0].innerHTML);
</script>


超链接指向外部网站地址是通过a元素的href属性值实现的

在CSS中,可以选择包含href值为http://开头的选择器
<ul class="my-list">
 <li>
 <a href="http://jquery.com">jQuery11</a>
  <a href="https://jquery.com">jQuery22</a>
   <a href="ftp://jquery.com">jQuery33</a>
 <ul>
 <li><a href="css1">CSS1</a></li>
 <li><a href="css2">CSS2</a></li>
 <li><a href="css3">CSS3</a></li>
 <li>Basic XPath</li>
 </ul>
 </li>
 <li>jQuery also supports</li>
 <ul>
 <li>Custom selectors</li>
 <li>Form selectors</li>
 </ul>

</ul>
<script src="jquery-1.6.4.js" type="text/javascript"></script>

<script>
console.log($("a[href^='http://']")[0])
</script>