jQuery的DOM操作（增删改查）

一、选择器

jQuery选择器基本语法规则使用的就是CSS的选择器语法，并对基进行了扩展

可参看：CSS选择器总结

• 基本：

#id、element、.class、*、selector1,selector2,selector3、

• 层级：

ancestor descendant、prant>child、prev+next、prev~siblings、

• 基本筛选器

// 1.选择第一个div
$('div:first').css('color', 'red');
// 2.选择最后一个div
$('div:last').css('color', 'red');
// 3.选择所有class不为box的元素
$('div:not(.box)').css('color', 'red');
// 4.选择第二个和第三个	先执行gt,再执行lt,多个过滤选择器是同时执行的,不是依次执行的
$('div:gt(2):lt(2)').css('color', 'red');
//  5.选择内容包含abcd的元素
$('div:contains("abcd")').css('color', 'red');
// 6.选择隐藏的div
$('div:hidden').css('color', 'red');
// 7.选择有title属性的div
$('div[title]').css('color', 'red');

二、过滤和查找方法

/**
 * 过滤
 * 	原有的找出一部分
 */
//1.ul下li标签的第一个
$('ul>li').first().css('color', 'red');
// 2.ul下li标签的最后一个
$('ul>li').last().css('color', 'red');
// 3.ul下li标签的第二个
$('ul>li').eq(1).css('color', 'red');
// 4.ul下li标签中title属性为hello的
$('ul>li').filter('[title=hello]').css('color', 'red');
// 5.ul下li标签中title属性不为hello的
$('ul>li').not('[title=hello]').css('color', 'red');
// 6.ul下li标签中有span子标签
$('ul>li').has('span').css('color', 'red');
				
/**
 * 查找
 * 	找出父母、兄弟、子孙后代
*/
// 1.ul标签的第2个span元素
$('ul').children('span:eq(1)').css('color', 'red');;
// 2.ul标签的第2个span后代标签
$('ul').find('span:eq(1)').css('color', 'red');;
// 3.ul标签的父标签
$('ul').parent().css('color', 'red');;
// 4.id为cc的li标签的前面的所有li标签
$('#cc').prevAll('li').css('color', 'red');
// 5.id为cc的li标签的所有兄弟li标签
$('#cc').siblings('li').css('color', 'red');

三、增删改

// 内部插入
// 1.向id为ul1的ul内部追加添加一个span(最后)
$('#ul1').append('<span>span</spand>');
// 2.向id为ul1的ul内部前置添加一个span(最前)
$('#ul1').prepend('<span>span</span>');
// 外部插入
// 3.向id为li1的li的前面添加span
$('#li1').before('<span>span</span>');
// 4.向id为li1的li的后面添加span
$('#li1').after('<span>span</span>');

// 替换
// 5.将li元素全部替换为p
$('li').replaceWith("<p>p</p>");

// 删除
// 6.移除id为ul1的ul下的所有li
$('#ul1').empty();
$('#ul1>li').remove();