jQuery基础与一些细节(2)

紧接着jQuery基础与一些细节(1)后，我们来看一下更jQuery的一些更实用的东西。

在$()下的常用方法

attr():对元素属性值进行一些操作，通过下面的例子我们可以对它进行了解:

取出div标签中的title属性的值:
<div
title="jQuery">
div
</div>
<script>
$(function(){
alert($('div').attr('title')); });
</script>
对div标签中的title属性进行赋值:
<div
title="jQuery">
div
</div>
<script>
$(function(){
$('div').attr('title','I amhere,jQuery.');/
});
</script>
在后面我们还会讲述到这个方法。

filter():对一组元素进行筛选。

not():可以当做是filter()取反的结果。

通过下面的例子我们可以看出它们俩的区别:

<div
class="box">
d1
</div>
<div>d2</div>
<script>
$(function(){
$('div').filter('.box').css('background','red');
$('div').not('.box').css('background','red');
});
</script>

has():用于判断某个元素是否包含指定的元素。

来看一下下面的例子：

<div
class="box"><span>span</span>
d1
</div>
<div>d2</div>
<script>
$(function(){

$('div').has('span').css('background','red');
});
</script>

这里必须要说的是has()和not()以及filter()的区别了，这是一个很重要的细节。filter()和not()针对的是当前调用这个方法的元素，而has()指的则是调用has()的元素中的通过has()方法参数选定的那个元素，更简洁的讲，就是找调用has()的元素中是否包含has()的参数中指定的元素。

next():选择元素的下一个兄弟节点。

prev():选择元素的上一个兄弟节点。

find():在调用此方法的元素下查找指定的元素，这是jQuery中使用较多的一个方法。

eq(index):根据一族元素中的下标来查找这一组元素中的指定元素，索引值从0开始。

index():获得调用此方法的元素在当前所有兄弟元素中的索引值。

上面的这些方法都是比较简单的，例子就不写出来了，现在，我们要做的就是来利用前面所讲的东西编写一个简单的选项卡功能,就像之前提到的一样，要想把一个真正的项目作出来，还是在于我们的思想和逻辑:

我们先用原生的Javascript来写一个选项卡功能:

<style>
body
button{
color:red;
}

#d1
div {
width:200px;
height:200px;
border:1px solid red;
display:none;
}
.active{
background:blue;}
</style>
<script>
window.onload = function(){
var oParent = document.getElementById('d1');

var buttons = oParent.getElementsByTagName('button');
var tabDivs = oParent.getElementsByTagName('div');
for(var
i=0;i<buttons.length;i++){
buttons[i].index=i;
buttons[i].onclick= function(){
for(var
i=0;i<buttons.length;i++){
buttons[i].className='';
tabDivs[i].style.display=
'none';
}
this.className =
'active';
tabDivs[this.index].style.display =
'block';
}
}
};
</script>

<div
id="d1">
<button
class="active">1</button>
<button>2</button>
<button>3</button>
<div
style="display:block">a</div>
<div>b</div>
<div>c</div>
</div>

之后，我们来对照原生Javascript的写法，来将它改成jQuery的写法:

<script>
$(function(){
$('#d1').find('button').click(function(){
$('#d1').find('button').attr('class','');
$('#d1').find('div').css('display','none');
$(this).attr('class','active');
$('#d1').find('div').eq($(this).index()).css('display','block');
});
});
</script>

可以从这个改写中看出，代码相比原生Javascript已经简化了许多许多，而且还可以更加简化。

addClass():为元素添加样式。

removeClass():为元素删除样式。

在使用addClass()时，可以指定多个样式，而且添加重复样式时jQuery会自动帮我们去重。

insertBefore():把调用此方法的元素添加到指元素之前。

insertAfter():把调用此方法的元素添加到指定元素之后。（jQuery独有）

这两个方法是剪切的功能，而不是找到一个元素将其复制一下。

appendTo():把调用此方法的元素添加到指定元素内的最后。

prependTo():把调用此方法的元素添加到指定元素内的最前面。（jQuery独有）

before(),after(),append(),prepend():

这四个方法与前面四个方法针对的对象不同。相当于调用的元素前必须在指定的元素之前或者之后。区别就在于后续的操作是不同的，所针对的对象不同。

width():获取或设置元素的宽度。

innerWidth():

outerWidth():

下面来些例子让我们更好的了解他们:

<style>
div{
width:100px;
height:100px;
background:red;

}
</style>

<script>
$(function(){
alert($('div').width());
alert($('div').innerWidth());
alert($('div').outerWidth(true));
});
</script>

<div>
</div>

width()与css()获取到的元素宽度的区别在于width()获取到的宽度没有单位”px”,而css()获取到的宽度是有单位的。上面的三个方法获取到值此时都是100。如果再给div加一个padding:20px的属性，那么windth还是100，innerWidth就会变为140，outerWidth就会变为140。再加一个border:10px的属性后，windth还是100，innerWidth就会变为140，outerWidth就会变为140。所以说，innerWidth就相当于元素的宽度加上内边距的值，outerWidth就相当于元素的宽度加上内边距，再加上边线border的值（注：可能是由于浏览器版本的升高或者jQuery自身的处理有变化，边线的值没有算入outerWidth获得的值中）。如果此时再加上一个margin:10px,是不会有任何变化的，如果想让margin也加入到outerWidth()获取到的值中，可以加一个为true的参数。

remove():从当前文档中删除选中的元素。

on():绑定事件的另外一种写法。

off():取消事件的另外一种写法。

相比起先前一种绑定事件方法的好处，这样写的好处就是，我们可以为元素添加一些我们自定义的事件。

$(‘div’).on(‘click’,function(){

//你想要做的事情

});

而且，你还可以为元素同时绑定多个事件，并且为它们的添加不同的事件处理函数，下面是一个例子:

$(‘div’).on({

‘click’:function(){ //你想要做的事情},

‘mouseover’:function(){ //你想要做的事情}

});

这里用到了JSON数据格式，如果你不明白，可以看看与JSON相关的知识。

off()与on()相似，就不多做介绍了。

scrollTop():实时获取浏览器滚动条的纵向滚动距离。

scrollLeft():实时获取浏览器滚动条的横向滚动距离。

接下来，我们用jQuery来编写一个简易的弹窗试试吧 : )

<style>
*{margin:0;padding:0;}
#login{
width:300px;
height:300px;
border:1px solid #eee;
position:absolute;
}
#close{
position:absolute;
right:0;
top:0;
}
</style>

<script>
$(function(){
$('button').click(function(){
var oLogin=$('<div id="login">用户名:<input>密码:<input><div
id="close">X</div></div>')
$('body').append(oLogin);
oLogin.css('left',($(window).width()-oLogin.width())/2);
oLogin.css('top',($(window).height()-oLogin.height())/2);
$('#close').click(function(){
oLogin.remove();
});
$(window).on('resize scroll',function(){
oLogin.css('left',($(window).width()-oLogin.width())/2);
oLogin.css('top',($(window).height()-oLogin.height())/2+$(window).scrollTop());
});
});
});
</script>

<body
style="height:1000px">
<button>点我吧</button>
</body>