jQuery相关方法

最新推荐文章于 2023-04-12 08:27:48 发布

meetAlice

最新推荐文章于 2023-04-12 08:27:48 发布

阅读量363

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42129143/article/details/80598503

一、筛选器

$('元素')  选中所有       $('元素：first') 选中第一个      $('元素：last') 选中最后一个       $('元素：odd') 选中奇数       

$('元素：even') 选中偶数    $('元素：lt(3)')  下标小于3的   $('元素：gt(3)')  下标大于3的   $('元素：eq(3)') 下标是3的

注意：eq可以单独提炼为方法   $（‘p’：eq(3)）  和  $（‘p’）.eq(3)  是一样的，提炼出来的好处是可以用变量

二、引号问题

在jquery中，$（this）、$（document）、$（window）不加引号，其余加引号

三、选择问题

jquery选择器选择的是所有符合条件的元素，而不是一个

四、元素动画

jquery中的animate会对同一元素的动画进行排队      jquery中的animate会对不同元素的动画同时执行

五、jquery中的事件

jquery中的事件没有on   原生的onmouseover变为mouseenter  原生的onmouseout变为mouseleave

box.onclick = function（）{......}      变为    $（‘box’）.click（function(){......}）

六、index（）方法的使用

返回这个元素在亲兄弟中的排名，无视选择器怎么选择

<div class="box">
		<p>1</p>
		<span>2</span>
		<p class='three'>3</p>
		<b>4</b>
		<h1>5</h1>
	</div>
	<div class="box2">
		<p>1</p>
		<p>2</p>
	</div>
	<script src='../js/jquery-1.12.3.min.js'></script>
	<script type="text/javascript">   
      console.log($('p:eq(2)').index());  //输出0
	</script>

七、each（）方法表示遍历节点

写在function内部，$（this）表示正在遍历的元素

<div class="box">
		<p>1</p>
		<span>2</span>
		<p>3</p>
		<b>4</b>
		<h1>5</h1>
		<p>6</p>
	</div>
	<div class="box2">
		<p>7</p>
		<p>8</p>
	</div>
	<script src='../js/jquery-1.12.3.min.js'></script>
	<script type="text/javascript">   
      $('p:odd').each(function(i){
			$(this).css('background','red');   //3 7变红
		})
	</script>

八、size方法和length属性

返回jquery对象中元素的个数      $（‘元素’）.length        $（‘元素’）.size()；

九、get()方法

与eq()方法基本一致 eq返回jquery对象 get方法返回原生js对象

$（‘p’）.eq(0).html（‘......’）；

$（‘p’）.get(0).innerHTML（‘......’）；

$（‘p’）[0].innerHTML（‘......’）；

十、动画相关方法

1、show（）显示、hide（）隐藏、toggle（）切换

    <button>show()</button>
    <button>hide()</button>
    <button>toggle()</button>
    <button>show(1000)</button>
    <button>hide(1000)</button>
    <button>toggle(1000)</button>
    <button>模拟show</button>
    <div class="box" style='width:150px;height:300px;background:red;display:none'></div>
    <script src = '../js/jquery-1.12.3.min.js'></script>
    <script>
        $('button').eq(0).click(function(){
        	$('.box').show();
        })
        $('button').eq(1).click(function(){
        	$('.box').hide();
        })
        $('button').eq(2).click(function(){
        	$('.box').toggle();
        })
         $('button').eq(3).click(function(){
        	$('.box').show(1000,function(){
        		console.log('show完毕')
        	});
        })
        $('button').eq(4).click(function(){
        	$('.box').hide(1000,function(){
        		console.log('hide完毕')
        	});
        })
        $('button').eq(5).click(function(){
        	$('.box').toggle(1000,function(){
        		console.log('toggle完毕')
        	});
        })
        $('button').eq(6).click(function(){
        	$('.box').css('display','block');
        	var w = $('.box').css('width');
        	var h = $('.box').css('height');
        	$('.box').css({
        		'width':0,
        		'height':0,
        		'opcity':0
        	});
        	$('.box').animate({'width':w,'height':h,'opcity':1},1000,function(){
        		console.log('模拟完毕')
        	})
        })
    </script>

2、slideDown（）下滑展开、slideUp（）上滑收回、slideToggle（）切换

    <button>slidedown()</button>
    <button>slideup()</button>
    <button>slideToggle()</button>
    <button>slidedown(1000)</button>
    <button>slideup(1000)</button>
    <button>slideToggle(1000)</button>
    <button>模拟slidedown</button>
    <div class="box" style='width:150px;height:300px;background:red;display:none'></div>

    <script src = '../js/jquery-1.12.3.min.js'></script>
    <script>
        $('button').eq(0).click(function(){
        	$('.box').slideDown();
        })
        $('button').eq(1).click(function(){
        	$('.box').slideUp();
        })
        $('button').eq(2).click(function(){
        	$('.box').slideToggle();
        })
         $('button').eq(3).click(function(){
        	$('.box').slideDown(1000,function(){
        		console.log('slidedown完毕')
        	});
        })
        $('button').eq(4).click(function(){
        	$('.box').slideUp(1000,function(){
        		console.log('slideUp完毕')
        	});
        })
        $('button').eq(5).click(function(){
        	$('.box').slideToggle(1000,function(){
        		console.log('slideToggle完毕')
        	});
        })
        $('button').eq(6).click(function(){
        	$('.box').css('display','block');
        	var h = $('.box').css('height');
        	$('.box').css({
        		'height':0,
        		'opcity':0
        	});
        	$('.box').animate({'height':h,'opcity':1},1000,function(){
        		console.log('模拟完毕')
        	})
        })
    </script>

3、fadeIn（）淡入、fadeOut（）淡出、fadeTo（）淡到某个数值、fadeToggle（）切换

fadeTo的参数为（time，透明度，回调函数）

举例轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding:0;
	}
	.box{
		height: 300px;
		width:560px;
		border:1px solid pink;
		margin: 100px auto;
		position: relative;
		/*overflow: hidden;*/
	}
	.m_unit{
		width:5000px;
		height:300px;
		position: absolute;
		left:0;
		top:0;
	}
	.m_unit ul{
		overflow: hidden;
	}
	.m_unit ul li{
		list-style: none;
        position: absolute;
        left:0;
        top:0;
        display: none;     
  	}
  	.m_unit ul li.current{
  		display: block;
  	}
	.btn{
		overflow: hidden;
	}
	.btn span{
		width:55px;
		height:55px;
		position: absolute;
		top:50%;
		margin-top: -28px;
	}
	.btn .left{
		background: url('image/btnL.png');
		left:0;
	}
	.btn .right{
		background: url('image/btnR.png');
		right:0;
	}
	.circle ul{
        position: absolute;
        bottom:10px;
        right:0;
	}
	.circle ul li{
		float: left;
		list-style: none;
		width:20px;
		height:20px;
		border-radius: 50%;
		background: orange;
		margin-right: 10px;
	}
	.circle ul li.current{
		background:red;
	}

</style>
<body>
	<div class="box" id="box">
		<div class="m_unit" id='m_unit'>
			<ul id='imgUl'>
				<li class='current'><a href="javascript:;"></a><img src='image/0.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
			</ul>
		</div>
		<div class="btn">
			<span class='left' id='leftBtn'></span>
			<span class='right' id='rightBtn'></span>
		</div>
		<div class='circle' id='circle'>
			<ul>
				<li class='current'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>


	<script src='../js/jquery-1.12.3.min.js'></script>
	<script>
        var $imgLis = $('#imgUl li');
        var $circleLis = $('#circle ul li');
        var timer = setInterval(function (){
        	rightHandler();
        }, 1500);
        $('#box').mouseenter(function(){
        	clearInterval(timer);
        })
        $('#box').mouseleave(function(){
        	timer = setInterval(function (){
        	     rightHandler();
            }, 2000);
        })

        var idx = 0;
	    $('#rightBtn').click(rightHandler);
	    function rightHandler(){
	    	if($('#imgUl li').is(':animated'))  return;
	    	$imgLis.eq(idx).fadeOut(1000);
	    	idx++;
	    	if(idx == $imgLis.length){
	    		idx = 0;
	    	}
	    	$imgLis.eq(idx).fadeIn(1000);
            changeCircle();
	    }
	     $('#leftBtn').click(function(){
	     	if($('#imgUl li').is(':animated'))  return;
	    	$imgLis.eq(idx).fadeOut(1000);
	    	idx--;
	    	if(idx < 0){
	    		idx = $imgLis.length-1;
	    	}
	    	$imgLis.eq(idx).fadeIn(1000);
	    	changeCircle();
	    
	     })
	    	
	    $circleLis.each(function(i){
	    	$(this).click(function(){
	    		$imgLis.eq(idx).fadeOut(1000);
	    		idx = i;
	    		$imgLis.eq(idx).fadeIn(1000);
	    		changeCircle();
	    	})
	    })

	    function changeCircle(){   
               	var n = idx;
	    	    $circleLis.eq(n).css('background','red').siblings().css('background','orange');
	    }

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

4、stop（）

取值为布尔值，第一个值表示是否清除后面的，第二个值表示是否瞬间完成当前的

stop可以用来防止动画的积累

5、finish（）瞬间完成所有动画队列

6、delay（）延迟可以使用连续打点必须放在运动与句之前

$('元素').delay（延迟时间）.animate（{}，1000）

7、is（‘：animated’） is方法表示身份探测返回true false