您的位置：首页 > Web前端 > JavaScript

js基础4-应用案例

2017-03-02 10:14 441 查看

1. switch

var val = txt.value;   // 点击完之后才开始查询表单信息，获取表单的值一定是点击完之后才有

<script>
//需求：点击按钮，查询input中输入的水果价格。
//步骤：
//1.获取事件源和input标签
//2.绑定事件
//3.书写事件驱动程序
//（1）.判断是什么水果。（如果没有这个水果给他一个错误提示）

//1.获取事件源和input标签
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");

//2.绑定事件
btn.onclick = function () {
var val = txt.value;   // 点击完之后才开始查询表单信息，获取表单的值一定是点击完之后才有
//3.书写事件驱动程序
//（1）.判断是什么水果。（如果没有这个水果给他一个错误提示）
switch (val){
case "苹果":
alert("今天苹果的价格是：20元/两 ！");
break;
case "香蕉":
alert("今天香蕉的价格是：40元/两 ！");
break;
case "大鸭梨":
alert("今天大鸭梨的价格是：100元/两 ！");
break;
case "猕猴桃":
alert("猕猴桃你买不起，你整个人都留下来吧！");
break;
default :
alert("去隔壁超市看看吧，我家没有！");
break;
}

}

</script>

2. 下拉菜单， onchange事件，下拉菜单直接获取索引号this.value，这种写法必须掌握，替代switch

<select name="" id="sel">
<option value="1">春意盎然</option>
<option value="2">夏日炎炎</option>
<option value="3">秋风瑟瑟</option>
<option value="4">冬雪皑皑</option>
</select>

<script>
//需求：更改select标签的值，联动更改背景。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//（1）.判断，触动事件的标签的值是多少，更改背景图
//1.获取事件源
var sel = document.getElementById("sel");
var bd = document.body;
//2.绑定事件
sel.onchange = function () {
var val = this.value;  // 点击完之后才开始查询表单信息，获取表单的值一定是点击完之后才有
//3.书写事件驱动程序
//（1）.判断，触动事件的标签的值是多少，更改背景图
switch (val){
case "1":
bd.style.backgroundImage = "url(images/chun1.jpg)";
break;
case "2":
bd.style.backgroundImage = "url(images/xia1.jpg)";
break;
case "3":
bd.style.backgroundImage = "url(images/qiu1.jpg)";
break;
case "4":
bd.style.backgroundImage = "url(images/dong1.jpg)";
}
}
</script>

另一种写法：掌握！！！

<script type="text/javascript">
window.onload = function(){
var select = document.getElementById("select");
var arr = ["url(images/chun1.jpg)","url(images/xia1.jpg)","url(images/qiu1.jpg)","url(images/dong1.jpg)"];
select.onchange = function(){
document.body.style.backgroundImage = arr[this.value];
}
/*select.onchange = function(){
var val = this.value;
switch(val){
case "1" :
alert("1");
document.body.style.backgroundImage = "url(images/chun1.jpg)";
break;
case "2" :
alert("2");
document.body.style.backgroundImage = "url(images/xia1.jpg)";
break;
case "3" :
alert("3");
document.body.style.backgroundImage = "url(images/qiu1.jpg)";
break;
case "4" :
alert("4");
document.body.style.backgroundImage = "url(images/dong1.jpg)";
break;
default:
alert("aa");
}
}*/
}
</script>
4000
;

效果：

3. 星座运势重点掌握案例 星星的制作以及下拉菜单改变

星星的制作：一个父亲span里面包含一个儿子span，儿子span背景宽度变化

<style type="text/css">
.box{
width: 350px;
height: 250px;
border: 1px solid #ccc;
}
.box .dt{
padding-left: 10px;
line-height: 35px;
font-weight: 700;
}
.box .dd{
padding: 10px;
}
.box .dd .dd-t{
overflow: hidden;
}
.box .dd .dd-t .right{
float: left;
margin-left: 10px;
}
.box .dd .dd-t .icon{
width: 50px;
height: 50px;
float: left;
background: url(images/xingzuo.png) no-repeat;
}
.box .dd .dd-t .right .yunshi{
width: 80px;
height:13px;
display: inline-block;
background: url(images/star.png) no-repeat;
position: relative;
}
.box .dd .dd-t .right .yunshi .star{
width: 64px;
height: 13px;
position: absolute;
top: 0;
left: 0;
background: url(images/star.png) no-repeat left bottom;
}
</style>

<script type="text/javascript">
window.onload = function(){
function $id(id){return document.getElementById(id)};
var arr = ["白羊座内容","水平座内容","双子座内容"];
var star =[3,7,10];
$id("select").onchange = function(){
$id("content").innerHTML = arr[this.value];
$id("star").style.width = ""+(star[this.value] * 8)+"px";
$id("icon").style.backgroundPosition = "0  "+(-50*this.value)+"px";
}
}
</script>

<body>
<div class="box">
<div class="dt">星座运势</div>
<div class="dd">
<div class="dd-t">
<div class="icon" id="icon"></div>
<div class="right" >
<select id="select">
<option value="0">白羊座1-3</option>
<option value="1">水瓶座4-6</option>
<option value="2">双子座7-9</option>
</select>
<div class="boxstar">
<span>今日运势：</span>
<span class="yunshi">
<span class="star" id="star"></span>
</span>
</div>
</div>
</div>
<div class="dd-b" id="content">
白羊座内容
</div>
</div>
</div>
</body>

4.

添加 push unshift

删除 pop shift

连接 concat

数组转字符 join

字符转数组 split

5. DOM

js 由 ECMAJavaScript DOM BOM

DOM树

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

6. 封装自己class类面试题！！！

7. 访问关系

父节点 parentNode

兄弟节点

<script type="text/javascript">
window.onload = function(){
var one = document.getElementById("one");
var div = one.nextElementSibling || one.nextSibling;  //必须先写 正常浏览器  后写  ie678
div.style.backgroundColor = "pink";
}
</script>

<body>
<ul>
<li id="one">123</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<ul>
</body>

孩子节点面试题！！

火狐、谷歌等高版本会把换行也看做是子节点

利用 nodeType == 1 时才是元素节点来获取元素节点

children 重要选取所有的孩子（只有元素节点）

ie 678 包含注释节点这个要避免开。

8. dom节点操作

创建节点 creatElement( ) 插入节点appendChild() insertBefore() 移除节点removeChild() 克隆节点cloneChild()

<script type="text/javascript">
window.onload = function(){
var demo = document.getElementById("demo");
var childrens = demo.children;
//创建节点,生成一个新的div标签
var firstdiv = document.createElement("div");

//添加节点 appendChild ，添加孩子   放到盒子的 最后面。
demo.appendChild(firstdiv);
//添加节点 insertBefore ，添加到前面
var text = document.createElement("div");
demo.insertBefore(text, childrens[0]);
// 如果第二个参数 为 null  则 默认这新生成的盒子放到最后面。
var test = document.createElement("nav");
demo.insertBefore(test,null);

//移除节点
var da = document.getElementById("xiongda");
demo.removeChild(da);

//克隆节点  括号里面可以跟参数 ， 如果 里面是 true  深层复制， 除了复制本盒子，还复制子节点  如果为 false  浅层复制   只复制   本节点  不复制 子节点。

demo.appendChild(childrens[0].cloneNode());
demo.parentNode.appendChild(demo.cloneNode(true));
}
</script>

<div id="demo">
<div id="xiongda">

</div>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航