jquery-210812-05—jquery函数02
函数介绍
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">
$(function(){
$("#btnRemoveSelectLabel").click(function(){
$("select").remove();
})
})
$(function(){
$("#btnEmptySelectSonLabel").click(function(){
$("select").empty();
})
})
$(function(){
$("#btnAppendLabel").click(function(){
$("#father").append("<input type='button' value='我是append方法新增加的按钮'/>");
})
})
$(function(){
$("#btnGetSpanTextValue").click(function(){
alert($("span").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>