关于find方法的问题

来源：3-4 幻灯片的js--初始化、切换和绑定事件

10hours

2019-11-19 10:55:41

//slider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.css">
</head>
<style>
.slider{
position: relative;
overflow: hidden;
width: 728px;
height: 504px;
margin-left: 200px;
}
.slider-indicator-wrap{
position: absolute;
bottom: 24px;
left:50%;
margin-left: -36px;
display: block;
}
.slider-indicator{
margin: 0 6px;
display: inline-block;
height: 8px;
width: 8px;
border-radius: 50%;
border: 2px solid #e5e9eb;
background-color: #313a43;
}
.slider-indicator-active{
background-color: #f1f2f4;
border-color: #898f96;
}
.slider-control{
position: absolute;
top: 50%;
margin-top: -31px;
width: 28px;
height: 62px;
line-height: 62px;
background-color: #000;
opacity: 0.5;
filter:alpha(opacity=80);/*IE*/
color: #fff;
font-size: 20px;
font-family: simsun;
text-align: center;
}
.slider-control-left{
left: 0;
}
.slider-control-right{
right: 0;
}
.slider-item{
display: none;
}
.slider-fade .slider-item{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}
</style>
<body>
<div id='focus-slider' class="slider slider-fade">
<div class="slider-container">
<div class="slider-item">
<a href="#" target="_blank"><img src="../img/focus-slider/1.png" alt=""></a>
</div>
<div class="slider-item">
<a href="#" target="_blank"><img src="../img/focus-slider/2.png" alt=""></a>
</div>
<div class="slider-item">
<a href="#" target="_blank"><img src="../img/focus-slider/3.png" alt=""></a>
</div>
<div class="slider-item">
<a href="#" target="_blank"><img src="../img/focus-slider/4.png" alt=""></a>
</div>
</div>

<ol class="slider-indicator-wrap">
<a href="#" class="slider-indicator fl text-hidden">1</a>
<a href="#" class="slider-indicator slider-indicator-active fl text-hidden">2</a>
<a href="#" class="slider-indicator fl text-hidden">3</a>
<a href="#" class="slider-indicator fl text-hidden">4</a>
</ol>
<a href="###" class="slider-control slider-control-left">&lt;</a>
<a href="###" class="slider-control slider-control-right">&gt;</a>
</div>

<script type="text/javascript" src="../js/transition.js"></script>
<!-- <script type="text/javascript" src='../js/showHide.js'></script> -->
 
   <script type="text/javascript" src="../js/jquery.js"></script>
   <script type="text/javascript" src="../js/slider.js"></script>
   <script type="text/javascript">
         var $focusSlider = $('#focus-slider');

         $focusSlider.slider({
          css3:true,
          js:false,
          animation:'fade',
          activeIndex:2,
            Interval:800//800
         })

         
   </script>
</body>
</html>

//slider.js
(function($){
	'use strict';

	function Slider($elem,options){
		this.$elem=$elem;//根据this 调用栈 当前为全局作用域 供其他方法调用
		this.options=options;


		this.$items =this.$elem.find('.slider-item');
		this.$indicators=this.$elem.find('.slider-indicator');

		this._init();
	}
	Slider.DEFAULTS={
		css3:false,
		js:false,
		animation: 'fade',
		activeIndex :0,
		interval:0
	};
	Slider.prototype._init =function(){
		this.$items.eq(this.options.activeIndex).show();
		console.log(this.$indicators)
		this.$indicators.removeClass('slider-indicator-active');
		this.$indicators.eq(this.options.activeIndex).addClass('slider-indicator-active');
	}
	$.fn.extend({
			slider:function(option){//在html 传入的option有可能是对象object{} 也有可能是字符串'string'
				return this.each(function(){
					var $this=$(this),//存储变量 避免重复调用
					    slider=$this.data('slider'),//储存data数据 避免多次实例化影响性能
					    options = $.extend({},Slider.DEFAULTS,$this.data(),typeof option === 'object' 
						&& option)//判断传入的是不是对象 如果是就进行覆盖
					/*dropdown(this,options);*/

					if(!slider){ //判断是不是空的 如果是就实例化
						$this.data('dropdown',slider = new Slider(this,options))//xxx = new object 立即执行Dropdown)//use data to 存储dropdown 避免每次调用函数多次实例化
					}
					if (typeof slider[option] === 'function'){//判断是不是函数 是就执行 slider('show')
						slider[option]();// 因为传入option是字符串 所以用[option]
					}
				})
			}
		})
})(jQuery)

我照着老师的写居然会报这样的错误

我查了一下写成this.$items =$(this.$elem).find('.slider-item');

用$()转换成Jquery对象就解决了问题但是老师为什么不用这么写也不出错？