2.jQuery的DOM操作

获取的元素都会被封装到一个类数组里，也可以叫它jQuery对象集合/jQuery元素集合。
jQuery对象，jQuery集合，jQuery对象集合，jQuery元素集合这四个可以理解为同一个东西。

我们除了获取之外，还可能需要检查数量，父子邻居关系，过滤元素的集合，遍历等等。

我们先来给页面添加东西，例如创建html元素。

//来个百度超链接
$( function(){
	var link1 = $("<a>"，{
		text:'baidu',
		href : "http://www.baidu.com",
		target: '_blank',
		title: 'go to baidu'
	});
	link1.appendTo('body');
	//方法2	
	var link2=$("<a>baidu</a>').attr({
		href : "http://www.baidu.com",
		target: '_blank',
		title: 'go to baidu'
	});
	link2.appendTo('body');
	//appendTo()追加
})

接下来讲下区别：

<div id="div">div</div>

$(function (){
	var DOMObject = document.getElementById( 'div');
	var jQueryObject = $("#div");
	
	console.log(DOMObject);
	console.log(jQueryObject);
	
	//检测
	console.log(DOMObject.nodeType) ;//打印1
	console.log(jQueryObject.jquery);//打印版本号
//各自都没有对应的属性
	console.log(DOMObject.jquery) ;//打印undefined
	console.log(jQueryObject.nodeType);//打印undefined
	
	//转换
	console.log($(DOMObject)) ;
	console.log(jQueryObject.get(0));
})

$(‘xx’).length 元素的数量

提取元素

[index]返回DOM元素
get([index])返回DOM元素或元素集合
如果get()里的index为负值，则会从后往前来获取元素，越界的会返回undefined
eq(index)返回jQuery对象
如果不加索引，则什么也不返回，除此和get()一样
以下两者结果一样：
console.log(elements.eq(0))推荐使用eq方法
console.log($('li:eq(0)"))筛选器eq性能比eq方法低

first()
last()
以上两个不用加参数，同上性能比筛选器高

toArray()
把jQuery对象直接转换为DOM元素的一个数组
和不加参数的get一模一样

还有index()等方法，最好通过查看jQuery文档学习

通过关系查找jQuery对象
例如想获取id="info"的3个div父元素

<div id="box">
	<div>
		<div>
			<p id="info">Lorem ipsum dolor sit amet.</p>
		</div>
	</div>
</div>

获取父元素

$(function(){
	var element = $('#info').parents('div');
	console.log(element);
})

获取子元素

$(function(){
	var element = $('#box').children();
	console.log(element);
	//children方法不返回文本节点，下面的方法和上面一样
	var element2 = $('#box > *');
	console.log(element2);
	//返回文本节点
	var element3 = $('#box').contents();
	console.log(element3);
	//find，通过选择器来筛选后代元素，包括子，孙，等等
	var element4 = $('#box').find('p');
	console.log(element4);
})

children和contents都是直接子元素

parent获取直接父元素；parents所有父，爷等等；parentsUntil到哪一代（不包括）为止，必须加参数

$(function(){
	console.log($('#info').parent('#box2'))
	console.log($('#info').parents('#box2'))
	console.log($('#info').parentsUntil('#box1'))
})

closest是从本身开始，逐级向上开始进行元素匹配，找到就停止。只会返回0个或1个元素
parents从父元素开始找，会一直找直到根元素，放到一个集合里面，再拿选择器来筛选。还可能返回多个

通过兄弟姐妹关系获取对象

前3个next，nextAll，nextUntil和parent非常类似，分别是取得当前元素紧邻的同辈元素，所有同辈元素，以及到哪一个（不包括），直到遇到匹配的为止。

pre那3个刚好和next相反。

$(function(){
	console.log($('#info').next('li'))
	console.log($('#info').nexts('li'))
	console.log($('#info').nextsUntil('.item7'))
})

siblings是取出所有同辈元素，但不包含本身

筛选和遍历jQuery对象

对jQuery集合增加元素
.add(selector)

$(function () {
	console.log($('.item1, .item2'))
	console.log($('.item1 ').add('.item2'))
})
//两者都一样，不过习惯后者，更方便

过滤元素
.not(selector) 筛选出删除的
.filter(selector) 筛选出匹配的
.has(selector)保留含有selector的元素

$(function () {
	console.log($('li').not('.item4'))
	console.log($('li').filter('.item4'))
})
//他们的参数不一定是选择器，可以是一个函数，根据函数的返回值来是否删除,例如：
$(function () {
	console.log($('li').not(function(index){
		return $(this).hasClass('item4')
	}))
	console.log($('li').filter(function(index){
		return $(this).hasClass('item4')
	}))

console.log($('li').has('ol'))
})

获取子集

$(function () {
	console.log($('li').slice(3,5))//左闭右开，从0开始，若为负数则从尾部开始
})

转换元素
比如要获取元素的ID
map(callback):将一个对象转换为另一个jQuery对象

$(function () {
	console.log($('li').map(function(index,domElement){
		return this.id;//return domElement.id;
		//假如返回null或undefined,相当于我们跳过了它
	}))
})

遍历元素
each(iterator)

$(function () {
	console.log($('li').each(function(index,domElement){
		this.title=this.innerText;
	}))
})
//也可以有选择的跳过
$(function () {
	console.log($('div').each(function(index,domElement){
		if(this.id==='box1'){  //严格相等
			return true;//假如return false 则退出了，不会执行下面语句
		}
		this.title=this.innerText;
	}))
})

is(selector):判断有没有selector，有返回true,否则false

$(function () {
	console.log($('#box3').children().is('p'))
})

end():回到最近的一个破坏性操作之前

破坏性操作：任何对jQuery对象进行改变的操作

$(function () {
	console.log(
	$('#box3' ).find( '.item4 ' )
				.css( 'color', 'red ')
				.end()
				.find( '.item6 ' )
				.css('color', 'blue ' )
	) //给两个同级元素加不同颜色
})

如果end()方法前一次操作不是破坏性操作，则返回的空，什么都没有
原理：相当于堆栈，调用一次end弹出来一次

addBack([selector])

$(function (){
	console.log($('.item4')
	.nextUntil('.item6')
	.addBack()
	.css('color','orange'))
})//item4和item5都为orange

---

操作元素的特性、属性和数据

元素的特性和属性的区别：
特性attributes 属性properties

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

$(function (){
	var img = document.getElementById( 'logo ');
	console.log(img.attributes)//获取img的全部特性
	console.log(img.getAttributes('class'))

	console.log(checkbox.tabIndex)//属性值
	console.log(checkbox.getAttributes('style'))//特性
	console.log(checkbox.style)//属性值

	console.log(checkbox.getAttributes('checked'))//空白
	console.log(checkbox.checked)//true
})

对于像checked一样的，我们要尽量用属性来获取它的值。
特性的值总是字符串
属性的值可以为字符串，布尔型，number型，对象等等

$(function (){
	var checkbox = document.getElementById( 'check ');
	console.log(checkbox.getAttribut('check'))
	console.log(checkbox.title)
	console.log(checkbox.getAttribute('title')===checkbox.title)//true
	
	checkbox.title='new title';//设置属性
	console.log(checkbox.getAttribut('check'))
	console.log(checkbox.title)
	console.log(checkbox.getAttribute('title')===checkbox.title)//true

	checkbox.setAttribute('title','other title');//设置特性
	console.log(checkbox.getAttribut('check'))
	console.log(checkbox.title)
	console.log(checkbox.getAttribute('title')===checkbox.title)//true
	//设置特性或属性的先后顺序没有关系，，同步改变，这是因为浏览器解析中元素的属性和特性会保持动态链接。但是：...例如checked
	console.log(checkbox.getAttributes('checked'))//空白
	console.log(checkbox.checked)//true
	//如果把html里的checked写成checked='true'(其实改不改效果一样)
	console.log(checkbox.getAttributes('checked'))//true
	console.log(checkbox.checked)//true
	//此时就不会同步了
	checkbox.checked=false
	console.log(checkbox.getAttributes('checked'))//true
	console.log(checkbox.checked)//false
	//假如改成：
	checkbox.setAttribute('checked','false');
	console.log(checkbox.getAttributes('checked'))//false
	console.log(checkbox.checked)//true
})

内建：比如description就不是内部的，是我们写的

$(function (){
	var checkbox = document.getElementById( 'check ');
	checkbox.description='new '
	console.log(checkbox.getAttributes('checked'))//原来的
	console.log(checkbox.description)//new
	//同样的，假如把上3行改成如下
	checkbox.setAttribute('description','new');
	console.log(checkbox.getAttributes('checked'))//new
	console.log(checkbox.description)//undefined，因为刚开始是我们写的，其实这个属性压根不存在，即使我们在html上写了
})

还有例如图片的src class

$(function (){
	var img = document.getElementById( 'logo ');
	
	console.log(img.getAttributes('src'))//页面中写的地址
	console.log(img.src)//绝对地址

	img.src='../img/logo.jpg'
	console.log(img.getAttributes('src'))//../img/logo.jpg
	console.log(img.src)//同步变换但会转换成绝对地址

	console.log(img.getAttributes('class'))//页面中的
	console.log(img.class)//undefined，因为class是保留字，要写成className才会返回相应的值
	
})

每日一词：duly及时，按时；适当地；
NEXT:
操作元素的特性