jquery-210812-05---jquery函数02

最新推荐文章于 2022-10-31 19:06:39 发布

原创最新推荐文章于 2022-10-31 19:06:39 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#jquery

jquery 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了jQuery中的一些基础操作，包括使用.hide()隐藏元素，.show()显示元素，.remove()删除元素及其子对象，.empty()清空元素的子对象，.append()向元素添加子对象，以及.html()方法来获取或设置元素的HTML内容。通过示例代码展示了这些函数的用法。

函数介绍

1. hide
	$(选择器).hide() :将数组中所有 DOM对象隐藏起来
	
2. show
	$(选择器).show():将数组中所有 DOM对象在浏览器中显示起来
	
3. remove
	$(选择器).remove() : 将数组中所有 DOM对象及其子对象一并删除
	
4. empty
	$(选择器).empty()：将数组中所有 DOM对象的子对象删除
	
5. append
	为数组中所有 DOM对象添加子对象
	$(选择器).append("<div>我动态添加的 div</div>")
	
6. html
	设置或返回被选元素的内容（innerHTML）。
	$(选择器).html()：无参数调用方法，获取 DOM数组第一个匹元素的内容。
	$(选择器).html(值)：有参数调用，用于设置 DOM数组中所有元素的内容。

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery函数02</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			
			// remove
			$(function(){
				$("#btnRemoveSelectLabel").click(function(){
					$("select").remove();
				})
			})
			
			// empty
			$(function(){
				$("#btnEmptySelectSonLabel").click(function(){
					$("select").empty();
				})
			})
			
			// append
			$(function(){
				$("#btnAppendLabel").click(function(){
					$("#father").append("<input type='button' value='我是append方法新增加的按钮'/>");
				})
			})

			// html，，无参
			$(function(){
				$("#btnGetSpanTextValue").click(function(){
					alert($("span").html());		// 输出：span01<b>span01</b>
					// alert($("span").text());		// 输出：span01span01span02
				})
			})
			
			// html，，有参
			$(function(){
				$("#btnSetSpanTextValue").click(function(){
					$("span").html("<b>span</b>");
				})
			})
		</script>
	</head>
	<body>
		<select>
			<option value="华为">华为</option>
			<option value="小米">小米</option>
			<option value="荣耀">荣耀</option>
		</select>
		<br/>
		<br/>
		<select>
			<option value="联想">联想</option>
			<option value="戴尔">戴尔</option>
			<option value="华硕">华硕</option>
		</select>
		<br/>
		<br/>
		<div id="father">div_father</div>
		<br/>
		<br/>
		<span>span01<b>span01</b></span>
		<br/>
		<br/>
		<span>span02</span>
		<br/>
		<br/>
		<br/>
		<input type="button" id="btnRemoveSelectLabel" value="使用remove删除下拉列表" />
		<br/>
		<input type="button" id="btnEmptySelectSonLabel" value="使用empty删除下拉列表子对象" />
		<br/>
		<input type="button" id="btnAppendLabel" value="使用append增加子对象" />
		<br/>
		<input type="button" id="btnGetSpanTextValue" value="获取第一个span标签的文本值" />
		<br/>
		<input type="button" id="btnSetSpanTextValue" value="设置所有span标签的文本值" />
	</body>
</html>