jQuery基础与一些细节(2)

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

在$()下的常用方法

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

取出div标签中的title属性的值:

<divtitle="jQuery">

    div

 </div>

 <script>

     $(function(){

      alert($('div').attr('title'));     });

</script>

对div标签中的title属性进行赋值:

<divtitle="jQuery">

    div

 </div>

 <script>

     $(function(){

            $('div').attr('title','I amhere,jQuery.');/

     });

</script>

在后面我们还会讲述到这个方法。

 

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

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

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

<divclass="box">

    d1

 </div>

 <div>d2</div>

 <script>

     $(function(){

            $('div').filter('.box').css('background','red');

            $('div').not('.box').css('background','red');

     });

  </script>

 

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

来看一下下面的例子：

<divclass="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>

     bodybutton{

            color:red;

     }

 

     #d1div {

           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(vari=0;i<buttons.length;i++){

        buttons[i].index=i;

        buttons[i].onclick= function(){

             for(vari=0;i<buttons.length;i++){

                 buttons[i].className='';

                 tabDivs[i].style.display= 'none';

             }

             this.className ='active';

             tabDivs[this.index].style.display ='block';

        }

        }

  };

</script>

<divid="d1">

    <buttonclass="active">1</button>

    <button>2</button>

    <button>3</button>

    <divstyle="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>

<bodystyle="height:1000px">

 <button>点我吧</button>

</body>