jQuery初学总结(二)

一、绑定click事件
1.给元素绑定click事件，采用如下方法

$('#btn1').click(function(){
    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)
})

2.获取元素的索引值
eq() 方法返回带有被选元素的指定索引号的元素。
index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

二、jquery特殊效果
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

//淡入和淡出效果
				 if($('div').css('display')=='none'){
					 	$('div').fadeIn(2000);	
					 }else{
					 	$('div').fadeOut(2000);
					 }				
//fadeToggle(切换淡入浅出效果)
					$('div').fadeToggle(2000);					
				});		
//slideUp() 向上卷起以隐藏元素
					$('div').slideUp();
					$('div').slideUp("slow");
					$('div').slideUp(1000);
//slideDown() 向下展开以隐藏元素
				    $('div').slideDown();
				
//slideToggle() 依次展开或卷起某个元素	
					$('div').slideToggle();		

三、jquery链式调用
所有jquery对象的方法可以连起来写

 $('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

$(function(){				$('.continer').children('ul').slideDown(5000).children('li').eq(3).children('a').siblings().css('background','red').parent().css('fontSize','200px');
	      })

四、jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,  //参数可以写成数字表达式: width:'+=100'(在原有宽度的基础上增加100)
    height:300
},1000,'swing',function(){
    alert('动画');
});

本文地址：https://blog.csdn.net/weixin_47720233/article/details/107514674