jQuery之属性操作、class快捷操作和标签包含内容操作
来源:互联网 发布:windows模拟器安卓版 编辑:程序博客网 时间:2024/06/04 20:33
<!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>
<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>
阅读全文
1 0
- jQuery之属性操作、class快捷操作和标签包含内容操作
- jQuery属性操作和快捷操作
- 【jQuery】属性操作和内容操作
- jQuery属性的快捷操作
- jquery 操作 class 属性
- class属性标签操作记录
- jQuery操作属性和内容体
- jQuery之属性操作
- jQuery 之 (一)选择器、快捷操作
- jQuery基础教程之DOM操作-属性操作
- jQuery之dom操作(属性、样式操作)
- jQuery DOM操作之属性操作
- jQuery对标签属性的操作
- jquery和js操作属性
- jQuery之css样式操作、value属性值操作和复选框操作
- javascript操作class属性
- 快捷操作
- 快捷操作
- 解决VS2013调试ASP.NET中无法调试的问题:当前不会命中断点。在 XXXX.dll 中找到了 XXX.cs 的副本,但是当前源代码与 XXXX.dll 中内置的版本不同。
- 2017.8.2暑假集训第三天
- android studio gradle 离线包 gradle-x.x-all.zip 离线配置
- java操作hbase常用方法总结
- 带指针成员类、析构函数出错、复制/赋值构造函数的注意事项
- jQuery之属性操作、class快捷操作和标签包含内容操作
- nyoj55 懒省事的小明
- 454. 4Sum II(Java)
- Win10系统以管理员身份运行运行框的方法
- linux中的进程查看与管理
- DevOps2-在Jenkins容器中访问Gitlab容器需要特别注意的地方
- 上传项目到github
- 杭电acm—1376 Octal Fractions
- XYNUOJ 问题 E: 魔法扫帚