jQuery之属性操作、class快捷操作和标签包含内容操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
//1.属性操作
function f1 () {
//获取属性值
//alert($('input:first').attr('address'));
//设置属性值(注意：一般不修改type属性)
//$('input:first').attr('value','wangfang');
//删除属性(禁止删除type属性)
//$('input:first').removeAttr('value');
//通过函数返回值对属性值进行修改
$('input:first').attr('value',function(){
return 12+432;
});
}
//2.class快捷操作
function f2 () {
//给div设置属性值
//注意：给同一属性进行多次设置修改，后者要覆盖前者
//$('div').attr('class','apple');
//给class属性追加信息值
//注意：给同一属性进行多次追加信息值时，它们同时起作用，不会产生后者覆盖前者的情况
//$('div').addClass('banana');
//删除class属性值,注意区别removeAttr()
//$('div').removeClass('banana');
//开关效果(没有就添加，有就删除)
$('div').toggleClass('banana');
}
//3.标签包含内容操作
function f3 () {
//获取内容
//alert($('div').html());//获取的内容包含标签
//alert($('div').text());//获取的内容不包含标签，只包含普通字符串
//设置内容：
//html(内容) 字符串和HTML标签都可以设置
//text(内容) 只设置字符串，HTML标签无法设置
//$('div').html('请访问<a href="http://www.baidu.com">百度</a>');
//$('div').text('<p>fgasjgfh</p>');
}
</script>
<style type="text/css">
.apple{width: 200px;height: 100px; background-color: pink;}
.pear{color: blue;}
.banana{font-size: 30px;}
</style>
</head>
<body>
<h1>属性操作</h1>
<input type="text" id="username" name="username" value="qiuzhiwen" address="beijing"/>
<input type="button" value="获取属性" onclick="f1()" />
<input type="button" value="设置属性" onclick="f1()" />
<input type="button" value="删除属性" onclick="f1()" />
<input type="button" value="函数修改属性" onclick="f1()" />
<h1>class属性快捷操作</h1>
<div>we are studying jquery</div>
<input type="button" value="设置属性" onclick="f2()" />
<input type="button" value="追加属性" onclick="f2()" />
<h1>标签包含内容操作</h1>
<div><span>we are studying jquery</span></div>
<input type="button" value="获取" onclick="f3()" />
<input type="button" value="设置" onclick="f3()" />
</body>
</html>

jQuery之属性操作、class快捷操作和标签包含内容操作

猜你喜欢