jQuery(文档处理)

jQuery和原生JS创建节点

原生JS创建节点

var oDiv = document.createElement('div');
console.log(oDiv)

jQuery创建节点

$(document).ready(function(){//设置jQuery的入口代码
	console.log($('<img>'))//把带有标签形式的字符串放置在$函数中执行表示创建节点
})

把要创建的节点放置在$函数里面，并且以字符串形式展示他会把这个有标签形式的字符串创建成对应的标签

$('<img>')：把带有标签形式的字符串放置在$函数里面表示创建标签(无论是单标签还是双标签只要是标签形式的就可以创建节点了)

创建jquery dom节点 $('<div>')：把标签格式的字符串放到$函数中执行

内部插入

HTML基本布局

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

插入到当前元素所有子元素里面插入节点（叫做内部插入）

append&&appendTo

append

$(document).ready(function(){//设置jQuery入口代码
	$('ul').append($('<div>').text('我是div'));
	//获取到Ul标签在用append函数把带有标签形式的字符串当中参数传递去执行
	//表示插入到ul子元素的之后一个节点，append('带有标签形式的字符串')
})

表示选择到ul元素任何通过append方法把创建好了的节点插入到ul元素的最后面

appendTo

$(document).ready(function(){//设置jQuery入口代码
	$('<div>').text('我是div').appendTo('ul')//先创建节点添加文本在调用appendTo方法把节点添加
	//子元素的最后一个元素里(appendTop('节点'))
})

表示把当前创建好了的节点用appendTo方法添加到ul元素的子元素的最后面(appendTo他()里面放置的是一个选择器)

$('ul').append(节点)：把节点插入到ul的子元素的最后面
节点.appendTo('ul')：把节点插入到ul的子元素的最后面

prepend&&prependTo

prepend

$(document).ready(function(){//设置jQuery入口代码
	$('ul').prepend($('<div>').text('我是div'))//获取到Ul标签在调用prepend方法
	//把带有标签形式的字符串添加到ul子元素的最前面，prepend('带有标签形式的字符串')
})

表示获取到ul元素，在调用prepend方法创建的一个节点插入在ul子元素的最前面(并且字符串是以标签形式的才能被prepend解析)

prependTo

$(document).ready(function(){//设置jQuery的入口代码
	$('<div>').text('我是div').prependTo('ul')//创建节点添加文本，在调用prependTo方法
	//把添加好的节点，添加到ul第一个子元素的前面，prependTo('节点')
})

表示把当前创建的节点用prependTo方法在ul子元素最前面插入此节点

$('ul').prepend(节点)：把节点插入到ul的子元素的最前面
节点.prependTo('ul')：把节点插入到ul的子元素的最前面

外部插入

HTML基本布局

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

插入到当前元素的同级元素里面（外部插入）

after&&insertAfter

after

$(document).ready(function(){//设置jQuery的入口代码
	$('ul').after($('<div>').text('我是div'))//获取到ul节点，调用after函数
	//把创建好的节点插入到ul同级节点当中(同级) after('带有标签形式的字符串')
})

表示在ul获取的同级兄弟的后面（紧跟着ul元素的后面）用after函数插入div节点(after函数执行能够解析带有标签形式的字符串

insertAfter

$(document).ready(function(){//设置jQuery的入口代码
	 $($('<div>').text('我是div')).insertAfter('ul')//创建节点添加文本
	 //调用insertAfter方法把创建好了的节点添加到同级ul元素的最后面 insertAfter('节点')
})

表示创建完成的节点用insertAfter的方法出入在进制这ul同级元素后最面

$('ul').after(节点)：把节点插入到ul元素的后面
节点.insertAfter('ul')：把节点插入到ul元素的后面

before&&insertBefore

before

$(document).ready(function(){//设置jQuery的入口代码
	$('ul').before($('<div>').text('我是div'))//获取到ul节点，调用before函数
	//用before函数创建节点添加文本，把创建好了的文本插入在Ul同级元素的最前面
	// before('带有标签形式的字符串')
})

表示获取到ul元素调用before方法把创建好的div元素插入在紧跟着u;元素的前面

insertBefore

$(document).ready(function(){//设置jQuery的入口代码
	$($('<div>').text('我是div')).insertBefore('ul')//创建节点添加文本，调用insertBefore函数
	//把创建好了的节点添加到ul元素的最前面 insertBefore('节点')
})

表示把创建好的节点调用insertBefore方法把div元素插入到紧跟着ul元素的最前面

$('ul').before(节点)：把节点插入到ul元素的前面
节点.insertBefore('ul')：把节点插入到ul元素的前面

包裹

HTML基本布局

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

包裹(给某个元素外部添加一个父级元素)

warp&&unwrap

warp

$(document).ready(function(){//设置jQuery的入口代码
	$('ul').wrap('<div>')//获取ul元素调用wrap方法给ul元素外部包裹(给ul标签添加父级)住div标签
	//wrap('节点')
})

表示获取到当前ul元素在调用warp方法在u;元素外面在包裹一个div标签(warp内部传递一个带有标签形式的字符串在用warp的参数把这个warp创建的div元素作为ul元素的父节点)

unwrap

$(document).ready(function(){//设置jQuery的入口代码
	 $('ul').wrap('<div>')//给ul元素外面添加一个div父节点
	 $('ul').unwrap()//调用unwarp函数把外面包裹(父节点)给删除掉(解除)
})

$('ul').unwrap()(那些没有通过wrap函数包裹的元素也能去掉只要是有包裹性的元素就能用unwarp函数去掉)

表示把当把ul元素用warp创建好了的div包裹住了，再用unwarp方法解包裹

$('ul').wrap(节点)：创建节点包裹住每个ul
$('ul').unwrap()：把ul的包裹去除掉

wrapAll&&wrapInner

wrapAll

$(document).ready(function(){//设置jQuery的入口代码
    $('li').wrap('<div>')//(用三个节点包裹了3个li)
	$('li').wrapAll('<div>')//(用一个节点包裹了3个li) wrapAll('节点')
})

表示获取到当前的li元素，在调用warpAll方法用一个创建好了的节点包裹值3个li

warpInner

$(document).ready(function(){//设置jQuery的入口代码
    $('li').wrapInner('<div>')
    //获取到li元素调用 warpInner方法把这个li元素的文本内容用div包裹起来 wrapInner('节点')
})

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$('li').wrapAll(节点)：创建节点包裹住所有的li
$('li').wrapInner(节点)：创建节点包裹li的文本内容

替换

HTML基本布局

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

replaceWith&&replaceAll

replaceWith

$(document).ready(function(){//设置jQuery的入口代码
    $('li').replaceWith($('<div>').text('1'))//获取到li元素，调用replaceWith方法
    //函数执行参数(标签形式的字符串)用函数执行的参数替换掉li节点  replaceWith('节点')
})

表示用创建好了的div节点替换li节点

replaceAll

$(document).ready(function(){//设置jQuery的入口代码
    $($('<div>').text('1')).replaceAll('li')//创建节点添加文本调用replaceAll方法
    //把创建好了的节点替换掉li  replaceAll('节点')
})

用创建好了的节点替换li

$('li').replaceWith($('<div>')：将所有匹配的元素替换成用replaceWith函数执行里面的节点
$('<div>').replaceAll('selector')：用匹配的元素替换掉所有 selector匹配到的元素。

删除

HTML基本布局

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

remove&&empty

remove

$(document).ready(function(){//设置jQuery的入口代码
    $('li:eq(2)').remove()、
    //获取到索引位置是2的节点调用remove函数执行删除该节点
})

empty

$(document).ready(function(){//设置jQuery的入口代码
    $('ul').empty()
    //获取到ul节点调用empty删除掉ul节点内部的所有字节点
})

$('li:eq(2)').remove()：删除索引位置是2的节点
$('ul').empty()：删除ul的所有子节点

复制

HTML基本布局

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

clone

$(document).ready(function(){//设置jQuery的入口代码
   $('li').clone();
   //表示选中到了li在调用clone方法把这个li克隆出来(克隆出来的li和被克隆的li没有任何关系)
   $('ul').append($('li').clone())
   //把克隆出来的节点用append添加到ul里面(把原先的元素的所有东西都克隆出来)
})

$('li').clone()：复制克隆选中li的元素

巧克力很苦

发布了134 篇原创文章 · 获赞 109 · 访问量 7万+

私信关注

内部插入

外部插入

包裹

替换

删除

复制

猜你喜欢