By welkin

Updated:

Contents

#1.jQuery方法之filter，not，has

##filter : 过滤

##not : filter的反义词

1
2
3
4
$('div').filter('.box').css('background','red');
//筛选出css为.box的div
$('div').filter('.box').css('background','red');
//筛选出css不是.box的div

##has : 包含
看元素里面的元素，即内部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(function(){
      
	$('div').has('span').css('background','red');
        //变红的为span
	$('div').has('.box').css('background','red');
        //变红的为css为box的span
	$('div').filter('.box').css('background','red');
        //变红的为div2
	
});
</script>
<body>
<div>div1<span class="box">span</span></div>
<div class="box">div2</div>
</body>

#2.jQuery方法之next，prev，find，eq，index，attr

##next：下一个节点

##prev：上一个节点

1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(function(){

	$('div').next().css('background','red');	
	//变红的为span
});
</script>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
</body>

prev同理

##find：找节点

##eq：类似原生中的下标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
$(function(){

	$('div').find('h2').css('background','red');
	//找到所有h2的节点
	$('div').find('h2').eq(1).css('background','red');
	//找到所有h2，且找到其中第二个节点
});
</script>
<body>
<div>
    <h3>h3</h3>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3>h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
</div>
<h2>h2</h2>
</body>

##index：索引就是当前元素在所有兄弟节点中的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function(){

	alert( $('#h').index() );  // 2
	
});
</script>
<body>
<div>
    <h3>h3</h3>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3 id="h">h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
</div>
<h2>h2</h2>
</body>

##attr：设置属性，可获取（已在上一篇讲过，详情请看上一篇）

#3.jQuery方法之属性操作

##addClass()：添加class

##removeClass()：删除class

1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(function(){

	$('div').addClass('box2 box4');
	//box1,box2,box4
	$('div').removeClass('box1');
	//box2,box4
});
</script>
<body>
<div class="box1 box2">div</div>
</body>

##width():width

##innerWidth():width + padding

##outerWidth():width + padding + border

##outerWidth(true) :width + padding + border + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
div{ width:100px; height:100px; background:red; padding:10px; border:10px #000 solid; margin:10px;}
</style>
<script>
$(function(){

	alert( $('div').width() );  //width  100
	
	alert( $('div').innerWidth() );  //width + padding120
	
	alert( $('div').outerWidth() );  //width + padding + border130
	
	alert( $('div').outerWidth(true) );  //width + padding + border + margin
	//150
});
</script>
<body>
<div>div</div>
</body>

#4.jQuery方法之Dom操作

##insertBefore( )：剪切功能

##insertAfter( );

##appendTo( )：类似原生里的appendChild

##prependTo( )：最开始的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
$(function(){

	$('span').insertBefore( $('div') );
	//span在div之前
	$('div').insertAfter( $('span') );
	//和上面操作一样
	$('div').appendTo( $('span') );
	//sapn在div之前
	$('div').prependTo( $('span') );
	//div在span之里面
});
</script>
<body>
<div>div</div>
<span>span</span>
</body>

###注意：后续操作变了，只针对于最前面的元素

1
2
3
4
$('span').insertBefore( $('div') ).css('background','red');
//span变红
$('div').before( $('span') ).css('background','red');
//div变红

#5.jQuery方法之事件操作和scrolliop

##remove：删除节点

##on：加载事件

##off：取消事件

1
2
3
4
5
6
7
8
9
10
11
<script>
$(function(){

	$('div').remove();
	//删除div
});
</script>
<body>
<div>div</div>
<span>span</span>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
//加载事件
$('div').click(function(){
		alert(123);
	});
	
$('div').on('click',function(){
		alert(123);
	});
	
$('div').on('click mouseover',function(){
		alert(123);
	});
1
2
3
4
5
$('div').on('click mouseover',function(){
		alert(123);
		$('div').off('mouseover');
	});
//取消鼠标移入事件

##scrollTop：纵向滚动条，获取滚动距离

1
2
3
4
5
6
7
8
9
$(function(){

	$(document).click(function(){
		
		alert( $(window).scrollTop() );  //滚动距离
		
	});
	
});

#6.jQuery方法之事件细节

###ev : event对象

###ev.pageX(相对于文档) :

###clientX(相对于可视区)： 表示鼠标坐标

###ev.which : keyCode，找键盘的键值

###ev.preventDefault()：阻止默认事件

###ev.stopPropagation()：阻止冒泡的操作

###return false：阻止默认事件 + 阻止冒泡的操作

###one()：事件只执行一次

#7.jQuery方法之位置操作

##parent() : 获取父级

##offsetParent() : 获取有定位的父级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(function(){

	$('#div2').parent().css('background','blue');
	//div1变蓝
	$('#div2').offsetParent().css('background','blue');
        //当div1有定位时变蓝
});
</script>
<body>
<div id="div1">
	<div id="div2"></div>
</div>
</body>

##val()：获取元素的val值

##size()：获取一组元素的长度

1
2
3
alert( $('input').val() );  //获取
$('input').val(456);  //赋值
alert( $('li').size() );  //=4 像length

1
2
3
4
5
$('li').each(function(i,elem){   //一参：下标 二参 : 每个元素，类似for循环
		
		$(elem).html(i);
		
	});

#8.jQuery方法之hover和简单动画

##hover：参一移入，参二移出

##hide：隐藏 （有运动效果）

##show：显示

##fade in：淡入 （可指定时间，默认为400ms）

##fade out：淡出

##slideup：向上卷起

##slidedown：向下展开

##fadeTo：参数一：时间；参数二：透明度的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
$(function(){

	$('#div1').hover(function(){
		
		$(this).css('background','blue');
		
		$('#div2').hide(3000);
		
		$('#div2').fadeOut(1000);  //默认400
		
		$('#div2').slideUp();
		
		$('#div2').fadeTo(1000,0.5);
		
	},function(){
		
		$(this).css('background','red');
		
		$('#div2').show(3000);
		
		$('#div2').fadeIn(1000);
		
		$('#div2').slideDown();
		
		$('#div2').fadeTo(1000,1);
		
	});

});
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

Contents