jQuery的属性与样式之.attr()与.removeAttr()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>input {width: 250px;display: block;margin: 10px;padding: 10px;background: #bbffaa;border: 1px solid #ccc;}</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.attr()与.removeAttr()</h2>
<h3>.attr</h3>
<form>
<input type="text" value="设置value" />
<input type="text" value="获取value"/>
<input type="text" value="回调拼接value" />
<input type="text" value="删除value" />
</form>
<script type="text/javascript">
//找到第一个input，通过attr设置属性value的值
$("input:first").attr('value','这是sttr设置的值')
//找到第二个input，通过attr获取属性value的值
$("input:eq(1)").attr('value')
//找到第三个input，通过使用一个函数来设置属性
//可以根据该元素上的其它属性值返回最终所需的属性值
//例如，我们可以把新的值与现有的值联系在一起：
$("input:eq(2)").attr('value',function(i, val){
return '通过function设置 - ' + val
})
//找到第四个input，通过使用removeAttr删除属性
$("input:eq(3)").removeAttr('value')
</script>
</body>
</html>
jQuery的属性与样式之html()及.text()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.html()与.text()</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div>
<h4>显示通过html方法获取到的内容</h4>
<p></p>
<h4>显示通过text方法获取到的内容</h4>
<p></p>
<script type="text/javascript">
//显示出html方法获取到的内容
//.html()是整个html文档结构
$('p:first').text( $(".first-div").html() )
//显示出text方法获取到的内容
//.text()是文本内容的合集
$('p:last').text( $(".first-div").text() )
//通过.text()方法替换文本内容
$(".left a:first").text('替换第一个a元素的内容')
//通过.html()方法替换html结构
$(".left div:first").html('整个div的子节点都被替换了')
//通过.text()的回调，获取原本的内容，修改，在重新赋值
$(".left a:first").text(function(idnex,text){
return '增加新的文本内容' + text
})
</script>
</body>
</html>
jQuery的属性与样式之.val()
jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>p{color: red;margin: 4px;}b{color: blue;}</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.val()</h3>
<select id="single">
<option>慕课网</option>
<option>博客园</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">imocc</option>
<option>慕课网</option>
<option selected="selected">博客园</option>
</select>
<input type="text" value="click a button" />
<p></p>
<script type="text/javascript">
//单个select，返回第一个
$("p").text( $("#single").val() )
//多个select被选择，返回["imocc", "博客园"]
$("p").text( $("#multiple").val() )
//选择一个表单，修改value的值
$("input[type='text']").val('修改表单的字段')
</script>
</body>
</html>