通过js如何获取下拉框内容
首先先给select标签加上id属性 获取select标签 通过select标签对象访问value属性 即 对象 名.value 不用找option标签
原理:因为下拉框最多只能展示一个 所以获取select元素节点对象操作value属性时 其实也可以看作是操作option的value属性
option如果没有声明value属性 默认value的值就是文本值
如果声明了value属性 那么value属性的值为其本身
<body>
<select id="s1">
<option value="0">-请选择-</option>
<option value="1">辽宁</option>
<option value="2">内蒙古</option>
<option value="3">吉林</option>
</select>
</body>
<script type="text/javascript">
//获取select标签
var s1 = document.getElementById("s1");
//标签内容发生变化的时候触发事件
//函数绑定事件
s1.onchange = function(){
console.log(s1.value);//此时select的值就是option的值
}
</script>
this 当前节点对象
在属性值中,如果外侧是双引号,传递参数时使用单引号
如果外侧是单引号,传递参数时使用双引号
<input type="button" onclick="run(this.value)" value="百度度" />
<input type="button" onclick="run(this.value)" value="腾讯讯" />
<input type="button" onclick="run(this.value)" value="新浪浪" />
</body>
<script>
function run(str){
alert(str);//此时弹窗为input的值
}
</script>
<textarea rows="10" cols="30" onmouseout="run2(this)"></textarea>
function run2(obj){
obj.innerHTML+= " ♥ ";
obj.style.color = "red";
}//效果为鼠标一移出文本区域或出现红色的心
什么是window对象
window对象指代的是档案浏览器窗体对象 他是js的内置对象 不用var或者let定义
我们可以在window对象上添加任何事件
//通过window对象演示onkeydown键盘按下事件
window.onkeydown= function(){//此时window对象直接用onkeydown事件编写函数
//阿斯克码值 event.keyCode
alert("啊啊啊");
}//效果为一按键盘就会弹窗
什么是event对象
event指代的是当前事件的对象 是js的内置对象 他是js的内置对象 不用var或者let定义
event对象中包含触发事件过程中的一些数据参数,比如鼠标的坐标,键盘的按键
可以通过clientX获取鼠标的横坐标,通过clientY获取鼠标的横坐标,通过keyCode获得键盘的键码值
//通过window对象演示onkeydown键盘按下事件
window.onkeydown= function(){
//阿斯克码值 event.keyCode
alert("你按着我了,按下的键码值是 "+event.keyCode)//此时表示按下键的阿斯克码
}
window.onmousemove = function(){
//打印鼠标的横纵坐标
console.log(event.clientX+","+event.clientY);//此时会获取鼠标实时坐标
}
eval自动识别内容
<body>
<input type="text" id="d1"/>
<select id="d">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="d2" />
<input type="button" onclick="f1()" value="=" />
<span id = "s1"></span>
</body>
<script type="text/javascript">
function f1(){
var d1 = document.getElementById("d1");
var d = document.getElementById("d");
var d2 = document.getElementById("d2");
var s1 = document.getElementById("s1");
//eval自动识别内容
s1.innerHTML = eval(d1.value+d.value+d2.value);
}//此时eval函数自动识别为两个数据之间的运算关系
</script>