初识jQuery之jQuery方法（二）

最新推荐文章于 2022-03-15 09:07:51 发布

Welkin_qing

最新推荐文章于 2022-03-15 09:07:51 发布

阅读量225

点赞数

分类专栏： jquery 文章标签： jquery方法

本文链接：https://blog.csdn.net/Welkin_qing/article/details/81105744

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.jQuery方法之filter，not，has

filter : 过滤

not : filter的反义词

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

has : 包含

看元素里面的元素，即内部

<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：上一个节点

<script>
$(function(){

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

prev同理

find：找节点

eq：类似原生中的下标

<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：索引就是当前元素在所有兄弟节点中的位置

<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

<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

<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( )：最开始的位置

<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>

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

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

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

remove：删除节点

on：加载事件

off：取消事件

<script>
$(function(){

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

//加载事件
$('div').click(function(){
		alert(123);
	});
	
$('div').on('click',function(){
		alert(123);
	});
	
$('div').on('click mouseover',function(){
		alert(123);
	});

$('div').on('click mouseover',function(){
		alert(123);
		$('div').off('mouseover');
	});
//取消鼠标移入事件

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

$(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() : 获取有定位的父级

<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()：获取一组元素的长度

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

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

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

hover：参一移入，参二移出

hide：隐藏（有运动效果）

show：显示

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

fade out：淡出

slideup：向上卷起

slidedown：向下展开

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

<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>

Welkin_qing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery之jQuery方法（二）

1.jQuery方法之filter，not，hasfilter : 过滤not : filter的反义词$('div').filter('.box').css('background','red');//筛选出css为.box的div$('div').filter('.box').css('background','red');//筛选出css不是.box的div...
复制链接

扫一扫