                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎(二)—DOM篇

var $spans = $('span');

<!DOCTYPE?html>
<html>

<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<link?rel="stylesheet"?href="imooc.css"?type="text/css">
????<style>
????.left?{
????????width:?auto;
????????height:?200px;
????}
????
????.left?div?{
????????width:?150px;
????????height:?70px;
????????padding:?5px;
????????margin:?5px;
????????float:?left;
????????background:?#bbffaa;
????????border:?1px?solid?#ccc;
????}
????
????.span?{
????????color:?blue;
????}
????</style>
????<script?src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
????<h2>find方法()</h2>
????<div?class="left?first-div">
????????<div?class="div">
????????????<ul?class="level-1">
????????????????<li?class="item-1">1</li>
????????????????<li?class="item-2">2</li>
????????????????<li?class="item-3">3</li>
????????????</ul>
????????</div>
????????<div?class="div">
????????????<ul?class="level-2">
????????????????<li?class="item-1">1</li>
????????????????<li?class="item-2?test">2</li>
????????????????<li?class="item-3">3</li>
????????????</ul>
????????</div>
????????<div?class="div">
????????????<ul?class="level-3">
????????????????<li?class="item-1">1</li>
????????????????<li?class="item-2">2</li>
????????????????<li?class="item-3">3</li>
????????????</ul>
????????</div>
????</div>
????<button>點擊：find傳遞表達式</button>
????<br/>
????<br/>
????<h3>find表達式</h3>
????<div?style="border:1px?solid?red;">
????????<p>
????????????<span>測試1</span>
????????????<a>測試2</a>
????????</p>
????????<p>
????????????<span>慕課網1</span>
????????????<a>慕課網2</a>
????????</p>
????????<div>
????????????<span>Aaron1</span>
????????????<a>Aaron2</a>
????????</div>
????</div>
????<br/>
????<br/>
????<button>點擊：find傳遞$對象</button>
????<script?type="text/javascript">
????$("button:first").click(function()?{
????????$(".left").find("li:last").css('border','1px?solid?red')
????})
????</script>
????<script?type="text/javascript">
????$("button:last").click(function()?{
????????//找到所有p元素，然后篩選出子元素是span標簽的節點
????????//改變其字體顏色
????????var?$spans?=?$('span');
????????$("p").find($spans).css('color',?'red');
????})
????</script>
</body>

</html>

為什么要寫上這一步：var?$spans?=?$('span');