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>
网友评论