一、创建元素
只需要把DOM字符串传入$方法即可返回一个jQuery对象
var obj = $('
Done
二、添加元素
1、.append(content[,content]) / .append(function(index,html))
都是放在目标对象尾部,作为子元素
可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象
如果参数是function,function可以返回DOM对象、HTML string、
jQuery对象,参数是集合中的元素位置与原来的html值
$( ".inner" ).append( "
Test
" );$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) )
2、.appendTo(target)
和append的位置相反,把对象插入到目标元素尾部
$( "h2" ).appendTo( $( ".container" ) );
$( "
Test
" ).appendTo( ".inner" );3、.prepend(content[,content]) / .prepend(function(index,html))
把对象插入到目标元素头部,用法和prepend类似
$( "
Test
" ).prependTo( ".inner" );4、.prependTo(target)
把对象插入到目标元素头部,用法和prepend类似
$( "
Test
" ).prependTo( $('.container'))5、.before(content) / .before(function)
在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似
$( ".container" ).before( $( "h2" ) );
$( "p" ).before( "Hello" );
$( "p" ).before( document.createTextNode( "Hello" ) )
6、.insertBefore(target)
把对象插入到target之前(同样不是头部,是同级),和before的写法相反,用途一样
7、.after(content) / .after(function(index))
和before相反,在目标对象后面插入同级兄弟元素(不是尾部,而是外面,和对象并列同级),参数和append类似
$('.container').after( "
Test
" );$('.container').after( document.createTextNode( "Hello" ) );
8、.insertAfter(target)
和After写法相反,把对象插入到target之后(同样不是尾部,是同级)
注意我们只能把对象插入目标对象后面作为同级对象,不能插入字符串
三、删除元素
1、.remove([selector])
删除被选元素(及其子元素)
$("#div1").remove();
我们也可以添加一个可选的选择器参数来过滤匹配的元素
$('div').remove('.test');
2、.empty()
清空被选择元素内所有内容,包括文本内容和所有子元素
原本内容
清空之后
四、包裹元素
1、wrap(wrappingElement) / .wrap(function(index))
为每个对象包裹一层HTML结构
$( ".inner" ).wrap( "
结果
2、.wrapAll(wrappingElement)
把所有匹配对象包裹在同一个HTML结构中
$( ".inner" ).wrapAll( "
看看结果
3、.wrapInner(wrappingElement) / .wrapInner(function(index))
包裹匹配元素内容
包裹元素
$( ".inner" ).wrapInner( "
执行结果
4、.unwrap()
把DOM元素的parent移除
$('.child').unwrap()
5、html([string])
这是一个读写两用的方法,用于获取/修改元素的innerHTML
**当没有传递参数的时候,返回元素的innerHTML
当传递了一个string参数的时候,修改元素的innerHTML为参数值**
看个例子
$('div').html()
$('div').html('123')
如果结果是多个进行赋值操作的时候会给每个结果都赋值
如果结果多个,获取值的时候,返回结果集中的第一个对象的相应值
6、text()
和html方法类似,操作的是DOM的innerText值