jquery DOM操做

1. 用jquery创建HTML元素

$('<div>Hello World!');  //设置属性
$('<a>',{  属性  })；
$('<a> baidu.</a>').attr({  属性    })；

var div=$('<div>Hello</div>');
div.appendTo('body');   //appendTo追加内容，将body追加到Hello后面，成为 Hello body
//jquery对象类似于数组

2. 检查元素数量    $('xxx').length

3. 提取元素

.[index]   //返回DOM元素集合
.get([index])   //返回DOM元素集合
  get(),()内什么都不写，返回一个数组，（-1），返回#，从后往前推
.eq(index)     //返回jquery对象

.first()
.last()
/toArray()  //jquery对象转换为DOM对象

.parent([])   //直接父元素
.parentsUntil([])    //找到某一层即可

4. 通过关系查找jquery对象

var element=$('#info').parents();  //获取id=info的所有父元素
.find('p')    //p标签的所有子元素或孙子元素
.children()    //直接子元素，等价于 $('#box>*-')
.parents('div')   //div标签的所有父元素
.contents()     //返回文档的内容
.closrst(select)  //由自身开始逐级往上查找，返回最先匹配的元素

5.兄弟姐妹元素查找

.next()   //查找下一个
.nextAll()    //查找接下来的所有
.nextUntil([])    //往下依次查找，截止到[]的元素

.prev()   //查找前一个
.prevAll()    //查找之前所有的
.prevUntil([])   //向前查找，截止到[]元素为止

.siblings([ ])    //查找同级元素的集合，不包含自己本身

6. 筛选和遍历jquery对象

<1> 添加元素

.add(selector)

如：
console.log($('.item1,.item2'))
console.log($('.item1').add('.item2'))

<2>删除元素

.not()    // console.log($('li').not('.item4'))

.filter()    //进行筛选，匹配的留下，未匹配的删掉

<3> 获取元素

.slice(start[end))  //左闭右开，若为负数，从后面开始数

<4> 转换元素

.map(callback)   //转换到另外一个jquery对象

如：
console.log($('#div').map(function(index,domElement){
return null;  //或者return undefined
}))

<5> 遍历

.each(iterator)

.each(function(index,domElement){
this.title=this.innerHTML;  //给每个title后面加上innerHTML里面的内容
return true;     //return true,什么都不做，return false ,直接跳出该部分代码
})

<7> 是否包含某个元素

.is(selector)  //返回值为true/false

如：
console.log($('#box3').children.is('p'));  //查看box3的子元素有没有p标签

<8> 破幻性操作，即任何对jquery对象进行改变的操做

.end()    //前一项必须是破坏性操做，若不是，什么都不返回

如：
$('#box3').find('.itme4').css('color','red');  // 已经破坏了，可以进行.end()操做
$('#box3').end('.item6').css('color',blue'');   //我们在新的box3的基础上再进行item6的样式改变

<9> .addBack([selector])

$('.item4').nextUntil('item6').addBack().css('color','red');   //item4 and intem5 的颜色样式同时变为red

7 操做元素的特性，属性和数据

<1> 元素特性和属性的区别？

   元素的特性（attributes）是一些标记，形式为：标记名称+值。值总是字符串     .getAttributes('特性名称')  // 获取某种特性

   元素的属性是一些值，类型分为：string,number,boolean,object       console.log(id.属性名)   //获取某种属性，属性名采用 驼峰法命名。

<2> 元素特性和属性的设置

id.setAttributes('旧特性','新特性')
id.旧属性='新属性'

 Attributes  And   Properties

特性本来在DOM对象中存在，二者值同步，如title本来在p标签中就存在

特性本来在DOM对象中存在，但类型为boolean,二者值不同步

特性不是DOM对象内建的属性，是自己写的属性，二者值不同步

<3>操做元素的特性

attr(name)   //获取第一个值
attr(name,value)     attr(attributes)//设置所有的值
removeAttr(name)    //删除值，可以删除多个，中间用逗号隔开

如：
$function(){
var img=$('img');
console.log(img.attr('title'));
//或者是下面这种形式
console.log(img.attr({
title:'new'
alt:'~'
width:'~'
}))
}

<4> 操做元素的属性

prop(name)   //获取值
prop(name,value)   prop(properties)  //设置值
remomve(name)   //删除值，不能加空格，内置属性进行删除是，其实质并没有删除掉它的值，只是将其变成undefined

jquery对象可以使用全小写获得属性，DOM不行

<5> 在元素中存取数据

data([name])  //获取数据，无[],返回所有值


data(name,value)  
//name使用驼峰法命名，或者A-B的形式
//特性中带有数字，可以使用名称获取到它的值
data(object)  //设置值，设置后原数据并没有发生变化，只有获取该值才能看到变化


removeData([name])   //删除数据，可以同时删除多个，中间用逗号或者数组隔开，没有为[]，将会全部删除HTML自带的属性

jquery.hashData(element)  // 判断是否有数据的存在

// 我们在设置元素中的数据时，有一定的优先级，先访问data设置的，再访问HTML中的数据

$.hash(img.get(0))   将jquery对象转换为DOM对象。