jQuery slice();wrapInner();map();

    很想学习jQuery,希望自己每天学习一点点,慢慢积累,能提高自己。

    今天看了三个方法,即:slice();wrapInner();map();都特别容易记,主要是会用。

    1.首先来说一下slice()方法,选中所有匹配的元素,并对指定的参数进行设置。下面可以看一下实例:

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript" >

    $(document).ready(function(){

        $("p").slice(0,2).wrapInner("<b></b>")

    })

    </script>

    body部分:

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    结果:

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    上面slice()里面显示两个参数,0,2 即开始参数和末尾参数;开始参数index从零算起,但不包含0。如果参数是2,4,则就不包含2,选中便是3、4两个段落。

    当然slice()参数也可以是一个,当slice(2)时,则选中的则是2以后的所有段落。即:3、4、5、6……

    当slice(-2)时,则选中的便是-2以后的所有段落。即:-3、-4、-5、-6……

    还有一种情况,当slice(2,-2)时,即:开始为正数,末尾为负数时,则选中的将是除1、2、-1、-2以外的段落。

    值得注意的是:slice()参数不可两个同为负数,或者第一个参数为负数,否则看不到效果。

    2.我们来看一下wrapInner()方法,这个方法上面已经和slice配合使用了,它主要是把所选中的元素包裹一起,然后给设定样式等。再看个例子:

     <script type="text/javaScript">

    $(document).ready(function(){

        $("buton").click(function(){

           $("p").wrapInner("<b></b>")

             });

       });

    </script>

    body部分:

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <button>加粗段落中的文本</button>

   结果:

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <button>加粗段落中的文本</button>

    3.最后来看一下map()方法,它是把一组元素,这些元素可包含:值、属性或者css样式,将其建立起一个列表。请看实例:

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javaScript">

         $(p).append($("input").map(function(){

              return $(this).val();

          }).get().join(", "))

    </script>

    body部分:

    <p>Value:  </p>

    <form>

    <input type="text" name="name" value="John"/>

    <input type="text" name="password" value="password"/>

    <input type="text" name="url" value="http://w3school.com.cn/"/>

    </form>

    结果:

    Value:  John, password, http://w3school.com.cn/

    为了自己更好的记忆,所有写了下自己的片面认识,还请路过高手多多指点哦。明日见!!

    

posted @ 2012-09-29 10:33  奇闻天下  阅读(257)  评论(0)    收藏  举报