jquery学习（二）

•区别

•检测DOMObject：if(obj.nodeType)

•检测jQueryObject：if(obj.jquery)

•转换：var jqueryObj= $(domObj);

var domObj=jqueryObj.get([index])

一、jQuery DOM元素方法

.get()获得由选择器指定的DOM元素。

console.log(e1.get(2));

console.log(e1.get());获取的数组

.index()返回指定元素相对于其他指定元素的index位置。

console.log(e1[0]);

.eq(index)返回jquery对象

eq方法  e1.eq(0)

.size()返回被jQuery选择器匹配的元素的数量。

 

.toArray()以数组的形式返回jQuery选择器匹配的元素。

二通过关系查找jquery对象的方法

<div id="box">
             <div>
                   <div>
                        <p id="info">lorm ipsum doror</p>
                  </div>
             </div>
</div>

•children([selector])

•contents()

•find(selector)

•parent([selector]):获取当前匹配元素集合中每个元素的父元素

var e2 = $('#info').parent('#box3');

'#box3'---------1.div#box3

#box2----------没有

•parents([selector])：获取当前匹配元素集合中的所有父元素

#box2-------------div#box2

var e1 = $('#info').parents();

1. div#box3
2. 1:div#box2
3. 2:div#box1
4. 3:body
5. 4:html

•parentsUntil([selector])获得当前匹配元素集合中每个元素的祖先元素，直到遇到被选择器匹配的元素为止

#box1-----------#box3,#box2

•closest(selector)：从当前元素开始逐级向上寻找，返回最先匹配的元素，也能获取到它本身

closet and parents区别：

1、closet是从当前元素开始匹配，parents是从父元素开始匹配

2、closet向上找，找到匹配的就停止，parents会找到所有父元素，并返回一个集合

 

.next()获得匹配元素集合中每个元素紧邻的同辈元素。

.nextAll()获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。

.nextUntil()获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。

var e1 = $('.item-4').next('li');
var e2 = $('.item-4').nextAll('li');
var e3 = $('.item-4').nextUntil('item-6');

.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。

.prevAll()获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。

.prevUntil()获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止

 

.siblings(获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。不包括本身

二、jQuery遍历函数

.add()将元素添加到匹配元素的集合中。$('.item1').add('.item2')

.andSelf()把堆栈中之前的元素集添加到当前集合中。

.children()获得匹配元素集合中每个元素的所有子元素。

.closest()从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

.contents()获得匹配元素集合中每个元素的子元素，包括文本和注释节点。

.each()对jQuery对象进行迭代，为每个匹配元素执行函数。

.end()结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。

.eq()将匹配元素集合缩减为位于指定索引的新元素。

.filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。$('li').filter('.item4')返回item1-item3,item5-item6刚好没有item4

.find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

.first()将匹配元素集合缩减为集合中的第一个元素。

.has()将匹配元素集合缩减为包含特定元素的后代的集合。

.slice()将匹配元素集合缩减为指定范围的子集 左闭右开[3,5)

.is()根据选择器检查当前匹配元素集合，

.not()从匹配元素集合中删除元素。$('li').not('.item4') 没有item4

.has()将匹配元素集合缩减为包含特定元素的后代的集合。

.map()把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery对象。

 

三元素的特性和属性

•attributes：值为string

properties：值为string、boolean、number、object

•如果attributes是本来在DOM对象中就存在的attributes和properties的值会同步；

操作元素

•获取特性的值：attr(name)

•设置特性的值：attr(name, value)attr(attributes)

•删除特性：removeAttr(name)

•获取属性的值：prop(name)

•设置属性的值：prop(name, value)prop(properties)

•删除属性：removeProp(name）

•获取数据的值：data([name])

•设置数据的值：data(name, value)data(object)

•删除数据：removeData([name])

•判断是否有数据：jQuery.hasData(element)
布尔值设置的是属性（prop）

<img id="logo" src='logo.jpg' alt="jquery logo" class="img-jquery" title="jquery logo" />
<img id="logo1" src='logo.jpg' alt="jquery logo1" class="img-jquery1" title="jquery logo1" />
<input type="checkbox" id="check" tabindex='1' style= "width:50px;height:50px" title="check this" description = "just a checkbox"/>
<!-- <ul>

var img = $('img');
var checkbox = ('#check'); //jquery 对象
e1 = img.attr('src'); //logo.jpg
e2 = img.attr('title','jquery logo3'); //img1,img2 all changed to "jquery logo3"
console.log(checkbox.prop('checked')); //boolan获取特殊属性值
console.log(checkbox.get(0).checked); //jquery对象转换为dom对象才能取到值
console.log(checkbox.attr('checked'));

checkbox.removeProp('title')   //内置属性删除后变成undefined，特性变成undefined