阻止超链接跳转
<script>
//点击超链接弹出对话框
//阻止超链接的默认的跳转:return false
</script>
<!--第一种写法:-->
<a href="http://www.baidu.com" οnclick="alert('哎呀,我被点了'); return false">百度</a>
<br/>
<!--第二种写法-->
<script>
function f1() {
alert("哇塞,好漂亮哦");
return false;
}
</script>
<a href="http://www.baidu.com" οnclick="return f1()">百度</a>
<!--第三种写法:-->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").οnclick=function () {
alert("嘎嘎");
return false;
};
</script>
-------------------------------------------------------------------------------
鼠标进入事件 onmouseover
鼠标离开事件 onmouseout
<ul>
<li>金士百</li>
<li>雪花</li>
<li>百威</li>
<li>燕京</li>
<li>青岛</li>
<li>崂山</li>
<li>珠江</li>
<li>华丹</li>
</ul>
<script src="common.js"></script>
<script>
//鼠标进入和鼠标离开两个事件
//获取所有的li标签
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//为li注册鼠标进入事件
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//为li注册鼠标离开事件
list[i].onmouseout = function () {
//恢复到这个标签默认的颜色
this.style.backgroundColor = "";
};
}
</script>
-------------------------------------------------------------------------------------------------------
通过name属性值获取标签元素
注：基本标签比如p等没有name属性，表单标签有name属性，所以通过name获取表单标签元素
<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="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<script src="common.js"></script>
<script>
//点击按钮,改变所有name属性值为name1的文本框中的value属性值
my$("btn").οnclick=function () {
//通过name属性值获取元素-------表单的标签
var inputs=document.getElementsByName("name1");
for(var i=0;i<inputs.length;i++){
inputs[i].value="我很好";
}
};
</script>
--------------------------------------------------------------------------------------------
根据类样式值获取标签元素--------h5的
<p>这是一个p</p>
<p class="cls">这是另一个p</p>
<span class="cls">这是第一个span</span><br/>
<span>这是第二个span</span><br/>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<input type="button" value="显示效果" id="btn"/><br/>
<script src="common.js"></script>
<script>
//点击按钮设置应用cls类样式的标签的背景颜色为红色
//getElementsByClassName();------>h5的
my$("btn").onclick = function () {
//根据类样式的名字来获取元素
var objs = document.getElementsByClassName("cls");
for (var i = 0; i < objs.length; i++) {
//设置每个元素的背景颜色
objs[i].style.backgroundColor = "red";
}
};
</script>
--
-----------------------------------------------------------------------------------------
选择器获取标签元素
<input type="button" value="显示效果" id="btn"/>
<p>这是一个p</p>
<p class="cls">这是一个p</p>
<span>这是一个span</span>
<span class="cls">这是一个span</span>
<script src="common.js"></script>
<script>
//点击按钮弹出对话框
//根据选择器的方式获取元素
// var btnObj= document.querySelector("#btn");
// btnObj.οnclick=function () {
// alert("哈哈,我又变帅了");
// };
var objs=document.querySelectorAll(".cls");
for(var i=0;i<objs.length;i++){
objs[i].style.backgroundColor="green";
}
-----------------------------------------------------------------------------------------------
小结：
* 根据id属性的值获取元素,返回来的是一个元素对象
* document.getElementById("id属性的值");
*
* 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByTagName("标签名字");
*
* 下面的几个,有的浏览器不支持
*
* 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByName("name属性的值")
* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByClassName("类样式的名字")
* 根据选择器获取元素,返回来的是一个元素对象
* document.querySelector("选择器的名字");
*
* 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.querySelectorAll("选择器的名字")
--------------------------------------------------------------------------------------
获取/失去焦点事件
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="common.js"></script>
<script>
//获取文本框
//注册获取焦点的事件
my$("txt").onfocus = function () {
//判断文本框的内容是不是默认的内容
if (this.value == "请输入搜索内容") {
this.value = "";//清空文本框
this.style.color = "black";
}
};
//注册失去焦点的事件
my$("txt").onblur = function () {
// if (this.value == "") {
// this.value = "请输入搜索内容";
// this.style.color = "gray";
// }
if (this.value.length == 0) {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
------------------------------------------------------------------------------------------------------------------
重点：innerText和textContent兼容代码
<input type="button" value="设置值" id="btn"/>
<div id="dv">哦,太神奇了</div>
<script src="common.js"></script>
<script>
//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
//判断这个属性的类型 是不是undefined,就知道浏览器是否支持
//兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
}
//获取任意标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
//测试
my$("btn").οnclick=function () {
//console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"),"哈哈,我又变帅了");
};
//点击按钮设置div中的文本内容
//my$("btn").onclick = function () {
//设置标签中间的文本内容,应该使用textContent属性
//my$("dv").textContent="this is div标签";
//my$("dv").innerText = "啊,这是div";
//获取标签中间的文本内容
//console.log(my$("dv").innerText);
//console.log(my$("dv").textContent);
// };
</script>
----------
---------------------------------------------------------------------------------------------
innerText和innerHtml
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果获取" id="btn2"/>
<div id="dv">
这是div
<p>这是一个p</p>
</div>
<script src="common.js"></script>
<script>
//总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
//总结:innerHTML是可以设置文本内容
//总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
//获取的时候:
//innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
//innerHTML才是真正的获取标签中间的所有内容
my$("btn").οnclick=function () {
//my$("dv").innerText="哈哈";//设置文本
//my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码
//my$("dv").innerHTML="哈哈";
//my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的
};
//获取
my$("btn2").οnclick=function () {
//可以获取标签中的文本内容
//console.log(my$("dv").innerText);
console.log(my$("dv").innerHTML);
};
--
------------------------------------------------------------------------------------------------------------------
自定义属性
<ul id="uu">
<li score="10">助教的数学成绩</li>
<li score="20">班主任的成绩</li>
<li score="30">小苏的成绩</li>
<li score="40">小杰老师成绩</li>
<li score="50">乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>
//html标签中有没有什么自带的属性可以存储成绩的----没有
//本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据
//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值
//获取所有的li标签
var list=document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].οnclick=function () {
//alert(this.score);//不能
//可以
alert(this.getAttribute("score"));
};
}
</script>
-----------------------------------------------------------------
自定义属性的动态设置
<ul id="uu">
<li>助教的数学成绩</li>
<li>班主任的成绩</li>
<li>小苏的成绩</li>
<li>小杰老师成绩</li>
<li>乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>
//总结:设置自定义属性:setAttribute("属性的名字","属性的值");
//获取自定义属性的值:getAttribute("属性的名字")
//获取所有的li标签,然后为每个标签中动态的添加自定义属性和值
//点击的时候获取该标签的自定义属性的值
//根据id获取ul标签,并且或者该标签中所有的li
var list=my$("uu").getElementsByTagName("li");
//循环遍历
for(var i=0;i<list.length;i++){
//先为每个li添加自定义属性
//list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
list[i].setAttribute("score",(i+1)*10);
//点击每个li标签,显示对应的自定义属性值
list[i].οnclick=function(){
alert(this.getAttribute("score"));
};
}
</script>
-----------------------------------------------------------------
移除自定义属性
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10" class="cls"></div>
<script src="common.js"></script>
<script>
//移除自定义属性:removeAttribute("属性的名字")；该方法也可以移除元素自带的属性
//点击按钮移除元素的自定义属性
my$("btn").οnclick=function () {
//my$("dv").removeAttribute("score");
//移除元素的类样式
//值没有了,但是属性还是有的
//my$("dv").className="";
//也可以移除元素的自带的属性
my$("dv").removeAttribute("class");
};
</script>
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
