一、点击按钮修改性别
<input type="button" id="btn" value="修改性别">
<input type="radio" name="sex">男
<input type="radio" name="sex" id="radio1" checked>女
<input type="radio" name="sex">保密
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
document.getElementById("radio1").checked=true;//表示被选中
}
//false:0 "" NaN undefined null
</script>
<input type="button" value="选择爱好" id="btn">
<input type="checkbox" bame="like" id="cg">唱歌
<input type="checkbox" bame="like" id="dd">打豆豆
<input type="checkbox" bame="like" id="ball">打球
<input type="checkbox" bame="like" id="dance">跳舞
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
document.getElementById("cg").checked=true;
document.getElementById("dd").checked=true;
document.getElementById("ball").checked=true;
document.getElementById("dance").checked=true;
}
</script>
二、点击按钮设置样式
<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
document.getElementById("dv").style.width="300px";
document.getElementById("dv").style.height="300px";
document.getElementById("dv").style.backgroundColor="pink";
/* dv.style.width="300px";
dv.style.height="300px";
dv.style.backgroundColor="pink"; */
}
</script>
三、点击按钮选择下拉菜单
<input type="button" value="选择菜单" id="btn">
<select name="city" id="">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" id="gz">广州</option>
<option value="深圳">深圳</option>
</select>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var gz=document.getElementById("gz");
gz.selected=true;
}
</script>
四、一个按钮实现显示和隐藏
<style>
width: 300px;
height: 200px;
background: hotpink;
}
</style>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
if(this.value=="隐藏"){
document.getElementById("dv").style.display="none";
this.value="显示";
}else if(this.value=="显示"){
document.getElementById("dv").style.display="block";
this.value="隐藏";
}
}
</script>
五、优化设置样式的案例
<style>
.cls{
width: 300px;
height: 200px;
background: hotpink;
}
</style>
<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
//在js中操作DOM元素时,设置类样式用className
document.getElementById("dv").className="cls";
}
// 注意:.className = "cls" cls前面不要加点
</script>
六、隐藏显示的扩展
<style>
div{
width: 300px;
height: 200px;
background: pink;
}
.cls{
display: none;/*这个类是隐藏的意思*/
}
</style>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
if(document.getElementById("dv").className != "cls"){
//if条件的括号里表示这个类不存在
document.getElementById("dv").className = "cls";
this.value = "显示";
}else{
document.getElementById("dv").className = "";
this.value = "隐藏";
}
}
</script>
七、网页开关灯
<style>
.cls{
background: black;
}
</style>
<input type="button" value="开/关灯" id="btn">
<script>
//获取body标签 document.body 就能拿到body标签
var btn=document.getElementById("btn");
btn.onclick=function(){
//获取body标签 document.body
document.body.className=document.body.className != "cls"?"cls":"";
//三元运算符
}
</script>
八、点击按钮禁用文本框
<input type="button" value="禁用文本框" id="btn">
<input type="text" value="点击来修改我啊" id="txt">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
document.getElementById("txt").disabled=true;
}
</script>
九、点击按钮修改列表背景颜色
<input type="button" value="改变背景颜色" id="btn">
<ul id="uu">
<li>詹姆斯</li>
<li>科比</li>
<li>安东尼</li>
<li>库里</li>
<li>霍华德</li>
</ul>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
document.getElementById("uu").style.backgroundColor="hotpink";
}
</script>
十、阻止a链接跳转
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
var ak=document.getElementById("ak");
ak.onclick=function(){
alert("已阻止跳转");
return false;
}
</script>
十一、点击小图变大图
<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg"></a>
<img src="" alt="" id="big">
<script>
var ak=document.getElementById("ak");
ak.onclick=function(){
document.getElementById("big").src=this.href;
return false;
}
</script>
十二、美女相册模板
<style>
body {
font-family: "Helvetica", "Arial", serif;
color:
background-color:
margin: 1em 10%;
}
h1 {
color:
background-color: transparent;
}
a {
color:
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
list-style: none;
}
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
border: 0;
}
</style>
<h2>
美女画廊
</h2>
<ul id="imagegallery">
<li><a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100" alt="美女1"/>
</a></li>
<li><a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100" alt="美女2"/>
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100" alt="美女3"/>
</a></li>
<li><a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100" alt="美女4"/>
</a></li>
</ul>
<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script>
// 从ul标签中获取所有的a标签
var aObjs = document.getElementById("imagegallery").getElementsByTagName("a");//集合--伪数组
//循环遍历
for(var i = 0; i < aObjs.length; i++){
// 为每个a链接添加点击事件
aObjs[i].onclick = function(){
// alert("123")要学会测试代码
// 获取id为image的标签src 赋值 this.href
document.getElementById("image").src = this.href;
// 获取 id 为des的修改文字 innerText
document.getElementById("des").innerText = this.title;
return false;
}
}
</script>