jQuery 基础 jQuery对象的文档处理

最新推荐文章于 2019-05-27 21:05:42 发布

purple_lumpy

最新推荐文章于 2019-05-27 21:05:42 发布

阅读量361

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/purple_lumpy/article/details/79472498

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、移动或插入元素

append(content[,content,...]) 在元素内容尾部添加内容

示例：

	<script type="text/javascript">
		$(function(){
			var elements = $('li');

			elements.append('<a href="#">阅读更多...</a>')
		})
	</script>

prepend(content[,content,...]) 在元素内容头部添加内容

示例：

	<script type="text/javascript">
		$(function(){
			var elements = $('li');
			elements.prepend('前面')
			// elements.append('<a href="#">阅读更多...</a>')
		})
	</script>

before() 与 after() 则分别是元素的前面与后面插入元素，就不是元素内了。

移动，示例：

<body>

	<h2>标题</h2>
	<ul>
		<li class="item1">item-1</li>
		<li class="item2">item-2</li>
		<li class="item3">item-3</li>
		<li class="item4">item-4</li>
		<li class="item5">item-5</li>
		<li class="item6">item-6</li>
		<li class="item7">item-7</li>
		<li class="item8">item-8</li>
		<li class="item9">item-9</li>
	</ul>

	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			var elements = $('li');
			elements.prepend('前面')
			elements.append('<a href="#">阅读更多...</a>')

			var ele = $('ul');
			ele.append($('h2'));//是移动
		})
	</script>

</body>

二、包裹元素

wrap（wrapper）方法【每一个元素都进行单独包裹】

示例：

<body>
	<div class="div1"></div>
	<p>This is a paragraph.</p>


	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			var element = $('p');

			element.wrap('<div class="one"></div>')//使用html片段包裹
			element.wrap($(.div1))//复制一个 .div1,并包裹
		})
	</script>
</body>

wrapAll(wrapper) 【所有的元素都包含在一个wrapper里面】

wrapInner(wrapper) 【所有元素的内容，分别包含在各自的wrapper里面】

unwrap() 取消包裹

三、移除元素

remove([selector])【将元素删除时，元素在页面上删除了，但元素还保存在jquery对象中，但其对应事件和数据都不存在了】

示例：

	<script type="text/javascript">
		$(function(){
			var element = $('p');

			element.remove();
			// element.wrap('<div class="one"></div>')//使用html片段包裹
			// element.wrap($(.div1))//复制一个 .div1,并包裹
		})
	</script>

detach([selector]) 【与remove()方法相似，都是删除元素，但它会保留元素的事件和数据】

empty() 【元素保留，但内容清除，子节点也会被移除】

四、复制和替换元素

clone([Even[,deepEven]]) 第一个参数，是否复制该元素的事件和数据，第二个参数，是否复制其子元素的事件和数据。

示例：

<body>

	<h2>标题</h2>
	<div class="item">
		<p>This is a paragraph.</p>
	</div>
	<ul>
		<li class="item1">item-1</li>
		<li class="item2">item-2</li>
		<li class="item3">item-3</li>
		<li class="item4">item-4</li>
		<li class="item5">item-5</li>
		<li class="item6">item-6</li>
		<li class="item7">item-7</li>
		<li class="item8">item-8</li>
		<li class="item9">item-9</li>
	</ul>

	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			var element = $('ul');

			$('.item').data('item','item');
			$('p').data('p','p');

			$('.item').clone(true).appendTo(element)
			// $('.item').clone().appendTo(element)

			console.log($('ul .item').data())
			console.log($('ul p').data())
		})
	</script>
</body>

replaceWith(content)

示例：

	<script type="text/javascript">
		$(function(){
			$('h2').replaceWith('<p>hello</p>')
		})
	</script>

replaceAll(target) 是上面的反方法

五、处理表单元素值

获取设置值： val() val(value)

获取：

<body>

	<form>
		<p><input type="text" name="text"></p>
		<p>
			<input type="radio" name="radio" value="1">radio1
			<input type="radio" name="radio" value="2">radio2
		</p>
		<p>
			<input type="checkbox" name="checkbox" value="1">checkbox1
			<input type="checkbox" name="checkbox" value="2">checkbox2
		</p>
		<p>
			<select name="select" style="width: 200px">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
		</p>
		<p>
			<select name="multiSelect" multiple style="width: 200px">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
		</p>
	</form>

	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			console.log($('[name="text"]').val());
			console.log($('[name="radio"]:checked').val())
			console.log($('[name="select"] option:selected').val())
			console.log($('[name="multiSelect"]').val())

			console.log(
				$('[name="checkbox"]:checked').map(function(){
				return $(this).val();
			}).toArray()
			);
		})
	</script>
</body>