Android 程序员搞 web 之 js基础（十 一） 难点
一、基础
1、js 分三部分
（1）、ECMAScript 标准：JS 的基本语法；
（2）、DOM:Document Object Model ：文档对象模型 ，操作页面的元素；
（3）、BOM：Browser Object Model ：浏览器对象模型 ，操作的是浏览器。
二、DOM 操作
点击 按钮显示 弹框
<body>
<input type="button" id="btn" value="findViewById">
<script>
document.getElementById("btn").onclick = function () {
alert("成功找到对象！")
}
</script>
</body>
成功调出弹窗
三、标签的一些属性设置
1、点击事件
<body>
<input type="button" id="btn" value="确定">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("点击事件")
}
</script>
2、修改 p 标签内部的文字
<body>
<input type="button" id="btn" value="确定">
<p id="p1"></p>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
var p1 = document.getElementById("p1");
p1.innerText = "这是一个p标签";
}
</script>
</body>
双标签 设置文字是使用 innerText 属性；
3、批量修改某个 标签内容
<body>
<input type="button" id="btn" value="确定">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
var ps = document.getElementsByTagName("p");
for (var i = 0; i < ps.length; i++) {
ps[i].innerText = "修改成功";
}
}
</script>
</body>
ps 返回的数据 为数组。
4、单选框使用
<body>
<input type="button" id="btn" value="切换性别">
<input type="radio" value="1" name="sex1" id="rad1">男
<input type="radio" value="2" name="sex2">女
<input type="radio" value="3" name="sex3">保密
<script>
function my$(a) {
return document.getElementById(a);
}
my$("btn").onclick = function () {
my$("rad1").checked = true;
}
</script>
</body>
效果
5、下拉框选择效果
<body>
<input type="button" id="btn" value="选择">
<select id="sl1">
<option value="1" id="op1">晴天</option>
<option value="2" id="op2">阴天</option>
<option value="3" id="op3">刮风</option>
<option value="4" id="op4">雾霾</option>
<script src="JsDemoOne.js"></script>
</select>
<script>
getView$("btn").onclick = function () {
getView$("op2").selected = true;
}
</script>
</body>
/**
*获取控件id
* @param id 控件地址
* @returns {HTMLElement} 控件对象
*/
function getView$(id) {
return document.getElementById(id);
}
6、修改 div 的属性
<body>
<input type="button" id="btn1" value="修改样式">
<input type="button" id="btn2" value="隐藏">
<div id="div" style="width: 300px ; height: 300px ;background-color: red "></div>
<script src="JsDemoOne.js"></script>
<script>
getView$("btn1").onclick = function () {
getView$("div").style.width = "400px";
getView$("div").style.height = "900px";
getView$("div").style.backgroundColor = "blue";
};
getView$("btn2").onclick = function () {
if (this.value === "隐藏") {
getView$("div").style.display = "none";
this.value = "显示";
} else {
getView$("div").style.display = "block";
this.value = "隐藏";
}
}
</script>
</body>
div 一定需要用 .style 属性进行 寻找下一级的属性
7、实现网页的开关的效果
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls{
background-color: black;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="关灯">
<script src="JsDemoOne.js"></script>
<script>
getView$("btn1").onclick = function () {
if (document.body.className === "cls") {
document.body.className = "";
getView$("btn1").value="关灯"
}else {
getView$("btn1").value="开灯";
document.body.className = "cls";
}
}
</script>
</body>
8、修改表格的背景颜色
<body>
<input type="button" id="btn" value="调色">
<ul id="uu" style="background-color: #deff72">
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<li>白龙马</li>
</ul>
<script src="JsDemoOne.js"></script>
<script>
getView$("btn").onclick=function(){
getView$("uu").style.backgroundColor = "red"
}
</script>
</body>
9、阻止超链接跳转
<body>
<a href="http://wwww.baidu.com" id="aa">百度</a>
<script>
document.getElementById("aa").onclick = function () {
return true;
}
</script>
</body>
10、表格划过高亮显示
<body>
<ol>
<li>貂蝉</li>
<li>西施</li>
<li>杨玉环</li>
<li>王昭君</li>
</ol>
<script src="JsDemoOne.js"></script>
<script>
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
list[i].onmouseout = function () {
this.style.backgroundColor = "red";
}
}
</script>
</body>
11、根据 name 值获取标签
<body>
<input type="button" id="btn" value="变身">
<input type="text" value="韩小呆" name="name1">
<input type="text" value="韩小呆" name="name2">
<input type="text" value="韩小呆" name="name1">
<input type="text" value="韩小呆" name="name3">
<input type="text" value="韩小呆" name="name1">
<input type="text" value="韩小呆" name="name4">
<input type="text" value="韩小呆" name="name1">
<script src="JsDemoOne.js"></script>
<script>
getView$("btn").onclick = function () {
var list = document.getElementsByName("name1");
for (var i = 0; i < list.length; i++) {
list[i].value = "曹晓萌";
}
}
</script>
</body>
通过 name 获取的标签 也是一个集合。
12、焦点事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input {
color: grey;
}
</style>
</head>
<body>
<input type="text" value="韩小呆" id="text">
<script src="JsDemoOne.js"></script>
<script>
var text = getView$("text");
text.onfocus = function () {
if (this.value === "韩小呆") {
this.value = "";
}
};
text.onblur = function () {
if (this.value === "") {
this.value = "韩小呆";
}
}
</script>
</body>
onfocus 和 onblur 事件
13、获取自定义属性
<body>
<ul>
<li cost="2699">小米9</li>
<li cost="3499">小米9 pro</li>
<li cost="1999">小米9 se</li>
<li cost="2499">小米9 cc9</li>
</ul>
<script src="JsDemoOne.js"></script>
<script>
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
alert(this.getAttribute("cost"));
}
}
</script>
</body>
使用 getAttribute("cost") 方法 ,内部填写 为自定义属性值
14、动态设置自定义属性
<body>
<ul>
<li>小米9</li>
<li>小米9 pro</li>
<li>小米9 se</li>
<li>小米9 cc9</li>
</ul>
<script src="JsDemoOne.js"></script>
<script>
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//动态设置自定义标签
list[i].setAttribute("name", list[i].innerText);
list[i].onclick = function () {
alert(this.getAttribute("name"));
}
}
</script>
</body>
15、移除自定义属性 和 系统属性
list[i].removeAttribute("name");
移除 的 属性名
Android 程序员搞 web 之 webApi （十 三）
欢迎关注.jpg
