jQuery——对象操作方法

DOM对象 && jQuery对象

检测

   DOM对象     if(obj.nodeType)

jQuery对象     if(obj.jquery)

如果是，则返回数字。

否则，返回undefined。

jQuery对象操作

创建元素

语法

$('<开始标签>内容</闭合标签>')     创建

.appendTo(标签)                 把内容追加到标签内

例子

var div = $('<div>Hello</div>');

div.appendTo('body');  

console.log($('div'));

创建属性节点

两种方式：

空元素

var link1 = $('<a>' ,{
    text : 'baidu' ,   //在这里输入内容
    href : 'http://www.baidu.com' ,
    target : '_blink_' ,
    title : 'go to baidu'
});

非空元素

通过attr()方法

var link2 = $('<a>这里输入内容</a>').attr({
    href : 'http://www.baidu.com' ,
    target : '_blink_' ,
    title : 'go to baidu'
});

检查元素数量 $(‘xxx’).length

当我们使用了jQuery选择器，返回了一个jQuery对象集合。

我们可以使用$('xxx').length方法检查元素的数量。

提取jQuery对象集合中元素的方法

返回DOM对象

[index]       单个

get[index]    单个或数组

toArray()     数组

补充：

get[index]不填写index，会返回一个数组。

get[index]，可以写负值。

返回jQuery对象

eq(index)

first()

last()

补充：

如果index为0，将不会返回任何东西。

index可以是负值。

jQuery对象集合元素操作方法

添加选定元素 add(selector)

例如，已经选中了class=”item1”的元素，现在再添加item2的元素

$('.item1').add('.itm2')

或者就在item1后面加逗号，再加上item2

$('.item1, .itm2')

过滤元素

not(选择器 or 函数返回值 )   选择器匹配的元素去除

filter(selector)          选择器匹配的元素保留

has(ele)                  包含匹配元素的元素保留

获取子集

和数组的slice方法，是一样的。

.slice(start,end)

过滤并创建新jQuery对象

map(callback）

一般写成map(function(index,domElement){})

将一个jQuery对象转换成另一个jQuery对象。

如果回调函数返回null或undefined，这个元素会被跳过，不会加入到集合中。

遍历元素

each(callback)

一般写成each(function(index,domElement){})

是否包含指定元素

语法：is(ele)

破坏性操作相关

破坏性操作：

任何对jQuery对象进行改变的操作（它会改变一开始的jQuery对象）。

   end()   回到破坏之前

addBack()  破坏性操作后，把进行破坏性操作的元素包含进来

例子

<ul>  
    <li>list item 1</li> 
     <li>list item 2</li>  
    <li class="third-item">list item 3</li> 
    <li>list item 4</li>  
    <li>list item 5</li>
</ul>

$( "li.third-item" ).nextAll().addBack()  .css( "background-color", "red" );

在这个例子里，third-item就是进行破坏性操作那个元素，使用了addBack()，它也被选中了。

这就是，我不好，你也别想好的意思。

通过关系查找jQuery对象的方法

父级

.parents（ele）       参数可选  所有父级

.parent（ele）        参数可选  直接父级

.parentsUntil（ele）  参数必需  返回到什么层级为止，不包括该层级

.closest(ele)        参数必需  匹配零或一个，从元素自身逐级匹配，自身也会匹配

子级

.children（ele）  参数可选  如果没参数，返回所有直接子元素（不包括文本节点）

.contents（els）  参数可选  返回所有直接子元素（包括文本节点）

.find(ele)       参数必需  返回所有后代元素（包括孙子元素）

同级

前：

.prev(ele)       紧邻前面的一个同级元素

.prevAll(ele)    前面的所有同级元素

.prevUntil(ele)  前面的所有同级元素，直到指定元素为止（不包含该元素）

后：

.next(ele)       紧邻后面的一个同级元素

.nextAll(ele)    后面的所有同级元素

.nextUntil(ele)  后面的所有同级元素，直到指定元素为止（不包含该元素）

补充：

如果.nextUntil()写了一个在元素之前的元素，则会找到后面所有的元素。

所有：

.siblings(ele)    参数可选  选择所有同级元素，不包含本身