JSAP102
1、API
//案例：禁用文本框
<body>
<input type="button" value="禁用" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("txt").disabled=true;
};
</script>//案例：点击按钮修改列表颜色
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>汁烧鳗鱼</li>
<li>汁烧鳗鱼</li>
<li>汁烧鳗鱼</li>
</ul>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("uu").style.backgroundColor="pink";
}
</script>
</body>//阻止超链接默认跳转
<body>
<a href="http://www.baidu.com/" onclick="return f()">百度一下</a>
<script>
//阻止超链接的默认跳转：return false
function f() {
alert("stop!");
return false;
}
</script>
</body>
案例：点击小图切换大图
<body>
<a href="timg.jpg" id="ak"><img src="u=2124789894,3346559232&fm=11&gp=0.jpg"></a>
<img src="" id="big">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("ak").onclick=function () {
my$("big").src=this.href;
return false;
};
</script>
</body>//案例列表隔行变色
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>素烧豆腐</li>
<li>素烧豆腐</li>
<li>素烧豆腐</li>
</ul>
<script>
//点击按钮
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
//获取所有li标签
var list = my$("uu").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
if (i % 2 == 0) {
list[i].style.backgroundColor="pink";
} else {
list[i].style.backgroundColor="skyblue";
}
}
};
</script>
</body>案例：列表高亮显示
<body>
<ul>
<li>特价日料</li>
<li>特价日料</li>
<li>特价日料</li>
</ul>
<script>
function my$(id) {
return document.getElementById(id);
}
//注意是鼠标进入和鼠标离开
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
this.style.backgroundColor = "skyblue";
}
list[i].onmouseout=function () {
this.style.backgroundColor="";
}
}
</script>
</body>//鼠标浮动显示，离开不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
.show{
display: block;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="pic1">
</div>
<div>
<img src="timg.jpg" id="pic2">
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
var aObj = my$("pic1");
aObj.onmouseover=function () {
my$("pic2").className="show";
}
aObj.onmouseout=function () {
my$("pic2").className="hide";
}
</script>
</body>//根据name属性值获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"><br/>
<input type="text" value="欢迎光临" name="name1"><br/>
<input type="text" value="欢迎光临" name="name2"><br/>
<input type="text" value="欢迎光临" name="name3"><br/>
<input type="text" value="欢迎光临" name="name1"><br/>
<script>
function my$(id) {
return document.getElementById(id);
}
//点击按钮，改变所有name属性值为name1的文本框中的value属性值
my$("btn").onclick = function () {
//通过name属性获取元素:主要指表单标签
var inputs = document.getElementsByName("name1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value="吃了吗";
}
}案例：根据类样式的名字获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
div {
width: 200px;
height: 50px;
background: indianred;
margin-top: 10px;
}
.cls {
background-color: aqua;
}
</style>
</head>
<body>
<p class="cls">你好</p>
<p>你也好</p><br/>
<span>番茄</span><br/>
<span class="cls">芝士</span><br/>
<div class="cls">鸡肉</div>
<div>鱼肉</div>
<input type="button" value="显示效果" id="btn"><br/>
<script>
//点击按钮设置应用cls类样式的标签背景颜色为绿色
function my$(id) {
return document.getElementById(id);
}
//点击按钮，改变所有name属性值为name1的文本框中的value属性值
//根据类样式的名字来获取元素
my$("btn").onclick = function () {
var Objs = document.getElementsByClassName("cls");
for (var i = 0; i < Objs.length; i++) {
Objs[i].style.backgroundColor = "green";
}
}
</script>
</body>//其他的获取元素方式及总结
//根据选择器的方式获取元素
.querySelector();
括号内放选择器，即#id名
返回一个元素
.querySelectorAll()
括号内放 .类名
返回伪数组
//案例：模拟搜索框
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script>
function my$(id) {
return document.getElementById(id);
}
//获取文本框
//注册获取焦点事件
my$("txt").onfocus = function () {
//判断文本框的内容是不是默认的内容
if (this.value == "请输入搜索内容") {
this.value = "";//清空文本框
this.style.color = "black";
}
}
//注册失去焦点事件
my$("txt").onblur = function () {
if (this.value.length == 0) {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
}
</script>
</body>//案例：验证文本框密码的长度
<body>
<input type="text" value="" id="txt">
<script>
function my$(id) {
return document.getElementById(id);
}
//获取文本框
my$("txt").onblur=function () {
//判断密码长度
if(this.value.length>=6&&this.value.length<=10){
this.style.backgroundColor="green";
}else {
this.style.backgroundColor="red";
}
}
</script>
</body>获取span/p/div等标签内容使用.textContent(ie8不支持，需使用.innerText，其他浏览器也支持)
如果某属性在浏览器中不支持，那么这个属性的类型是undefined
2、封装innerText和textContent
即兼容两种方式
//设置任意标签的文本内容
function setInnerText(element,text){
//判断浏览器是否支持该属性即判断该属性的值是不是undefined
if(typeof element.textContent=="undefined"){element.innnerText=text;
}else{
//支持该属性
element.textContent=text;
}
}
//获取任意标签的文本内容
function getInerText(element){
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}3、innerText和innerHTML
1）设置
如果使用innerText主要是设置文本的，设置标签内容，是不会进行标签的解析而直接显示文本的，innerHTML可以设置文本内容，也可以解析标签，同时兼容所有浏览器，推荐使用
2）HTML
innerText在获取时可以获取标签中间的文本内容，如果标签内还有其他内容，那么也会一并被获取过来，但不会包括标签本身。innerHTML在把文本获取过来时，也会把标签获取过来。
4、自定义属性操作
1）程序员自己添加的属性
可在标签名内设置：
<li score="95">小勇的数学分数</li>但是通过id或类等方式获取该标签而形成的对象，却是不具备该自定义属性的。
通过.getAttribute(“属性名”));专门获取自定义属性值
如果要为标签设置，用setAttribute属性
.setAttribute("属性名",属性值)2）移除自定义属性
移除自定义属性，也可以移除元素自带的属性，如index：
removeAttribute(“属性名 “)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//获取最外面的div
var box = my$("box");
//获取的是里面的第一个div
var hd = box.getElementsByTagName("div")[0];
//获取的是里面第二个div
var bd = box.getElementsByTagName("div")[1];
//获取所有的li标签
var list = bd.getElementsByTagName("li");
//获取所有的span标签
var spans = hd.getElementsByTagName("span");
//循环遍历的方式，添加点击事件
for (var i = 0; i < spans.length; i++) {
//在点击之前就把索引保存在span标签中
spans[i].setAttribute("index", i);
spans[i].onclick = function () {
//第一件事：移除所有span的类样式,通过class
for (var j = 0; j < spans.length; j++) {
spans[j].removeAttribute("class");
}
//第二件事，当前被点击的span应用类样式
this.className = "current";
//span被点击时获取存储的索引值
var num = this.getAttribute("index");
//获取所有的li标签，每个先全部隐藏
for(var k=0;k<list.length;k++){
list[k].removeAttribute("class");
}
//当前被点击的标签显示
list[num].className="current";
};
}
</script>
</body>