JS.006:WEB API总结更新中
本帖最后由 小脑斧 于 2020-5-15 17:05 编辑<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv1">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</div>
<div id="dv2">
<p>嘎嘎</p>
<p>嘎嘎</p>
<p>嘎嘎</p>
<p>嘎嘎</p>
</div>
<script>
//document.getElementsByTagName("标签的名字");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
//案例:点击按钮设置多个p标签的文字内容
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据标签名字获取标签
var pObjs= document.getElementsByTagName("p");
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//循环遍历这个数组
for(var i=0;i<pObjs.length;i++){
//每个p标签,设置文字
pObjs.innerText="我们都是p";
}
};
</script>
</body>
</html>
static/image/hrline/1.gif
<body>
<input type="button" value="修改所有文本框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判断这个元素是不是按钮
if (inputs.type != "button") {
inputs.value = "其实,,,,";
}
}
};
</script>
</body>
static/image/hrline/5.gif
案例排他功能：
<input type="button" value="咩咩咩咩咩咩"/>
<input type="button" value="咩咩咩咩咩咩"/>
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
//为每个按钮都要注册点击事件
btnObjs.onclick = function () {
//把所有的按钮的value值设置为默认的值:咩咩咩咩咩咩
for (var j = 0; j < btnObjs.length; j++) {
btnObjs.value = "没怀孕";
}
//当前被点击的按钮设置为:淡淡的
this.value = "淡淡的";
};
}
</script>
static/image/hrline/5.gif
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
//点击图片标签,设置图片标签的src路径为超链接中大图的路径
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
return false;//防止跳转
};
</script>
</body>
<input type="button" value="注册" id="btn2"/>
<script>
//disabled=====>这个属性是禁用的,
//html中属性和值是自己的,并且只有一个的,其实,可以只写这个属性,不用赋值
my$("btn2").onclick=function () {
my$("tt").value="嘎嘎";//推荐用value,因为看成了是表单的标签
//my$("tt").innerText="哈哈";
};
</script>
<script>
//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
//点击按钮,修改div的宽,高,背景颜色
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";
};
</script>
显示隐藏
<script>
<em> </em>//根据id获取按钮,注册点击事件,添加事件处理函数
my$("btn").onclick=function () {
//判断当前点击的按钮的value属性值
if(this.value=="隐藏"){
my$("dv").style.display="none";//隐藏
this.value="显示";
}else if(this.value=="显示"){
my$("dv").style.display="block";//显示
this.value="隐藏";
}
};
</script>
<p>//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
//my$("dv").className="cls";</p>//判断的是div是否应用了类样式
if (my$("dv").className != "cls") {
//现在是显示的,应该隐藏
my$("dv").className = "cls";
this.value = "显示";
} else {
//隐藏的状态----立刻显示
my$("dv").className = "";
this.value = "隐藏";
}
开关灯
my$("btn").onclick = function () {
//获取body标签
document.body.className = document.body.className != "cls" ? "cls" : "";
};
document.getElementById("uu").style.backgroundColor="yellow";
//阻止超链接的默认的跳转:return false
</script>
<!--第一种写法:-->
<a href="http://www.baidu.com" onclick="alert('哎呀,我被点了'); return false">百度</a>
<br/>
<!--第二种写法-->
<script>
function f1() {
alert("哇塞,好漂亮哦");
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1()">百度</a>
<!--第三种写法:-->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("嘎嘎");
return false;
};
</script>
<script>
//鼠标进入和鼠标离开两个事件
//获取所有的li标签
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//为li注册鼠标进入事件
list.onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//为li注册鼠标离开事件
list.onmouseout = function () {
//恢复到这个标签默认的颜色
this.style.backgroundColor = "";
};
}
</script>
二维码隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a><!--锚定-->
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
//获取鼠标要进入的a标签
//先获取最外面的div
var aObj=my$("node_small").getElementsByTagName("a");
//为a注册鼠标进入
aObj.onmouseover=function () {
my$("er").className="erweima show";
};
//为a注册鼠标离开
aObj.onmouseout=function () {
my$("er").className="erweima hide";
};
</script>
</body>
</html>
//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
//判断这个属性的类型 是不是undefined,就知道浏览器是否支持
//兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
}
//总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
//总结:innerHTML是可以设置文本内容
//总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
//获取的时候:
//innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
//innerHTML才是真正的获取标签中间的所有内容
my$("btn").onclick=function () {
//my$("dv").innerText="哈哈";//设置文本
//my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码
//my$("dv").innerHTML="哈哈";
//my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的
};
自定义属性;
//总结:设置自定义属性:setAttribute("属性的名字","属性的值");
//获取自定义属性的值:getAttribute("属性的名字")
//获取所有的li标签,然后为每个标签中动态的添加自定义属性和值
//点击的时候获取该标签的自定义属性的值
//根据id获取ul标签,并且或者该标签中所有的li
var list=my$("uu").getElementsByTagName("li");
//循环遍历
for(var i=0;i<list.length;i++){
//先为每个li添加自定义属性
//list.score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
list.setAttribute("score",(i+1)*10);
//点击每个li标签,显示对应的自定义属性值
list.onclick=function(){
alert(this.getAttribute("score"));
};
}
//点击按钮移除元素的自定义属性
my$("btn").onclick=function () {
//my$("dv").removeAttribute("score");
//移除元素的类样式
//值没有了,但是属性还是有的
//my$("dv").className="";
//也可以移除元素的自带的属性
my$("dv").removeAttribute("class");
};
</script>
更新中。。。
{:10_275:}
https://cdn.jsdelivr.net/gh/hishis/forum-master/public/images/patch.gif {:10_275:}
页:
[1]