jQuery是最有名的JavaScript库,它解决了几个重要的问题:
- 消除浏览器对于JavaScript的支持差异;
- 方便简洁的DOM操作方法;
- 方便地实现简单的动画效果;
在进行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元素