Jquery学习笔记——操作包装集

 

包装实验室： chapter2/lab.wrapped.set.html

2.1 大小

         $(‘a’).size()

2.2 获取元素

         $(‘a’)[0]  获取第一个

         $(‘a’).index($(‘a#a1’))  获取id=a1的a的下标

2.3 包装集操作

添加元素：

     Add（字符串|元素|数组）。和 或选择器相比的好处是，可在一条语句中实现：  把粗边框应用到带有alt特性的所有img元素，然后把一定级别的透明度应用到带有alt或title特性的所有img元素：

     $(‘img[alt]’).css(‘border’,’solid’).add($(img[title])).css(‘opticpaty’,’30%’)

创建元素

       $(元素标签, options)： 以前必须先创建标签，再使用 attr完成属性的添加，在1.4中 加入了option参数可以直接完成添加，实例如下

jQuery('', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

添加脚本：

     $('

筛选元素

     Not（字符串|元素|数组）：删除包装集中对应表达式的值，与filter功能相反

     Filter（字符串|函数）：获取包装集中表达式对应的元素， 如果传递为函数，该函数以当前元素作为this，返回值为true|false

     Find（字符串）：对包装集和其子集都进行筛选

     Contains（字符串）：文本中包含字符串

     has(字符串|元素)： 返回子集中包含参数的元素

获取子集

     Slice（begin，end）：利用位置

获取第n个元素

     Eq（n）：  $(‘div’).eq(1) 获取第二个段落

判断：

     Is（selector）：是否包含字符串selector指定的元素，返回true|false

 

2.4 利用关系获取包装集

       first（）

       last（）

       Children（）

       Parent（）

       Parents() :  包括直接父元素一直到祖先元素

       Next（）  下一个兄弟元素

       Prev（）

       NextAll（）：所有后续兄弟元素的包装集 

       PrevAll（）

       Siblings（）：取得所有同辈节点

       Contents（）：返回原始包装集内容的包装集，这些元素可能包含文本节点（常用于获取iframe元素的内容）

           注意：上面兄弟节点不是和选择器同一类型的节点，如$(div).siblings(),可能有img等各种类型。

      .closest( selector ) 以定位位置最接近的符合selector的ancestor element(祖先元素)。扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。如：

 

< !DOCTYPE html>


  
  


	

执行结果如下：

* ul: UL
* body: BODY

      ”nextUntil”, “prevUntil” 和”parentsUntil”，这些方法是用来获取符合条件内的DOM对象。中文你可以理解为“直到”的意思。代码示例：

    
Apple
    
Banana
    
Grape
    
Strawberry
    
Pear
    
Peach

从ul中选择从

Apple

到

Pear

的元素，如果用1.3的方法：  Jquery('ul li').slice(1,4), 而新的方法如下：          

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

            虽然上面两者的选取效果是一样的，但若现在我在含有apple的li到含有pear的li中间再添加内容的话，1.32版本的代码就需要修改了，而1.4版本的则可继续使用，也就说1.4版本的代码可用性和语义性增强了。

2.5  Jquery链

        End() 回退到前一个包装集

        Andself（）：合并最近的两个包装集

 

2. 6   元素的复制、删除和创建

        复制元素使用.clone()。

　　删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

　　清空元素内容（但是不删除该元素）使用.empty()。

       swap（字符串|元素） 将包装集中的元素分别包裹元素  ；   wrapAll(字符串|元素) 将包装集中的元素作为整体包裹；  wrapInner(字符串|元素) 对包装集中元素的内容分别进行包裹    unswap（） 去除包装集

     toArray() :将Jquery包装集转换为js 的数组

2. 7  移动元素

      append()和appendTo（）       prepend() 和prependTo（）         before() 和insertBefore（）          after()和insertAfter（）