);
案例9：点击按钮修改按钮的value属性
<input type="button" value="按钮" id="btn" />
<script>
//在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
//修改按钮的value属性
this.value = "我是按钮";
this.type = "text";
this.id = "btn2"; //id也可以修改
</script>
案例10：点击图片修改自身的宽和高
<img src="images/liuyan.jpg" alt="" id="im" />
<script>
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
this.width = "200
";
this.height = "300";
</script>
案例11：排他功能
1. 所有按钮value值设为默认值
2. 当前被点击的按钮另设置
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
btnObjs[i].onclick = function () {
//再用循环，把所有的按钮的value值设置为默认的值
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没怀孕";
//当前被点击的按钮设置
this.value = "怀孕了"; //这里不能用btnObjs[i]，注意
</script>
案例12：点击图片标签,设置图片标签的src路径为超链接中大图的路径
<a href="images/1.jpg" id="ak">
<img src="images/1-small.jpg" alt="小图" id="im">
<script>
document.getElementById("im").onclick = function () {
this.src = document.getElementById("ak").href;
</script>
案例13：点击按钮修改图片
根据id获取对象--->封装成一个函数
<input type="button" value="点击显示大图" id="btn" />
<img src="images/1-small.jpg" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
my$("btn").onclick = function () {
my$("im").src = "images/1.jpg";
</script>
案例14：点击按钮修改性别和兴趣
1. 规律:在表单标签中, 如果属性和值只有一个, 并且值是这个属性本身, 那么,
在写js代码,DOM操作的时候,这个属性值, 是布尔类型就可以了
2. CSS实现就是radio里面的checked="checked"
<input type="button" value="修改性别" id="btn1">
<input type="radio" value="1" name="sex" />男
<input type="radio" value="2" name="sex" id="rad1" />女
<input type="radio" value="3" name="sex" />保密
<script>
function my$(id) {
return document.getElementById(id);
my$("btn1").onclick = function () {
my$("rad1").checked = true;
</script>
<input type="button" value="选择兴趣"
id="btn2" />
<input type="checkbox" value="1" name="xingqu" id="ck1" />吃饭
<input type="checkbox" value="1" name="xingqu" />睡觉
<input type="checkbox" value="1" name="xingqu" />打豆豆
<input type="checkbox" value="1" name="xingqu" id="ck2" />玩手机
<script>
my$("btn2").onclick = function () {
my$("ck1").checked = true;
my$("ck2").checked = true;
</script>
案例15：点击按钮选择菜单
<input type="button" value="点菜" id="btn" />
<select name="" id="ss">
<option value="1">毛肚</option>
<option value="2">鸭血</option>
<option value="3" id="op1">鸭肠</option>
<option value="4">海带</option>
<option value="5">金针菇</option>
</select>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
my$("op1").selected = true;
</script>
附加：点击按钮修改文字框中的字
<script src="common.js"></script>
<textarea name="" id="tt" cols="30" rows="10" readonly>
某人问智者,
大师:您觉得怎么做才是最快乐的?
回答说:不要和愚者辩论
这个人说:我不这么认为!
大师说:您说的对,
我就是这么帅
</textarea>
<input type="button" value="注册" id="btn2" />
<script>
my$("btn2").onclick = function () {
my$("tt").value = "嘎嘎"; //推荐用value，看成表单标签
//my$("tt").innerText="哈哈";
案例16：点击按钮设置div的宽，高和背景颜色
css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可
<!--一个按钮 -->
<input type="button" value="设置样式" id="btn" />
<!-- 画个盒子？ -->
<div id="dv"></div>
<!-- 引入common.js 里面存储常用的js函数 -->
<script src="common.js"></script>
<!-- 另起一个script在里面写 -->
<script>
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv"
).style.backgroundColor = "hotpink"; //css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可
</script>
案例17：点击按钮显示和隐藏div
<!-- 画个按钮 -->
<input type="button" value="隐藏" id="btn" />
<!-- 画个盒子 -->
<div id="dv"></div>
<!-- 引入common.js存储常用的js函数 -->
<script src="common.js"></script>
<!-- 开始写行为 -->
<script>
my$("btn").onclick = function () {
// 点隐藏后div隐藏 按钮文字变为显示
if (this.value == "隐藏") {
my$("dv").style.display = "none";
this.value = "显示";
} else if (this.value == "显示") {
// 否则，点显示后，div显示，按钮文字变为隐藏
my$("dv").style.display = "block";
this.value = "隐藏";
</script>
案例18：点击按钮设置div的样式
1. 在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
<meta charset="UTF-8">
<title>jane自学转行</title>
<!-- <style>
.cls {
width: 300px;
height: 200px;
background-color: yellow;
border: 2px solid red;
</style> -->
<style>
.cls {
width: 300px;
height: 200px;
background-color: pink;
border: 5px solid hotpink;
</style>
</head>
<input type="button" value="设置样式" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
my$("dv").className = "cls";
</script>
案例19：点击按钮,通过类样式的方式设置div的显示和隐藏
<input type="button" value="隐藏" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
// console.log(my$("dv").className);
if (my$("dv").className != "cls") {
//现在是显示的,应该隐藏
my$("dv").className = "cls";
this.value = "显示";
} else {
//隐藏的状态----立刻显示
my$("dv").className = "";
this.value = "隐藏";
</script>
