jQuery DOM操作

jQuery是最有名的JavaScript库，它解决了几个重要的问题：

1. 消除浏览器对于JavaScript的支持差异；
2. 方便简洁的DOM操作方法；
3. 方便地实现简单的动画效果；

在进行DOM操作之前，首先要获取DOM元素。jQuery获取DOM元素是通过jQuery的选择器实现的，jQuery选择器通过参数找到对应DOM元素，并返回jQuery对象，这个对象实际上是选择器找到的DOM对象的数组集合，如果没有找到，返回空数组。选择器查找结果如果后面是对元素的操作，那么操作将会对选择器查找到的DOM对象数组中的每个DOM对象进行同样的操作。

1. DOM选择

$('#id') // 按ID查找
$('tag') // 按tag查找
$('.className') // 按class查找
$('[property=value]') // 按属性查找

// 以上选择器可以进行组合进行查找
// 选择器之间使用 “，”隔开，可以进行多项一起查找

$('ancestor descendant') // 层级查找，中间使用空格隔开两个选择器
$('parent>child') // 子选择器，通过有父子层级关系的选择器实现

$('selector:first-child'); // 选出第一个子节点
$('selector:last-child'); // 选出最后一个子节点
$('selector:nth-child(N)'); // 选出第N个子元素，N从1开始
$('selector:nth-child(even)'); // 选出序号为偶数的子元素
$('selector:nth-child(odd)'); // 选出序号为奇数的子元素

jquery_object.find('selector') // 通过已查找到的jQuery对象继续查找
jquery_object.parent() // 通过已查找到的jQuery对象查找父节点对象
jquery_object.next() // 通过已查找到的jQuery对象查找同级下一个节点对象
jquery_object.prev() // 通过已查找到的jQuery对象查找同级上一个节点对象

2. DOM操作

jquery_object.text() // 获取DOM对象的文本值
jquery_object.html() // 获取DOM对象的html值
jquery_object.text('new_value') // 更改DOM对象的文本值
jquery_object.html() // 更改DOM对象的html值
jquery_object.css('property','value') // 设置DOM对象的CSS属性值
jquery_object.addClass('class_name') // DOM对象添加class值
jquery_object.removeClass('class_name') // DOM对象删除class值
jquery_object.show() // 显示隐藏的DOM元素s
jquery_object.hide() // 隐藏DOM元素
jquery_object.attr('property','value') // 设置DOM对象的属性值
jquery_object.removeAttr('property_name') // 移除DOM对象属性
jquery_object.val() // 获取input对象的值

jquery_object.append('html_string') // 添加子元素
jquery_object.prepend('html_string') // 在最前面添加子元素
jquery_object.remove() // 删除DOM元素